Reveal text from vertical cuts with word, character, or line-based staggering.
motion-sv
HI 👋, FRIEND! 🌤️ IT IS NICE ⇗ TO MEET 😊 YOU.
Installation
pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/f/vertical-cut-reveal.json
Install dependencies
Install the required packages for this component:
pnpm add motion-sv
Copy the Source Code
Copy and paste the following code into your project:
vertical-cut-reveal.svelte
index.ts
Folder Structure
Folder Structure
Visit Original Docs
For more deeper understaing visit fancy components documentation.
Examples
Split By Characters And Lines
→ We're on a mission
to make the 🌐 web
super fun again! ☺
Split By Words
super cool & awesome example text
Stagger From Variants
THIS STAGGERS FROM FIRST THIS STAGGERS FROM LAST THIS STAGGERS FROM CENTER THIS ONE FROM THE 5TH CHARACTER
Random Letter Reveal
“When a small, unassuming object exceeds our expectations, we are not only surprised but
pleased. Our usual reaction is something like, "That little thing did all that?" Simplicity
is about the unexpected pleasure derived from what is likely to be insignificant and would
otherwise go unnoticed. The smaller the object, the more forgiving we can be when it
misbehaves.” ― John Maeda,
Scroll Trigger
Scroll down champ ↓
howdy! 👋