A text component that reveals the text with a scrambled part in front.
motion-sv
1. One More Time (featuring Romanthony) - 5:20 2. Aerodynamic - 3:27 3. Digital Love - 4:58 4. Harder, Better, Faster, Stronger - 3:45 5. Crescendolls - 3:31 6. Nightvision - 1:44 7. Superheroes - 3:57 8. High Life - 3:22 9. Something About Us - 3:51 10. Voyager - 3:47 11. Veridis Quo - 5:44 12. Short Circuit - 3:26 13. Face to Face (featuring Todd Edwards) - 3:58 14. Too Long (featuring Romanthony) - 10:00
Installation
pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/f/scramble-in.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:
scramble-in.svelte
index.ts
Folder Structure
Folder Structure
Visit Original Docs
For more deeper understaing visit fancy components documentation.
Examples
Programmatic Controls
Ready to animate
Delay And Speed
0ms delay / 16ms speed
Immediate and sharp for hero headlines300ms delay / 28ms speed
Balanced pacing for supporting copy700ms delay / 42ms speed
Slower reveal for deliberate calloutsSpecial Characters
Wake up, Neo... The Matrix has you... Follow the White Rabbit, Neo.