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.
npx @21st-dev/cli@beta add arlanoska/amo-hover-buttonLoading preview...
"use client"
import { HoverVideoButton } from "@/components/ui/amo-hover-button"
export default function TouchGrass() {
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: "#FBFFFA" }}>
<HoverVideoButton
label="touch grass"
video="https://www.arlan.me/buttons/grass"
reverseVideo="https://www.arlan.me/buttons/grass-rev"
variant="dark"
width={137}
speed={2.2}
alpha
offsetX={1}
offsetY={0}
sound="earth"
/>
</div>
</div>
</div>
)
}