Svelte Animations
Command Palette
Search for a command to run

Randomized Text

A text reveal with stable, randomized per-token delays for spell-style headlines, labels, and editorial callouts.

motion-sv
Introducing Spell UI Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quae doloremque alias aliquam neque eligendi? Vel dolore quibusdam corrupti corporis sapiente. Eveniet facilis, error voluptatem alias fugiat est fuga? Commodi, officia?

Installation

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

Examples

Split by

BY CHARACTERS Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis debitis ipsam saepe incidunt laboriosam eaque quasi commodi beatae excepturi quos!
BY WORDS WITH DELAY (0.5s) Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis debitis ipsam saepe incidunt laboriosam eaque quasi commodi beatae excepturi quos!

Props

NameTypeDefaultDescription
children
Snippet required Plain text snippet content used to build the animated token list.
as
"span" | "div" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" "span" Sets the semantic tag used for the animated root element.
split
"words" | "chars" "words" Controls whether the reveal animates full words or grapheme-safe characters.
delay
number 0.2 Adds a base delay in seconds before token-specific jitter is applied.
duration
number 1.2 Sets the opacity reveal duration for each animated token 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.
class
string Custom classes applied to the animated root element.
style
string Inline styles forwarded to the animated root element.