"use client"; import React, { useEffect, useRef } from "react"; export interface VelocityBandProps { /** One array of words per marquee row. Rows alternate direction. */ rows?: string[][]; /** Base drift speed in px/s when the page is still. */ baseSpeed?: number; /** How much scroll velocity boosts the drift (0 disables the reaction). */ velocityBoost?: number; /** Maximum skew angle (deg) applied at high scroll velocity. */ maxSkew?: number; /** Alternate serif-italic / sans words. Set false for all-sans. */ serifAlternate?: boolean; /** Read scroll velocity from this element instead of the window. */ containerRef?: React.RefObject; className?: string; style?: React.CSSProperties; } function MarqueeRow({ words, serifAlternate, rowRef, }: { words: string[]; serifAlternate: boolean; rowRef: (el: HTMLDivElement | null) => void; }) { const items = [...words, ...words, ...words, ...words]; return (

{items.map((word, i) => ( {word} ))}

); } /** * A typographic marquee whose drift speed and skew react to scroll velocity. * Rows alternate direction; scroll hard and the band leans into the motion. */ export function VelocityBand({ rows = [ ["Copy", "Paste", "Own", "Texture", "Timing", "Theatre"], ["Motion", "Editorial", "Canvas", "Serif", "Mono", "Ink"], ], baseSpeed = 54, velocityBoost = 200, maxSkew = 6, serifAlternate = true, containerRef, className, style, }: VelocityBandProps) { const sectionRef = useRef(null); const rowRefs = useRef<(HTMLDivElement | null)[]>([]); useEffect(() => { const section = sectionRef.current; const els = rowRefs.current.filter(Boolean) as HTMLDivElement[]; if (!section || els.length === 0) return; const reduced = window.matchMedia( "(prefers-reduced-motion: reduce)" ).matches; if (reduced) return; const readScroll = () => containerRef?.current ? containerRef.current.scrollTop : window.scrollY; let raf = 0; let running = false; const offsets = els.map(() => 0); let lastScroll = readScroll(); let velocity = 0; let skew = 0; let lastTime = performance.now(); const frame = (now: number) => { if (!running) return; const dt = Math.min((now - lastTime) / 1000, 0.05); lastTime = now; const sy = readScroll(); const instV = (sy - lastScroll) / Math.max(dt, 0.001); lastScroll = sy; velocity += (instV - velocity) * 0.12; const boost = Math.min(Math.abs(velocity) / 900, 3); const speed = (baseSpeed + boost * velocityBoost) * dt; const targetSkew = Math.max( -maxSkew, Math.min(maxSkew, velocity / 260) ); skew += (targetSkew - skew) * 0.1; els.forEach((el, i) => { const dir = i % 2 === 0 ? -1 : 1; const half = el.scrollWidth / 2; offsets[i] += speed * dir; if (offsets[i] <= -half) offsets[i] += half; if (offsets[i] >= 0) offsets[i] -= half; el.style.transform = `translate3d(${offsets[i]}px,0,0) skewX(${-skew}deg)`; }); raf = requestAnimationFrame(frame); }; const start = () => { if (running) return; running = true; lastTime = performance.now(); lastScroll = readScroll(); raf = requestAnimationFrame(frame); }; const stop = () => { running = false; cancelAnimationFrame(raf); }; const io = new IntersectionObserver( ([entry]) => (entry.isIntersecting ? start() : stop()), { threshold: 0 } ); io.observe(section); const onVisibility = () => { if (document.hidden) stop(); else if (section.getBoundingClientRect().bottom > 0) start(); }; document.addEventListener("visibilitychange", onVisibility); return () => { stop(); io.disconnect(); document.removeEventListener("visibilitychange", onVisibility); }; }, [baseSpeed, velocityBoost, maxSkew, rows.length, containerRef]); return ( ); } export default VelocityBand;