A text component that randomly swaps the letters vertically on hover.
motion-sv
Random Letter Swap R Ra an nd do om m L Le et tt te er r S Sw wa ap p Bottom To Top Animation B Bo ot tt to om m T To o T To op p A An ni im ma at ti io on n Ping Pong Animation P Pi in ng g P Po on ng g A An ni im ma at ti io on n Comes From The Bottom C Co om me es s F Fr ro om m T Th he e B Bo ot tt to om m
There are two types of animations available for this component:
- Forward animation — plays the animation timeline once forward
- Ping Pong animation — plays the animation timeline in a ping pong fashion.
Installation
Forward Animation
pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/f/random-letter-swap.json
Install dependencies
Install the required packages for this component:
pnpm add motion-sv runed
Copy the Source Code
Copy and paste the following code into your project:
random-letter-swap.svelte
index.ts
Folder Structure
Folder Structure
Ping Pong Animation
pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/f/random-letter-swap-ping-pong.json
Install dependencies
Install the required packages for this component:
pnpm add motion-sv runed
Copy the Source Code
Copy and paste the following code into your project:
random-letter-swap-ping-pong.svelte
index.ts
Folder Structure
Folder Structure
Visit Original Docs
For more deeper understaing visit fancy components documentation.
Props
Shared Props
These props apply to both the forward and ping-pong Random Letter Swap variants shown on this page.
| Name | Type | Default | Description |
|---|---|---|---|
label | string | required | Text string split into characters and shuffled into a random reveal order. |
reverse | boolean | true | Reverses the vertical swap direction for the entering characters. |
transition | AnimationOptions | { type: "spring", duration: 0.8 } | Motion options used for each randomly ordered character swap. |
staggerDuration | number | 0.02 | Delay in seconds between characters in the shuffled animation order. |
class | string | undefined | Classes merged onto the interactive text wrapper. |