import { useRef, useEffect, useState, useMemo, useId } from 'react'; import './CurvedLoop.css'; const CurvedLoop = ({ marqueeText = '1', speed = 2, className, curveAmount = 400, direction = 'left', interactive = true }) => { const text = useMemo(() => { const hasTrailing = /\s|\u00A0$/.test(marqueeText); return (hasTrailing ? marqueeText.replace(/\s+$/, '') : marqueeText) + '\u00A0'; }, [marqueeText]); const measureRef = useRef(null); const textPathRef = useRef(null); const pathRef = useRef(null); const [spacing, setSpacing] = useState(0); const [offset, setOffset] = useState(0); const uid = useId(); const pathId = `curve-${uid}`; const pathD = `M-100,40 Q500,${40 + curveAmount} 1540,40`; const dragRef = useRef(false); const lastXRef = useRef(0); const dirRef = useRef(direction); const velRef = useRef(0); const textLength = spacing; const totalText = textLength ? Array(Math.ceil(1800 / textLength) + 2) .fill(text) .join('') : text; const ready = spacing > 0; useEffect(() => { if (measureRef.current) setSpacing(measureRef.current.getComputedTextLength()); }, [text, className]); useEffect(() => { if (!spacing) return; if (textPathRef.current) { const initial = -spacing; textPathRef.current.setAttribute('startOffset', initial + 'px'); setOffset(initial); } }, [spacing]); useEffect(() => { if (!spacing || !ready) return; let frame = 0; const step = () => { if (!dragRef.current && textPathRef.current) { const delta = dirRef.current === 'right' ? speed : -speed; const currentOffset = parseFloat(textPathRef.current.getAttribute('startOffset') || '0'); let newOffset = currentOffset + delta; const wrapPoint = spacing; if (newOffset <= -wrapPoint) newOffset += wrapPoint; if (newOffset > 0) newOffset -= wrapPoint; textPathRef.current.setAttribute('startOffset', newOffset + 'px'); setOffset(newOffset); } frame = requestAnimationFrame(step); }; frame = requestAnimationFrame(step); return () => cancelAnimationFrame(frame); }, [spacing, speed, ready]); const onPointerDown = e => { if (!interactive) return; dragRef.current = true; lastXRef.current = e.clientX; velRef.current = 0; e.target.setPointerCapture(e.pointerId); }; const onPointerMove = e => { if (!interactive || !dragRef.current || !textPathRef.current) return; const dx = e.clientX - lastXRef.current; lastXRef.current = e.clientX; velRef.current = dx; const currentOffset = parseFloat(textPathRef.current.getAttribute('startOffset') || '0'); let newOffset = currentOffset + dx; const wrapPoint = spacing; if (newOffset <= -wrapPoint) newOffset += wrapPoint; if (newOffset > 0) newOffset -= wrapPoint; textPathRef.current.setAttribute('startOffset', newOffset + 'px'); setOffset(newOffset); }; const endDrag = () => { if (!interactive) return; dragRef.current = false; dirRef.current = velRef.current > 0 ? 'right' : 'left'; }; const cursorStyle = interactive ? (dragRef.current ? 'grabbing' : 'grab') : 'auto'; return (
{text} {ready && ( {totalText} )}
); }; export default CurvedLoop;
Single Neutral Circle Streamline Icon: https://streamlinehq.comsingle-neutral-circle

LOGG INN

Åpningstider Fre 10.00 – 19.00 | Lør 10.00 – 19.00 | Søn 10.00 – 17.00

Powered by enthusiasts

23. - 25. oktober 2026, NOVA Spektrum

Av entusiaster, for entusiaster

Oslo Motor Show er stedet for alt som har med motor å gjøre. Vi elsker fart og moro og sammen med våre utstillere lager vi Norges råeste og mest innholdsrike show for alle som liker kjøretøy.

LES MER

SØK OM Å STILLE UT KJØRETØY

Vil du stille ut ditt kjøretøy/fordon på Oslo Motor Show?

Hvert år er det flere hundre kjøretøyeiere som ønsker å stille ut kjøretøyet sitt på Oslo Motor Show. Vi skulle gjerne hatt plass til alle sammen, men sånn er det dessverre ikke. Her forklarer vi hvordan prosessen foregår.

SØK HER

Aktuelt

SE ALLE

SØK OM KLUBBSTAND

Er du medlem i en klubb eller interesseorganisasjon og ønsker stand på Oslo Motor Show 2025? Da kan du sende inn en søknad her.

SØK OM KLUBBSTAND

Nyheter fra våre samarbeidspartnere

Nyheter fra BilNorge

Her kan du lese alt BilNorge.no har skrevet om Oslo Motor Show
Les mer fra BilNorge.no

Nyheter fra Broom

Her kan du lese alt Broom har skrevet om Oslo Motor Show
Les mer fra Broom.no

Vi åpner dørene om

Dager
Timer
Minutter
Sekunder

ARRANGØRER

MEDIEPARTNER