Booking card

Pick a month, a day and a time: ink pills glide between choices, the times unfold, and the button rolls to your slot and the whole card turns into a confirmation with GSAP-drawn icons.

Cards, press, Motion + GSAP

Install

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

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

Usage

import { BookingCard } from "@/components/booking-card";

export default function Page() {
  return (
    <BookingCard
      title="Book a free trial"
      days={45}
      times={["09:00", "10:30", "13:00", "15:30", "18:00"]}
      onBook={({ date, time }) =>
        fetch("/api/book", {
          method: "POST",
          body: JSON.stringify({ date, time }),
        })
      }
    />
  );
}

Props

Prop	Type	Default	Description
title	string	"Book a free trial"	Card title
subtitle	string	a short line	Line under the title
start	Date	today	First day in the strip
days	number	45	How many days the strip shows
times	string[]	five slots	Times offered each day
isUnavailable	(date) => boolean	Sundays	Days that can't be booked
takenTimes	(date) => string[]	a few per day	Times already taken on a day
cta	string	"Book a trial"	Button label
doneTitle	string	"You're booked"	Heading on the confirmation
doneText	string	a short line	Line under the confirmation heading
onAddToCalendar	({ date, time }) => void		Called by the add to calendar button
onBook	({ date, time }) => void \	Promise		Called on press; a promise holds the spinner until it settles, a rejection returns to the picker
className	string		Size and shape of the card

More cards

Orbit card: A community card where people and app chips orbit a center mark.
Globe card: A feature card with a dotted three.js globe: arcs fly between people around the world and land with their avatar.
Avatar testimonial: Testimonials driven by a row of avatars: each quote rises in word by word out of a blur, and a ring fills around the active avatar until the next one.
Rolling card stack: A deck of metric cards that rolls forward like a rolodex: the front card tips away, the next glides in and counts up.

All animated react card components