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:T2931,"use client"; import React, { useLayoutEffect, useRef, useState, type ReactNode } from "react"; import { useReducedMotion } from "motion/react"; import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; 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"; /** Snap-step in px: the visible advance per card after overlap and gap. */ export function sliderStep(cardWidth: number, overlapFactor: number, cardGap: number) { return Math.round(cardWidth - cardWidth * overlapFactor + cardGap); } /** Snap target for a drag release: velocity flicks one extra card, otherwise nearest. */ export function snapSliderIndex(offsetX: number, step: number, velocity: number, total: number) { if (total <= 1) return 0; let index = -offsetX / step; if (velocity < -350) index = Math.ceil(index); else if (velocity > 350) index = Math.floor(index); else index = Math.round(index); return Math.max(0, Math.min(index, total - 1)); } /** diff = index − activeExact. Cards to the left recede; the rest stay put. */ export function cardLeave(diff: number) { const t = Math.min(1, Math.max(0, -diff)); return { scale: 1 - t * 0.16, y: t * 36, rotate: 0, }; } export type OverlappingSliderProps = { items?: T[]; renderItem?: (item: T, index: number, isActive: boolean) => ReactNode; children?: ReactNode; cardWidth?: number; cardHeight?: number; overlapFactor?: number; cardGap?: number; maxRotation?: number; transformOrigin?: string; showDots?: boolean; showArrows?: boolean; className?: string; onActiveChange?: (index: number) => void; }; /** * Full-width draggable row of portrait cards. The card left behind scales back * and drops down; arrows, dots, drag, or tapping a card all move the track. * Generic over `T` — pass `items` + `renderItem`, or raw `children`. */ export function OverlappingSlider({ items, renderItem, children, cardWidth = 340, cardHeight = 460, overlapFactor = 0.04, cardGap = 18, maxRotation = 0, transformOrigin = "50% 90%", showDots = false, showArrows = true, className, onActiveChange, }: OverlappingSliderProps) { const reduceMotion = useReducedMotion() ?? false; const childArray = React.Children.toArray(children); const total = items ? items.length : childArray.length; const step = sliderStep(cardWidth, overlapFactor, cardGap); const [activeIndex, setActiveIndex] = useState(0); const trackRef = useRef(null); const offsetRef = useRef(0); const dragRef = useRef({ down: false, startX: 0, origin: 0, lastX: 0, lastT: 0, velocity: 0, moved: 0, }); const apply = (x: number, animate: boolean) => { offsetRef.current = x; const track = trackRef.current; if (!track) return; const transition = animate && !reduceMotion ? "transform 380ms cubic-bezier(0.22, 1, 0.36, 1)" : "none"; track.style.transition = transition; track.style.setProperty("--ox", `${x}px`); const activeExact = -x / step; for (let i = 0; i < track.children.length; i++) { const card = track.children[i] as HTMLElement; const diff = i - activeExact; const leave = cardLeave(diff); const rotate = maxRotation ? Math.min(Math.max(diff * 1.6, -maxRotation), maxRotation) : 0; card.style.transition = transition; card.style.zIndex = String(i); card.style.setProperty("--y", `${leave.y}px`); card.style.setProperty("--r", `${rotate}deg`); card.style.setProperty("--s", String(leave.scale)); } }; const goTo = (index: number) => { const next = Math.max(0, Math.min(index, total - 1)); setActiveIndex(next); apply(-next * step, true); onActiveChange?.(next); }; useLayoutEffect(() => { apply(offsetRef.current, false); // eslint-disable-next-line react-hooks/exhaustive-deps -- drag writes transforms on the track; this only re-paints when card metrics change }, [cardWidth, cardHeight, overlapFactor, cardGap, maxRotation, total, reduceMotion]); const onPointerDown = (e: React.PointerEvent) => { if (e.button !== 0) return; const drag = dragRef.current; drag.down = true; drag.startX = e.clientX; drag.origin = offsetRef.current; drag.lastX = e.clientX; drag.lastT = e.timeStamp; drag.velocity = 0; drag.moved = 0; (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId); }; const onPointerMove = (e: React.PointerEvent) => { const drag = dragRef.current; if (!drag.down) return; const now = e.timeStamp; const dt = Math.max(1, now - drag.lastT); drag.velocity = ((e.clientX - drag.lastX) / dt) * 1000; drag.lastX = e.clientX; drag.lastT = now; drag.moved = Math.max(drag.moved, Math.abs(e.clientX - drag.startX)); const x = drag.origin + (e.clientX - drag.startX); apply(x, false); const predicted = Math.max(0, Math.min(Math.round(-x / step), total - 1)); if (predicted !== activeIndex) { setActiveIndex(predicted); onActiveChange?.(predicted); } }; const onPointerUp = (e: React.PointerEvent) => { const drag = dragRef.current; if (!drag.down) return; drag.down = false; if ((e.currentTarget as HTMLElement).hasPointerCapture(e.pointerId)) { (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId); } goTo(snapSliderIndex(offsetRef.current, step, drag.velocity, total)); }; return (

{Array.from({ length: total }, (_, index) => (

{ if (dragRef.current.moved < 8) goTo(index); }} > {items && renderItem ? renderItem(items[index], index, activeIndex === index) : childArray[index]}

))}

{showDots || showArrows ? (

{showArrows ? (

) : null} {showDots ? (

{Array.from({ length: total }, (_, i) => (

) : null}

); } export type ProductSlideProps = { product: Product; href?: string; productHref?: ProductHref; }; /** Commerce slide for the slider: product mockup, title, and a price badge. */ export function ProductSlide({ product, href, productHref = defaultProductHref }: ProductSlideProps) { const image = product.featuredImage; const cheapest = product.variants.length > 0 ? cheapestVariant(product) : undefined; return (

{product.collection}

{product.title}

{cheapest ? ( {formatMoney(cheapest.price)} ) : null}

); } export default OverlappingSlider; 32:T68f,"use client"; import { useState } from "react"; import { DemoPage, DemoSection, DemoGrid, DemoCell } from "../../_shared/variant-frame"; import { productFixture } from "../../../lib/commerce/fixtures/product"; import { OverlappingSlider, ProductSlide } from "./overlapping-slider"; export function OverlappingSliderDemo({ brand }: { brand?: string }) { const fx = productFixture(brand); const products = fx.products.slice(0, 8); const [active, setActive] = useState(0); return ( } onActiveChange={setActive} /> } showDots cardWidth={280} cardHeight={380} /> } showDots maxRotation={8} cardWidth={280} cardHeight={380} /> ); } export default OverlappingSliderDemo; 33:T802,import type { BlockMeta } from "../../../lib/block-meta"; export const overlappingSliderMeta: BlockMeta = { slug: "overlapping-slider", title: "Overlapping slider", description: "Full-width draggable row of product cards where the card left behind scales back and drops down. Drag, tap, arrows, or dots; snap math ships as tested helpers.", group: "gallery", kobraDeps: ["button", "badge"], files: [ "blocks/gallery/overlapping-slider/overlapping-slider.tsx", ], props: [ { name: "items", type: "T[]", description: "Data array; used with renderItem." }, { name: "renderItem", type: "(item: T, index: number, isActive: boolean) => ReactNode", description: "Card renderer for each item." }, { name: "children", type: "ReactNode", description: "Alternative to items: raw card nodes." }, { name: "cardWidth", type: "number", default: "340", description: "Card width in px; feeds the snap-step math." }, { name: "cardHeight", type: "number", default: "460", description: "Card height in px." }, { name: "overlapFactor", type: "number", default: "0.04", description: "Fraction of card width overlapped by the neighbor." }, { name: "cardGap", type: "number", default: "18", description: "Extra px gap folded into the snap step." }, { name: "maxRotation", type: "number", default: "0", description: "Per-card rotation from focus distance; 0 = flat." }, { name: "transformOrigin", type: "string", default: "'50% 90%'", description: "CSS transform origin for the recede transform." }, { name: "showDots", type: "boolean", default: "false", description: "Dot pagination." }, { name: "showArrows", type: "boolean", default: "true", description: "Prev/next arrow buttons." }, { name: "onActiveChange", type: "(index: number) => void", description: "Fires on snap and during drag prediction." }, ], tags: ["slider", "carousel", "lookbook", "drag"], status: "ready", origin: { name: "uselayouts", url: "https://uselayouts.com/docs/components/overlapping-slider", 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":"Overlapping slider"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Overlapping slider"}],["$","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":"Full-width draggable row of product cards where the card left behind scales back and drops down. Drag, tap, arrows, or dots; snap math ships as tested helpers."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"overlapping-slider","group":"gallery","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/gallery/overlapping-slider/overlapping-slider.tsx","code":"$31"},{"path":"blocks/gallery/overlapping-slider/demo.tsx","code":"$32"},{"path":"blocks/gallery/overlapping-slider/meta.ts","code":"$33"}]}],"props":"$L34"}],"$L35"]}]