← LeaderboardThe Skill Leaderboard

marquee-loop

Apply seamless infinite marquee loops using duplicated items.

Published by MengTo ↗MengTo/Skills

Try your first task

Add a seamless chip marquee

Start a fresh conversation.

Use the marquee-loop skill to turn my supplied short feature chips into one seamless infinite marquee. Duplicate the sequence, keep item widths stable, use a linear transform, and provide a static wrap for prefers-reduced-motion.

Required inputs

  • The page or component to modify
  • Short feature-chip content that does not require careful reading

Suggested template by Skill Leaderboard, grounded in the linked source. Task evidence ↗

SKILL.md

name: marquee-loopdescription: "Apply seamless infinite marquee loops using duplicated items."

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.