Svelte Animations
Command Palette
Search for a command to run

Words Stagger

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

motion-sv
Spell UI is an open source collection of elegant, user friendly components that seamlessly integrate with frameworks and AI models.

Installation

pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/s/words-stagger.json

Examples

Speed

SLOW (1)

You can just ship things.

NORMAL (0.5)

You can just ship things.

FAST (0.3)

You can just ship things.

Stagger

SMALL STAGGER (0.05s)

You can just ship things.

NORMAL STAGGER (0.1s)

You can just ship things.

LARGE STAGGER (0.2s)

You can just ship things.

Props

NameTypeDefaultDescription
children
Snippet required Plain text snippet content that is flattened and split into animated words.
as
"span" | "div" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" "div" Sets the semantic tag used for the animated root element.
delay
number 0 Adds a delay in seconds before the first word starts animating.
stagger
number 0.1 Controls the delay between each animated word in seconds.
speed
number 0.5 Sets the per-word tween duration in seconds.
trigger
boolean true Enables or disables the visible animated state.
triggerOnView
boolean false Waits to animate until the component enters the viewport.
once
boolean true When using triggerOnView, controls whether the reveal runs only on first entry.
onStart
() => void Called once when a new visible stagger cycle begins.
onComplete
() => void Called after the final word completes the visible transition.
class
string Custom classes applied to the animated root element.
style
string Inline styles forwarded to the animated root element.