On selection, the option label types character-by-character at 50ms intervals with a blinking cursor. Switching options clears the previous and re-types the new one, giving each selection a deliberate, terminal-like personality.
Goal: Create a "Typewriter" radio group animation.
Visual behavior: A radio group with 3 options. When an option is selected, its label types character-by-character at 50ms intervals in a monospace font, with a blinking underscore cursor visible while typing. Other options display their full label text dimmed to 35% opacity. On switching selection, the previous option immediately shows full text (dimmed), and the new one starts typing from empty. The selected row has a subtle bright background and border.
Technique: React useState tracks the selected option string and the currently typed text. useRef holds the interval timer. A handleSelect function clears any running interval, resets typed text to empty, then starts a new setInterval that appends one character per tick until the full label is revealed. The blinking cursor is a span with a CSS keyframe animation (opacity blink). The full label is always rendered as aria-label on the hidden input for screen readers. No library dependencies.
Accessibility: Hidden native <input type="radio"> per option with aria-label set to the full option text. Screen readers get the full label regardless of visual typing state. Typing effect 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.