52: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 53: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 54:T2c7b,"use client"; import { useEffect, useState } from "react"; import Image from "next/image"; import Link from "next/link"; import { animate, motion, useMotionValue, useReducedMotion, useTransform, type PanInfo, } from "motion/react"; import { ArrowRight, ChevronLeft, ChevronRight } from "lucide-react"; import { cn } from "@/lib/utils"; export type CaseStudy = { /** Small mark above the title, e.g. a client logo or a category. */ brand: React.ReactNode; title: string; description: React.ReactNode; href: string; image: { src: string; alt: string }; stats: { value: string; label: string }[]; }; export type CaseStudyCarouselProps = Omit, "title"> & { items: CaseStudy[]; eyebrow?: React.ReactNode; /** Number shown before the eyebrow, e.g. "06". */ index?: string; title?: React.ReactNode; cta?: { label: string; href: string }; readMoreLabel?: string; /** Any CSS color for the active dot and focus rings. */ accent?: string; }; const SLIDE = { type: "spring", duration: 0.6, bounce: 0.15 } as const; // A swipe counts once it's far enough, or quick enough. const SWIPE_DISTANCE = 60; const SWIPE_VELOCITY = 400; export function CaseStudyCarousel({ items, eyebrow = "Case Studies", index, title = "What We've Built", cta, readMoreLabel = "Read More", accent = "#0A6EFF", className, style, ...props }: CaseStudyCarouselProps) { const reduceMotion = useReducedMotion(); const [active, setActive] = useState(0); const count = items.length; const go = (step: number) => setActive((current) => (current + step + count) % count); // Shortest signed distance from the active card, wrapping around the ends. const offsetOf = (i: number) => { let offset = (i - active) % count; if (offset > count / 2) offset -= count; if (offset < -count / 2) offset += count; return offset; }; const handlePanEnd = (_: PointerEvent, info: PanInfo) => { if (info.offset.x < -SWIPE_DISTANCE || info.velocity.x < -SWIPE_VELOCITY) go(1); else if (info.offset.x > SWIPE_DISTANCE || info.velocity.x > SWIPE_VELOCITY) go(-1); }; return (

{index && {index}} {eyebrow}

{title}

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

{item.brand}

{item.title}

{item.description}

{readMoreLabel}

{stat.label}: {stat.value}

); })} go(-1)} /> go(1)} />

{items.map((item, i) => ( ))}

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

{cta && (

{cta.label}

)}

); } // One animated value drives everything about a card's place in the stack: its slide, // scale, veil and stacking order. Because z-index comes from the same value, cards swap // layers exactly as they pass each other, instead of popping at the first frame. function CardShell({ offset, reduceMotion, onSelect, children, }: { offset: number; reduceMotion: boolean; onSelect: () => void; children: React.ReactNode; }) { const isActive = offset === 0; const position = useMotionValue(offset); useEffect(() => { const from = position.get(); // A card wrapping around the back would sweep across the front if animated; it's // hidden at both ends, so move it instantly instead. const wraps = Math.sign(from) !== Math.sign(offset) && from !== 0 && offset !== 0 && Math.max(Math.abs(from), Math.abs(offset)) >= 2; if (reduceMotion || wraps) { position.jump(offset); return; } const controls = animate(position, offset, SLIDE); return () => controls.stop(); }, [offset, position, reduceMotion]); const distance = useTransform(position, (value) => Math.abs(value)); const transform = useTransform(position, (value) => { const d = Math.abs(value); // 1 at the centre, 0.84 for neighbours, 0.7 for cards waiting behind. const scale = d <= 1 ? 1 - 0.16 * d : Math.max(0.7, 0.84 - 0.14 * (d - 1)); return `translateX(${value * 22}%) scale(${scale})`; }); // Cards stay opaque (so they never show through each other); only those beyond the // neighbours fade out, and neighbours are lightened with a white veil instead. const opacity = useTransform(distance, [1, 2], [1, 0]); const veil = useTransform(distance, [0, 1], [0, 0.55]); const zIndex = useTransform(distance, (d) => Math.round(100 - d * 10)); return ( {children} ); } function NavButton({ side, label, onClick }: { side: "left" | "right"; label: string; onClick: () => void }) { const Icon = side === "left" ? ChevronLeft : ChevronRight; return ( ); } 51:["$","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","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"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/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":"motion"}]]}]}]]}],["$","$L52",null,{"namespace":"@devsloka","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/registry/ui/case-study-carousel.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]