Marquee

Quick implementation

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.marquee-container {
  overflow: hidden;
  background: var(--card);
  border-radius: var(--radius);
  padding: 1rem 0;
}

.marquee-track {
  display: flex;
  animation: marquee-scroll 30s linear infinite;
  white-space: nowrap;
}

.marquee-item {
  flex-shrink: 0;
  padding: 0 2rem;
  font-weight: 600;
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer specializing in performant, accessible marquee/ticker implementations.

Your goal: Build a seamless infinitely-scrolling marquee (horizontal ticker) component for news headlines, sponsor logos, or promotional content—using pure CSS with no JavaScript.

Technical constraints:
1. Use CSS @keyframes animation with linear timing (no easing)
2. Marquee should scroll continuously at a consistent speed (30–40s per loop)
3. Animation must be seamless with no visible gap when looping
4. Must support both fixed and responsive container widths
5. Items must remain horizontally aligned without wrapping
6. Must respect prefers-reduced-motion by disabling animation
7. Use translateX transform for GPU acceleration

Vanilla implementation:
- Create container with overflow: hidden
- Track div (flex, white-space: nowrap) with animation
- Items flex-shrink: 0 to prevent compression
- For seamlessness, duplicate items in DOM or use CSS to extend animation
- Optional: use animation-delay to stagger multiple marquees

React implementation:
- Create reusable Marquee component accepting children
- Use CSS Modules for @keyframes definition
- Pass speed prop to dynamically set animation-duration
- Consider framer-motion for pause-on-hover: whileHover={{ animationPlayState: 'paused' }}
- Wrap animation in useEffect to respect system prefers-reduced-motion

Edge cases to handle:
1. Seamless loop requires items to be duplicated or container width to match scroll distance
2. Different item widths should not break seamlessness
3. Pause animation on hover for accessibility and user control
4. Mobile: reduce animation speed to avoid rapid motion in small viewports
5. Text direction: support RTL (right-to-left) with direction: rtl and animation direction reversal

Why this matters in 2026

Marquee tickers are experiencing a resurgence in modern web design. News sites, crypto dashboards, and SaaS platforms use them to display trending data, sponsor logos, and real-time updates in a compact, eye-catching format. The continuous motion naturally draws attention without requiring JavaScript event listeners or complex state management.

In 2026, marquees must be performance-conscious and accessibility-aware. A CSS-only implementation avoids JavaScript overhead, reduces CLS (Cumulative Layout Shift), and respects user motion preferences. This is the gold standard for ticker functionality.

The logic

The marquee animation uses translateX(-100%) to slide all items to the left until they're completely off-screen. The linear timing function ensures constant velocity—essential for marquee motion to feel natural. A 30-second duration is comfortable for reading as items pass by.

The overflow: hidden container clips anything outside its bounds, and white-space: nowrap prevents items from wrapping. The flex-shrink: 0 property ensures each item maintains its width. For a seamless loop effect, duplicate the item list in HTML so that when animation ends, the next copy immediately enters from the left, creating the illusion of infinite scroll.

Accessibility & performance

Accessibility: Continuously moving content can be problematic for users with attention disorders, epilepsy (flashing/rapid motion), or motion sickness. Always provide a pause button or pause-on-hover mechanism. Respect prefers-reduced-motion: reduce by disabling animation completely. Consider adding aria-live="polite" to announce new items for screen reader users.

Performance: CSS animations on transform are GPU-accelerated and have minimal performance cost. Even with many marquee items, frame rates remain solid. Avoid animating other properties like left or margin, which trigger layout recalculations. The linear timing function is essential—easing functions cause performance hiccups in long-running animations.