Crystal Break
No library Advanced
On toggle, the box visually shatters into three angled polygonal shards that briefly separate outward, then collapse back revealing the new state. A satisfying destructive-reassembly metaphor.
On toggle, the box visually shatters into three angled polygonal shards that briefly separate outward, then collapse back revealing the new state. A satisfying destructive-reassembly metaphor.
Goal: Create a "Crystal Break" checkbox animation.
Visual behavior: A 28×28px square checkbox (7px border-radius). Off state: transparent fill, white/25% border. On state: deep indigo (#4338ca) fill, indigo border (#6366f1). When toggled, 3 polygonal shard spans (clip-path triangles covering different regions of the box) briefly translate outward in different directions (6-10px) and back over 460ms, creating a shattering-and-reassembling effect. The shards use semi-transparent white/indigo color. After they fade/collapse, the new state (checked or unchecked) is revealed. Shards are rendered conditionally and removed after 500ms.
Technique: showCrack state renders 3 absolute spans with clip-path polygon shapes. Key-bumped to restart per toggle. Each shard uses its own @keyframe (translate out → back → fade). The box background transitions after shard animation completes via transition-delay.
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.