50: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"] 51: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"] 52:T2938,"use client"; import { useLayoutEffect, useEffect, useRef, useState } from "react"; import { gsap } from "gsap"; import { useGSAP } from "@gsap/react"; // An endless line of big words and small pictures that drifts on its own. Scroll the page and it // speeds up and leans into the movement; scroll back up and it turns around. With more than one // row, every row runs against its neighbour. // // How the loop stays seamless: one "set" is the whole list of items. We measure it, then render // as many copies as it takes to fill the box (plus one spare). Sliding the track by exactly one // set's width lands on a picture identical to where it started, so we wrap with a modulo and // nobody sees the jump. Every item carries its gap as padding, so a set's width includes the // gap after its last item. export type VelocityMarqueeTextItem = { /** A word or phrase. */ text: string; }; export type VelocityMarqueeImageItem = { /** The image address. */ src: string; /** Alt text. Leave it out for a purely decorative image. */ alt?: string; }; export type VelocityMarqueeItem = VelocityMarqueeTextItem | VelocityMarqueeImageItem; export type VelocityMarqueeProps = { /** What the rows are made of, in order: words and images. */ items: VelocityMarqueeItem[]; /** How fast it drifts when nobody scrolls. 1 is about 90 pixels a second. */ speed?: number; /** How much scrolling speeds it up. 0 ignores the scroll speed, 4 is a strong push. */ velocityBoost?: number; /** The most it leans, in degrees, when the page scrolls fast. 0 never leans. */ skew?: number; /** Which way the first row flows when the visitor scrolls down. Scrolling up flips it. */ direction?: "left" | "right"; /** Space between the items, in pixels. */ gap?: number; /** How many rows to stack, one to three. They flow in alternating directions. */ rows?: number; /** Draw the words of every second row as outlines. */ outlineAlternate?: boolean; /** The element that scrolls, or a selector for it. Leave it out to follow the window. */ scroller?: HTMLElement | string | null; /** Extra classes for the outer box. */ className?: string; /** Classes for every item: the type size and weight live here. Images are sized in em, so they follow the text. */ itemClassName?: string; /** Classes for the image items. */ imageClassName?: string; }; // useLayoutEffect warns during server rendering, so fall back to useEffect there const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect; function resolveScroller(scroller: VelocityMarqueeProps["scroller"]): HTMLElement | null { if (!scroller) return null; if (typeof scroller === "string") return document.querySelector(scroller); return scroller; } /** Row 1 starts a few items further along than row 0, so the rows never read the same line. */ function rotate(list: T[], by: number): T[] { if (list.length === 0) return list; const shift = ((by % list.length) + list.length) % list.length; return [...list.slice(shift), ...list.slice(0, shift)]; } export function VelocityMarquee({ items, speed = 1, velocityBoost = 4, skew = 8, direction = "left", gap = 48, rows = 2, outlineAlternate = true, scroller = null, className = "", itemClassName = "text-[clamp(64px,13vw,200px)] font-medium leading-[1.15] tracking-[-0.04em]", imageClassName = "rounded-full", }: VelocityMarqueeProps) { const rootRef = useRef(null); const stackRef = useRef(null); const rowCount = Math.min(3, Math.max(1, Math.round(rows))); const [copies, setCopies] = useState(2); // The width of one set per row, in pixels. Written by the measuring effect, read every frame. const setWidths = useRef([]); // These change from the playground without rebuilding anything: the loop reads them each frame const live = useRef({ speed, velocityBoost, skew, direction }); live.current = { speed, velocityBoost, skew, direction }; // Measure one set per row and work out how many copies fill the box useIsomorphicLayoutEffect(() => { const root = rootRef.current; if (!root) return; const sets = Array.from(root.querySelectorAll("[data-first-set]")); const widths = sets.map(() => 0); // The observer's contentRect is the layout size with its fraction (offsetWidth would round, // and getBoundingClientRect would include the skew), so the wrap lands exactly on the repeat const observer = new ResizeObserver((entries) => { entries.forEach((entry) => { const row = sets.indexOf(entry.target as HTMLElement); if (row !== -1) widths[row] = entry.contentRect.width; }); setWidths.current = [...widths]; const boxWidth = root.clientWidth; const needed = widths.reduce((most, width) => (width > 0 ? Math.max(most, Math.ceil(boxWidth / width) + 1) : most), 2); setCopies((current) => (current === needed ? current : needed)); }); // The box resizing, fonts loading and a changed gap all change a set's width observer.observe(root); sets.forEach((set) => observer.observe(set)); return () => observer.disconnect(); }, [rowCount]); useGSAP( () => { const root = rootRef.current; const stack = stackRef.current; if (!root || !stack) return; const tracks = Array.from(root.querySelectorAll("[data-track]")); const scrollElement = resolveScroller(scroller); const readScroll = () => (scrollElement ? scrollElement.scrollTop : window.scrollY); // Reduced motion: the CSS already lays the words out as a still, wrapping row. We add nothing. const mm = gsap.matchMedia(); mm.add("(prefers-reduced-motion: no-preference)", () => { const slideTo = tracks.map((track) => gsap.quickSetter(track, "x", "px")); const lean = gsap.quickSetter(stack, "skewX", "deg"); const offsets = tracks.map(() => 0); let lastScroll = readScroll(); let velocity = 0; // pixels per second, smoothed. Positive means scrolling down. let scrollSign = 1; // the last direction the visitor scrolled in let flip = 1; // eases from 1 to -1 and back, so a turn-around slows down first let visible = true; const tick = (_time: number, deltaMs: number) => { // A long frame (a background tab, a debugger) would fling the rows, so cap it const dt = Math.min(deltaMs, 50) / 1000; if (dt <= 0) return; const scrollNow = readScroll(); const rawVelocity = (scrollNow - lastScroll) / dt; lastScroll = scrollNow; if (!visible) return; // Wheel ticks arrive in bursts, so smooth them: it speeds up fast and settles slowly velocity += (rawVelocity - velocity) * (1 - Math.exp(-dt * 7)); if (Math.abs(velocity) > 30) scrollSign = Math.sign(velocity); flip += (scrollSign - flip) * (1 - Math.exp(-dt * 5)); const { speed: baseSpeed, velocityBoost: boost, skew: maxSkew, direction: baseDirection } = live.current; const push = 1 + boost * Math.min(Math.abs(velocity) / 1500, 2); const pixelsPerSecond = baseSpeed * 90 * push * flip; const firstRowSign = baseDirection === "left" ? 1 : -1; tracks.forEach((_, row) => { const width = setWidths.current[row] ?? 0; if (width <= 0) return; const rowSign = row % 2 === 0 ? firstRowSign : -firstRowSign; offsets[row] = (offsets[row]! + rowSign * pixelsPerSecond * dt) % width; // Always between -width and 0, so a copy is on screen before the previous one leaves slideTo[row]!(-(((offsets[row]! % width) + width) % width)); }); lean(firstRowSign * Math.max(-1, Math.min(1, velocity / 1500)) * maxSkew); }; gsap.ticker.add(tick); // No work while the marquee is off screen const visibility = new IntersectionObserver(([entry]) => { visible = entry?.isIntersecting ?? true; }); visibility.observe(root); return () => { gsap.ticker.remove(tick); visibility.disconnect(); gsap.set([...tracks, stack], { clearProps: "transform" }); }; }); return () => mm.revert(); }, { scope: rootRef, dependencies: [rowCount, scroller], revertOnUpdate: true }, ); const renderItem = (item: VelocityMarqueeItem, index: number, outline: boolean) => (

{"src" in item ? ( {item.alt

) : ( {item.text} )}

); return (

{Array.from({ length: rowCount }, (_, row) => { const rowItems = rotate(items, row * Math.ceil(items.length / 3)); const outline = outlineAlternate && row % 2 === 1; return ( // Rows after the first say the same thing again, so screen readers skip them

0 ? true : undefined} className={`flex w-max will-change-transform motion-reduce:w-full motion-reduce:flex-wrap motion-reduce:justify-center ${row > 0 ? "motion-reduce:hidden" : ""}`} > {Array.from({ length: copies }, (_, copy) => (

0 ? true : undefined} className={`flex shrink-0 items-center motion-reduce:w-full motion-reduce:shrink motion-reduce:flex-wrap motion-reduce:justify-center ${copy > 0 ? "motion-reduce:hidden" : ""}`} > {rowItems.map((item, index) => renderItem(item, index, outline))}

))}

); })}

); } 4f:["$","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","gsap",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/gsap","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":"gsap"}]]}]}],["$","li","@gsap/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40gsap%2Freact","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":"@gsap/react"}]]}]}]]}],["$","$L50",null,{"namespace":"@dimaac","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/dimaac/velocity-marquee/velocity-marquee.tsx","content":"$52","type":"registry:component","target":"components/dimaac/velocity-marquee.tsx"}],"className":"h-[70svh] min-h-80"}]]}]