"use client"; import { useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { ArrowUpRight } from "lucide-react"; import { cn } from "@/lib/utils"; export type StackPerson = { id: string; name: string; role: string; initials: string; /** [from, to] used for the avatar gradient + label accent. */ gradient: [string, string]; }; const SPREAD_SPRING = { type: "spring", stiffness: 340, damping: 30, mass: 0.7 } as const; const LABEL_SPRING = { type: "spring", stiffness: 380, damping: 26 } as const; /** Deterministic 0..1 hash from an index, avoids Math.random hydration drift. */ function seed(i: number): number { return Math.abs(Math.sin((i + 1) * 12.9898) * 43758.5453) % 1; } function Face({ person, index, total, size, spread, expanded, active, onActivate, onRelease, }: { person: StackPerson; index: number; total: number; size: number; /** Extra horizontal travel, in px, applied when the stack expands. */ spread: number; expanded: boolean; active: boolean; onActivate: () => void; onRelease: () => void; }) { // Symmetric fan: items left of centre slide left, right of centre slide right, // so the group stays optically centred while it opens up. const mid = (total - 1) / 2; const spreadX = expanded ? Math.round((index - mid) * spread) : 0; // Staggered idle breathing so a static preview reads as alive/interactive. const bobDelay = Math.round(seed(index) * 1400) / 1000; const bobDur = 2.7 + Math.round(seed(index + 5) * 900) / 1000; const [from, to] = person.gradient; const font = Math.round(size * 0.3); return ( {/* Name label, centred above the avatar. */}

{active && (

{person.name}

{person.role}

)}

{/* soft bloom on the active face */} {person.initials} ); } export function AvatarStack({ people, overflowCount = 0, size = 56, className, }: { people: StackPerson[]; /** Trailing "+N" chip for the rest of the roster. */ overflowCount?: number; /** Avatar diameter in px. */ size?: number; className?: string; }) { const [expanded, setExpanded] = useState(false); const [activeId, setActiveId] = useState(null); const hasOverflow = overflowCount > 0; const total = people.length + (hasOverflow ? 1 : 0); const spread = Math.round(size * 0.5); const chipMid = (total - 1) / 2; const chipX = expanded ? Math.round((people.length - chipMid) * spread) : 0; return (

setExpanded(true)} onMouseLeave={() => { setExpanded(false); setActiveId(null); }} > {people.map((person, i) => ( setActiveId(person.id)} onRelease={() => setActiveId((cur) => (cur === person.id ? null : cur))} /> ))} {hasOverflow && ( +{overflowCount} )}

); } const TEAM: StackPerson[] = [ { id: "ava", name: "Ava Chen", role: "Design Engineer", initials: "AC", gradient: ["#7c6cff", "#5b8cff"] }, { id: "marcus", name: "Marcus Ito", role: "Infra Lead", initials: "MI", gradient: ["#22d3ee", "#6366f1"] }, { id: "priya", name: "Priya Nair", role: "Staff Product", initials: "PN", gradient: ["#f472b6", "#a855f7"] }, { id: "leo", name: "Leo Fontaine", role: "Founding Engineer", initials: "LF", gradient: ["#34d399", "#22d3ee"] }, { id: "sofia", name: "Sofia Almeida", role: "Growth", initials: "SA", gradient: ["#fbbf24", "#f97316"] }, ]; export default function Demo() { return (

{/* restrained brand wash, kept low so the accent stays sparing */}

Loved by builders

The team you would want on speed dial

Trusted by 2,000+ teams / See the wall

); }

Avatar Stack

The team you would want on speed dial