Ticker

An endless band of content sliding sideways at a steady speed. From components/motion/Ticker.tsx. First built for the third site.

Default: 50px a second, 24px gap, leftward

<Ticker>…</Ticker>

New firingOpen studioSaturday*

Speed

<Ticker velocity={200}>…</Ticker>

New firingOpen studioSaturday*

Direction

<Ticker direction="right">…</Ticker>

New firingOpen studioSaturday*

Two rows passing each other

<Ticker velocity={40}>…</Ticker>
<Ticker velocity={40} direction="right">…</Ticker>

New firingOpen studioSaturday*

Pause on hover or focus (try the links with Tab)

<Ticker pauseOnHover gap={48}>…</Ticker>

Tableware Vases Lamps Makers

Any content: boxes of different widths, no gap

<Ticker gap={0} velocity={80}>…</Ticker>

As a backdrop: fill a positioned parent

<div className="relative h-64 overflow-clip">
  <Ticker fill gap={0} className="absolute inset-0">…</Ticker>
  <p className="relative">Text on top</p>
</div>

Text on top

Content shorter than the band still fills it

<Ticker>
  <span>One</span>
</Ticker>

One