Ghost Through
No library Beginner
The box fades to near-translucency while the check mark materializes through it, then the box fades back to solid — creating a "materializing through" ghost effect. Eerie and subtle.
The box fades to near-translucency while the check mark materializes through it, then the box fades back to solid — creating a "materializing through" ghost effect. Eerie and subtle.
Goal: Create a "Ghost Through" checkbox animation.
Visual behavior: A 28×28px square checkbox (7px border-radius). Off state: transparent fill, white/25% border. On state: violet (#7c3aed) fill, lavender border. When checked, a @keyframe animates: box starts solid → fades to opacity 0.2 while still transparent → fades back to opacity 1 now filled with violet. The check mark fades in during the re-solidification phase. The whole effect looks like the check materializes through the semi-transparent box. Unchecking reverses: solid filled → ghost → solid empty.
Technique: Key-bumped element restarts the @keyframe. The keyframe animates both opacity and background together.
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.