Decrypted text
A scramble-and-resolve text effect where unrevealed characters cycle through a pool of glyphs before settling in the chosen direction.
0$79AQMV 6*HX71 IQQ24AG9.r.nsa.u irhhy kgkwomyy um.nsuhu,
Each glyph scrambles through a pool before settling in place.
Implementation
1"use client";2 3import {4 useCallback,5 useEffect,6 useId,7 useMemo,8 useRef,9 useState,10 type CSSProperties,11 type PointerEvent as ReactPointerEvent,12} from "react";13 14export type DecryptedEffect = "scramble" | "flip" | "fade";15export type DecryptedRevealDirection = "start" | "end" | "center" | "random";16export type DecryptedAnimateOn = "view" | "hover" | "inViewHover" | "click";17export type DecryptedClickMode = "once" | "toggle";18 19export interface DecryptedTextProps {20 text: string;21 speed?: number;22 maxIterations?: number;23 sequential?: boolean;24 revealDirection?: DecryptedRevealDirection;25 useOriginalCharsOnly?: boolean;26 characters?: string;27 className?: string;28 parentClassName?: string;