marquee-loop

Implements infinite marquee loops by duplicating items and animating a linear transform.

3|Updated Apr 20, 2026
One-click install
npx skills add https://github.com/langgenius/due-date-hq-jwl --skill marquee-loop-langgenius
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: marquee-loop
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.claude/skills/marquee-loop
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill marquee-loop-langgenius

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building a continuous scrolling marquee for logos, testimonials, or tags often results in visible jumps, broken loops, or accessibility issues. This Skill provides a repeatable workflow for creating smooth infinite loops that behave correctly across sections and user preferences. ## Core Features & Use Cases - Seamless Loop Construction: Duplicate the item sequence and animate the track from 0 to -50% so the end and beginning match perfectly. - Stability and Polish: Keep item widths stable to prevent jumps, and mask or fade edges when the marquee enters or exits a section. - Accessibility and Interaction: Respect prefers-reduced-motion with a static wrap or slow movement, and pause on hover only when useful. - Use Case: A landing page needs a continuously scrolling row of customer logos. Apply this Skill to duplicate the logo set, animate the track linearly, fade the edges, and provide a static fallback for reduced-motion users. ## Quick Start Add an infinite scrolling marquee of partner logos to my landing page section with edge fading and reduced-motion support.

Frequently Asked Questions about marquee-loop

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an infinite scrolling marquee in CSS?

Duplicate the item sequence so the end matches the beginning, then animate the track with a linear transform from 0 to -50%. Keep item widths stable so the loop does not jump when it restarts.

How to make a logo marquee loop seamlessly without jumps?

Ensure the duplicated content is exactly half the track width so the -50% translation lands perfectly on the loop point. Fixed, stable item widths prevent layout shifts that cause visible jumps during the animation.

Does a CSS marquee support prefers-reduced-motion?

Yes, the marquee should respect prefers-reduced-motion by rendering a static wrap or using very slow movement instead of the full-speed animation. This keeps the content accessible for motion-sensitive users.

Why does my marquee animation cause performance issues?

Performance problems usually come from large CPU-heavy shadows or filters applied to every moving item. Stick to transform-based animation, which is composited efficiently, and avoid expensive visual effects on the scrolling elements.

When should I not use an infinite marquee?

Avoid marquees for unique content that users must read carefully, since constant motion makes text hard to follow. Reserve the loop for logos, tags, testimonials, or short feature chips where scanning is optional.