Components
A small pill button that reveals a short video on hover, where the word puffs up into glossy 3D letters — as seen on amo.co. The puffy part is only a video: the button plays a transparent clip (VP9-alpha webm + HEVC-alpha mp4) forward on hover with a wobbly, springy playback curve, and plays a reversed clip on leave so the letters deflate from exactly where they were. Extras ported from the original: a magnetic pointer drift that leans the pill toward the cursor, a squishy press spring, tiny synthesised WebAudio hover/click sounds (balloon, water, earth — no audio assets), haptic taps, touch-device tap-to-toggle, and a prefers-reduced-motion fallback. Three pill styles: light cream, glossy blue jelly, and dark glass. Generate your own clip with any AI video model, key out the background, and drop the base path in. Zero dependencies.
Loading preview...
"use client"
import { HoverVideoButton } from "@/components/ui/amo-hover-button"
export default function Default() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-[#fcfcfc] px-8 py-10 font-sans">
<div className="w-full max-w-[656px]">
<div className="flex h-[200px] items-center justify-center rounded-xl border border-[#f0f0f0] px-4" style={{ backgroundColor: "#FFFEFB" }}>
<HoverVideoButton
label="boop me"
video="https://www.arlan.me/buttons/boop"
reverseVideo="https://www.arlan.me/buttons/boop-rev"
variant="light"
width={140}
speed={5.9}
alpha
offsetX={1}
sound="balloon"
/>
</div>
</div>
</div>
)
}