Orbit Card Stack

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { ArrowUpRight } from "lucide-react";
5import { useReducedMotion } from "framer-motion";
6import {
7  type CSSProperties,
8  type FocusEvent,
9  useMemo,
10  useRef,
11  useState,
12} from "react";
13 
14export interface OrbitStackItem {
15  name: string;
16  role: string;
17  description: string;
18  accent?: string;
19  initials?: string;
20  stat?: string;
21  image?: string;
22}
23 
24interface OrbitCardStackProps {
25  items?: OrbitStackItem[];
26  className?: string;
27  cardClassName?: string;
28  defaultActiveIndex?: number;
29  spread?: number;
30  lift?: number;
31  onActiveChange?: (item: OrbitStackItem, index: number) => void;
32}
33 
34const defaultItems: OrbitStackItem[] = [
35  {
36    name: "Mira Vale",
37    role: "Creative Lead",
38    description:
39      "Shapes visual systems with enough restraint to feel expensive and enough edge to be remembered.",
40    accent: "#f8d66d",
41    initials: "MV",
42    stat: "Identity",
43    image: "/images/orbit-card-stack/mira-vale.png",
44  },
45  {
46    name: "Noor Kade",
47    role: "Product Strategy",
48    description:
49      "Turns loose ideas into sharp product moves, crisp priorities, and launchable experiences.",
50    accent: "#78dcca",
51    initials: "NK",
52    stat: "Roadmap",
53    image: "/images/orbit-card-stack/noor-kade.png",
54  },
55  {
56    name: "Ari Chen",
57    role: "Founder",
58    description:
59      "Sets the taste bar, protects the details, and keeps the whole team pointed at the same high signal.",
60    accent: "#f3f1ea",
61    initials: "AC",
62    stat: "Vision",
63    image: "/images/orbit-card-stack/ari-chen.png",
64  },
65  {
66    name: "Sana Holt",
67    role: "Frontend Engineer",
68    description:
69      "Builds the motion, polish, and interface texture that make the product feel calm under pressure.",
70    accent: "#b9a7ff",
71    initials: "SH",
72    stat: "Motion",
73    image: "/images/orbit-card-stack/sana-holt.png",
74  },
75  {
76    name: "Ezra Moon",
77    role: "Operations",
78    description:
79      "Keeps the machine quiet, the handoffs clean, and the team moving without pointless friction.",
80    accent: "#ff9d77",
81    initials: "EM",
82    stat: "Systems",
83    image: "/images/orbit-card-stack/ezra-moon.png",
84  },
85];
86 
87function inRange(index: number, length: number) {
88  return Math.min(Math.max(0, index), Math.max(0, length - 1));
89}
90 
91function initialsFor(item: OrbitStackItem) {
92  return (
93    item.initials ??
94    item.name
95      .split(/\s+/)
96      .map((part) => part.at(0))
97      .join("")
98      .slice(0, 2)
99      .toUpperCase()
100// … truncated