Shutter
No library Advanced
The checked fill opens like a camera iris/shutter using clip-path polygon animation — panels spread outward from a collapsed line to full coverage. Amber color with a sharp mechanical feel.
The checked fill opens like a camera iris/shutter using clip-path polygon animation — panels spread outward from a collapsed line to full coverage. Amber color with a sharp mechanical feel.
Goal: Create a "Shutter" checkbox animation.
Visual behavior: A 28×28px square checkbox (7px border-radius). Off state: transparent fill, white/25% border. On state: amber (#f59e0b) fill and border. When checked, the fill layer opens like a camera iris: clip-path polygon starts collapsed at the vertical center line (polygon(50% 0%, 50% 0%, 50% 50%, 50% 100%, 50% 100%, 50% 50%)) and expands outward to fill the box (polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 50%)) over 320ms. Unchecking plays the reverse. Check mark fades in on top after fill completes.
Technique: CSS @keyframes animating clip-path polygon on an absolute fill layer. Key-bumped to restart animation on each toggle.
Accessibility: Hidden native <input type="checkbox">. Animations 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.