003MOTIONPreview

Infinite Marquee

A looping text system for building rhythm, continuity, and controlled movement without losing typographic clarity.

Difficulty: Beginner
Build time: 90 minutes
Published: Jul 27, 2026
Updated: Jul 27, 2026

Interactive preview shell

Preview

MADLAB /MOTION /CODE /INTERACTION /BUILT FROM SCRATCH /MADLAB /MOTION /CODE /INTERACTION /BUILT FROM SCRATCH /

continuous / interruptible / readable

A continuous text loop with a controlled, readable pace.

01 / Overview

A continuous loop with a readable rhythm.

Infinite Marquee duplicates a short content set and translates the track continuously, creating motion that can be paused or reduced without losing the message.

02 / What you will learn

The idea behind the interaction.

Duplicate content to create a seamless loop.
Animate one track instead of every individual word.
Respect reduced motion and preserve readable contrast.

03 / How it works

Structure first. Tuning second.

The track contains two copies of the same items. A single linear translation moves the first copy out while the second copy takes its place.

04 / Build sequence

Step by step

Define the content rhythm

Keep the source list short, intentional, and easy to duplicate.

Build one moving track

Render both copies in one flex row with a fixed animation duration.

Protect readability

Slow the loop down, expose the content, and disable nonessential motion when requested.

tsx

const items = ["MADLAB", "MOTION", "CODE", "INTERACTION"];

export function InfiniteMarquee() {
  const loop = [...items, ...items];

  return (
    <div className="overflow-hidden whitespace-nowrap">
      <div className="marquee-track">
        {loop.map((item, index) => (
          <span key={`${item}-${index}`}>{item} / </span>
        ))}
      </div>
    </div>
  );
}

05 / Notes

Production details belong in the experiment.

06 / Props & API

A stable surface for the future build.

reducedMotion: boolean; Keeps the preview readable without nonessential movement.
className: string; Allows the experiment shell to inherit the MADLAB layout.
status: MadlabStatus; Communicates whether the experiment is draft, preview, or published.

07 / Performance

Measure before adding complexity.

Keep animation work local to the interaction, avoid unnecessary state updates, and pause nonessential work when the preview is not visible.

08 / Accessibility

The visual idea still needs a clear interface.

Every future experiment should have a semantic name, keyboard path, reduced-motion fallback, usable contrast, and a text explanation that does not depend on the animation.

09 / Mobile

A considered small screen composition.

On narrow screens, the preview should simplify its visual workload, preserve the primary idea, and never require horizontal scrolling to understand the experiment.

Final source actions

Source is available in the implementation block above.

jump to code

Continue exploring

Full archive ↗

001