π Scramble β Animated text component for Svelte
The Scramble component displays text with the effect of βscatteredβ letters (hacker-text style). Suitable for dynamic headlines, downloads or accents.
π Installation
bun add svelte-text-scramble
# or
npm install svelte-text-scramble
π¦ Utilization
<script lang="ts">
import { Scramble } from 'svelte-text-scramble'
</script>
<Scramble value="Hello World!" />
π§ 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<HTMLElement> |
β | Any valid HTML attributes (id, style, aria-*, etc.). |
π― Examples
Custom character set and duration
<Scramble
value="Secret Code"
duration={1.5}
characterSet="β’ββββ
"
as="h2"
/>
Manual launch via trigger
<script lang="ts">
let active = false
</script>
<button on:click={() => (active = !active)}>Animate</button>
<Scramble value="Manual Trigger" trigger={active} />
Callback after completion
<Scramble
value="Loaded!"
onScrambleComplete={() => console.log('ΠΠΎΡΠΎΠ²ΠΎ!')}
/>
π Technology
- β Svelte + TypeScript
- π Animation based on Motion One
- β‘οΈ Lightweight, no unnecessary dependencies
π License
MIT Β© 2025 @babxxh-dima
