4f: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/1o6_421saitt-.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"] 50: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/1o6_421saitt-.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"] 51:T1d6f,"use client"; /** * @author: @dorianbaffier * @description: Card Stack * @version: 1.1.0 * @date: 2025-06-26 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { motion, useReducedMotion } from "motion/react"; import Image from "next/image"; import { useState } from "react"; import { cn } from "@/lib/utils"; interface Specification { label: string; value: string; } interface Product { id: string; title: string; subtitle: string; description: string; image: string; specs: Specification[]; } const products: Product[] = [ { id: "instant-pay", title: "Quick Pay", subtitle: "Instant Transfers", description: "Move money in seconds with bank-grade security and zero surprises.", image: "/undraw.svg", specs: [ { label: "Speed", value: "Instant" }, { label: "Security", value: "256-bit" }, { label: "Limit", value: "$50,000" }, { label: "Fee", value: "0.5%" }, ], }, { id: "crypto-pay", title: "Crypto Pay", subtitle: "Web3 Payments", description: "Accept crypto across every major chain with optimized gas routing.", image: "https://images.unsplash.com/photo-1527443224154-c4a3942d3acf?w=800&auto=format&fit=crop&q=80", specs: [ { label: "Network", value: "Multi-chain" }, { label: "Gas", value: "Optimized" }, { label: "Support", value: "24/7" }, { label: "Security", value: "Top-tier" }, ], }, { id: "business-pay", title: "Business Pay", subtitle: "Enterprise Solutions", description: "Built for high-volume teams with custom APIs and premium support.", image: "https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?w=800&auto=format&fit=crop&q=80", specs: [ { label: "Volume", value: "Unlimited" }, { label: "API", value: "REST/SDK" }, { label: "Support", value: "Premium" }, { label: "Features", value: "Custom" }, ], }, { id: "global-pay", title: "Global Pay", subtitle: "International Transfers", description: "Send to 180+ countries with real-time FX and same-day settlement.", image: "https://images.unsplash.com/photo-1629131726692-1accd0c53ce0?w=800&auto=format&fit=crop&q=80", specs: [ { label: "Countries", value: "180+" }, { label: "FX Rate", value: "Real-time" }, { label: "Speed", value: "Same-day" }, { label: "Support", value: "Local" }, ], }, ]; const CARD_WIDTH = 320; const CARD_OVERLAP = 240; interface CardProps { product: Product; index: number; totalCards: number; isExpanded: boolean; reducedMotion: boolean; } const Card = ({ product, index, totalCards, isExpanded, reducedMotion, }: CardProps) => { const centerOffset = (totalCards - 1) * 5; const defaultX = index * 10 - centerOffset; const defaultY = index * 2; const defaultRotate = index * 1.5; const totalExpandedWidth = CARD_WIDTH + (totalCards - 1) * (CARD_WIDTH - CARD_OVERLAP); const expandedCenterOffset = totalExpandedWidth / 2; const spreadX = index * (CARD_WIDTH - CARD_OVERLAP) - expandedCenterOffset + CARD_WIDTH / 2; const spreadRotate = index * 5 - (totalCards - 1) * 2.5; const collapsedPose = { x: defaultX, y: defaultY, rotate: reducedMotion ? 0 : defaultRotate, scale: 1, }; const expandedPose = { x: spreadX, y: 0, rotate: reducedMotion ? 0 : spreadRotate, scale: 1, }; const isSvg = product.image.endsWith(".svg"); return (

{spec.value}
{spec.label}

{product.title} {product.subtitle}

{product.description}

); }; interface CardStackProps { className?: string; } export default function CardStackExample({ className }: CardStackProps) { const [isExpanded, setIsExpanded] = useState(false); const reducedMotion = useReducedMotion() ?? false; const handleToggle = () => setIsExpanded((prev) => !prev); return ( ); } 4e:["$","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"}]]}]}]]}],["$","$L4f",null,{"namespace":"@catalogs","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"/components/kokonutui/card-stack.tsx","content":"$51","type":"registry:component","target":"components/kokonutui/card-stack.tsx"}],"className":"h-[70svh] min-h-80"}]]}]