4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T2c8a,"use client"; import { type MotionValue, motion, useAnimationFrame, useMotionValue, useSpring, useTransform, useVelocity, } from "motion/react"; import type { PointerEvent as ReactPointerEvent } from "react"; import { useEffect, useMemo, useRef, useState } from "react"; import { ProgressiveBlur } from "../ui/progressive-blur"; type Poster = { src: string; alt?: string; }; export type MagazineScrollerSpringConfig = { stiffness?: number; damping?: number; mass?: number; visualDuration?: number; bounce?: number; }; export type MagazineScrollerProps = { images?: Poster[]; cardWidth?: number; cardHeight?: number; gap?: number; slices?: number; height?: number | string; wheelSpeed?: number; dragSpeed?: number; autoSpeed?: number; bendStrength?: number; maxBend?: number; lockWheel?: boolean; positionSpring?: MagazineScrollerSpringConfig; velocitySpring?: MagazineScrollerSpringConfig; className?: string; }; const DEFAULT_IMAGES: Poster[] = [ "image.jpeg", "image1.jpeg", "image2.jpg", "image3.jpg", "image4.jpeg", "image5.jpeg", "image6.jpeg", "image7.jpeg", "image8.jpeg", "image9.jpeg", "image10.jpeg", "image11.jpeg", ].map((file, index) => ({ src: `/images/magazine-scroller/${file}`, alt: `Magazine poster ${index + 1}`, })); const POSITION_SPRING = { mass: 0.28, stiffness: 95, damping: 24, } satisfies MagazineScrollerSpringConfig; const VELOCITY_SPRING = { mass: 0.18, stiffness: 80, damping: 34, } satisfies MagazineScrollerSpringConfig; function clamp(value: number, min: number, max: number) { return Math.min(Math.max(value, min), max); } function wrap(min: number, max: number, value: number) { const range = max - min; if (range === 0) return min; return ((((value - min) % range) + range) % range) + min; } function toCssSize(value: number | string) { return typeof value === "number" ? `${value}px` : value; } export function MagazineScroller({ images, cardWidth = 170, cardHeight = 250, gap = 34, slices = 9, height = "70vh", wheelSpeed = 1.15, dragSpeed = 1.15, autoSpeed = 0, bendStrength = 82, maxBend = 100, lockWheel = true, positionSpring = POSITION_SPRING, velocitySpring = VELOCITY_SPRING, className, }: MagazineScrollerProps) { const rootRef = useRef(null); const dragStartXRef = useRef(0); const dragStartValueRef = useRef(0); const isDraggingRef = useRef(false); const [containerWidth, setContainerWidth] = useState(0); const [isDragging, setIsDragging] = useState(false); const targetX = useMotionValue(0); const x = useSpring(targetX, positionSpring); const safeImages = useMemo(() => { return images?.length ? images : DEFAULT_IMAGES; }, [images]); const safeSlices = Math.max(1, Math.floor(slices)); const itemStep = cardWidth + gap; const loopWidth = safeImages.length * itemStep; const loopX = useTransform(x, (latest) => { return wrap(-loopWidth, 0, latest); }); const velocity = useVelocity(x); const smoothVelocity = useSpring(velocity, velocitySpring); const bend = useTransform(smoothVelocity, (latest) => { return clamp(latest / bendStrength, -maxBend, maxBend); }); useEffect(() => { const node = rootRef.current; if (!node) return; const updateSize = () => { setContainerWidth(node.clientWidth); }; updateSize(); const observer = new ResizeObserver(updateSize); observer.observe(node); return () => observer.disconnect(); }, []); useEffect(() => { const node = rootRef.current; if (!node || !lockWheel) return; const handleWheel = (event: WheelEvent) => { const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY; if (!delta) return; event.preventDefault(); targetX.set(targetX.get() - delta * wheelSpeed); }; node.addEventListener("wheel", handleWheel, { passive: false }); return () => { node.removeEventListener("wheel", handleWheel); }; }, [lockWheel, targetX, wheelSpeed]); useAnimationFrame((_, delta) => { if (!autoSpeed || isDraggingRef.current) return; targetX.set(targetX.get() - autoSpeed * (delta / 1000)); }); const handlePointerDown = (event: ReactPointerEvent) => { if (event.button !== 0) return; isDraggingRef.current = true; setIsDragging(true); dragStartXRef.current = event.clientX; dragStartValueRef.current = targetX.get(); event.currentTarget.setPointerCapture(event.pointerId); }; const handlePointerMove = (event: ReactPointerEvent) => { if (!isDraggingRef.current) return; const distance = event.clientX - dragStartXRef.current; targetX.set(dragStartValueRef.current + distance * dragSpeed); }; const stopDragging = (event: ReactPointerEvent) => { if (!isDraggingRef.current) return; isDraggingRef.current = false; setIsDragging(false); try { event.currentTarget.releasePointerCapture(event.pointerId); } catch { // Pointer may already be released by the browser. } }; // === ProgressiveBlur implementation === // We'll render a left and right element overlayed on top // with pointerEvents: "none" so they do not block scroll/drag. return (

{/* LEFT progressive blur */}

{[0, 1, 2].map((copyIndex) => safeImages.map((image, index) => { const absoluteIndex = copyIndex * safeImages.length + index; return ( ); }), )}

); } type PosterCardProps = { image: Poster; absoluteIndex: number; loopX: MotionValue; bend: MotionValue; cardWidth: number; cardHeight: number; itemStep: number; slices: number; containerWidth: number; }; function PosterCard({ image, absoluteIndex, loopX, bend, cardWidth, cardHeight, itemStep, slices, containerWidth, }: PosterCardProps) { const cardCenter = useTransform(loopX, (latestX) => { return latestX + absoluteIndex * itemStep + cardWidth / 1; }); const rotateY = useTransform(cardCenter, (center) => { if (!containerWidth) return 0; const viewportCenter = containerWidth / 2; const distance = (center - viewportCenter) / viewportCenter; return clamp(distance * -62, -76, 76); }); const scale = useTransform(cardCenter, (center) => { if (!containerWidth) return 1; const viewportCenter = containerWidth / 2; const distance = Math.abs(center - viewportCenter) / viewportCenter; return clamp(1 - distance * 0.15, 0.82, 1); }); const opacity = useTransform(cardCenter, (center) => { if (!containerWidth) return 1; const viewportCenter = containerWidth / 2; const distance = Math.abs(center - viewportCenter) / viewportCenter; return clamp(1 - distance * 0.38, 0.48, 1); }); const y = useTransform(cardCenter, (center) => { if (!containerWidth) return 0; const viewportCenter = containerWidth / 2; const distance = Math.abs(center - viewportCenter) / viewportCenter; return clamp(distance * 30, 0, 44); }); const rotateZ = useTransform(bend, (latest) => latest * 0.08); return (

{Array.from({ length: slices }).map((_, sliceIndex) => ( ))}

); } type PosterSliceProps = { src: string; sliceIndex: number; slices: number; bend: MotionValue; }; function PosterSlice({ src, sliceIndex, slices, bend }: PosterSliceProps) { const middle = (slices - 1) / 2; const offsetFromMiddle = sliceIndex - middle; const sliceRotateY = useTransform(bend, (latest) => { return latest * offsetFromMiddle * 0.22; }); const sliceSkewY = useTransform(bend, (latest) => { return latest * offsetFromMiddle * 0.014; }); const sliceZ = useTransform(bend, (latest) => { return Math.abs(latest) * Math.abs(offsetFromMiddle) * -0.18; }); const backgroundPosition = slices === 1 ? "50% 50%" : `${(sliceIndex / (slices - 1)) * 100}% 50%`; return ( ); } export default MagazineScroller; 50:T17b7,"use client"; import type React from "react"; import { cn } from "@/lib/utils"; export interface ProgressiveBlurProps { className?: string; height?: string; width?: string; position?: "top" | "bottom" | "left" | "right" | "both"; blurLevels?: number[]; children?: React.ReactNode; } export function ProgressiveBlur({ className, height = "30%", width = "30%", position = "bottom", blurLevels = [0.5, 1, 2, 4, 8, 16, 32, 64], }: ProgressiveBlurProps) { const divElements = Array(blurLevels.length - 2).fill(null); const isHorizontal = position === "left" || position === "right"; const fullMask = "linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%)"; return (

{divElements.map((_, index) => { const blurIndex = index + 1; const startPercent = blurIndex * 12.5; const midPercent = (blurIndex + 1) * 12.5; const endPercent = (blurIndex + 2) * 12.5; const maskGradient = position === "bottom" ? `linear-gradient(to bottom, rgba(0,0,0,0) ${startPercent}%, rgba(0,0,0,1) ${midPercent}%, rgba(0,0,0,1) ${endPercent}%, rgba(0,0,0,0) ${ endPercent + 12.5 }%)` : position === "top" ? `linear-gradient(to top, rgba(0,0,0,0) ${startPercent}%, rgba(0,0,0,1) ${midPercent}%, rgba(0,0,0,1) ${endPercent}%, rgba(0,0,0,0) ${ endPercent + 12.5 }%)` : position === "left" ? `linear-gradient(to right, rgba(0,0,0,0) ${startPercent}%, rgba(0,0,0,1) ${midPercent}%, rgba(0,0,0,1) ${endPercent}%, rgba(0,0,0,0) ${ endPercent + 12.5 }%)` : position === "right" ? `linear-gradient(to left, rgba(0,0,0,0) ${startPercent}%, rgba(0,0,0,1) ${midPercent}%, rgba(0,0,0,1) ${endPercent}%, rgba(0,0,0,0) ${ endPercent + 12.5 }%)` : fullMask; return (

); })}

); } 4c:["$","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"}]]}]}]]}],["$","$L4d",null,{"namespace":"@skecher-ui","registryDependencies":[]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"components/ui-components/magazine-scroller.tsx","content":"$4f","type":"registry:ui"},{"path":"components/ui/progressive-blur.tsx","content":"$50","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]