About marquee-loop
A design skill for creating seamless, infinite marquee loops for repeated visual content. It covers animation setup, interaction choices, and reduced-motion considerations.
Key features
- 01Seamless sequence duplication
- 02Linear track animation
- 03Stable item widths
- 04Edge masking or fading
- 05Reduced-motion handling
Use cases
- 01Looping logo strips
- 02Displaying testimonials in a marquee
- 03Showing screenshots or feature tags
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/marquee-loopin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
demo/index.htmlPROMPT.mdsource.jsonDetails
From the project READMEMarquee Skill
Use When
- A design needs a seamless infinite loop for logos, testimonials, screenshots, tags, or short feature chips.
Workflow
- Duplicate the item sequence so the end and beginning match perfectly.
- Animate the track with a linear transform from 0 to -50%.
- Keep item widths stable to prevent jumps during the loop.
- Mask or fade the edges when the marquee enters or exits a section.
- Pause or slow the marquee on hover only when interaction is useful.
- 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.
Comments
Markdown supported