GodUIGodUI
109Follow on X

Crafted by design engineers

ALGHATKJLC

Animated Tooltip

tsx
import { AnimatedTooltip } from "@/components/godui/animated-tooltip";const team = [{ name: "Ada Lovelace", role: "Design Engineer", initials: "AL", gradient: "from-indigo-500 to-violet-500" },{ name: "Grace Hopper", role: "Staff Engineer", initials: "GH", gradient: "from-rose-500 to-orange-500" },{ name: "Alan Turing", role: "Founder", initials: "AT", gradient: "from-emerald-500 to-teal-500" },];export function TeamStack() {return (  <div className="flex">    {team.map((m) => (      <AnimatedTooltip        key={m.name}        className="-ml-3 first:ml-0"        content={<span className="flex flex-col"><span className="font-semibold">{m.name}</span><span className="text-background/70">{m.role}</span></span>}      >        <span className={`flex size-12 items-center justify-center rounded-full bg-gradient-to-br ${m.gradient} text-sm font-semibold text-white ring-2 ring-background`}>          {m.initials}        </span>      </AnimatedTooltip>    ))}  </div>);}