Team morph

A presence pill that morphs into a team card: the shell reshapes while each avatar flies from the stack to its row. Hover to fan the stack; click to open.

Cards, press, then hover, Motion

Install

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

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

Usage

import { TeamMorph } from "@/components/team-morph";

export default function Page() {
  return (
    <TeamMorph
      team="Platform squad"
      members={[
        { name: "Ana Ruiz", role: "Tech lead" },
        { name: "Ben Ito", role: "Backend", awayFor: 20 },
        { name: "Chloe Fox", role: "Frontend" },
      ]}
      onInvite={() => openInvite()}
    />
  );
}

Props

Prop	Type	Default	Description
team	string	"Design team"	Team name
members	TeamMember[]	five teammates	{ name, role, color?, awayFor? }; leave awayFor out for online
stack	number	3	Avatars in the collapsed stack
defaultOpen	boolean	false	Start expanded
onInvite	() => void		Shows an Invite button at the bottom of the card

More cards

Profile card: A creator profile whose pastel cover flows toward your pointer.
Bill list: Upcoming bills that rise in while the total counts up.
Recap card: A summary that reads like a sentence: its numbers count up in little chips, and milestone badges pop in below.
Brand bridge: A feature card with big brand tiles wired to a hub by gradient lines in each brand's colours, glowing comets and a particle field that scatters from the pointer.

All animated react card components