A text component that swaps the letters vertically on hover.
motion-sv
Hover me chief! H Ho ov ve er r m me e c ch hi ie ef f! ! Awesome! A Aw we es so om me e! ! Good day! G Go oo od d d da ay y! ! More text? M Mo or re e t te ex xt t? ? oh, seriously?! o oh h, , s se er ri io ou us sl ly y? ?! !
There are two types of animations available for this component:
- Forward animation — plays the animation timeline once forward, when you hover over the text.
- Ping Pong animation — plays the animation timeline in a ping pong fashion. It plays once forward when you hover over the text, and once in the opposite direction when you hover away from the text.
Installation
Forward Animation
pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/f/letter-swap.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:
letter-swap.svelte
index.ts
Folder Structure
Folder Structure
Ping Pong Animation
pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/f/letter-swap-ping-pong.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:
letter-swap-ping-pong.svelte
index.ts
Folder Structure
Folder Structure
Visit Original Docs
For more deeper understaing visit fancy components documentation.
Examples
Stagger From
First F Fi ir rs st t Center C Ce en nt te er r Last L La as st t
Line Swap
By setting the staggerDelay prop to zero, you can create a line swap effect.
oh, wow! o oh h, , w wo ow w! ! nice! n ni ic ce e! !
Ping Pong
First F Fi ir rs st t Center C Ce en nt te er r Last L La as st t
Props
Shared Props
These props apply to both the forward and ping-pong Letter Swap variants shown on this page.
| Name | Type | Default | Description |
|---|---|---|---|
label | string | required | Text string split into characters and animated on hover. |
reverse | boolean | true | Reverses the vertical swap direction for the entering characters. |
transition | AnimationOptions | { type: "spring", duration: 0.7 } | Motion options used for the character swap animation. |
staggerDuration | number | 0.03 | Delay in seconds between adjacent character swaps. |
staggerFrom | "first" | "last" | "center" | number | "first" | Starting point used when calculating stagger delays. |
class | string | undefined | Classes merged onto the interactive text wrapper. |