Heartbeat
No library Advanced
On check, a tiny SVG ECG heartbeat line draws across the box using stroke-dashoffset, then fades while the check mark reveals. Dark background with red/rose palette. Medical/vital signs aesthetic.
On check, a tiny SVG ECG heartbeat line draws across the box using stroke-dashoffset, then fades while the check mark reveals. Dark background with red/rose palette. Medical/vital signs aesthetic.
Goal: Create a "Heartbeat" checkbox animation.
Visual behavior: A 28×28px square checkbox (7px border-radius). Off state: transparent fill, white/25% border. On state: dark background (#0f172a), rose (#f43f5e) border. When checked, a small SVG polyline playing an ECG heartbeat pattern appears and draws itself using stroke-dashoffset animation (pathLength="1", dasharray="1", dashoffset 1→0 over 500ms), then the line fades out (cb-hb-fade keyframe). After the heartbeat fades, the rose check mark appears. The sequence is: heartbeat draws → heartbeat fades → check appears.
Technique: showBeat state conditionally renders the SVG heartbeat. setTimeout removes it after 700ms. The polyline uses two simultaneous animations: drawing stroke and fading. The check mark appears when on=true and showBeat=false.
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.