Reaction card

A post with three reaction buttons. Hover or hold to pop up faces, hearts or boost amounts, then pick one for a burst and a rolling count.

Cards, hover and press, Motion

Install

npm i clsx motion tailwind-merge && curl -o components/reaction-card.tsx https://motion-brew.com/r/reaction-card.tsx

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

Usage

import { ReactionCard } from "@/components/reaction-card";

export default function Page() {
  return (
    <ReactionCard
      author="Maya Lindqvist"
      text="Shipped the new onboarding today."
      reactions={128}
      onChange={({ face, heart, boost }) => saveReactions(face, heart, boost)}
    />
  );
}

Props

Prop	Type	Default	Description
author	string	"Maya Lindqvist"	Who posted
avatar	string	a photo	Their photo
time	string	"2h"	When they posted
text	string	a short post	The post itself
faces	{ key; emoji; label }[]	six faces	Choices for the React button
hearts	{ key; emoji; label }[]	six hearts	Choices for the Love button
boosts	{ key; emoji; label; amount }[]	+1 to +50	Amounts for the Boost button
reactions	number	128	Reactions before yours
loves	number	64	Loves before yours
boosted	number	320	Boost total before yours
onChange	({ face, heart, boost }) => void		Called whenever any button changes
className	string		Size and shape of the card

More cards

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.
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.

All animated react card components