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.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | required | Source text progressively revealed from left to right. |
scrambleDelay | number | 0 | Delay in milliseconds before the scramble reveal starts. |
scrambleSpeed | number | 50 | Interval in milliseconds between reveal updates. |
scrambledLetterCount | number | 2 | Maximum number of trailing scrambled characters shown during the reveal. |
characters | string | "abcdefghijklmnopqrstuvwxyz!@#$%^&*()_+" | Character pool used to build the temporary scrambled suffix. |
scrambledClass | string | undefined | Classes applied to the still-scrambled trailing portion of the text. |
class | string | undefined | Classes applied to the revealed portion of the text. |
autoStart | boolean | true | Starts the reveal automatically when the component mounts. |
onStart | () => void | undefined | Called when a reveal cycle begins after any configured delay. |
onComplete | () => void | undefined | Called after the full text has been completely revealed. |