🌀 Scramble — Animated text component for Svelte

!npm
!license

The Scramble component displays text with the effect of “scattered” letters (hacker-text style). Suitable for dynamic headlines, downloads or accents.

🚀 Installation

``bash
bun add svelte-text-scramble


or


npm install svelte-text-scramble
`

📦 Utilization

`svelte



`

🔧 Props

| Title | Type | Default | Description |
| -------------------- | ----------------------------- | --------------- | -------------------------------------------------------------------------- |
| value | string | — | Objective. The source text that will be “scattered”. |
| duration | number | 0.8 | Animation duration (in seconds). |
| characterSet | string | A-Z, a-z, 0-9 | The set of symbols from which the “noise” is generated. |
| className | string | '' | Custom CSS Classes. |
| as | keyof HTMLElementTagNameMap | 'p' | HTML tag in which the text will be wrapped (p, span, div, etc.). |
| trigger | boolean | true | Automatically start animation when mounted or by condition set by trigger |
| onScrambleComplete | () => void | undefined | Callback called after the animation is complete. |
| ...restProps | HTMLAttributes | — | Any valid HTML attributes (id, style, aria-*, etc.). |

🎯 Examples

$3

``svelte
value="Secret Code"
duration={1.5}
characterSet="•◉◍◎★"
as="h2"
/>
`

$3

`svelte


(active = !active)}>Animate


`

$3

`svelte
value="Loaded!"
onScrambleComplete={() => console.log('Готово!')}
/>
``

🛠 Technology

- ✅ Svelte + TypeScript
- 🎞 Animation based on Motion One
- ⚡️ Lightweight, no unnecessary dependencies

📜 License

MIT © 2025 @babxxh-dima