On selection, the label characters cycle through random glyphs (0–9, symbols) before resolving to the real character — a Matrix-style decode effect. Monospace green font on dark background. Each character resolves on a staggered delay.
Goal: Create a "Matrix" radio group animation.
Visual behavior: A sci-fi terminal radio group on a near-black (#030a00) background. 3 options in monospace uppercase. On selection, the label characters cycle through random glyphs (digits, letters, katakana, symbols) before each character resolves to its real value, with each character resolving CYCLES steps after the previous (staggered). The effect runs for ~240ms total. A terminal cursor block (8×14px solid green rectangle) sits left of each label. Selected state: bright green #00ff41 with glow text-shadow. Unselected: dim 35% green.
Technique: React useState tracks selected option. A custom hook (useMatrixDecode) runs a setTimeout loop when activated, cycling random glyphs character-by-character until all resolve. Each call sets display string state. On deactivation, display is immediately set to the real text. A separate MatrixOption component uses the hook per option. No library dependencies.
Accessibility: Hidden native <input type="radio"> per option with aria-label set to full real text. Screen readers see real labels. Matrix decode is purely visual.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.