Component 043Buttons

Truck Pay Button

A bright pill folds into a road as a little delivery truck loads up, rolls off with its headlight on, and the button returns with a drawn checkmark.

Press the button to watch the delivery run.

Loading preview…

Live interactive previewExplore the interaction, then make it yours.

Quick start

Make it yours.

Save truck-pay-button.tsx in your components folder, then import it below. Requires React and Tailwind CSS.

TSXapp/page.tsx

import TruckPayButton from "@/components/ui/truck-pay-button";

export default function CheckoutPage() {
  return <TruckPayButton />;
}

Behind the interaction

Designed to explore, ready to adapt.

The pill squashes into a road line, parcels arc into the truck, and it speeds away before the button reappears.

The truck keeps driving until both the minimum animation and your onPay promise settle, with success and retry states.

Run guards, timer cleanup, live announcements, configurable labels and reset timing, and a reduced-motion path without the drive.

Keep exploring