{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "orbit-card-stack", "type": "registry:ui", "title": "Orbit Card Stack", "dependencies": [ "framer-motion", "lucide-react" ], "devDependencies": [], "registryDependencies": [], "description": "Premium hover card deck that fans outward and lifts the active card without changing its color or angle.", "files": [ { "path": "components/ui/orbit-card-stack.tsx", "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { ArrowUpRight } from \"lucide-react\";\nimport { useReducedMotion } from \"framer-motion\";\nimport {\n type CSSProperties,\n type FocusEvent,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nexport interface OrbitStackItem {\n name: string;\n role: string;\n description: string;\n accent?: string;\n initials?: string;\n stat?: string;\n image?: string;\n}\n\ninterface OrbitCardStackProps {\n items?: OrbitStackItem[];\n className?: string;\n cardClassName?: string;\n defaultActiveIndex?: number;\n spread?: number;\n lift?: number;\n onActiveChange?: (item: OrbitStackItem, index: number) => void;\n}\n\nconst defaultItems: OrbitStackItem[] = [\n {\n name: \"Mira Vale\",\n role: \"Creative Lead\",\n description:\n \"Shapes visual systems with enough restraint to feel expensive and enough edge to be remembered.\",\n accent: \"#f8d66d\",\n initials: \"MV\",\n stat: \"Identity\",\n image: \"/images/orbit-card-stack/mira-vale.png\",\n },\n {\n name: \"Noor Kade\",\n role: \"Product Strategy\",\n description:\n \"Turns loose ideas into sharp product moves, crisp priorities, and launchable experiences.\",\n accent: \"#78dcca\",\n initials: \"NK\",\n stat: \"Roadmap\",\n image: \"/images/orbit-card-stack/noor-kade.png\",\n },\n {\n name: \"Ari Chen\",\n role: \"Founder\",\n description:\n \"Sets the taste bar, protects the details, and keeps the whole team pointed at the same high signal.\",\n accent: \"#f3f1ea\",\n initials: \"AC\",\n stat: \"Vision\",\n image: \"/images/orbit-card-stack/ari-chen.png\",\n },\n {\n name: \"Sana Holt\",\n role: \"Frontend Engineer\",\n description:\n \"Builds the motion, polish, and interface texture that make the product feel calm under pressure.\",\n accent: \"#b9a7ff\",\n initials: \"SH\",\n stat: \"Motion\",\n image: \"/images/orbit-card-stack/sana-holt.png\",\n },\n {\n name: \"Ezra Moon\",\n role: \"Operations\",\n description:\n \"Keeps the machine quiet, the handoffs clean, and the team moving without pointless friction.\",\n accent: \"#ff9d77\",\n initials: \"EM\",\n stat: \"Systems\",\n image: \"/images/orbit-card-stack/ezra-moon.png\",\n },\n];\n\nfunction inRange(index: number, length: number) {\n return Math.min(Math.max(0, index), Math.max(0, length - 1));\n}\n\nfunction initialsFor(item: OrbitStackItem) {\n return (\n item.initials ??\n item.name\n .split(/\\s+/)\n .map((part) => part.at(0))\n .join(\"\")\n .slice(0, 2)\n .toUpperCase()\n );\n}\n\nfunction Portrait({ item }: { item: OrbitStackItem }) {\n const initials = initialsFor(item);\n const shared =\n \"relative flex aspect-[1.36] w-full overflow-hidden rounded-[1.45rem] border border-black/[0.08] bg-black/[0.045]\";\n\n if (item.image) {\n return (\n
\n \n \n {initials}\n \n
\n );\n }\n\n return (\n \n
\n
\n
\n \n \n \n \n
\n \n {initials}\n \n
\n );\n}\n\nexport function OrbitCardStack({\n items = defaultItems,\n className,\n cardClassName,\n defaultActiveIndex = 2,\n spread = 168,\n lift = 34,\n onActiveChange,\n}: OrbitCardStackProps) {\n const reduceMotion = useReducedMotion() ?? false;\n const cards = items.length ? items : defaultItems;\n const restingIndex = inRange(defaultActiveIndex, cards.length);\n const [activeIndex, setActiveIndex] = useState(restingIndex);\n const [open, setOpen] = useState(false);\n const stageRef = useRef(null);\n const midpoint = (cards.length - 1) / 2;\n\n const layouts = useMemo(\n () =>\n cards.map((_, index) => {\n const orbit = index - midpoint;\n const stack = index - restingIndex;\n return {\n open: {\n x: orbit * spread,\n y: Math.abs(orbit) * 30 + Math.max(0, Math.abs(orbit) - 1) * 10,\n rotation: orbit * 8.5,\n },\n closed: {\n x: stack * 10,\n y: Math.abs(stack) * 5,\n rotation: stack * 2.8,\n },\n };\n }),\n [cards, midpoint, restingIndex, spread],\n );\n\n const activate = (index: number) => {\n const next = inRange(index, cards.length);\n setOpen(true);\n setActiveIndex(next);\n onActiveChange?.(cards[next]!, next);\n };\n const close = () => {\n setOpen(false);\n setActiveIndex(restingIndex);\n };\n const leaveFocus = (event: FocusEvent) => {\n if (!event.currentTarget.contains(event.relatedTarget)) close();\n };\n\n return (\n \n \n {cards.map((item, index) => {\n const position = open ? layouts[index]!.open : layouts[index]!.closed;\n const active = index === activeIndex;\n const style: CSSProperties = {\n zIndex: active ? 80 : 50 - Math.abs(index - activeIndex),\n transform: `translate(calc(-50% + ${position.x}px), calc(-50% + ${\n position.y - (open && active ? lift : 0)\n }px)) rotate(${position.rotation}deg) scale(${open ? 0.985 : 0.97})`,\n transitionDuration: reduceMotion ? \"0ms\" : \"420ms\",\n };\n\n return (\n activate(index)}\n onFocus={() => activate(index)}\n onClick={() => activate(index)}\n onKeyDown={(event) => {\n if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n event.preventDefault();\n const next = (index + 1) % cards.length;\n activate(next);\n stageRef.current\n ?.querySelectorAll(\"[role=listitem]\")\n [next]?.focus();\n }\n if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n event.preventDefault();\n const next = (index - 1 + cards.length) % cards.length;\n activate(next);\n stageRef.current\n ?.querySelectorAll(\"[role=listitem]\")\n [next]?.focus();\n }\n if (event.key === \"Escape\") {\n event.currentTarget.blur();\n close();\n }\n }}\n >\n
\n \n \n \n \n
\n
\n

\n {item.role}\n

\n

\n {item.name}\n

\n

\n {item.description}\n

\n
\n {item.stat ?? \"Profile\"}\n
\n
\n \n );\n })}\n
\n \n );\n}\n", "type": "registry:ui" } ] }