Svelte component with scramble effect.
npm install svelte-text-scramble!npm
!license

The Scramble component displays text with the effect of “scattered” letters (hacker-text style). Suitable for dynamic headlines, downloads or accents.
``bash`
bun add svelte-text-scrambleor
npm install svelte-text-scramble
`svelte
`
| 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.). |
``svelte`
duration={1.5}
characterSet="•◉◍◎★"
as="h2"
/>
`svelte
`
`svelte``
onScrambleComplete={() => console.log('Готово!')}
/>
- ✅ Svelte + TypeScript
- 🎞 Animation based on Motion One
- ⚡️ Lightweight, no unnecessary dependencies
MIT © 2025 @babxxh-dima