Svelte 5 component · machines-ui · Animated
ShuffleText
Animates text in by sliding each character through a scramble strip, with optional colour interpolation and scroll, hover or loop triggers.
Install
ShuffleText is a Svelte 5 animated ASCII shuffle text component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.
pnpm add @fractaldesign/machines-uiImport
import '@fractaldesign/machines-ui/style.css';
import { ShuffleText } from '@fractaldesign/machines-ui';Usage
<ShuffleText text="MACHINES UI" tag="h2" />Props
| Name | Type | Default |
|---|---|---|
text | string The text to animate, one character per cell. | — |
class | string | '' |
style | string Extra inline CSS appended to the element's style attribute. | '' |
shuffleDirection | ShuffleDirection Direction each character slides in from: `left`, `right`, `up`, or `down`. | 'right' |
duration | number Seconds for one character to complete its slide. | 0.35 |
maxDelay | number Upper bound in seconds for random stagger delays in `random` mode. | 0 |
ease | string | EasingFunction Easing name such as `power3.out`, or a custom easing function. | 'power3.out' |
threshold | number Fraction of the element that must be visible before the shuffle starts. | 0.1 |
rootMargin | string IntersectionObserver root margin, e.g. `-100px`, shrinking the trigger area. | '-100px' |
tag | TagName Element the text is rendered as: `h1`–`h6`, `p`, or `span`. | 'p' |
textAlign | string CSS text-align value for the element. | 'center' |
onShuffleComplete | () => void Called each time a shuffle cycle finishes. | — |
shuffleTimes | number How many scramble clones each character slides through. | 1 |
animationMode | AnimationMode Stagger pattern: `evenodd` interleaves two groups, `random` gives each character a random delay. | 'evenodd' |
loop | boolean Repeat the shuffle after each cycle. | false |
loopDelay | number Seconds to wait before each loop restarts. Only applies when `loop` is on. | 0 |
stagger | number Seconds between consecutive character delays. | 0.03 |
scrambleCharset | string Characters used for the scramble clones; empty means each clone shows the real character. | '' |
colorFrom | string Colour the characters interpolate from; needs `colorTo` to take effect. | — |
colorTo | string Colour the characters interpolate to; needs `colorFrom` to take effect. | — |
triggerOnce | boolean Stop watching for scroll into view after the first time. Governs the scroll trigger only: hovering still replays the shuffle (see `triggerOnHover`). | true |
respectReducedMotion | boolean Show the plain text immediately when the user prefers reduced motion. | true |
triggerOnHover | boolean Replay the shuffle when the pointer enters the element. | true |
Related components
TextTyping Types a line of text one character at a time, restarting when the text changes or the line becomes active…GraphAgni An ASCII fire that burns upward from a pit, with rising sparks and live sliders for the grid size, speed,…GraphAum An Aum (ॐ) figure drawn in terminal glyphs, inked in stroke by stroke and then rippled by a resonance wave…GraphBoot An animated boot/deploy run in ASCII: each step fills a progress bar, shows its ETA, and lands on a ✓ or ✗,…GraphCron A live, character-based preview of a cron schedule, showing matching minute and calendar positions.GraphDamru A damru (hourglass drum) drawn in ASCII, pulsing in place through the eight beats of Adi tala.