hold to pay

A hold-to-confirm checkout as a self-playing micro-interaction, on an 8.4-second loop. A frosted glass card sits on a dark stage with drifting blobs of light and a faint grid: Aurora Headphones in Space Grey, arriving tomorrow, $248.00, the card on file with Change, and a sunken Hold to pay button with a white circle and a fingerprint at its left. A pointer glides in and presses the fingerprint; a ring opens round it and breathes while it holds. The white fill sweeps across the button, the label turns dark wherever the fill covers it, the fingerprint inks in stroke by stroke and a soft glow swells under the card. Let go, the whole button pops and collapses into a circle with a spinner whose arc runs a full turn and closes into a check; sixteen sparks and two ripples burst out, and the circle springs back out to full width as Paid $248.00 while a shine sweeps across it and the payment line dips into the receipt line. Then the fill drains back into the circle and the card is ready again, so the loop joins up. HTML, CSS and SVG with React, no images, Inter and Lucide icons, a 1080 × 1080 stage that scales to fit any window, and frame-exact rendering (window.__render(t), window.__LOOP, window.__MANUAL). The product, card and receipt address are fictional.