Event card

Minimal event details with a clock that sweeps to the start time, a guest stack that fans out, and round GSAP-drawn tools beside a Join button.

Cards, hover and press, Motion + GSAP

Install

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

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

Usage

import { EventCard } from "@/components/event-card";

export default function Page() {
  return (
    <EventCard
      title="Product demo"
      start={new Date("2026-01-09T13:30")}
      end={new Date("2026-01-09T15:30")}
      guests={guests}
      onJoin={() => joinCall()}
      onEdit={() => openEditor()}
      onDelete={() => deleteEvent()}
    />
  );
}

Props

Prop	Type	Default	Description
title	string	"Product demo"	Event title
start	Date	a Friday at 1:30 PM	When it starts
end	Date	two hours later	When it ends
guests	{ name; avatar?; going? }[]	six guests	People invited; going: false marks them awaiting
about	string[]	three paragraphs	What the event is about, one string per paragraph
locale	string	"en-US"	Locale for the date and time
onEdit	() => void		Called by the pencil
onDelete	() => void		Called once delete is confirmed
onInvite	() => void	adds a sample guest	Called by the plus
kind	string	\"Video call\"	What kind of event it is, shown over the title
cta	string	\"Join call\"	Main button label
onJoin	() => void		Called by the main button
className	string		Size and shape of the card

More cards

Add card: An empty state for payments: a card floats over its slot and tilts toward you.
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.
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.

All animated react card components