Components
Loading preview...
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.
@danielpetho
npx shadcn@latest add https://21st.dev/r/danielpetho/breathing-textimport { 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 }