Animated React card components
Team member card
A team member card with pixels burning up the photo like fire. Hover and they die down while the details slide out with animated social links.
Cards, hover and press, Motion
Install
npm i clsx motion tailwind-merge && curl -o components/team-member-card.tsx https://motion-brew.com/r/team-member-card.tsxOne self contained file for React and Tailwind CSS: team-member-card.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { TeamMemberCard } from "@/components/team-member-card";
export default function Team() {
return (
<TeamMemberCard
name="Maya Lindqvist"
role="Head of Design"
photo="/team/maya.jpg"
location="Stockholm"
timeZone="Europe/Stockholm"
socials={[
{ kind: "linkedin", href: "https://linkedin.com/in/maya" },
{ kind: "email", href: "mailto:maya@example.com" },
]}
/>
);
}Props
| Prop | Type | Default | Description | ||
|---|---|---|---|---|---|
| name | string | "Maya Lindqvist" | Name | ||
| role | string | "Head of Design" | Title | ||
| photo | string | a portrait | Photo URL | ||
| location | string | "Stockholm" | City shown with the local time | ||
| timeZone | string | "Europe/Stockholm" | IANA time zone for the live local time | ||
| bio | string | a short line | One or two lines about them | ||
| socials | { kind; href; label? }[] | X, LinkedIn, GitHub, Dribbble, email | Links; kind is x, linkedin, github, dribbble or email | ||
| pixels | boolean | true | Pixels burning up the photo, dying down on hover | ||
| pixelColor | string | "#ffffff" | Colour of the pixels | ||
| pixelSize | number | 6 | Pixel grid cell in px | ||
| pixelShape | "square" \ | "circle" \ | "diamond" | "square" | Pixel shape |
| pixelSpeed | number | 1 | Drift and shimmer speed | ||
| pixelArea | number | 1 | How high the flames reach | ||
| pixelDensity | number | 0.85 | How heavy the flames are | ||
| pixelOpacity | number | 1 | Overall strength of the pixels | ||
| pixelHover | number | 0.6 | How much of the field stays while hovered | ||
| defaultConnected | boolean | false | Start as connected | ||
| onConnect | (connected) => void | Called when Connect is toggled | |||
| className | string | Placement |
More cards
- Roadmap card: A product roadmap that plays like stories: the bar fills, the number rolls, the text blurs across and the milestones check in.
- Contour feature card: A browser window in front of a live topographic map.
- Live gradient card: A metric on a drifting mesh gradient, with a dot matrix number that morphs dot by dot.
- Integration hub: App tiles wired into one hub, with packets of dots flowing in along every wire.