Docs
→Text
→Breathing Text
Breathing Text
A text component that animates the font variation settings of letters in a breathing effect continuously. Works only with variable fonts.
overused grotesk
Installation
1pnpm dlx shadcn@latest add "https://fancycomponents.dev/r/breathing-text.json"
Understanding 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.
Notes
Since the animation is continous, keep the performance in check when using this component.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | React.ReactNode | - | The content to be displayed and animated |
| as | ElementType | "span" | HTML Tag to render the component as |
| fromFontVariationSettings* | string | - | Initial font variation settings |
| toFontVariationSettings* | string | - | Target font variation settings to animate to |
| transition | Transition | { duration: 1.5, ease: "easeInOut" } | Animation transition configuration |
| staggerDuration | number | 0.1 | Duration of stagger delay between elements in seconds |
| staggerFrom | "first" | "last" | "center" | number | "first" | Direction to stagger animations from |
| repeatDelay | number | 0.1 | Delay between animation repeats in seconds |
| className | string | - | Class name for styling |