2d:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2e:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2f:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 30:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 31:T1a61,"use client"; import { useEffect, useState } from "react"; import { animate, motion, useMotionValue, useReducedMotion, useTransform, type MotionValue, type PanInfo } from "motion/react"; import { Badge } from "@/components/ui/badge"; import { cn } from "@/lib/utils"; import type { Product } from "../../../lib/commerce/types"; import { cheapestVariant, formatMoney } from "../../../lib/commerce/select"; import { ProductPicture } from "../../ui/_kit/product-picture"; import { defaultProductHref, type ProductHref } from "../../ui/_kit/types"; export type CoverflowDragProps = { products: Product[]; productHref?: ProductHref; /** px of drag travel that advances one card. */ dragDist?: number; /** Horizontal px between neighboring cards. */ xOffset?: number; /** Vertical px dropped per step away from center. */ yOffset?: number; /** Scale lost per step away from center. */ scaleStep?: number; /** Dim overlay ceiling on side cards. */ overlayMax?: number; /** Snap spring bounce. */ bounce?: number; /** Snap spring duration in seconds. */ duration?: number; onActiveChange?: (index: number) => void; className?: string; }; function wrappedDist(i: number, cx: number, dragDist: number, n: number) { let d = (i * dragDist + cx) / dragDist; d = ((d % n) + n) % n; if (d > n / 2) d -= n; return d; } /** * Draggable looping coverflow of products. The front card stays big and bright * while the rest shrink, drop, and dim; release spring-snaps to the nearest card. */ export function CoverflowDrag({ products, productHref = defaultProductHref, dragDist = 200, xOffset = 130, yOffset = 20, scaleStep = 0.15, overlayMax = 1.0, bounce = 0.3, duration = 0.5, onActiveChange, className, }: CoverflowDragProps) { const reduceMotion = useReducedMotion() ?? false; const containerX = useMotionValue(0); const n = products.length; const [active, setActive] = useState(0); useEffect(() => { if (n === 0) return; const unsub = containerX.on("change", (cx) => { let best = 0; let bestAbs = Infinity; for (let i = 0; i < n; i++) { const a = Math.abs(wrappedDist(i, cx, dragDist, n)); if (a < bestAbs) { bestAbs = a; best = i; } } setActive((prev) => { if (prev !== best) onActiveChange?.(best); return prev === best ? prev : best; }); }); return unsub; }, [containerX, n, dragDist, onActiveChange]); if (n === 0) return null; const handleDragEnd = (_: unknown, info: PanInfo) => { const currentX = containerX.get(); const predictedX = reduceMotion ? currentX : currentX + info.velocity.x * 0.2; const nearestMultiple = Math.round(predictedX / dragDist) * dragDist; if (reduceMotion) { containerX.set(nearestMultiple); return; } animate(containerX, nearestMultiple, { type: "spring", bounce, duration }); }; const front = products[((active % n) + n) % n]; const frontPrice = front.variants.length > 0 ? cheapestVariant(front) : undefined; return (

{products.map((product, i) => ( ))}

{front.title} {frontPrice ? ( {formatMoney(frontPrice.price)} ) : ( Coming soon )}

); } function Card({ i, n, product, href, containerX, dragDist, xOffset, yOffset, scaleStep, overlayMax, }: { i: number; n: number; product: Product; href: string; containerX: MotionValue; dragDist: number; xOffset: number; yOffset: number; scaleStep: number; overlayMax: number; }) { const x = useTransform(containerX, (cx) => wrappedDist(i, cx, dragDist, n) * xOffset - cx); const y = useTransform(containerX, (cx) => Math.abs(wrappedDist(i, cx, dragDist, n)) * yOffset); const scale = useTransform(containerX, (cx) => Math.max(0, 1 - Math.abs(wrappedDist(i, cx, dragDist, n)) * scaleStep)); const zIndex = useTransform(containerX, (cx) => 100 - Math.round(Math.abs(wrappedDist(i, cx, dragDist, n)) * 10)); // Fade cards out between distance 2 and 3 so the wrap never pops during bounce. const opacity = useTransform(containerX, (cx) => Math.max(0, Math.min(1, 3 - Math.abs(wrappedDist(i, cx, dragDist, n))))); const overlayOpacity = useTransform(containerX, (cx) => Math.min(overlayMax, Math.abs(wrappedDist(i, cx, dragDist, n)) * 0.2)); const borderOpacity = useTransform(containerX, (cx) => Math.max(0, 1 - Math.abs(wrappedDist(i, cx, dragDist, n)) * 2)); return ( ); } export default CoverflowDrag; 32:T529,"use client"; import { useState } from "react"; import { DemoPage, DemoSection, DemoGrid, DemoCell } from "../../_shared/variant-frame"; import { productFixture } from "../../../lib/commerce/fixtures/product"; import { CoverflowDrag } from "./coverflow-drag"; export function CoverflowDragDemo({ brand }: { brand?: string }) { const fx = productFixture(brand); const products = fx.products.slice(0, 7); const [active, setActive] = useState(0); return ( ); } export default CoverflowDragDemo; 33:T706,import type { BlockMeta } from "../../../lib/block-meta"; export const coverflowDragMeta: BlockMeta = { slug: "coverflow-drag", title: "Coverflow drag", description: "Draggable looping coverflow of products: the front card stays big and bright while the rest shrink, drop, and dim. Release snap-snaps to the nearest card with a live title and price.", group: "gallery", kobraDeps: ["badge"], files: [ "blocks/gallery/coverflow-drag/coverflow-drag.tsx", ], props: [ { name: "products", type: "Product[]", description: "Products in deck order; wraps infinitely." }, { name: "productHref", type: "(product: Product) => string", default: "defaultProductHref", description: "Where a card links." }, { name: "dragDist", type: "number", default: "200", description: "px of drag travel that advances one card." }, { name: "xOffset", type: "number", default: "130", description: "Horizontal px between neighboring cards." }, { name: "yOffset", type: "number", default: "20", description: "Vertical px dropped per step from center." }, { name: "scaleStep", type: "number", default: "0.15", description: "Scale lost per step from center." }, { name: "overlayMax", type: "number", default: "1", description: "Dim overlay ceiling on side cards." }, { name: "bounce", type: "number", default: "0.3", description: "Snap spring bounce." }, { name: "duration", type: "number", default: "0.5", description: "Snap spring duration in seconds." }, { name: "onActiveChange", type: "(index: number) => void", description: "Fires when the front card changes." }, ], tags: ["coverflow", "carousel", "drag", "products"], status: "ready", origin: { name: "uselayouts", url: "https://uselayouts.com/docs/components/coverflow-drag", license: "MIT" }, }; 24:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/#gallery","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Gallery"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Coverflow drag"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Coverflow drag"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"Draggable looping coverflow of products: the front card stays big and bright while the rest shrink, drop, and dim. Release snap-snaps to the nearest card with a live title and price."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"coverflow-drag","group":"gallery","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/gallery/coverflow-drag/coverflow-drag.tsx","code":"$31"},{"path":"blocks/gallery/coverflow-drag/demo.tsx","code":"$32"},{"path":"blocks/gallery/coverflow-drag/meta.ts","code":"$33"}]}],"props":"$L34"}],"$L35"]}]