Pixel
No library Advanced
8-bit retro radio: a 4×4 grid of micro-pixels fills in sequentially with staggered CSS animation-delay on selection, like a low-res screen rendering pixel-by-pixel. Each pixel pops in from scale 0 to 1.
8-bit retro radio: a 4×4 grid of micro-pixels fills in sequentially with staggered CSS animation-delay on selection, like a low-res screen rendering pixel-by-pixel. Each pixel pops in from scale 0 to 1.
Goal: Create a "Pixel" radio group animation.
Visual behavior: A retro 8-bit radio group with 3 options. The radio indicator is a 4×4 grid of 4px square pixels with 1px gaps. On selection, each pixel animates from scale(0) to scale(1) with staggered transition-delay (i * 18ms per pixel, 0 to 15), creating a sequential pixel-fill animation in violet (#a78bfa). On deselect, pixels collapse. Labels use monospace uppercase font.
Technique: React useState tracks selected option and a pixelKey counter. pixelKey increments on each selection so the pixel cells remount (resetting their transitions). Each pixel is a span in a CSS grid. The stagger is achieved via inline style transition-delay calculated from pixel index. No library dependencies.
Accessibility: Hidden native <input type="radio"> per option, shared name attribute. Keyboard-navigable. Pixel transition set to none under prefers-reduced-motion.
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.