Booking Pulse
A live slot card: pulsing dot, viewer count, and a just-booked nudge
Create a booking urgency card. A slot card ("Fri · 16:00") with three live elements: an accent dot in the corner breathing a pulse (a copy scaling 1 to 2.3x while fading from 60% to 0, 1.2s infinite ease-out); a viewer line ("3 people viewing this slot") whose number crossfades vertically when it changes (200ms, count in the accent color); and an occasional social-proof chip ("15:00 was just booked" with a flame icon) that slides in from the left with a spring, lives on an accent-tinted pill, and slides away after a few seconds. A full-width "Grab this slot" button sits below (95% scale on press). Reserve fixed heights for the viewer line and the chip area so appearing elements never jump the layout. Drive the numbers from real presence data; keep demo values scripted, not random. Accessibility: the chip uses role="status" and the viewer line aria-live="polite". If prefers-reduced-motion is set, show a static dot and swap texts instantly. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.