① Fashion collection manifesto that speeds up as you scroll
WhenThe top of a limited collection page: under the navigation, a large “DROP 07 ✦ RAW WINTER ✦ 300 PIECES” band and a thin reversed band listing the fabrics, above the first three products.
WhyThe band reacts to the most common gesture on the page, scrolling: it gives rhythm to the arrival on the collection without video or heavy images, and stops as soon as the mouse rests on it so people can read.
Settingsdata-vmq-speed="70", data-vmq-skew="9"; large band --vmq-size:58px, small band data-dir="rtl" at 15 px; colors --vmq-color:#f5f5f4, --vmq-accent:#f97316 on the root; root height 124 px, transparent background.
Le FerlancInvestigationsPortraitsArchiveSubscribe
By two in the morning the presses have stopped. Only the cutting room stays lit, where three people finish an order due before dawn.
Nobody here calls it night work. They say “the second shift”, as if the day simply carried on under the neon lights.
② Transition band between two chapters of a long read
WhenIn a long investigation on a magazine site, between the end of chapter I and the chapter II heading: a dark full-width band announces “CHAPTER II ✦ NIGHT WORKSHOPS ✦ 11 PM – 5 AM”.
WhyReaders scroll continuously: the band comes alive exactly when they move from one part to the next, marks the break like a print section heading and settles as soon as they stop scrolling.
Settingsdata-vmq-speed="42", data-vmq-skew="6"; a single 56 px band, 22 px text; background #1c1917, text --vmq-color:#f4efe6, accent #c2410c; Pause button vertically centered on the right.
BRISOLDETickets
Today
18:30North stage · Doors open·19:15Big top · Percussion workshop·20:30Main stage · Opening concert·22:00Courtyard · DJ set·23:40Lakeside · Fireworks·
June 4 – 6 · By the lake
Brisolde 2027
Three days of music, forty concerts. Hover today's times to stop them and read.
Get a ticketFull line-up
③ Today's times in a festival header — the band stops under the mouse
WhenBelow a festival site header, a thin 32 px line introduced by “Today” runs the day's schedule (time in yellow, stage and event).
WhyThe times stay visible without taking room in the header; since the band stops on hover and focus, everyone can calmly read the time they care about.
Settingsdata-vmq-speed="38", data-vmq-skew="3"; 32 px band, 12.5 px text, time in a <b> inside each .vmq-item; root set to flex: 1 next to the “Today” label.
How it works
Every .vmq-root inside a .fx-0831-root is one band. The script keeps your items (.vmq-item, .vmq-sep) and appends just enough copies to cover the band width; the position moves in pixels per second based on elapsed time (same speed on a 60 Hz or 120 Hz screen) and wraps after exactly one set of items, so there is no visible seam.
The base speed (50 px/s) breathes slightly (±12%). Scrolling the page adds a push proportional to the pixels scrolled: scrolling down speeds the band up, scrolling up slows it and can briefly reverse it. Horizontal mouse movement inside the root, between the bands, does the same (on a band, stopping wins). The gap from the base speed leans the text (skewX, 7° at most), then everything eases back.
Bands in the same root share their state: data-dir="rtl" reverses one band, hovering or focusing any band stops them all in about 0.4 s, and the .vmq-pause-btn button freezes them. Two roots on a page stay independent. Off screen the loop stops; it rebuilds when the root width changes.
Accessibility
Pause: hovering a band or moving keyboard focus into it (a link inside the band, for instance) stops it; the Pause button carries aria-pressed and freezes every band of the root until the next click (WCAG 2.2.2).
Hidden copies: only your original items are read by screen readers; the copies added for the loop carry aria-hidden="true" and their links tabindex="-1", so nothing is announced or reached twice.
Reduced motion: under prefers-reduced-motion: reduce, no copy is created and nothing moves; each band becomes a line you scroll with a finger, the wheel or the keyboard (it gets tabindex="0" when its content overflows). The Pause button and the demo hint are hidden.
Decorative separators: the “✦” and “·” characters carry aria-hidden="true".
Browser compatibility
Pointer Events, IntersectionObserver and ResizeObserver (both feature-tested), mask-image with the -webkit- prefix. Measured on 2026-11-08 in Chromium, Firefox and Playwright's WebKit: speed, pause on hover, focus and button, two independent copies, reduced motion, touch at 390 px.
Chrome 64+✓ Full (measured)
Firefox 69+✓ Full (measured)
Safari 13.1+✓ Measured in WebKit, not in a real Safari
Edge 79+✓ Full (same engine as Chrome)
Safari iOS 13.4+✓ Not checked on a device
Chrome Android 64+✓ Touch measured in emulation (390 px)
Without JavaScript, each band shows your original items, still, clipped at the right edge. Without CSS masks, the band edges are sharp instead of fading out.
The code
Copy the three blocks into your page. No dependencies.
Solid text, outline of outline words and separators; set them on the root or on one band.
Pause button (HTML — .vmq-pause-btn)
Present
You may remove it, but then keep another way for keyboard users to stop the motion (WCAG 2.2.2).
FAQ
Why does the band sometimes run backwards?
Scrolling up removes speed: a quick flick goes past the base speed and the band backs up for a moment, then the push fades (it loses about 20% per frame) and the band returns to its normal direction.
Can I put logos or links in the band?
Yes: every child of .vmq-track is kept. Links stay clickable, keyboard focus stops the band, and the copies made for the loop are removed from the keyboard order and from screen readers. Give images a fixed height so the width measured at start is right.
My fonts load late: will the loop jump?
No. The script rebuilds the bands once document.fonts.ready resolves and whenever the root width changes, so one lap always matches the words actually displayed.
