Scratch
No library Intermediate
A diagonal clip-path wipe reveals the purple checked state from the bottom-right corner, like scratching a lottery card. Unchecking collapses the fill back.
A diagonal clip-path wipe reveals the purple checked state from the bottom-right corner, like scratching a lottery card. Unchecking collapses the fill back.
Goal: Create a "Scratch" checkbox animation.
Visual behavior: A 28×28px square checkbox (7px border-radius). Off state: transparent fill, white/25% border. On state: purple (#a855f7) fill, white check mark. When checked, a diagonal clip-path wipe reveals the fill layer — polygon animates from polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%) (collapsed at bottom-right) to polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) (fully revealed) over 380ms. Feels like scratching a lottery ticket from bottom-right to top-left. Unchecking collapses back.
Technique: An absolute fill layer uses clip-path polygon transition. The check SVG sits above with opacity delayed to appear after the wipe completes.
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.