Button Press

A cursor walks in and lands on a split action button: the label, a hairline divider and a chevron, in your primary colour. The button darkens as the cursor reaches it, gives a little on the click and springs back. The label slides out for a spinner, then the spinner slides out for a tick that draws itself. It's the deploy, publish or send beat in a launch video.

How it moves

Only the surface presses. The fill gives by 3.5% and returns to exactly 1. The label never scales, so it never shimmers.

One width, three labels. The button is sized once (width, at 720p) for the longest label, so it never reflows under the cursor sitting on it.

Installation

$ pnpm dlx shadcn@latest add @snapcn/button-press

Component code

The exact file shadcn add copies into your project.

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { ButtonPress } from "@/components/snap-cn/button-press";

const Scene = () => <ButtonPress label="Publish" pending="Publishing…" done="Live" />;

export const RemotionRoot = () => (
  <Composition
    id="ButtonPress"
    component={Scene}
    durationInFrames={126}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Frequently asked questions

How do I add Button Press to a Remotion project?

Run npx shadcn@latest add @snapcn/button-press. The source is copied into components/snap-cn/ (or wherever your components.json points) with anything it depends on, and you own the code from then on — there is no runtime package to keep installed.

What is Button Press?

Button Press is a Remotion button click animation for React. A cursor walks onto a split action button: hover, press, a spinner while it works, then a drawn tick.

What do I need before using Button Press?

An existing Remotion project (npx create-video@latest) with a components.json. shadcn init does not recognise Remotion, so the installation guide has you write that file by hand — it takes two minutes. The component is MIT licensed and free.