motion-scramble

Scrambles text with random characters then progressively reveals the real text from left to right. Trigger on scroll or on hover.

Preview

Hello, world.

Import

import 'motion-components/motion-scramble'   // just this one
import 'motion-components'               // or the whole library

Usage

<motion-scramble trigger="hover">
  Hover to scramble
</motion-scramble>

Loop

Add loop to decode the text, hold, then scramble it again. hold sets how long the resolved text stays readable, gap how long it rests before the next decode.

Status: SYSTEM_ONLINE

<motion-scramble interval="0.04" loop hold="1.6" gap="0.6">SYSTEM_ONLINE</motion-scramble>

With trigger="view" the cycle runs only while the text is on screen, and once is ignored. Add pause-on-hover to freeze it while the pointer is over the text.

Properties

Attribute	Property	Type	Default	Description
interval	interval	number	0.04	Time between scramble frames, in seconds
delay	delay	number	0	Delay before starting, in seconds
iterations	iterations	number	2	Scramble frames per character before revealing
trigger	trigger	string	'view'	What starts the scramble: 'view' on viewport entry or 'hover' on mouseenter
once	once	boolean	true	Animate only on first intersection. Set once="false" to animate on every entry. Ignored with loop
loop	loop	boolean	false	Decode, hold, then scramble again on repeat. With trigger="view" the cycle runs while the text is on screen
hold	hold	number	1.6	With loop, seconds the resolved text stays readable before it scrambles again
gap	gap	number	0.5	With loop, seconds between cycles, while the text is already resolved
pause-on-hover	pauseOnHover	boolean	false	Pause the loop while the pointer is over the text, resuming on leave

JavaScript API

Trigger the scramble programmatically with play() and cancel().

JavaScript API

–

Accessibility

Respects prefers-reduced-motion: when enabled, the scramble effect is skipped, the text appears at its final state immediately and loop never starts.