Svelte Animations
Command Palette
Search for a command to run

Blur Reveal

Animated text reveal with blur effect.

You can just ship things.

Installation

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

Examples

Speed

SLOW (0.5)

You can just ship things.

NORMAL (1.5)

You can just ship things.

FAST (2)

You can just ship things.

Props

NameTypeDefaultDescription
children
Snippet required Plain text snippet content flattened into grapheme-safe characters before animation.
as
"span" | "div" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" "p" Sets the semantic tag used for the animated root element.
delay
number 0 Adds a delay in seconds before the reveal sequence begins.
speedReveal
number 1.5 Higher values tighten the stagger delay between animated characters.
speedSegment
number 0.5 Higher values shorten the per-character reveal duration.
stagger
number undefined Optional direct override for the computed character stagger timing.
duration
number undefined Optional direct override for the computed per-character reveal duration.
trigger
boolean true Enables or disables the visible reveal 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.
letterSpacing
string | number undefined Applies extra spacing between animated characters.
onStart
() => void Called when a new reveal cycle begins.
onComplete
() => void Called after the final animated unit completes the visible transition.
class
string '' Custom classes applied to the animated root element.
style
string '' Inline styles forwarded to the animated root element.