64: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"] 65: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"] 66:T51db,"use client"; import React, { useCallback, useEffect, useState } from "react"; import { motion } from "framer-motion"; // ========================================== // 1. INLINE HELPER UTILITY (cn) // ========================================== function cn(...classes: (string | boolean | undefined | null)[]): string { return classes.filter(Boolean).join(" "); } // ========================================== // 2. TYPES & INTERFACES // ========================================== export interface CardItem { id: string | number; caption: string; title: string; description: string; image: string; accentColor?: string; icon?: React.ReactNode; } export interface RollingCardStackProps extends React.HTMLAttributes { cards?: CardItem[]; autoPlay?: boolean; autoPlayInterval?: number; showDeviceToggle?: boolean; defaultDevice?: "desktop" | "mobile"; showPagination?: boolean; onCardChange?: (index: number, card: CardItem) => void; } // ========================================== // 3. INLINE ICONS // ========================================== const BuildingIcon = () => ( ); const CpuIcon = () => ( ); const ZapIcon = () => ( ); const WavesIcon = () => ( ); const ChevronLeftIcon = () => ( ); const ChevronRightIcon = () => ( ); const ArrowUpRightIcon = () => ( ); // ========================================== // 4. DEFAULT DATASET // ========================================== export const DEFAULT_CARDS: CardItem[] = [ { id: "spatial-design", caption: "Spatial Architecture", title: "Sculpting digital calm", description: "Craft intentional spaces through minimalist geometry, tactile typography, and harmonious micro-interactions.", image: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1600&q=85", accentColor: "text-orange-500", icon: , }, { id: "neural-intelligence", caption: "Neural Synthesis", title: "Autonomous creative engine", description: "Synthesize complex datasets into high-fidelity generative interfaces with ultra-low latency inference models.", image: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&w=1600&q=85", accentColor: "text-indigo-500", icon: , }, { id: "quantum-computing", caption: "Quantum Pipeline", title: "Pure algorithmic speed", description: "Accelerate mission-critical workflows with quantum-inspired parallel execution and effortless state caching.", image: "https://images.unsplash.com/photo-1634017839464-5c339ebe3cb4?auto=format&fit=crop&w=1600&q=85", accentColor: "text-sky-500", icon: , }, { id: "organic-materials", caption: "Fluid Dynamics", title: "Tactile motion & balance", description: "Experience natural kinetic inertia designed to mimic liquid viscosity and frictionless physics across every viewport.", image: "https://images.unsplash.com/photo-1579783900882-c0d3dad7b119?auto=format&fit=crop&w=1600&q=85", accentColor: "text-purple-500", icon: , }, ]; // ========================================== // 5. MAIN COMPONENT (Solid, Opaque, High-Contrast) // ========================================== export const RollingCardStack: React.FC = ({ cards = DEFAULT_CARDS, autoPlay = false, autoPlayInterval = 4000, showDeviceToggle = true, showPagination = true, defaultDevice = "desktop", onCardChange, className, ...props }) => { const [device, setDevice] = useState<"desktop" | "mobile">(defaultDevice); const [activeIndex, setActiveIndex] = useState(0); const [isHovered, setIsHovered] = useState(false); const [dragOffset, setDragOffset] = useState(0); const totalCards = cards.length; // One wrapping step, so an empty `cards` array cannot produce `% 0` -> NaN. const goTo = useCallback( (index: number) => { if (totalCards === 0) return; const next = ((index % totalCards) + totalCards) % totalCards; setActiveIndex(next); onCardChange?.(next, cards[next]); }, [cards, onCardChange, totalCards], ); const handleNext = useCallback( () => goTo(activeIndex + 1), [activeIndex, goTo], ); const handlePrev = useCallback( () => goTo(activeIndex - 1), [activeIndex, goTo], ); const handleCardClick = useCallback((index: number) => goTo(index), [goTo]); // Arrow keys are handled on the root element, not on `window`. A window // listener that calls preventDefault swallows arrow keys for the whole page — // scrolling, text inputs, selects — and two stacks on one page would both // advance from a single press. const handleKeyDown = useCallback( (event: React.KeyboardEvent) => { if (event.key === "ArrowRight" || event.key === "ArrowDown") { event.preventDefault(); handleNext(); } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") { event.preventDefault(); handlePrev(); } }, [handleNext, handlePrev], ); // Autoplay useEffect(() => { if (!autoPlay || isHovered || totalCards <= 1) return; const timer = setInterval(handleNext, autoPlayInterval); return () => clearInterval(timer); }, [autoPlay, autoPlayInterval, handleNext, isHovered, totalCards]); const isMobile = device === "mobile"; // Tiered Cascading Layout Offsets const desktopWidths = ["100%", "90%", "80%", "70%"]; const desktopOffsets = [0, 50, 100, 150]; const mobileWidths = ["100%", "92%", "84%", "76%"]; const mobileOffsets = [0, 42, 84, 126]; const springConfig = { type: "spring" as const, stiffness: 380, damping: 30, mass: 0.75, }; return (

{/* Device Switcher (Solid Opaque Pill) */} {showDeviceToggle && (

{/* Sliding Pill Indicator */}

)} {/* Card Stage Wrapper (Fixed Height - Stationary Toggle Anchor) */}

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} className="relative flex items-center justify-center w-full transition-all duration-300" style={{ width: isMobile ? "320px" : "800px", maxWidth: isMobile ? "92vw" : "800px", height: "545px", }} > {cards.map((card, index) => { const relativePosition = (index - activeIndex + totalCards) % totalCards; const zIndex = totalCards - relativePosition; const widthPercent = isMobile ? mobileWidths[relativePosition] : desktopWidths[relativePosition]; const yOffset = isMobile ? mobileOffsets[relativePosition] : desktopOffsets[relativePosition]; const isTop = relativePosition === 0; return ( handleCardClick(index)} drag={isTop ? "x" : false} dragConstraints={{ left: 0, right: 0 }} dragElastic={0.4} onDrag={(_, info) => { if (isTop) setDragOffset(info.offset.x); }} onDragEnd={(_, info) => { setDragOffset(0); if (info.offset.x < -80 || info.velocity.x < -400) { handleNext(); } else if (info.offset.x > 80 || info.velocity.x > 400) { handlePrev(); } }} layout="position" initial={false} animate={{ y: -yOffset, width: widthPercent, rotate: isTop ? dragOffset * 0.04 : 0, zIndex: zIndex, opacity: 1, }} whileHover={ !isTop ? { y: -yOffset - 8, transition: { type: "spring", stiffness: 450, damping: 25 }, } : {} } whileTap={isTop ? { scale: 0.99 } : { scale: 0.98 }} transition={springConfig} style={{ position: "absolute", bottom: 0, left: 0, right: 0, margin: "0 auto", transformOrigin: "bottom center", willChange: "transform, width", }} className={cn( "rounded-2xl bg-[#FFFFFF] shadow-[0_12px_40px_rgba(0,0,0,0.08),0_2px_6px_rgba(0,0,0,0.04)] border border-[#E5E5E0] overflow-hidden group", isTop ? "cursor-grab active:cursor-grabbing" : "cursor-pointer", isMobile ? "h-[390px]" : "h-auto" )} > {/* Card Header Container (Solid Opaque Header) */}

{card.icon}

{card.caption}

0{index + 1}

{/* Card Content Body */}

{/* Text Section */}

{card.title}

{card.description}

{/* Explore Action Link */} {!isMobile && (

Explore concept

)}

{/* Image Section */}

); })}

{/* Footer Pagination Controls */} {showPagination && (

{/* Step Indicators */}

{cards.map((_, i) => ( ))}

{/* Navigation Buttons */}

)}

); }; export default RollingCardStack;63:["$","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","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"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L64",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],null]}],["$","$L65",null,{"files":[{"path":"registry/default/example/rolling-card-stack.tsx","content":"$66","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]