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/source.json

{
  "version": 1,
  "provider": "Neuform",
  "synced_at": "2026-07-18T06:41:00.717Z",
  "skill": {
    "id": "marquee-loop",
    "label": "Marquee",
    "usage_count": 114,
    "url": "https://neuform.ai/skill/marquee-loop"
  },
  "ranking": {
    "position": 1,
    "order": [
      "view_count desc",
      "community_favorite_count desc",
      "relation_created_at desc"
    ],
    "visible_design_count": 1
  },
  "design": {
    "id": "24ca04a4-30fa-42e8-9dc6-71bf0f308e5d",
    "slug": "landing-page-13",
    "title": "Landing Page",
    "url": "https://neuform.ai/pages/landing-page-13/index.html",
    "view_count": 353,
    "favorite_count": 34,
    "remix_count": 9
  },
  "html": {
    "original_sha256": "e8b4babf539819ea3ef2f7132a8e12a647e76c6c107ab7d07c03a06afc0ad9d8",
    "bundled_sha256": "c250b50999f6d413d7b5fb141fa3a4c4df44911f13ffa51d9a1b736d2c6b7513",
    "runtime_dependencies": [],
    "hardened_sha256": "6179c9add9c54852256f80b2c0c230986208470061069dfca95dec6a1b7d0a59",
    "sandboxed_sha256": "12b7e6d199f675a7769163c1949c3012f549e41a0465c7202ad9a9fed849464a",
    "security_profile": "sandboxed-srcdoc-v1"
  },
  "assets": {
    "preview": "assets/source-preview.jpg",
    "bundled": [
      {
        "bytes": 1315224,
        "file": "assets/page-01-6b97b0cc-6b81-4451-aacc-6b928e7d0a69-3840w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/6b97b0cc-6b81-4451-aacc-6b928e7d0a69_3840w.jpg"
      },
      {
        "bytes": 1056637,
        "file": "assets/page-02-193e1472-0514-44eb-893a-1376091263f3-3840w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/193e1472-0514-44eb-893a-1376091263f3_3840w.jpg"
      },
      {
        "bytes": 55122,
        "file": "assets/page-03-5180d964-2425-4134-8220-c1528af09124-800w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/5180d964-2425-4134-8220-c1528af09124_800w.jpg"
      },
      {
        "bytes": 217369,
        "file": "assets/page-04-4f5668c5-fc4a-44e0-bc5e-a664189d3c31-1600w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4f5668c5-fc4a-44e0-bc5e-a664189d3c31_1600w.jpg"
      },
      {
        "bytes": 33767,
        "file": "assets/page-05-fbddf75f-e2e3-4552-a710-55e2a5f4d6af-800w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/fbddf75f-e2e3-4552-a710-55e2a5f4d6af_800w.jpg"
      },
      {
        "bytes": 57726,
        "file": "assets/page-06-16d38370-5873-45cf-bab1-60a7b923dc6e-800w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/16d38370-5873-45cf-bab1-60a7b923dc6e_800w.jpg"
      },
      {
        "bytes": 2271761,
        "file": "assets/page-07-8e802a98-b83c-4c5d-99d1-e24406eb4ec9-3840w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/8e802a98-b83c-4c5d-99d1-e24406eb4ec9_3840w.jpg"
      },
      {
        "bytes": 407279,
        "file": "../../../../assets/runtime/runtime-ccc8894b3418-runtime.js",
        "original_url": "https://cdn.tailwindcss.com/",
        "kind": "runtime-script",
        "sha256": "176e894661aa9cdc9a5cba6c720044cbbf7b8bd80d1c9a142a7c24b1b6c50d15"
      },
      {
        "bytes": 42667,
        "file": "../../../../assets/runtime/runtime-689ca8dda44c-scrolltrigger-min.js",
        "original_url": "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js",
        "kind": "runtime-script",
        "sha256": "65f6c13748b0c8d8f9eabd0373a130ac293b3f16bf34aaa946d953980372b932"
      },
      {
        "bytes": 71520,
        "file": "../../../../assets/runtime/runtime-027051effa47-gsap-min.js",
        "original_url": "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js",
        "kind": "runtime-script",
        "sha256": "efc85c7eb141819717cda0033484a84b1c890d13b02e355a2fec79d424b20e7a"
      },
      {
        "bytes": 22003,
        "file": "../../../../assets/runtime/runtime-163ebd087cfc-iconify-icon-min.js",
        "original_url": "https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js",
        "kind": "runtime-script",
        "sha256": "851bed7af266f96a0be3edf9918daab48d8da4ce17c46040511bae450caf3dd6"
      }
    ],
    "skipped": []
  }
}

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