Components/Scramble Text19 / 25

Scramble Text

Code

// Takes a target ref + a nested params object; returns { rescramble, isReady }.
// No loop: each call decodes once. Call rescramble() to re-run (e.g. on shuffle).
const { rescramble, isReady } = useAnimeScramble({
  target: targetRef,
  params: {
    text: 'Hello World',
    chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ!<>-_\\/[]{}—=+*^?#',
    cursor: true,
  },
  autoplay: true,
});

<p ref={targetRef}>{text}</p>

Decoding character scramble with a custom charset and optional cursor.

Live preview

Scramble TextDecoding character scramble

Scramble Text

initializing…

Props

Name	Type	Default	Description
target	RefObject<T>	-	Element ref to scramble (input)
params.text	string	-	Final text to decode into
params.chars	string	-	Scramble character set
params.cursor	boolean	false	Show a blinking cursor
autoplay	boolean	false	Auto-start on mount
rescramble	function	-	Re-trigger the decode (returned)
isReady	boolean	-	True once the hook is initialized (returned)

Related components

Accordion

Expand/collapse panels with height animation and single/multi open modes

Accordion (Presence)

Mount/unmount accordion panels with enter/exit cross-fade via AnimePresence

Animated Slider

Slide, fade, scale, flip transitions with visual slide showcase

Scroll-Linked Animations Tooltip

1	// Takes a target ref + a nested params object; returns { rescramble, isReady }.
2	// No loop: each call decodes once. Call rescramble() to re-run (e.g. on shuffle).
3	const { rescramble, isReady } = useAnimeScramble({
4	target: targetRef,
5	params: {
6	text: 'Hello World',
7	chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ!<>-_\\/[]{}—=+*^?#',
8	cursor: true,
9	},
10	autoplay: true,
11	});
12
13	<p ref={targetRef}>{text}</p>