Velocity marquee

1. Copy to Webflow

   Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: Webflow removes any font your site has not installed.
   Copy to Webflow

2. Add custom CSS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

   The space between two items belongs to the items, as a padding or a margin on each of them, so the rhythm holds where two copies join. A row that spaces its items with a flex gap has no space at that join: give --velocity-marquee-gap the same length, or move the space onto the items.

3. Add custom JS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

4. Use it on your own elements

   Custom attributes
   Select the element on the canvas and open the Settings panel. Under Custom attributes, add a pair: the name on the left, the value on the right.

   Custom attribute	What it does
   data-velocity-marquee	Marks the box the ribbon runs behind. It takes no value: leave the value field empty. That box is what clips the content, what the effect is mounted on and what carries the settings. Without it nothing is mounted anywhere, and the embed says so in the console.
   data-velocity-marquee-track	Marks the row that holds the content, inside that box, written once. It takes no value, and it decides what the ribbon is made of: the engine repeats this row as many times as the width needs. Without it the engine wraps everything inside the box in a row of its own and the ribbon still runs, but the whole content of the box becomes the ribbon, padding and headings included. [ Optional ]
   data-velocity-marquee-strip	Written by the engine on the box it builds around the row, and taken off again by destroy(). Never written by hand: it is in this table because it shows in the Navigator and because the stylesheet styles it. [ Optional ]
   data-velocity-marquee-clone	Written by the engine on every copy of the row. A copy is hidden from screen readers and taken out of the tab order, and it is made again whenever the width or the content changes. Never written by hand. [ Optional ]
   data-velocity-marquee-state	Written by the engine on the box: running, paused while it is off screen, still under reduced motion or when there is nothing to repeat. Never written by hand, and a page can style on it. [ Optional ]

   Settings
   Every setting is a custom attribute too, added the same way and on the same element. An attribute always wins over the defaults written in the code.

   Attribute	Default	What it is
   data-velocity-marquee-cruise	46	How fast the ribbon runs on its own, in pixels a second, when the page is not moving.
   data-velocity-marquee-direction	left	Which way the ribbon runs when nothing is happening. Options: left, right.
   data-velocity-marquee-boost	1.5	How much of the scroll speed is handed to the ribbon, as a factor.
   data-velocity-marquee-max-speed	2400	The ceiling, in pixels a second, whatever the scroll does.
   data-velocity-marquee-ease	0.12	How quickly the ribbon takes up a new speed, 0 to 1.
   data-velocity-marquee-skew	7	The strongest lean, in degrees, reached at top speed.
   data-velocity-marquee-reverse	true	Whether scrolling up sends the ribbon back the other way. Options: false (the page only ever pushes it forward), true.
   data-velocity-marquee-reduced-speed	0	The speed kept when the reader asks for reduced motion, in pixels a second. Options: 0 stands the ribbon still and makes no copy, any speed keeps it crawling with no lean.
   data-velocity-marquee-debug	false	Whether the ribbon writes its live state in data-velocity-marquee-debug-* attributes. Options: false, true (speed, lean, period, copies and offset, six times a second).

Two files, no build step. It also needs GSAP 3 on the page, loaded with the tag in step 1. It runs in the browser only. Load it with a script tag in plain HTML, in a client-side script in Astro, never in the frontmatter. In React, call VelocityMarquee.mount(ref.current) in useEffect and destroy() in its cleanup.

1. Tune it, either way

   Per element with an attribute, or once for the whole site by editing DEFAULTS at the top of the file.

   Attribute	Default	What it is	Lower	Higher
   data-velocity-marquee-cruise	46	How fast the ribbon runs on its own, in pixels a second, when the page is not moving.	Nearly still between two scrolls	Runs on briskly with no help
   data-velocity-marquee-direction	left	Which way the ribbon runs when nothing is happening. Options: left, right.
   data-velocity-marquee-boost	1.5	How much of the scroll speed is handed to the ribbon, as a factor.	The scroll barely shows in the ribbon	A flick of the wheel throws the ribbon across
   data-velocity-marquee-max-speed	2400	The ceiling, in pixels a second, whatever the scroll does.	A calm ribbon that refuses to race	A ribbon that can turn into a blur
   data-velocity-marquee-ease	0.12	How quickly the ribbon takes up a new speed, 0 to 1.	Long, heavy, keeps running after the scroll stops	Snappy, glued to the scroll, close to nervous
   data-velocity-marquee-skew	7	The strongest lean, in degrees, reached at top speed.	Upright at any speed	A pronounced slant, watch the legibility
   data-velocity-marquee-reverse	true	Whether scrolling up sends the ribbon back the other way. Options: false (the page only ever pushes it forward), true.
   data-velocity-marquee-reduced-speed	0	The speed kept when the reader asks for reduced motion, in pixels a second. Options: 0 stands the ribbon still and makes no copy, any speed keeps it crawling with no lean.
   data-velocity-marquee-debug	false	Whether the ribbon writes its live state in data-velocity-marquee-debug-* attributes. Options: false, true (speed, lean, period, copies and offset, six times a second).

2. Drive it from JavaScript

   When the ribbon has to stop and start on its own, when the content changes after load, or when the page reacts to its speed or to its turns.
   JavaScript Expand Copy

   const element = document.querySelector('[data-velocity-marquee]');
   element.addEventListener('velocitymarquee:ready', (e) => {
     console.log(e.detail);
   });
   
   const ribbon = VelocityMarquee.mount(element);   // the box auto() mounted, or a new one
   ribbon.pause();      // out of the frame loop, and ribbon.play() back into it
   ribbon.speed();      // px/s now; ribbon.lean() the degrees, ribbon.period() the wrap distance
   ribbon.measure();    // read the period and the copies again, after a layout change of your own
   
   // Content added after the page loaded: mount everything marked inside it.
   VelocityMarquee.auto(document.body);
   
   // When the ribbon leaves the page:
   VelocityMarquee.destroy(element);   // removes the strip and the copies, hands the row back

   Show all 15 lines

3. Fit it to your page

   • Mark the box, not the section: data-velocity-marquee goes on the ribbon itself, the box with the height, the rules and the type. A page can hold as many as it likes and they stay independent, each with its own speed and its own offset.
   • Write the content once, in the row marked data-velocity-marquee-track. Anything goes inside: words, links, images, badges, an icon between two items. The engine copies that row as many times as the width needs, and counts again when the width, the font or the content changes.
   • Settings go on the box, as more attributes: data-velocity-marquee-direction="right", data-velocity-marquee-skew="12". Three levels, least specific first: DEFAULTS, then window.VelocityMarqueeSettings = { cruise: 90 } declared before the engine, then the box's own attributes.
   • From JavaScript: VelocityMarquee.mount(el, overrides) returns { element, track, settings, speed(), lean(), period(), copies(), measure(), play(), pause(), destroy() }, and hands back the existing handle for a box already mounted. VelocityMarquee.destroy(el), VelocityMarquee.auto(root) and VelocityMarquee.defaults complete it. Events, all bubbling, with element in the detail: velocitymarquee:ready (period, copies, still), velocitymarquee:measure (period, copies, width, reason), velocitymarquee:enter and velocitymarquee:leave (speed), and velocitymarquee:reverse (direction, speed) each time the ribbon turns round.
   • It costs nothing off screen. An IntersectionObserver takes a ribbon out of the frame loop the moment it leaves the window, and the loop itself stops when the last one leaves. Measured: 144 writes on the strip in 1.2 s on screen, 0 off screen.
   • **Under prefers-reduced-motion: reduce** the ribbon stands still, makes no copy at all and leaves the page exactly as the stylesheet laid it out, with no transform of any kind. Set data-velocity-marquee-reduced-speed to keep it crawling instead; there is no lean on that path whatever skew says. The media query is listened to, so turning the setting on or off answers without a reload.
   • Touch: a finger scrolling the page drives the ribbon exactly like a wheel, since both move the page. Nothing answers the pointer itself, so a link inside the ribbon stays a link.
   • The words of the markup are the preview's, and they ship as they are: pasted, the page reads the way the preview did. Put the user's own content in their place whenever they want, in the page's language.
   • On Webflow, add the fonts first. Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: the paste names them, and the Designer drops a font the site does not have.

4. Avoid the pitfalls

   • The stylesheet matters. Without velocity-marquee.css the copies stack instead of lining up, the engine measures nothing, leaves the ribbon still and says so in the console after a second and a half, which is long enough for a sheet that is merely late to arrive.
   • A ribbon in a grid or a flex row needs the box to be given a width by its parent. The stylesheet asks for that with contain: inline-size: the strip inside is as wide as every copy laid end to end, and without containment an auto grid column would take that width, which is thousands of pixels, and then ask for more copies still. A grid that holds a ribbon also wants minmax(0, 1fr) rather than the default auto.
   • No width is set on the box by the component. A full bleed ribbon made of negative margins keeps working. A ribbon that must be exactly as wide as something else gets its width from your own class.
   • The space between two items belongs to the items. padding or margin on each item repeats with the copies, so the rhythm holds at the join. A flex gap on the row does not: there is no gap between the last item of one copy and the first of the next. Either move the space onto the items, or give --velocity-marquee-gap the same length; the engine warns once when it sees a gap it cannot follow.
   • The ribbon needs something to clip it. The box is overflow: hidden in the component CSS. An ancestor with overflow: visible and a fixed height is not enough on its own.
   • **Do not put data-velocity-marquee on a section that also holds your headings.** The whole content of the box becomes the ribbon when no track is marked. Mark the row.
   • Two ribbons on one page are independent, and share a single frame loop and a single reading of the scroll, so a second one costs almost nothing.
   • **An id inside the ribbon travels no further than the original row**: copies have their ids stripped and their focusable elements taken out of the tab order, because a document with the same id three times is broken. Do not count on a copy being reachable.
   • A pointer state never survives the paste (AB-41): a hover colour on a link inside the ribbon lives in the CSS of the component or in your own class, never in a Webflow class variant.

One click on Copy the AI prompt copies everything an assistant needs to build this effect: the complete code, the markup, the dependency, every setting and every pitfall.