Download button

A download pill whose page icon fills up like liquid as the percentage counts, while a waving fill sweeps across, then a check lands on the page.

Buttons, press, Motion + GSAP

Install

npm i @gsap/react clsx gsap motion tailwind-merge && curl -o components/download-button.tsx https://motion-brew.com/r/download-button.tsx

One self contained file for React and Tailwind CSS: download-button.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { DownloadButton } from "@/components/download-button";

export default function Page() {
  return (
    <DownloadButton
      size="4.2 MB"
      onDownload={() => fetch("/api/report.pdf").then(saveFile)}
    />
  );
}

Props

Prop	Type	Default	Description
label	string	"Download"	Label at rest
size	string	"4.2 MB"	File size shown once done
duration	number	2.6	Seconds the progress takes
onDownload	() => void \	Promise		Called on press; a promise holds the fill near the end until it settles, a rejection resets the button
className	string		Size and shape of the button

More buttons

Receipt button: A pay button that turns into a receipt printer: progress fill, check draw, line-by-line paper feed and a torn-off receipt.
Fuse button: An action button whose done state carries an undo on a burning fuse.
Magnetic button: A button that leans toward your cursor on a spring.
Hold to confirm: Hold to fill, let go to cancel.

All animated react button components