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.3K
Text Rotate
2.1K
Typewriter
1.9K
Marquee Along SVG Path
1.4K
Image Trail
1.4K
Animated Gradient With SVG
887
Text Cursor Proximity
785
Pixel Trail
644
More in Text
View all
Vertical Cut Reveal Characters
110
Motion Blur Text
38
Apple Hello Effect
617
NeonRGBTextEffect
145
Text Reveal
28
Text Highlight
70
Typography
6
Vapour Text Effect
2K
