Hover video button

Three boxes in a row, each tinted a near-white of its own, each holding one pill button: "boop me" on a warm light plate, "do not press" in glossy blue, "touch grass" in smoked dark glass. Hover one and the pill disappears under a short clip, centred over it, in which the same words inflate into puffy balloon letters, wobble as see-through jelly, or swell into wet green gloss. Leave and the letters deflate back into the pill.

The 3D part is only a video, about 140px wide, with an alpha channel (VP9 with alpha in WebM, HEVC with alpha in MP4), so the letters float over the box with nothing around them, and any clip from any video model drops in. A second clip is the same footage reversed. On leave, the reverse starts at the mirror of where the forward clip had got to and runs 30 percent faster, so a quick in and out deflates from wherever it was instead of jumping to the end.

The forward clip's playback rate is shaped every frame: a decaying spring, 1 + 0.6 e^(-3.5p) sin(11p) over the clip's progress p, makes the entrance overshoot and settle, and a smoothstep over the last 40 percent slows it to 38 percent so it lands softly. The button leans a tenth of the pointer's offset from the box centre, at most 9px, and a press pops it with a small spring that stacks on quick repeats. On touch a tap plays it and a tap elsewhere puts it back.

• Render the pill, and over it an absolutely centred pair of muted, playsInline videos: the forward clip and its reverse.
• On enter, hide the pill, set the forward clip to 0 and play it; on leave, start the reverse at duration minus the forward time at 1.3 times the speed.
• While the forward clip plays, set playbackRate each frame to speed times the entrance spring times the tail slowdown, never below 0.25.
• Warm both clips once with a muted play and pause, so the first hover starts at once.
• Ease the lean and the press pop on one spring loop that stops when everything is at rest.
• Stop every clip when the card leaves the screen, the tab hides or the card unmounts.
• Under reduced motion, show the plain pills and never load a clip.

• BUTTONS (three buttons): Each button's label, clip paths, pill style, clip width, speed, nudge and box tint.
• PROMPTS (three clip prompts): The prompts the clips were generated from; write your own for your own labels.
• DESIGN_WIDTH (600): The card width the buttons are sized at; a wider card scales them up.