GitHub
Open Github

Words Stagger

Word-by-word text animation with blur, transform, and opacity effects.

Installation

pnpm dlx shadcn@latest add @spell/words-stagger

Examples

Speed

Stagger

Usage

import { WordsStagger } from "@/components/words-stagger";
<WordsStagger className="text-3xl font-semibold tracking-tight">
  Your complete platform for the Design.
</WordsStagger>

Props

PropTypeDefault
children
React.ReactNode
-
delay
number
0
stagger
number
0.1
speed
number
0.5
autoStart
boolean
true
className
string
-
onStart
() => void
-
onComplete
() => void
-
inView
boolean
false