Four visual treatments
Choose solid classic type, oversized outlines, rounded pills, or a compact information ticker.
Type & rhythm
Marquee Loop
Build a seamless text rail with one, two, or three rows. Tune its direction, treatment, spacing, and pace as a complete composition.
Seamless loop / 2 rowsDESIGN IN MOTION
Continuous, considered rhythm
Marquees that loop cleanly at every width.
Create announcement rails, culture-site banners, product tickers, event identities, and atmospheric type bands with duplicated visual groups and one accessible message.
Multi-row composition
Stack up to three rails, alternate their direction, and tune text, separator, spacing, speed, and palette.
Seamless CSS motion
Equal duplicated groups meet at the loop boundary without JavaScript measurement or a canvas render loop.
Three-step workflow
How to use the Marquee Loop studio
- Write the rail
Set a concise phrase and separator, then choose a treatment and type voice.
- Build the cadence
Control direction, rows, alternation, duration, gap, scale, palette, and optional pause on hover.
- Ship the loop
Copy a paste-ready HTML/CSS fragment or download a complete responsive page.
Questions, answered.
Why does the visual text repeat in the markup?
Two equal groups create the seamless boundary. Both are hidden from assistive technology and one clean message is provided separately.
Can different rows move in opposite directions?
Yes. Enable alternate row direction when using two or three rows.
Does it need JavaScript to stay seamless?
No. The groups are structurally equal, so a percentage-based CSS transform creates the loop.
What happens with reduced motion?
Animation stops, the duplicate group is hidden, and a stable rail remains visible.