Marquees

Infinite tickers that tile their own content. The engine wraps children into an absolute track, repeats the unit until it covers the viewport, then scrolls the track forever. Give the host a width (horizontal) or height (vertical) and overflow-hidden.

Marquees are loops - they build via Config.js:163 and use the same time-N duration system as other loops, not spawns. They also support hover-* / click-* triggers like any loop.

Horizontal - left / right

.marquee-left scrolls toward the left, .marquee-right toward the right. The track is a row.

marquee-left

marquee-right

html

<div class="marquee-left time-20 overflow-hidden">
  <span>marquee-left</span><span>marquee-left</span>
</div>

<div class="marquee-right time-20 overflow-hidden">
  <span>marquee-right</span><span>marquee-right</span>
</div>

Vertical - up / down

.marquee-up and .marquee-down use a column track. Give the host a fixed height so the tiling has a viewport to fill.

marquee-up

marquee-down

html

<div class="marquee-up time-10 h-24 overflow-hidden">
  <span>marquee-up</span><span>marquee-up</span>
</div>

<div class="marquee-down time-10 h-24 overflow-hidden">
  <span>marquee-down</span><span>marquee-down</span>
</div>

Tunables

time-NTravel duration in seconds for one unit length (default 1)

.marquee-no-repeatOnly 2 copies, single seam - minimal tiling

marquee-horizontal-offset-NTrack left offset in px (horizontal marquees)

marquee-vertical-offset-NTrack top offset in px (vertical marquees)

html

<div class="marquee-left time-30 marquee-no-repeat overflow-hidden">…</div>
<div class="marquee-left marquee-horizontal-offset-12 overflow-hidden">…</div>
<div class="marquee-up marquee-vertical-offset-12 h-24 overflow-hidden">…</div>

Fixed background usage

For a decorative backdrop like the docs Display.jsx:37 marquee, use a fixed host with pointer-events-none -z-10 and keep marquee-left on the inner tiling element so scroll and DOM mutations do not affect it.

html

<div class="pointer-events-none fixed inset-0 -z-10 overflow-hidden flex items-center opacity-10">
  <div class="marquee-left whitespace-nowrap text-[25vw] font-black">
    <p>GCLASS GCLASS GCLASS GCLASS</p>
  </div>
</div>

Host must have content to tile - empty hosts return an inert tween (Animations.js:673). Horizontal hosts need a width, vertical hosts need a height, otherwise the engine sets one from the track.