Stepwise UI

Fade Text

Fades text in and out, word by word or character by character. Each chunk rises in with a blur and leaves on a softer, smaller exit. Toggle show to play it either way.

Installation

npx stepwise-ui add fade-text
Shipdelightfulinterfacesfaster
import { FadeText } from '@/components/stepwise/fade-text'

// Fades in word by word on mount (blurred rise, staggered)
<FadeText>Ship delightful interfaces faster</FadeText>

// Toggle `show` to fade out - the exit is softer than the enter
<FadeText show={visible} by="char">
  Character by character
</FadeText>

Props

PropTypeDescription
children
string
Text to animate.
by
"word" | "char"
Split granularity. Default "word".
show
boolean
Fade in (true) or out (false). Default true.
stagger
number
Per-chunk stagger in seconds. Default 0.05.
className
string
Extra classes (font size / weight).