Background· 23 sites
Reference: ResizeObserver, MDN contributors
How it works
A seamless ribbon of type moves at a constant speed with a visible pause control.In 5 steps.
The seam disappears when the repeated unit and the distance are exactly the same. Measure a whole group, duplicate it enough to cover the viewport, and wrap the transform by that group width. Speed is constant; an easing curve would make a ticker surge at every join.
The controls below are authored demonstration values, not measurements of the linked sites. The stored fits currently describe scroll smoothing and intro curves, not this effect's geometry; see each site's spec sheet for those separately measured values and fit errors.
- 01
Measure the repeating unit
Include its trailing gap in the group width. Re-measure after fonts and container size change.
- 02
Fill beyond both edges
Duplicate the group until the visible width plus a full repeat are covered. Mark duplicates aria-hidden.
- 03
Wrap distance, not elapsed time
Advance a pixel phase with delta time and modulo the measured unit. Changing speed does not jump to a new position.
- 04
Make stopping obvious
A real Pause button stops the ribbon; keyboard focus and pointer hover also pause. Reduced motion presents one still row.
- 05
Dispose cleanly
Call destroy() on unmount to remove interaction and visibility listeners, disconnect observers and cancel the pending frame. Ignore font-ready work after disposal.