Marquee (infinite ticker)
A row of text, logos, or cards that travels sideways forever and wraps back to the start without a visible gap.
See it
What it is
A marquee is a horizontal track that moves continuously, wraps, and starts again without exposing the join. Modern versions duplicate one complete content group and translate the combined track by exactly the first group's width. The old HTML '<marquee>' element, the one that made GeoCities pages crawl in the 90s, attempted the same job and is long deprecated.
Use it for nonessential headlines, partner logos, or a compact ticker where repetition is part of the graphic. Speed should come from distance and duration, not from a pile of individually timed items. Keep both copies identical so the first frame after the wrap matches the last.
Gotcha: duplicated content must not be read or focused twice. Mark the second group 'aria-hidden', remove interactive controls from it, and provide a pause control when moving content persists. Freeze the track or lay it out as a static wrapping row under reduced motion.
Ask AI for it
Build an infinite marquee with CSS @keyframes and two identical content groups inside one flex track. Translate the track from 0 to -50% with 'transform: translate3d()' and linear timing, and calculate duration from the measured group width at a constant 60 pixels per second so speed survives responsive resizing. Add one full gap to each group's measured width so the wrap has no jump. Mark the duplicate group 'aria-hidden', remove its descendants from the tab order, add a pause button, pause when focus enters the marquee, and render one static wrapping group under 'prefers-reduced-motion: reduce'.