Infinite Marquee

Infinite logo marquee with pause on hover/focus and static reduced-motion fallback.

Accessible logo railInfinite logo marquee with pause on hover/focus and static reduced-motion fallback.Use this asset as a visual and interaction brief. Copy the prompt into your AI coding tool, then adapt layout, brand voice and motion intensity to your product.

Back to Library

Then paste it into your favorite AI coding tool.

Details

Type: Effects
Category: Saas
Style: Minimal
Tech stack: CSS
Animation: Marquee
Difficulty: Beginner
License: Personal
Access: Free
Creator: Daniel Reed
Views: 701

Marquee
CSS
JavaScript

Copy. Paste. Create.

This prompt is engineered to communicate visual direction, layout, interaction, animation and technical requirements.

Build an infinite logo marquee: duplicated track, CSS animation, pause on hover and when any child receives focus. prefers-reduced-motion: show a static wrapped row. Ensure logos have alt text. Avoid layout shift.

Code

<!-- HTML -->
<div class="mq"><div class="track"><span>MOTION</span><span>FORGE</span><span>SCROLL</span><span>MOTION</span><span>FORGE</span><span>SCROLL</span></div></div>

/* CSS */
.mq{overflow:hidden;height:100%;display:flex;align-items:center;background:#050505}.track{display:flex;gap:2rem;white-space:nowrap;animation:mq 14s linear infinite;font:700 clamp(2rem,8vw,4rem)/1 system-ui;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px hsl(105 85% 62%)}.track span{padding-right:2rem}@keyframes mq{to{transform:translateX(-50%)}}

// JS