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:T1836,"use client" import React, { useContext, useEffect, useRef, useState } from "react" import { motion, useAnimationFrame, useMotionValue, useScroll, useSpring, useTransform, useVelocity, } from "motion/react" import type { MotionValue } from "motion/react" import { cn } from "@/lib/utils" interface ScrollVelocityRowProps extends React.HTMLAttributes { children: React.ReactNode baseVelocity?: number direction?: 1 | -1 scrollReactivity?: boolean } 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}

) } export function ScrollVelocityRow(props: ScrollVelocityRowProps) { const sharedVelocityFactor = useContext(ScrollVelocityContext) if (sharedVelocityFactor) { return ( ) } return } 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]) => { 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) } } }, [children, 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 ( ) } 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":"@magicui","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/magicui/scroll-based-velocity.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]