AutoGineer
Generated banner for Marquee Loop
Generated logo for Marquee Loop

Marquee Loop

Meng ToCommunityCreated by Meng To

  • Skill
  • Guidelines
  • Design and creative
  • MIT
  • Medium risk
Get it from the source

From the author

Apply seamless infinite marquee loops using duplicated items.
— the description by Meng To

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

The marquee-loop skill provides a structured approach to implementing infinite scrolling animations in web design. By duplicating content sequences and applying linear transforms, it ensures a smooth, continuous loop effect. The workflow emphasizes performance and accessibility, advising on item stability, edge masking, and respecting user motion preferences.

What it does

  • Guides the duplication of content to ensure a seamless transition between the end and start of a loop.
  • Defines the animation logic using linear transforms.
  • Provides best practices for maintaining stable item widths to prevent visual jumps.
  • Suggests techniques for masking or fading edges for a polished look.
  • Includes accessibility considerations for reduced motion settings.
  • Outlines performance guardrails to avoid CPU-heavy effects.

When to use it

  • When implementing infinite scrolling carousels for logos or testimonials.
  • When displaying short feature chips or tags in a continuous loop.
  • When creating dynamic background elements that require seamless repetition.
  • When you need to ensure animations remain performant and accessible.

Advantages

  • Ensures visual continuity through a proven duplication workflow.
  • Promotes accessible design by incorporating reduced motion support.
  • Improves performance by discouraging heavy filters on moving elements.
  • Provides clear steps for achieving a professional, glitch-free animation.

Usage examples

“Create a seamless infinite marquee for a list of client logos.”
The agent will guide you through duplicating the logo list, setting the linear transform to -50%, and applying edge masks for a smooth, continuous loop.
“How do I make my testimonial slider loop without jumping?”
The agent will instruct you to ensure consistent item widths and use the specified duplication technique to align the start and end points perfectly.

Install

  1. 3 of its files are not mirrored here, so install it from its source:

    https://github.com/MengTo/Skills/tree/5ea1661a0e05d82b054553daaa6baf6d0233c33c/agent-skills/web-design/marquee-loop

Documentation by Meng To

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.

Files

demo/PROMPT.md

Marquee Demo Prompts

Minimal prompt

Use $marquee-loop to create a responsive standalone HTML design with the same visual confidence, hierarchy, and interaction finish as the included Neuform reference.

Recreate the demo

Use $marquee-loop to recreate the design quality and behavior of Landing Page as a complete responsive HTML document. Treat the included demo/index.html as the visual and interaction reference, not as a loose mood board.

Product brief

  • Page concept: Landing Page.

  • Purpose: Product Promise Feature Section is designed for highlighting product capabilities and value points. Key features include reusable structure, responsive behavior, and production-ready presentation. It is suitable for component libraries and responsive product interfaces.

  • Content anchors: Your product is your promise. Ensure it delivers on every interaction. · Chosen by visionaries who demand excellence in every pixel. · The engine powering the experience..

  • Useful subject tags: feature, section, animated, bento.

Skill direction

  • Apply seamless infinite marquee loops using duplicated items.

    • Marquee: Apply seamless infinite marquee loops using duplicated items.

Fidelity target

  • Match the reference's composition, information density, type scale, spacing rhythm, surface treatment, color relationships, and motion restraint.

  • Preserve the strongest interaction and animated background behavior instead of replacing it with generic fades or decorative movement.

  • Keep the first screen art-directed, then carry the same design logic through every supporting section.

  • Make the result responsive from mobile to desktop, keyboard accessible, and stable when reduced motion is enabled.

  • Deliver a full index.html. Put page-owned images, video, models, and textures in demo/assets/. External runtime libraries may stay as pinned CDN dependencies when the source relies on them.

Reference snapshot

Remix prompt

Use $marquee-loop and the included Neuform demo as the quality bar, but replace the brand, subject, copy, palette, and content. Preserve the underlying layout logic, signature visual treatment, interaction choreography, responsive behavior, and performance constraints so the remix still clearly demonstrates the skill.

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

What our scanner noticed· Medium risk

  • Large base64-encoded blobs

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Meng To
Publisher
Meng To (Community)
Source
MengTo/Skills · agent-skills/web-design/marquee-loop · commit 5ea1661
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Meng To or Meng To.

Get it from the source

3 of this skill’s files are not mirrored here, so there is no ZIP. Get the complete skill from its source: MengTo/Skills