Retro LED
No library Intermediate
The box interior is a 5×5 dot matrix. On check, green LEDs light up in a staggered sequence that traces a check-mark pattern through the grid. Off state: all dots dim. Retro display aesthetic.
The box interior is a 5×5 dot matrix. On check, green LEDs light up in a staggered sequence that traces a check-mark pattern through the grid. Off state: all dots dim. Retro display aesthetic.
Goal: Create a "Retro LED" checkbox animation.
Visual behavior: A 28×28px square checkbox (5px border-radius) with a near-black background (#0a0a0a). Interior is a 5×5 grid of 25 circular dot elements. Off state: all dots are dim (rgba(255,255,255,0.08)). On state: all dots become bright green (#4ade80) with a green glow (box-shadow). When checked, dots light up in a pre-defined stagger order that traces the check-mark shape through the grid — each dot has a transition-delay based on its position in the CHECK_ORDER array. Unchecking dims them in reverse order.
Technique: useMemo generates a delay map from pre-defined CHECK_ORDER array. Each dot span uses inline transition-delay. No keyframes — pure CSS transition stagger.
Accessibility: Hidden native <input type="checkbox">. Transitions removed 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.