Pixel Fill
No library Intermediate
A checkbox whose interior is a 4×4 grid of micro-squares that fill in one by one in a randomised stagger order on check, and clear in reverse on uncheck. Retro pixel game aesthetic.
A checkbox whose interior is a 4×4 grid of micro-squares that fill in one by one in a randomised stagger order on check, and clear in reverse on uncheck. Retro pixel game aesthetic.
Goal: Create a "Pixel Fill" checkbox animation.
Visual behavior: A 28×28px square checkbox (7px border-radius). Off state: transparent fill, white/25% border, 4×4 grid of micro-squares all transparent. On state: indigo (#6366f1) border, all 16 micro-squares filled indigo. When checked, the squares fill in one by one in a randomised staggered order (each square has a unique transition-delay derived from a shuffled index array). When unchecked, they clear in reverse stagger order. Retro/game pixel feel.
Technique: useMemo generates a shuffled order array once. Each of the 16 grid cells uses inline transition-delay based on its position in the shuffle. No keyframes needed — pure CSS transition stagger.
Accessibility: Hidden native <input type="checkbox">. Transitions removed under prefers-reduced-motion via data attribute selector.
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.