50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T2fe6,'use client'; import * as React from 'react'; import { motion, useMotionValue, useMotionValueEvent, useTransform, useSpring, animate, type MotionValue, } from 'motion/react'; import { cn } from '@/lib/utils'; import { Progress } from '@/components/ui/progress'; interface LayerStackProps { children: React.ReactNode; className?: string; cardWidth?: number; cardGap?: number; stageHeight?: number; lastCardFullWidth?: boolean; mobileSensitivity?: number; ref?: React.Ref; } interface CardProps extends React.HTMLAttributes { children: React.ReactNode; className?: string; ref?: React.Ref; } interface StackCardInternalProps { children: React.ReactElement; index: number; cardWidth: number; cardGap: number; scrollProgress: MotionValue; maxScroll: number; renderedWidth: number; isMobile: boolean; cardRef?: (el: HTMLDivElement | null) => void; } function Card({ children, className, ref, ...props }: CardProps) { return (

{children}

); } const StackCardInternal = React.memo(function StackCardInternal({ children, index, cardWidth, cardGap, scrollProgress, maxScroll, renderedWidth, isMobile, cardRef, }: StackCardInternalProps) { const naturalX = index * (cardWidth + cardGap); const x = useTransform( scrollProgress, [0, 1], [naturalX, naturalX - maxScroll], ); const stackDepth = useTransform(x, (v) => Math.max(0, -v)); const clampedX = useTransform(x, (v) => Math.max(0, v)); const scale = useTransform(stackDepth, [0, cardWidth * 3], [1, 0.95]); const yDrop = useTransform( stackDepth, [0, cardWidth], [0, isMobile ? 6 : 12], ); const rotateYMobile = useMotionValue(0); const rotateYDesktop = useTransform(stackDepth, [0, cardWidth * 2], [0, -4]); const rotateY = isMobile ? rotateYMobile : rotateYDesktop; return ( {React.cloneElement(children, { style: { ...children.props.style, width: '100%', height: '100%', margin: 0, boxSizing: 'border-box' as const, }, })} ); }); function LayerStack({ children, className, cardWidth = 320, cardGap = 16, stageHeight = 400, lastCardFullWidth = false, mobileSensitivity = 2, ref, }: LayerStackProps) { const cards = React.Children.toArray( children, ) as React.ReactElement[]; const stageRef = React.useRef(null); const rawScroll = React.useRef(0); const velocityRef = React.useRef(0); const lastTouchTime = React.useRef(0); const lastTouchX = React.useRef(0); const rafRef = React.useRef(null); const cardRefs = React.useRef<(HTMLDivElement | null)[]>([]); const [progressValue, setProgressValue] = React.useState(0); const [containerWidth, setContainerWidth] = React.useState(0); const [isMobile, setIsMobile] = React.useState(false); const [autoHeight, setAutoHeight] = React.useState(stageHeight); React.useEffect(() => { const checkMobile = () => setIsMobile(window.innerWidth < 768); checkMobile(); const mediaQuery = window.matchMedia('(max-width: 767px)'); const handleChange = (e: MediaQueryListEvent) => setIsMobile(e.matches); mediaQuery.addEventListener('change', handleChange); return () => mediaQuery.removeEventListener('change', handleChange); }, []); React.useEffect(() => { const el = stageRef.current; if (!el) return; const ro = new ResizeObserver(([entry]) => { setContainerWidth(entry.contentRect.width); }); ro.observe(el); return () => ro.disconnect(); }, []); const effectiveCardWidth = React.useMemo(() => { if (isMobile && containerWidth > 0) return containerWidth - 32; return cardWidth; }, [isMobile, containerWidth, cardWidth]); React.useEffect(() => { if (!isMobile || containerWidth === 0) { setAutoHeight(stageHeight); return; } const frame = requestAnimationFrame(() => { const heights = cardRefs.current.map((el) => el?.scrollHeight ?? 0); const max = Math.max(...heights); if (max > 0) setAutoHeight(max + 32); }); return () => cancelAnimationFrame(frame); }, [isMobile, containerWidth, effectiveCardWidth, stageHeight]); const scrollX = useMotionValue(0); const smoothScrollX = useSpring(scrollX, { stiffness: isMobile ? 250 : 400, damping: isMobile ? 30 : 40, mass: isMobile ? 0.4 : 0.5, restDelta: 0.001, restSpeed: 0.001, }); useMotionValueEvent(scrollX, 'change', (v) => { setProgressValue(v * 100); }); const maxScroll = React.useMemo( () => Math.max( 0, cards.length * (effectiveCardWidth + cardGap) - cardGap - effectiveCardWidth, ), [cards.length, effectiveCardWidth, cardGap], ); const updateScrollX = React.useCallback( (px: number) => { const clamped = Math.max(0, Math.min(maxScroll, px)); rawScroll.current = clamped; scrollX.set(maxScroll > 0 ? clamped / maxScroll : 0); }, [maxScroll, scrollX], ); React.useEffect(() => { if (isMobile) return; const el = stageRef.current; if (!el) return; const onWheel = (e: WheelEvent) => { e.preventDefault(); updateScrollX(rawScroll.current + e.deltaY * 0.5); }; el.addEventListener('wheel', onWheel, { passive: false }); return () => el.removeEventListener('wheel', onWheel); }, [updateScrollX, isMobile]); React.useEffect(() => { const el = stageRef.current; if (!el) return; let startX = 0; let startY = 0; let startScroll = 0; let isTouching = false; let isHorizontalScroll = false; const onTouchStart = (e: TouchEvent) => { if (rafRef.current) { cancelAnimationFrame(rafRef.current); rafRef.current = null; } isTouching = true; isHorizontalScroll = false; startX = e.touches[0].clientX; startY = e.touches[0].clientY; startScroll = rawScroll.current; lastTouchX.current = startX; lastTouchTime.current = Date.now(); velocityRef.current = 0; }; const onTouchMove = (e: TouchEvent) => { if (!isTouching) return; const currentX = e.touches[0].clientX; const currentY = e.touches[0].clientY; const deltaX = Math.abs(currentX - startX); const deltaY = Math.abs(currentY - startY); if (!isHorizontalScroll && deltaX < 10 && deltaY < 10) return; if (!isHorizontalScroll) isHorizontalScroll = deltaX > deltaY; if (isHorizontalScroll) { e.preventDefault(); const currentTime = Date.now(); const scrollDeltaX = (startX - currentX) * mobileSensitivity; const deltaTime = currentTime - lastTouchTime.current; if (deltaTime > 0) { velocityRef.current = (lastTouchX.current - currentX) / deltaTime; } lastTouchX.current = currentX; lastTouchTime.current = currentTime; if (rafRef.current) cancelAnimationFrame(rafRef.current); rafRef.current = requestAnimationFrame(() => { updateScrollX(startScroll + scrollDeltaX); rafRef.current = null; }); } }; const onTouchEnd = () => { if (!isHorizontalScroll) { isTouching = false; return; } isTouching = false; const velocity = velocityRef.current * 250 * mobileSensitivity; if (Math.abs(velocity) > 15) { const momentum = velocity * 0.4; const targetScroll = rawScroll.current + momentum; const clampedTarget = Math.max(0, Math.min(maxScroll, targetScroll)); animate(rawScroll.current, clampedTarget, { type: 'spring', stiffness: 100, damping: 18, mass: 0.3, onUpdate: (v) => updateScrollX(v), }); } }; el.addEventListener('touchstart', onTouchStart, { passive: true }); el.addEventListener('touchmove', onTouchMove, { passive: false }); el.addEventListener('touchend', onTouchEnd, { passive: true }); el.addEventListener('touchcancel', onTouchEnd, { passive: true }); return () => { el.removeEventListener('touchstart', onTouchStart); el.removeEventListener('touchmove', onTouchMove); el.removeEventListener('touchend', onTouchEnd); el.removeEventListener('touchcancel', onTouchEnd); if (rafRef.current) cancelAnimationFrame(rafRef.current); }; }, [updateScrollX, maxScroll, mobileSensitivity]); React.useEffect(() => { if (isMobile) return; let isDragging = false; let dragStartX = 0; let dragStartScroll = 0; const onMouseDown = (e: MouseEvent) => { if (e.button !== 0) return; isDragging = true; dragStartX = e.clientX; dragStartScroll = rawScroll.current; e.preventDefault(); }; const onMouseMove = (e: MouseEvent) => { if (!isDragging) return; updateScrollX(dragStartScroll + (dragStartX - e.clientX)); }; const onMouseUp = () => { isDragging = false; }; const el = stageRef.current; if (!el) return; el.addEventListener('mousedown', onMouseDown); window.addEventListener('mousemove', onMouseMove); window.addEventListener('mouseup', onMouseUp); return () => { el.removeEventListener('mousedown', onMouseDown); window.removeEventListener('mousemove', onMouseMove); window.removeEventListener('mouseup', onMouseUp); }; }, [updateScrollX, isMobile]); const onProgressClick = (e: React.MouseEvent) => { const rect = e.currentTarget.getBoundingClientRect(); const ratio = (e.clientX - rect.left) / rect.width; const target = ratio * maxScroll; const start = rawScroll.current; animate(0, 1, { duration: 0.5, ease: [0.32, 0, 0.67, 0], onUpdate: (v) => updateScrollX(start + (target - start) * v), }); }; return (

{cards.map((card, i) => { const isLastCard = i === cards.length - 1; const renderedWidth = lastCardFullWidth && isLastCard && containerWidth > 0 ? containerWidth : effectiveCardWidth; return ( { cardRefs.current[i] = el; }} > {card} ); })}

{isMobile ? 'drag' : 'drag or scroll'}

); } export { LayerStack, Card }; export type { LayerStackProps, CardProps };54:T64c,'use client'; import * as React from 'react'; import * as ProgressPrimitive from '@radix-ui/react-progress'; import { cn } from '@/lib/utils'; interface ProgressProps extends React.ComponentProps< typeof ProgressPrimitive.Root > { variant?: 'default' | 'slim' | 'outline-solid'; indicatorClassName?: string; indicatorStyle?: React.CSSProperties; } function Progress({ className, value, variant = 'default', indicatorClassName, indicatorStyle, ...props }: ProgressProps) { const isSlim = variant === 'slim'; const isOutline = variant === 'outline-solid'; return ( ); } export { Progress }; 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"motion"}]]}]}],["$","li","@radix-ui/react-progress",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-progress","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"@radix-ui/react-progress"}]]}]}],["$","li","clsx",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"clsx"}]]}]}],["$","li","tailwind-merge",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L50",null,{"registryDependencies":["@scrollxui/progress"]}]]}],["$","$L51",null,{"sourceUrl":"https://www.scrollxui.dev/registry/layer-stack.json","proxyUrl":"https://shadcnregistry.com/r/scrollxui/layer-stack","itemId":"@scrollxui/layer-stack"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"components/ui/layer-stack.tsx","content":"$53","type":"registry:ui"},{"path":"components/ui/progress.tsx","content":"$54","type":"registry:ui"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}","type":"registry:lib"}]}]]}],"$L55"]}]

Layer Stack

Installation

Files

components

lib

Styles