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.