52: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/3j06ow7w40nxu.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"] 53: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/3j06ow7w40nxu.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"] 54:T184e,"use client"; import type { MotionValue } from "motion/react"; import { motion, useAnimationFrame, useMotionValue, useScroll, useSpring, useTransform, useVelocity, } from "motion/react"; import React, { useContext, useEffect, useRef, useState } from "react"; import { cn } from "@/lib/utils"; export const wrap = (min: number, max: number, v: number) => { const rangeSize = max - min; return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min; }; const ScrollVelocityContext = React.createContext | null>( null, ); export function ScrollVelocityContainer({ children, className, ...props }: React.HTMLAttributes) { const { scrollY } = useScroll(); const scrollVelocity = useVelocity(scrollY); const smoothVelocity = useSpring(scrollVelocity, { damping: 50, stiffness: 400, }); const velocityFactor = useTransform(smoothVelocity, (v) => { const sign = v < 0 ? -1 : 1; const magnitude = Math.min(5, (Math.abs(v) / 1000) * 5); return sign * magnitude; }); return (

{children}

); } interface ScrollVelocityRowProps extends React.HTMLAttributes { children: React.ReactNode; baseVelocity?: number; direction?: 1 | -1; scrollReactivity?: boolean; } interface ScrollVelocityRowImplProps extends ScrollVelocityRowProps { velocityFactor: MotionValue; } function ScrollVelocityRowImpl({ children, baseVelocity = 5, direction = 1, className, velocityFactor, scrollReactivity = true, ...props }: ScrollVelocityRowImplProps) { const containerRef = useRef(null); const blockRef = useRef(null); const [numCopies, setNumCopies] = useState(1); const baseX = useMotionValue(0); const baseDirectionRef = useRef(direction >= 0 ? 1 : -1); const currentDirectionRef = useRef(direction >= 0 ? 1 : -1); const unitWidth = useMotionValue(0); const isInViewRef = useRef(true); const isPageVisibleRef = useRef(true); const prefersReducedMotionRef = useRef(false); useEffect(() => { const container = containerRef.current; const block = blockRef.current; let ro: ResizeObserver | null = null; let io: IntersectionObserver | null = null; let mq: MediaQueryList | null = null; const handleVisibility = () => { isPageVisibleRef.current = document.visibilityState === "visible"; }; const handlePRM = () => { if (mq) prefersReducedMotionRef.current = mq.matches; }; if (container && block) { const updateSizes = () => { const cw = container.offsetWidth || 0; const bw = block.scrollWidth || 0; unitWidth.set(bw); const nextCopies = bw > 0 ? Math.max(3, Math.ceil(cw / bw) + 2) : 1; setNumCopies((prev) => (prev === nextCopies ? prev : nextCopies)); }; updateSizes(); ro = new ResizeObserver(updateSizes); ro.observe(container); ro.observe(block); io = new IntersectionObserver(([entry]) => { if (entry) isInViewRef.current = entry.isIntersecting; }); io.observe(container); document.addEventListener("visibilitychange", handleVisibility, { passive: true, }); handleVisibility(); mq = window.matchMedia("(prefers-reduced-motion: reduce)"); mq.addEventListener("change", handlePRM); handlePRM(); } return () => { if (ro) ro.disconnect(); if (io) io.disconnect(); document.removeEventListener("visibilitychange", handleVisibility); if (mq) mq.removeEventListener("change", handlePRM); }; }, [unitWidth]); const x = useTransform([baseX, unitWidth], ([v, bw]) => { const width = Number(bw) || 1; const offset = Number(v) || 0; return `${-wrap(0, width, offset)}px`; }); useAnimationFrame((_, delta) => { if (!isInViewRef.current || !isPageVisibleRef.current) return; const dt = delta / 1000; const vf = scrollReactivity ? velocityFactor.get() : 0; const absVf = Math.min(5, Math.abs(vf)); const speedMultiplier = prefersReducedMotionRef.current ? 1 : 1 + absVf; if (absVf > 0.1) { const scrollDirection = vf >= 0 ? 1 : -1; currentDirectionRef.current = baseDirectionRef.current * scrollDirection; } const bw = unitWidth.get() || 0; if (bw <= 0) return; const pixelsPerSecond = (bw * baseVelocity) / 100; const moveBy = currentDirectionRef.current * pixelsPerSecond * speedMultiplier * dt; baseX.set(baseX.get() + moveBy); }); return (

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

{children}

))}

); } function ScrollVelocityRowLocal(props: ScrollVelocityRowProps) { const { scrollY } = useScroll(); const localVelocity = useVelocity(scrollY); const localSmoothVelocity = useSpring(localVelocity, { damping: 50, stiffness: 400, }); const localVelocityFactor = useTransform(localSmoothVelocity, (v) => { const sign = v < 0 ? -1 : 1; const magnitude = Math.min(5, (Math.abs(v) / 1000) * 5); return sign * magnitude; }); return ( ); } export function ScrollVelocityRow(props: ScrollVelocityRowProps) { const sharedVelocityFactor = useContext(ScrollVelocityContext); if (sharedVelocityFactor) { return ( ); } return ; } 51:["$","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@cnippet","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/default/motion/scroll-velocity-text.tsx","content":"$54","type":"registry:ui","target":"components/motion/scroll-velocity-text.tsx"}],"className":"h-[70svh] min-h-80"}]]}]