animated

ShuffleText

Animates text in by sliding each character through a scramble strip, with optional colour interpolation and scroll, hover or loop triggers.

Install

pnpm add @fractaldesign/machines-ui

import '@fractaldesign/machines-ui/style.css';
import { ShuffleText } from '@fractaldesign/machines-ui';

Preview

MACHINES UI

<ShuffleText text="MACHINES UI" tag="h2" />

Props

Prop	Type	Default	Description
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 'left''right''up''down'	'right'	Direction each character slides in from: `left`, `right`, `up`, or `down`.
duration	number	0.35	Seconds for one character to complete its slide.
maxDelay	number	0	Upper bound in seconds for random stagger delays in `random` mode.
ease	string \| EasingFunction	'power3.out'	Easing name such as `power3.out`, or a custom easing function.
threshold	number	0.1	Fraction of the element that must be visible before the shuffle starts.
rootMargin	string	'-100px'	IntersectionObserver root margin, e.g. `-100px`, shrinking the trigger area.
tag	TagName 'h1''h2''h3''h4''h5''h6''p''span'	'p'	Element the text is rendered as: `h1`–`h6`, `p`, or `span`.
textAlign	string	'center'	CSS text-align value for the element.
shuffleTimes	number	1	How many scramble clones each character slides through.
animationMode	AnimationMode 'evenodd''random'	'evenodd'	Stagger pattern: `evenodd` interleaves two groups, `random` gives each character a random delay.
loop	boolean	false	Repeat the shuffle after each cycle.
loopDelay	number	0	Seconds to wait before each loop restarts.
stagger	number	0.03	Seconds between consecutive character delays.
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	true	Stop observing after the first intersection.
respectReducedMotion	boolean	true	Show the plain text immediately when the user prefers reduced motion.
triggerOnHover	boolean	true	Replay the shuffle when the pointer enters the element.

API

callback onShuffleComplete () => void Called each time a shuffle cycle finishes.
class forwarded to the outer element
a11y honours prefers-reduced-motion

Types

Name	Kind	Description
EasingFunction	type	(t: number) => number
ShuffleDirection	type	'left' \| 'right' \| 'up' \| 'down'
AnimationMode	type	'evenodd' \| 'random'
TagName	type	'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'p' \| 'span'

Theming

CSS custom properties this component reads.

--font-sans

src/lib/components/animated/ShuffleText.svelte