Marquee Loop
SkillBuilds seamless infinite marquees for logos, testimonials, screenshots or tags by duplicating the item sequence and translating the track from 0 to -50%, with stable widths, faded edges, optional hover pause and reduced-motion handling.
name: marquee-loop
description: "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
- 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.
관련 리소스
Animation On Scroll
SkillAdds scroll-reveal animations that fire when elements enter the viewport, using an IntersectionObserver snippet plus keyframes and a Tailwind arbitrary animation class; tune threshold, rootMargin, duration, delay and play-once behavior.
MengTo/Skills6.8k
Compact Landing
SkillBuilds compact, polished landing pages for dev tools, package demos and micro-SaaS. Picks a design fingerprint (composition, palette, type, radius, surfaces, motion) so each run looks different, features a product-native demo, and keeps zero layout shift, focus states and reduced motion.
danielwh2/compact-landing-skill37
Scroll World
SkillBuilds a scroll-scrubbed fly-through 3D world landing page for any brand: generates scene stills with Higgsfield and seamless camera clips via Monid (Seedance 2.0, paid per clip) or Higgsfield credits, then wires a vanilla JS scrub engine. Needs Higgsfield CLI and ffmpeg.
oso95/scroll-world10.2kMatter.js
SkillImplements 2D physics interactions with Matter.js: a minimal Engine, Render and Runner setup with bodies, optional mouse drag constraints and SPA cleanup steps, asking about canvas size and renderer when specs are missing.
MengTo/Skills6.8kCobe.js
SkillAdds a lightweight interactive WebGL globe with the cobe library: canvas sizing for device pixel ratio, location markers, rotation in onRender, resize handling and teardown, for plain pages or React/Next.js hero sections.
MengTo/Skills6.8kContainer Lines
SkillAdds thin vertical guide lines at the content container edges plus small corner squares for a measured, structured layout, with CSS tokens and pseudo-element code that keeps guides behind content and out of pointer events.
MengTo/Skills6.8k