"use client"; import { useState } from "react"; import { AnimatePresence, motion, useMotionValue, useSpring, useTransform, } from "framer-motion"; import { cn } from "@/lib/utils"; export type TooltipPerson = { id: string; name: string; role: string; initials: string; /** [from, to] used for the avatar gradient + tooltip accent dot. */ gradient: [string, string]; }; const SPRING = { stiffness: 280, damping: 20, mass: 0.6 } 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 Avatar({ person, index }: { person: TooltipPerson; index: number }) { const [hovered, setHovered] = useState(false); // Cursor position across the avatar (-0.5 … 0.5), drives the tilt. const px = useMotionValue(0); const rotate = useSpring(useTransform(px, [-0.5, 0.5], [-16, 16]), SPRING); const nudgeX = useSpring(useTransform(px, [-0.5, 0.5], [-12, 12]), SPRING); function onMove(e: React.MouseEvent) { const rect = e.currentTarget.getBoundingClientRect(); px.set((e.clientX - rect.left) / rect.width - 0.5); } // Idle bob so the row reads as alive/interactive even in a static preview. const bobDelay = Math.round(seed(index) * 1600) / 1000; const bobDur = 2.8 + Math.round(seed(index + 7) * 900) / 1000; const [from, to] = person.gradient; return (

{/* Tooltip, centered above the avatar; wrapper is centered without a transform so the inner motion element owns rotate/x cleanly. */}

{hovered && ( {/* accent hairline */}

{person.name}

{person.role}

{/* notch */} )}

setHovered(true)} onMouseLeave={() => { setHovered(false); px.set(0); }} animate={{ y: [0, -6, 0] }} transition={{ duration: bobDur, repeat: Infinity, ease: "easeInOut", delay: bobDelay, }} whileHover={{ scale: 1.14 }} whileTap={{ scale: 1.05 }} className="relative block cursor-pointer rounded-full outline-none" aria-label={`${person.name}, ${person.role}`} > {/* soft glow that blooms on hover */} {/* inner sheen */} {person.initials}

); } export function AnimatedTooltip({ people, className, extraCount, }: { people: TooltipPerson[]; className?: string; /** Optional trailing "+N" chip, e.g. for a larger roster. */ extraCount?: number; }) { return (

{people.map((person, i) => ( ))} {typeof extraCount === "number" && extraCount > 0 && (

+{extraCount}

)}

); } const TEAM: TooltipPerson[] = [ { id: "ava", name: "Ava Chen", role: "Staff Design Engineer", initials: "AC", gradient: ["#7c6cff", "#5b8cff"], }, { id: "marcus", name: "Marcus Reyes", role: "Head of Growth", initials: "MR", gradient: ["#ff6b9d", "#ff9f6b"], }, { id: "priya", name: "Priya Nair", role: "Principal ML Researcher", initials: "PN", gradient: ["#4fd1c5", "#5b8cff"], }, { id: "leo", name: "Leo Fontaine", role: "Founding Engineer", initials: "LF", gradient: ["#a78bfa", "#7c6cff"], }, { id: "sofia", name: "Sofia Almeida", role: "Product Lead", initials: "SA", gradient: ["#f6c453", "#ff8a5b"], }, ]; export default function Demo() { return (

The people behind it

Built by a small, obsessive team

Hover a face to meet them.

); }

Animated Tooltip

Built by a small, obsessive team