Docs
→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.
Breathe!
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.
Source code
Copy and paste the following code into your project:
Notes
Since the animation is continous, keep the performance in check when using this component.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label* | string | - | The text to be displayed and animated |
| fromFontVariationSettings* | string | - | Initial font variation settings |
| toFontVariationSettings* | string | - | Target font variation settings on hover |
| className | string | - | Additional CSS classes for styling |
| transition | DynamicAnimationOptions | { type: "spring", duration: 0.7 } | Transition settings for the animation. Refer to framer-motion docs for more details |
| staggerDuration | number | 0.03 | Delay between each letter's animation start |
| staggerFrom | "first" | "last" | "center" | number | "first" | Starting point of the stagger effect. Number is the index of the letter where the stagger animation starts |
| onClick | () => void | - | Callback function for click events |