Logo Marquee

A logo rail that never stops, and one the main thread never touches. The travel is a Web Animations API transform rather than a per-frame write from JavaScript, so the browser owns the interpolation on the compositor and a busy page cannot make the rail stutter, which matters most on a landing page, where the frame the visitor is scrolling is the busiest one there is. The children are rendered twice, each copy carrying the gap as trailing padding, so the track is exactly two copies wide and a translate of half of it lands the second copy where the first one started: the seam is the reset, and it is invisible because the two halves are identical there. Hovering slows it rather than stopping it, through playbackRate rather than a new duration, so the pace changes from wherever the rail currently is instead of jumping to wherever new timing says it should have been; it is off on touch, where a tap would fire the enter and never the leave. The rail pauses itself while it is off screen and retimes without moving when a web font settles its width. Both edges are cut back into the page by gradients of the page's own background, so logos arrive and leave instead of being clipped, and the marks paint in currentColor through muted-foreground so they follow the host's theme rather than being inverted into it. Stops under prefers-reduced-motion.