Scramble text on hover with sequential or iterative reveals and custom character sets.
motion-sv
Llama 3.1 405B Instruct Turbo Llama 3.1 405B Instruct Turbo
Llama 3.2 3B Instruct Turbo Llama 3.2 3B Instruct Turbo
Gemma 2 27B Gemma 2 27B
Mistral 7B Instruct v0.3 Mistral 7B Instruct v0.3
Mixtral 8x7B Instruct Mixtral 8x7B Instruct
DeepSeek LLM Chat 67B DeepSeek LLM Chat 67B
Qwen 2.5 72B Instruct Turbo Qwen 2.5 72B Instruct Turbo
WizardLM 2 8x22B WizardLM 2 8x22B
Nous Hermes 2 Mixtral Nous Hermes 2 Mixtral
StripedHyena Nous 7B StripedHyena Nous 7B
DBRX Instruct DBRX Instruct
MythoMax L2 13B MythoMax L2 13B
SOLAR 10.7B Instruct SOLAR 10.7B Instruct
Gemma 2B Instruct Gemma 2B Instruct
Installation
pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/f/scramble-hover.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-hover.svelte
index.ts
Folder Structure
Folder Structure
Visit Original Docs
For more deeper understaing visit fancy components documentation.
Examples
New Characters Example
original characters original characters new characters new characters
Special Symbols Example
special symbols special symbols
Position Example
from the start from the start
from the center from the center
from the end from the end