Vertical Cut Reveal

Reveal text from vertical cuts with word, character, or line-based staggering.

motion-sv

Installation

pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/f/vertical-cut-reveal.json

Visit Original Docs

For more deeper understaing visit fancy components documentation.

Scroll down champ ↓

Prop	Type	Default	Description
`children`	`Snippet`	`undefined`	Snippet content observed and split into animated units.
`reverse`	`boolean`	`false`	Reverses the reveal direction so units enter from above instead of below.
`transition`	`AnimationOptions`	`{ type: "spring", stiffness: 190, damping: 22 }`	Motion options used for each revealed unit.
`splitBy`	`"words" \| "characters" \| "lines" \| string`	`"words"`	Controls whether the text is split by words, characters, lines, or a custom delimiter.
`staggerDuration`	`number`	`0.2`	Delay in seconds between animated units.
`staggerFrom`	`"first" \| "last" \| "center" \| "random" \| number`	`"first"`	Starting point used when calculating stagger delays.
`containerClass`	`string`	`undefined`	Classes applied to the outer flex container.
`wordLevelClass`	`string`	`undefined`	Classes applied to each overflow-hidden group wrapper.
`elementLevelClass`	`string`	`undefined`	Classes applied to each individual animated unit wrapper.
`onStart`	`() => void`	`undefined`	Called when the reveal animation begins.
`onComplete`	`() => void`	`undefined`	Called after the final visible unit finishes animating.
`autoStart`	`boolean`	`true`	Starts the reveal automatically instead of waiting for `startAnimation()`.
`class`	`string`	`undefined`	Additional classes merged onto the outer container.