Overview
Components
Text Animations
Special Text
Animated text with scramble effect.
motion-sv
SVELTE SPELL UI
Installation
pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/s/special-text.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:
special-text.svelte
index.ts
Folder Structure
Folder Structure
Examples
Speed
FAST: FAST ANIMATION
NORMAL: NORMAL SPEED
SLOW: SLOW MOTION
Props
| Name | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | undefined | Optional slotted text content used when the text prop is not provided. |
text | string | undefined | undefined | Optional plain text source for the scramble reveal. Provide either text or children. |
speed | number | 20 | Controls the scramble update cadence in milliseconds for each animation step. |
delay | number | 0 | Adds a delay in seconds before the scramble sequence begins. |
triggerOnView | boolean | false | Waits to animate until the component enters the viewport. |
once | boolean | true | When using inView, controls whether the reveal runs only on first entry. |
class | string | | Custom classes applied to the animated root span. |