About
A text component that animates the font variation settings of letters in a breathing effect continuously. Works only with variable fonts. This component is designed to work exclusively with variable fonts. Please refer to the Variable Font Hover By Letter documentation for more details.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Breathing Text to your project and fits it to your theme.
Code
How Breathing Text is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { BreathingText } from "@/components/ui/breathing-text"
function Preview() {
return (
<div className="w-full h-full min-h-[500px] text-5xl sm:text-7xl md:text-9xl flex flex-row gap-12 items-center justify-center font-overusedGrotesk bg-[#1f464d]">
<div className="flex flex-col items-center justify-center text-white">
<BreathingText
label="Breathe!"
staggerDuration={0.1}
fromFontVariationSettings="'wght' 100, 'slnt' 0"
toFontVariationSettings="'wght' 800, 'slnt' -10"
/>
</div>
</div>
)
}
export { Preview }
Dependencies
More by Daniel Petho
View all
Parallax Floating
2.2K
Text Rotate
2.1K
Typewriter
1.9K
Marquee Along SVG Path
1.4K
Image Trail
1.4K
Animated Gradient With SVG
884
Text Cursor Proximity
781
Pixel Trail
645
More in Text
View all
Vertical Cut Reveal Characters
103
Rainbow Text Effect
47
Motion Blur Text
36
Text Loop
310
Text Reveal
27
Apple Hello Effect
610
Typography
4
Animated Text
8
