FX-011 · Velocity Marquee
A marquee that follows the scroll.
An endless band of type drifts on its own and answers the scroll: it speeds up as you scroll, turns round when you scroll back, and leans into the motion. Screen readers hear the band once.
- Weight1.6 KB
- LibraryNone
- PhonesWorks
- Licence€39
Live · React
Scroll this page. The band speeds up, leans, and turns round when you go back.
Live · Reverse
Set the direction and resting speed in the markup.
Live · Calm
Turn off the reaction and the lean, and it simply drifts.
01 — Details
What it does.
Answers the scroll
It speeds up as you scroll, turns round when you scroll back, and leans into the motion.
No seam
Copies are made to fill the width, and it measures again when fonts land or the window changes.
Heard once
The copies are hidden from screen readers, so the band is read a single time.
Sleeps off screen
It stops when it is out of view, and holds still for reduced motion.
02 — Prompt
Free AI prompt.
Paste this into your AI coding tool to build the effect in your own stack. It carries the behaviour, the build and the traps we hit in production. It is free for pitches and personal work.
Build an endless, scroll-reactive marquee for this website in plain JavaScript. Behaviour - A band of type drifts sideways on its own, with no visible seam. - Scrolling speeds it up, scrolling back turns it round, and it leans into the motion with a small skew, easing back when the scroll stops. Build - Put the text in one run, and clone runs until they fill the band twice over. Wrap them in a row and move it with a transform, wrapping the position at exactly one run's width. - Keep the position in a frame loop: add the resting speed times delta time, plus the scroll velocity. - Hide the clones from screen readers with aria-hidden, so the band is heard once. Must hold - Measure the run's layout width with offsetWidth, not getBoundingClientRect. A transform or perspective on a parent changes the rect and opens gaps. - Measure again with a ResizeObserver when fonts land or the width changes. - The skew must not clip the tops of the letters, so give the band some room. - Stop the loop when the band is off screen. - With prefers-reduced-motion, hold it still. - Restore the original markup on teardown. Done when no seam ever shows, at any width and after a resize, and a fast scroll never makes it jump.
03 — Code
Or drop it in.
With a licence, the finished effect is one attribute. The small runtime fetches what it needs and removes everything again if the element goes.
<script src="/fx/sitefx.js"></script> <div data-fx="marquee" data-fx-marquee-speed="80"> <span>Kinetic type · HUD · Code rain · </span> </div>
| Option | Default | What it does |
|---|---|---|
| data-fx-marquee-speed | 60 | Pixels per second at rest |
| data-fx-marquee-direction | -1 | -1 for leftward, 1 for rightward |
| data-fx-marquee-react | true | Follow the scroll velocity |
| data-fx-marquee-skew | 8 | Maximum lean in degrees, 0 for none |
04 — FAQ
Questions.
Does a marquee hurt SEO?
No. Your text is in the page once, and the copies are added by the script and hidden from screen readers.
Does it need a library?
No. It runs on the small SiteFX runtime alone.
What if my text is short?
Copies are made to fill the width, so a short phrase still runs edge to edge with no gap.
What about reduced motion?
The band holds still, with the text fully readable.
Licence
Velocity Marquee · €39
One effect, yours to keep. Unlimited client projects, 1 developer, 12 months of updates. Prices exclude VAT.