Components
Breathing Text
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.
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
Tags
Source
Published
Similar components
Explore more
Part of Fancy Components — browse the full library on 21st.dev.