# Marquee Loop

> Apply seamless infinite marquee loops using duplicated items.

Apply seamless infinite marquee loops using duplicated items.

- Page: https://ss33.ai/skills/mengto/marquee-loop-13618908004
- Publisher: mengto
- Category: [Software Development](https://ss33.ai/skills/category/software-development-t44z8z) › [Frontend & UI](https://ss33.ai/skills/category/software-development-t44z8z/frontend-and-ui-q25e9r)
- License: MIT
- Source: https://github.com/mengto/skills/blob/398cd41c86ba42fbb30e944ae507f463648f08b7/agent-skills/web-design/marquee-loop/SKILL.md

## Skill

SKILL.md: https://ss33.ai/api/v1/ss33/download/mengto/marquee-loop-13618908004

# 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.