Infinite horizontal text band that scrolls forever. Pure CSS keyframes. Often two bands moving opposite ways — a hallmark of editorial and agency sites.
A band of text — usually a brand mantra, services list, or featured tags — that scrolls horizontally forever. Pause on hover. Two bands often run in opposite directions for a parallax-like rhythm. Very popular on agency, fashion, and newsletter sites where it acts as both decoration and SEO copy.
Container has overflow: hidden. Inside, a flex track holds the items duplicated (you list each item twice so there's no visible jump when the loop seams). A CSS @keyframes translates the track from 0% to -50% over ~30 seconds, infinite. The reverse direction is a separate keyframes set from -50% to 0%. Add a small ::before/::after linear-gradient on the container edges to fade items in/out instead of clipping them harshly.
Three bands: a normal-sized mantra band, an oversized display marquee, and a second mantra reversed. Hover any to pause.
Marquee bands set a tone and a tempo. Combine a small band of words with a huge display marquee for editorial rhythm.
Build 3 stacked infinite-marquee text bands. Container overflow:hidden, hairline top/bottom borders. Inside each band, a flex track containing 6 .item spans, then DUPLICATED — every item listed twice so the loop is seamless at -50% translate. Each item is display-serif font, with a single italic accent-colored ✦ separator between items. Apply CSS keyframes "marquee-left" translating 0% → -50% over 28 seconds linear infinite, and "marquee-right" -50% → 0% for reverse. Pause on hover via animation-play-state. Add ::before and ::after linear-gradient edge fades (100px wide, fade to the container's background color) so the items don't clip harshly at the edges. Three bands: small mantra band (28px), oversized display marquee (clamp(56,8vw,96), 36s duration), small mantra band going right. Each pair of opposite-direction bands creates a hypnotic editorial rhythm.