61:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T2698,"use client"; import { cn } from "@/lib/utils"; import { ArrowUpRight } from "lucide-react"; import { useReducedMotion } from "framer-motion"; import { type CSSProperties, type FocusEvent, useMemo, useRef, useState, } from "react"; export interface OrbitStackItem { name: string; role: string; description: string; accent?: string; initials?: string; stat?: string; image?: string; } interface OrbitCardStackProps { items?: OrbitStackItem[]; className?: string; cardClassName?: string; defaultActiveIndex?: number; spread?: number; lift?: number; onActiveChange?: (item: OrbitStackItem, index: number) => void; } const defaultItems: OrbitStackItem[] = [ { name: "Mira Vale", role: "Creative Lead", description: "Shapes visual systems with enough restraint to feel expensive and enough edge to be remembered.", accent: "#f8d66d", initials: "MV", stat: "Identity", image: "/images/orbit-card-stack/mira-vale.png", }, { name: "Noor Kade", role: "Product Strategy", description: "Turns loose ideas into sharp product moves, crisp priorities, and launchable experiences.", accent: "#78dcca", initials: "NK", stat: "Roadmap", image: "/images/orbit-card-stack/noor-kade.png", }, { name: "Ari Chen", role: "Founder", description: "Sets the taste bar, protects the details, and keeps the whole team pointed at the same high signal.", accent: "#f3f1ea", initials: "AC", stat: "Vision", image: "/images/orbit-card-stack/ari-chen.png", }, { name: "Sana Holt", role: "Frontend Engineer", description: "Builds the motion, polish, and interface texture that make the product feel calm under pressure.", accent: "#b9a7ff", initials: "SH", stat: "Motion", image: "/images/orbit-card-stack/sana-holt.png", }, { name: "Ezra Moon", role: "Operations", description: "Keeps the machine quiet, the handoffs clean, and the team moving without pointless friction.", accent: "#ff9d77", initials: "EM", stat: "Systems", image: "/images/orbit-card-stack/ezra-moon.png", }, ]; function inRange(index: number, length: number) { return Math.min(Math.max(0, index), Math.max(0, length - 1)); } function initialsFor(item: OrbitStackItem) { return ( item.initials ?? item.name .split(/\s+/) .map((part) => part.at(0)) .join("") .slice(0, 2) .toUpperCase() ); } function Portrait({ item }: { item: OrbitStackItem }) { const initials = initialsFor(item); const shared = "relative flex aspect-[1.36] w-full overflow-hidden rounded-[1.45rem] border border-black/[0.08] bg-black/[0.045]"; if (item.image) { return (

{initials}

); } return (

{initials}

); } export function OrbitCardStack({ items = defaultItems, className, cardClassName, defaultActiveIndex = 2, spread = 168, lift = 34, onActiveChange, }: OrbitCardStackProps) { const reduceMotion = useReducedMotion() ?? false; const cards = items.length ? items : defaultItems; const restingIndex = inRange(defaultActiveIndex, cards.length); const [activeIndex, setActiveIndex] = useState(restingIndex); const [open, setOpen] = useState(false); const stageRef = useRef(null); const midpoint = (cards.length - 1) / 2; const layouts = useMemo( () => cards.map((_, index) => { const orbit = index - midpoint; const stack = index - restingIndex; return { open: { x: orbit * spread, y: Math.abs(orbit) * 30 + Math.max(0, Math.abs(orbit) - 1) * 10, rotation: orbit * 8.5, }, closed: { x: stack * 10, y: Math.abs(stack) * 5, rotation: stack * 2.8, }, }; }), [cards, midpoint, restingIndex, spread], ); const activate = (index: number) => { const next = inRange(index, cards.length); setOpen(true); setActiveIndex(next); onActiveChange?.(cards[next]!, next); }; const close = () => { setOpen(false); setActiveIndex(restingIndex); }; const leaveFocus = (event: FocusEvent) => { if (!event.currentTarget.contains(event.relatedTarget)) close(); }; return (

{cards.map((item, index) => { const position = open ? layouts[index]!.open : layouts[index]!.closed; const active = index === activeIndex; const style: CSSProperties = { zIndex: active ? 80 : 50 - Math.abs(index - activeIndex), transform: `translate(calc(-50% + ${position.x}px), calc(-50% + ${ position.y - (open && active ? lift : 0) }px)) rotate(${position.rotation}deg) scale(${open ? 0.985 : 0.97})`, transitionDuration: reduceMotion ? "0ms" : "420ms", }; return (

activate(index)} onFocus={() => activate(index)} onClick={() => activate(index)} onKeyDown={(event) => { if (event.key === "ArrowRight" || event.key === "ArrowDown") { event.preventDefault(); const next = (index + 1) % cards.length; activate(next); stageRef.current ?.querySelectorAll("[role=listitem]") [next]?.focus(); } if (event.key === "ArrowLeft" || event.key === "ArrowUp") { event.preventDefault(); const next = (index - 1 + cards.length) % cards.length; activate(next); stageRef.current ?.querySelectorAll("[role=listitem]") [next]?.focus(); } if (event.key === "Escape") { event.currentTarget.blur(); close(); } }} >

{item.role}

{item.name}

{item.description}

{item.stat ?? "Profile"}

); })}

); } 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"framer-motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L61",null,{"namespace":"@componentry","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"components/ui/orbit-card-stack.tsx","content":"$63","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]