Orbit Snap
No library Advanced
A glowing violet dot orbits the checkbox perimeter for ~700ms on check, then vanishes and the check mark snaps in. Unchecking instantly removes the check. Gives a satisfying "loading then locking" sequence.
A glowing violet dot orbits the checkbox perimeter for ~700ms on check, then vanishes and the check mark snaps in. Unchecking instantly removes the check. Gives a satisfying "loading then locking" sequence.
Goal: Create an "Orbit Snap" 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 (#a78bfa) border. When clicked to check, a glowing violet dot starts orbiting the box perimeter (rotation + translateX centered at box center) for 700ms, then the orbit stops and the check mark snaps in with a spring scale. Unchecking immediately shows unchecked state.
Technique: setTimeout delays the setOn(true) call by 700ms while orbiting state shows the dot. The dot uses a CSS @keyframe that rotates 360deg. On completion setOrbiting(false) and setOn(true) 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.