Breathing Text

Variable font breathing animation with staggered letter-by-letter weight transitions

text animation variable-font breathing stagger

import BreathingText from "@/components/vritti/breathing-text"

export function BreathingTextExample() {
  return (
    <div className="flex items-center justify-center p-8">
      <BreathingText
        className="text-4xl font-bold"
        fromFontVariationSettings="'wght' 100"
        toFontVariationSettings="'wght' 900"
        staggerDuration={0.1}
        staggerFrom="center"
      >
        Breathing Text
      </BreathingText>
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/breathing-text"

Dependencies


pnpm add motion

Props

Breathing Text

Prop	Type	Default	Description
`children`	`React.ReactNode`	`-`	Text content to animate
`as`	`ElementType`	`"span"`	HTML element type to render as
`fromFontVariationSettings`	`string`	`-`	Starting font variation settings value
`toFontVariationSettings`	`string`	`-`	Ending font variation settings value
`transition`	`Transition`	`{ duration: 1.5, ease: "easeInOut" }`	Motion transition configuration for the animation
`staggerDuration`	`number`	`0.1`	Delay between each letter's animation start in seconds
`staggerFrom`	`"first" \| "last" \| "center" \| number`	`"first"`	Direction from which the stagger effect originates
`repeatDelay`	`number`	`0.1`	Delay between animation repetitions in seconds
`className`	`string`	`-`	Additional CSS classes