51: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"] 52: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"] 53:T2e42,'use client'; import React, { useLayoutEffect, useRef, useState } from 'react'; import { motion, useAnimationFrame, useMotionValue, useReducedMotion, useScroll, useSpring, useTransform, useVelocity } from 'motion/react'; interface VelocityMapping { input: [number, number]; output: [number, number]; } interface VelocityTextProps { children: React.ReactNode; baseVelocity: number; scrollContainerRef?: React.RefObject; className?: string; damping: number; stiffness: number; numCopies: number; velocityMapping?: VelocityMapping; parallaxClassName?: string; scrollerClassName?: string; parallaxStyle?: React.CSSProperties; scrollerStyle?: React.CSSProperties; separator?: React.ReactNode; pauseOnHover: boolean; hoveredRef: React.RefObject; skewWithVelocity: number; scaleWithVelocity: number; outline: boolean; gap: number; fontSize?: number | string; fontWeight?: number | string; color?: string; draggable: boolean; } interface ScrollVelocityProps { scrollContainerRef?: React.RefObject; texts: React.ReactNode[]; velocity?: number; className?: string; damping?: number; stiffness?: number; numCopies?: number; velocityMapping?: VelocityMapping; parallaxClassName?: string; scrollerClassName?: string; parallaxStyle?: React.CSSProperties; scrollerStyle?: React.CSSProperties; separator?: React.ReactNode; pauseOnHover?: boolean; fadeEdges?: boolean; skewWithVelocity?: number; scaleWithVelocity?: number; outlineAlternate?: boolean; gap?: number; fontSize?: number | string; fontWeight?: number | string; color?: string; draggable?: boolean; } const smootherstep = (t: number) => t * t * t * (t * (t * 6 - 15) + 10); const FADE_STEPS = Array.from({ length: 9 }, (_, i) => i / 8); const FADE_MASK = `linear-gradient(to right, ${[ ...FADE_STEPS.map(t => `rgba(0, 0, 0, ${smootherstep(t).toFixed(3)}) ${(t * 12).toFixed(1)}%`), ...FADE_STEPS.map(t => `rgba(0, 0, 0, ${smootherstep(1 - t).toFixed(3)}) ${(88 + t * 12).toFixed(1)}%`) ].join(', ')})`; const OUTLINE_STYLE: React.CSSProperties = { WebkitTextFillColor: 'transparent', WebkitTextStroke: 'max(1px, 0.028em) currentColor' }; function wrap(min: number, max: number, v: number): number { const range = max - min; const mod = (((v - min) % range) + range) % range; return mod + min; } function useElementWidth(ref: React.RefObject): number { const [width, setWidth] = useState(0); useLayoutEffect(() => { const element = ref.current; if (!element) return; if (typeof ResizeObserver === 'undefined') { const updateWidth = () => setWidth(element.offsetWidth); updateWidth(); window.addEventListener('resize', updateWidth); return () => window.removeEventListener('resize', updateWidth); } const observer = new ResizeObserver(([entry]) => { setWidth(entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width); }); observer.observe(element); return () => observer.disconnect(); }, [ref]); return width; } function VelocityText({ children, baseVelocity, scrollContainerRef, className = '', damping, stiffness, numCopies, velocityMapping, parallaxClassName, scrollerClassName, parallaxStyle, scrollerStyle, separator, pauseOnHover, hoveredRef, skewWithVelocity, scaleWithVelocity, outline, gap, fontSize, fontWeight, color, draggable }: VelocityTextProps) { const baseX = useMotionValue(0); const skewX = useMotionValue(0); const scaleY = useMotionValue(1); const scrollOptions = scrollContainerRef ? { container: scrollContainerRef } : {}; const { scrollY } = useScroll(scrollOptions); const scrollVelocity = useVelocity(scrollY); const smoothVelocity = useSpring(scrollVelocity, { damping, stiffness }); const velocityFactor = useTransform( smoothVelocity, velocityMapping?.input || [0, 1000], velocityMapping?.output || [0, 5], { clamp: false } ); const reduceMotion = useReducedMotion(); const copyRef = useRef(null); const copyWidth = useElementWidth(copyRef); const x = useTransform(baseX, v => { if (copyWidth === 0) return '0px'; return `${wrap(-copyWidth, 0, v)}px`; }); const directionFactor = useRef(1); const pace = useRef(1); const fling = useRef(0); const drag = useRef({ active: false, pointerId: -1, lastX: 0, lastTime: 0, velocity: 0, travel: 0 }); useAnimationFrame((t, delta) => { if (reduceMotion) return; const grab = drag.current; const seconds = Math.min(delta, 64) / 1000; const targetPace = grab.active || (pauseOnHover && hoveredRef.current) ? 0 : 1; pace.current += (targetPace - pace.current) * (1 - Math.exp(-delta / 150)); let moveBy = directionFactor.current * baseVelocity * (delta / 1000); if (velocityFactor.get() < 0) { directionFactor.current = -1; } else if (velocityFactor.get() > 0) { directionFactor.current = 1; } moveBy += directionFactor.current * moveBy * velocityFactor.get(); let travel = moveBy * pace.current; if (!grab.active && fling.current !== 0) { travel += fling.current * seconds; fling.current *= Math.exp(-delta / 420); if (Math.abs(fling.current) < 4) fling.current = 0; } baseX.set(baseX.get() + travel); if (!skewWithVelocity && !scaleWithVelocity && skewX.get() === 0 && scaleY.get() === 1) return; const thrown = grab.active ? grab.velocity : fling.current; const scrollSurge = Math.tanh(Math.abs(smoothVelocity.get()) / 1600) * pace.current; const throwSurge = Math.tanh(Math.abs(thrown) / 2000); const surge = Math.max(scrollSurge, throwSurge); const heading = throwSurge > scrollSurge ? Math.sign(thrown) : Math.sign(travel) || directionFactor.current * Math.sign(baseVelocity); const ease = 1 - Math.exp(-delta / 110); const nextSkew = skewX.get() + (-heading * skewWithVelocity * surge - skewX.get()) * ease; const nextScale = scaleY.get() + (1 + scaleWithVelocity * surge - scaleY.get()) * ease; skewX.set(Math.abs(nextSkew) < 0.01 && !skewWithVelocity ? 0 : nextSkew); scaleY.set(Math.abs(nextScale - 1) < 0.0005 && !scaleWithVelocity ? 1 : nextScale); }); const handlePointerDown = (event: React.PointerEvent) => { if (!draggable || (event.pointerType === 'mouse' && event.button !== 0)) return; const grab = drag.current; grab.active = true; grab.pointerId = event.pointerId; grab.lastX = event.clientX; grab.lastTime = event.timeStamp; grab.velocity = 0; grab.travel = 0; fling.current = 0; event.currentTarget.setPointerCapture?.(event.pointerId); event.currentTarget.style.cursor = 'grabbing'; }; const handlePointerMove = (event: React.PointerEvent) => { const grab = drag.current; if (!grab.active || event.pointerId !== grab.pointerId) return; const dx = event.clientX - grab.lastX; const dt = Math.max(event.timeStamp - grab.lastTime, 1); grab.lastX = event.clientX; grab.lastTime = event.timeStamp; grab.travel += Math.abs(dx); baseX.set(baseX.get() + dx); grab.velocity += ((dx / dt) * 1000 - grab.velocity) * (1 - Math.exp(-dt / 50)); }; const handlePointerUp = (event: React.PointerEvent) => { const grab = drag.current; if (!grab.active || event.pointerId !== grab.pointerId) return; grab.active = false; const resting = event.timeStamp - grab.lastTime > 90; fling.current = resting ? 0 : Math.max(-5000, Math.min(5000, grab.velocity)); grab.velocity = 0; if (event.currentTarget.hasPointerCapture?.(event.pointerId)) { event.currentTarget.releasePointerCapture(event.pointerId); } event.currentTarget.style.cursor = 'grab'; }; const handleClickCapture = (event: React.MouseEvent) => { if (drag.current.travel > 6) { event.preventDefault(); event.stopPropagation(); } }; const spans = []; for (let i = 0; i < numCopies; i++) { spans.push( 0 ? true : undefined} style={!separator && gap > 0 ? { paddingRight: gap } : undefined} > {children} {separator ? ( <> 0 ? { margin: `0 ${gap / 2}px` } : undefined}>{separator} ) : null} ); } const typeStyle: React.CSSProperties = { ...(fontSize !== undefined ? { fontSize: typeof fontSize === 'number' ? `${fontSize}px` : fontSize, lineHeight: 1 } : {}), ...(fontWeight !== undefined ? { fontWeight } : {}), ...(color ? { color } : {}), ...(outline ? OUTLINE_STYLE : {}) }; return (

{spans}

); } export const ScrollVelocity: React.FC = ({ scrollContainerRef, texts = [], velocity = 100, className = '', damping = 50, stiffness = 400, numCopies = 6, velocityMapping = { input: [0, 1000], output: [0, 5] }, parallaxClassName = 'parallax', scrollerClassName = 'scroller', parallaxStyle, scrollerStyle, separator = '', pauseOnHover = false, fadeEdges = false, skewWithVelocity = 0, scaleWithVelocity = 0, outlineAlternate = false, gap = 0, fontSize, fontWeight, color, draggable = false }) => { const hoveredRef = useRef(false); return (

{ hoveredRef.current = true; }} onPointerLeave={() => { hoveredRef.current = false; }} > {texts.map((text, index) => ( {text} ))}

); }; export default ScrollVelocity; 50:["$","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@^12.23.12",{"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@^12.23.12"}]]}]}]]}],["$","$L51",null,{"namespace":"@react-bits","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"ScrollVelocity/ScrollVelocity.tsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]