Animation · Attention · 16

Marquee Ticker

Marquee Ticker = a strip of text or logos that scrolls horizontally on a continuous loop to surface ambient, low-priority information.

Skip to the modify prompt →

New · Sale · Live now ·

Respects prefers-reduced-motion: the animation is disabled and the final state is shown.

How to prompt it

Build a marquee: duplicate the text and translateX from 0 to -100% on a linear loop, transform only.

Slow it to 12s and add a fade mask at both edges so items enter and leave softly.

Make the marquee pause on hover and on focus-within, respect prefers-reduced-motion by rendering a static truncated line, and expose --marquee-speed so the cadence is themeable. Duplicate content via two copies in one track.

Modify prompts change only the target — the rest of your page stays untouched.

What is a Marquee Ticker?

A marquee moves a strip of text or logos across the screen on a never-ending loop. It is ambient, not urgent — status lines, announcements, partner logos. The trick is seamlessness: duplicate the content so the loop has no visible jump, and pause it on hover so people can actually read it.

Animation Specimen

Trigger: mount
Tech: css
Duration: 6s
Easing: linear
Performance: transform

When to use

Status lines, announcements, breaking updates
Partner / logo strips on landing pages

Avoid when

Any content that must be read in full (use a list)
Above the fold as the primary message

Always duplicate the content — a single copy always shows a jump at the loop seam.

Get the code

.anim-el {
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
:root { --anim-accent: #6d5efc; }

.marquee {
  overflow: hidden;
  white-space: nowrap;
  width: min(240px, 100%);
  border-radius: 10px;
  padding: 12px 0;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e6e7ec);
  animation-name: marquee;
  animation-duration: var(--anim-duration, 6s);
  animation-timing-function: var(--anim-easing, linear);
}
.marquee span {
  display: inline-block;
  padding-left: 100%;
  font: 600 14px/1 'IBM Plex Mono', monospace;
  color: var(--ink, #1a1c22);
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

<div class="marquee anim-el"><span>New · Sale · Live now · </span></div>

Copy and drop it into your project. The motion touches only transform / opacity; colour comes from --anim-accent.

Marquee Ticker

What is a Marquee Ticker?

Animation Specimen

When to use

Avoid when

See also

Components

Animations

Styles

Themes

Prompts

Glossary

Anti-patterns