{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "case-study-carousel", "type": "registry:ui", "title": "Case Study Carousel", "description": "A stacked case-study carousel with peeking neighbours, arrows, dots, swipe and keyboard support.", "files": [ { "path": "src/registry/ui/case-study-carousel.tsx", "type": "registry:ui", "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport {\n animate,\n motion,\n useMotionValue,\n useReducedMotion,\n useTransform,\n type PanInfo,\n} from \"motion/react\";\nimport { ArrowRight, ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type CaseStudy = {\n /** Small mark above the title, e.g. a client logo or a category. */\n brand: React.ReactNode;\n title: string;\n description: React.ReactNode;\n href: string;\n image: { src: string; alt: string };\n stats: { value: string; label: string }[];\n};\n\nexport type CaseStudyCarouselProps = Omit, \"title\"> & {\n items: CaseStudy[];\n eyebrow?: React.ReactNode;\n /** Number shown before the eyebrow, e.g. \"06\". */\n index?: string;\n title?: React.ReactNode;\n cta?: { label: string; href: string };\n readMoreLabel?: string;\n /** Any CSS color for the active dot and focus rings. */\n accent?: string;\n};\n\nconst SLIDE = { type: \"spring\", duration: 0.6, bounce: 0.15 } as const;\n// A swipe counts once it's far enough, or quick enough.\nconst SWIPE_DISTANCE = 60;\nconst SWIPE_VELOCITY = 400;\n\nexport function CaseStudyCarousel({\n items,\n eyebrow = \"Case Studies\",\n index,\n title = \"What We've Built\",\n cta,\n readMoreLabel = \"Read More\",\n accent = \"#0A6EFF\",\n className,\n style,\n ...props\n}: CaseStudyCarouselProps) {\n const reduceMotion = useReducedMotion();\n const [active, setActive] = useState(0);\n const count = items.length;\n const go = (step: number) => setActive((current) => (current + step + count) % count);\n\n // Shortest signed distance from the active card, wrapping around the ends.\n const offsetOf = (i: number) => {\n let offset = (i - active) % count;\n if (offset > count / 2) offset -= count;\n if (offset < -count / 2) offset += count;\n return offset;\n };\n\n const handlePanEnd = (_: PointerEvent, info: PanInfo) => {\n if (info.offset.x < -SWIPE_DISTANCE || info.velocity.x < -SWIPE_VELOCITY) go(1);\n else if (info.offset.x > SWIPE_DISTANCE || info.velocity.x > SWIPE_VELOCITY) go(-1);\n };\n\n return (\n \n
\n \n {index && {index}}\n \n {eyebrow}\n \n

{title}

\n
\n\n {\n if (event.key === \"ArrowRight\") go(1);\n else if (event.key === \"ArrowLeft\") go(-1);\n }}\n className=\"relative mx-auto mt-12 max-w-5xl rounded-[2rem] outline-none focus-visible:ring-2 focus-visible:ring-[var(--case-accent)]\"\n >\n {/* All cards share one grid cell, so the stage is as tall as the tallest card. */}\n {/* isolate: the cards' z-indexes stay inside this stack, so the arrows always sit above it. */}\n \n {items.map((item, i) => {\n const offset = offsetOf(i);\n return (\n go(offset)}\n >\n
\n {item.image.alt}\n
\n
\n
{item.brand}
\n

{item.title}

\n

{item.description}

\n \n {readMoreLabel}\n \n \n \n \n
\n {item.stats.map((stat) => (\n // Number shown above its label; top-aligned so numbers line up when a label wraps.\n
\n
{stat.label}
\n
{stat.value}
\n
\n ))}\n
\n
\n \n );\n })}\n \n\n go(-1)} />\n go(1)} />\n \n\n
\n {items.map((item, i) => (\n setActive(i)}\n aria-label={`Show ${item.title}`}\n aria-current={i === active ? \"true\" : undefined}\n className=\"group flex h-11 min-w-6 cursor-pointer items-center justify-center outline-none\"\n >\n \n \n ))}\n
\n

\n {`Case study ${active + 1} of ${count}: ${items[active]?.title}`}\n

\n\n {cta && (\n
\n \n {cta.label}\n \n
\n )}\n \n );\n}\n\n// One animated value drives everything about a card's place in the stack: its slide,\n// scale, veil and stacking order. Because z-index comes from the same value, cards swap\n// layers exactly as they pass each other, instead of popping at the first frame.\nfunction CardShell({\n offset,\n reduceMotion,\n onSelect,\n children,\n}: {\n offset: number;\n reduceMotion: boolean;\n onSelect: () => void;\n children: React.ReactNode;\n}) {\n const isActive = offset === 0;\n const position = useMotionValue(offset);\n\n useEffect(() => {\n const from = position.get();\n // A card wrapping around the back would sweep across the front if animated; it's\n // hidden at both ends, so move it instantly instead.\n const wraps = Math.sign(from) !== Math.sign(offset) && from !== 0 && offset !== 0 && Math.max(Math.abs(from), Math.abs(offset)) >= 2;\n if (reduceMotion || wraps) {\n position.jump(offset);\n return;\n }\n const controls = animate(position, offset, SLIDE);\n return () => controls.stop();\n }, [offset, position, reduceMotion]);\n\n const distance = useTransform(position, (value) => Math.abs(value));\n const transform = useTransform(position, (value) => {\n const d = Math.abs(value);\n // 1 at the centre, 0.84 for neighbours, 0.7 for cards waiting behind.\n const scale = d <= 1 ? 1 - 0.16 * d : Math.max(0.7, 0.84 - 0.14 * (d - 1));\n return `translateX(${value * 22}%) scale(${scale})`;\n });\n // Cards stay opaque (so they never show through each other); only those beyond the\n // neighbours fade out, and neighbours are lightened with a white veil instead.\n const opacity = useTransform(distance, [1, 2], [1, 0]);\n const veil = useTransform(distance, [0, 1], [0, 0.55]);\n const zIndex = useTransform(distance, (d) => Math.round(100 - d * 10));\n\n return (\n \n {children}\n \n \n );\n}\n\nfunction NavButton({ side, label, onClick }: { side: \"left\" | \"right\"; label: string; onClick: () => void }) {\n const Icon = side === \"left\" ? ChevronLeft : ChevronRight;\n return (\n \n \n \n );\n}\n" } ], "dependencies": [ "lucide-react", "motion" ] }