Profile card

A creator profile whose pastel cover flows toward your pointer. Follow to watch the count tick up; open more skills, save with a pop.

Cards, in view, then hover, press and keys, Motion

Install

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

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

Usage

import { ProfileCard } from "@/components/profile-card";

export default function Page() {
  return (
    <ProfileCard
      name="Lena Hartmann"
      role="Brand and motion designer"
      location="Lisbon"
      avatar="/people/lena.jpg"
      skills={["Motion", "Branding", "3D", "Prototyping"]}
      stats={[
        { label: "Followers", value: 12480 },
        { label: "Projects", value: 86 },
        { label: "Rating", value: 4.9, decimals: 1 },
      ]}
      onFollowChange={(on) => setFollowing(on)}
    />
  );
}

Props

Prop	Type	Default	Description
name	string	"Lena Hartmann"	Name, with an optional verified badge
role	string	"Brand and motion designer"	Role under the name
location	string \	null	"Lisbon"	Place with a pin; null hides it
bio	string	a short bio	One or two lines about them
avatar	string	a sample portrait	Portrait URL
verified	boolean	true	Shows the verified badge
status	string \	null	"Available"	Pill on the cover; null hides it
skills	string[]	six skills	First three show; the rest open from a "+n" chip
stats	{ label; value; decimals?; compact? }[]	followers, projects, rating	Three numbers; the first ticks up on Follow
cover	[string, string, string]	peach, lilac, sky	Pastel colours for the cover's aurora
defaultFollowing	boolean	false	Following at first
onFollowChange	(following) => void		Called when Follow is pressed
onMessage	() => void		Called when Message is pressed
onSaveChange	(saved) => void		Called when the bookmark is pressed
className	string		Placement

More cards

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.
Flux card: A feature card on a pixelated, dithered gradient with a negative magnetic field: squares flee the pointer and leave a hole that follows it.

All animated react card components