marquee-loop
Back to list

MengTo/marquee-loop

Marquee Loop

GitHub

Use when building looping marquees that need steady rhythm, spacing, and performance awareness.

80 installsMotionInteractionFrontend4 demos

Real-world examples

Live HTML demos for this skill — rendered directly in the page. 4 examples.

  1. 01

    Seamless logo strip

    Partner logos duplicated into one track, linear translateX 0→−50%, stable widths, and soft edge fades so the seam never shows.

  2. 02

    Feature chip marquee

    Short tag chips in a continuous loop with edge masking; hover slows the track instead of freezing it mid-phrase.

  3. 03

    Testimonials with hover pause

    Quote cards loop infinitely; hover pauses for reading, and prefers-reduced-motion swaps to a static wrap.

  4. 04

    Screenshot reel (bi-direction)

    Two stacked tracks — forward and reverse — each using the same duplicated-sequence −50% loop for a product gallery feel.

Skill markdown
# Marquee Skill

## Use When
- A design needs a seamless infinite loop for logos, testimonials, screenshots, tags, or short feature chips.

## Workflow
1. Duplicate the item sequence so the end and beginning match perfectly.
2. Animate the track with a linear transform from 0 to -50%.
3. Keep item widths stable to prevent jumps during the loop.
4. Mask or fade the edges when the marquee enters or exits a section.
5. Pause or slow the marquee on hover only when interaction is useful.
6. Respect prefers-reduced-motion with a static wrap or very slow movement.

## Guardrails
- Do not animate unique content that users must read carefully.
- Do not use large CPU-heavy shadows or filters on every moving item.

More from MengTo