Curtain
No library Intermediate
Two violet half-panels slide apart like theater curtains on check, revealing the check mark behind them. Unchecking slides the panels back in to conceal it.
Two violet half-panels slide apart like theater curtains on check, revealing the check mark behind them. Unchecking slides the panels back in to conceal it.
Goal: Create a "Curtain" checkbox animation.
Visual behavior: A 28×28px square checkbox (7px border-radius). Off state: two violet (#7c3aed) half-panels cover the interior (left panel covers left 50%, right panel covers right 50%). On state: panels slide apart (left slides to translateX(-100%), right slides to translateX(100%)) revealing a white check mark behind them. Unchecking: panels slide back in to cover the check.
Technique: Three layered children inside the box. Innermost is the check SVG (z-index 0). Left panel (position: absolute, left: 0, width: 50%) and right panel (position: absolute, right: 0, width: 50%) sit above with z-index 1. Panels translate on toggle. Box overflow: hidden clips the sliding panels.
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.