Motion & texture

Marquee

Q: How do people describe a Marquee in plain words?

that strip of news that keeps sliding sideways forever logos drifting in a loop across the footer a continuous ticker under the header

Q: How do I implement a Marquee?

Build a seamless announcement marquee: duplicate the content once in the track, animate transform: translateX(-50%) linear infinite, mask-image fades on the edges, pause on hover/focus, and stop under prefers-reduced-motion. Do not use the obsolete element.

Content scrolls endlessly in one direction in a seamless loop.

Also known as ticker · seamless scroll · scrolling banner

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Marquee".

Build a seamless announcement marquee: duplicate the content once in the track, animate transform: translateX(-50%) linear infinite, mask-image fades on the edges, pause on hover/focus, and stop under prefers-reduced-motion. Do not use the obsolete <marquee> element.

Anatomy:
- track: The moving layer.
- duplicated content: Clone the strip so the loop has no gap.
- edge fade: mask-image at the ends softens the seam.

Preferred API / pattern: `CSS track duplicate / embla-style infinite plugins`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: No reduced-motion handling
○Avoid: Using obsolete <marquee>
○Avoid: Content narrower than the viewport with only one copy
○Avoid: Animating left/top instead of transform
○Avoid: Clickable chips on a moving track

In plain wordsHow people search for it

“that strip of news that keeps sliding sideways forever”“logos drifting in a loop across the footer”“a continuous ticker under the header”

AnatomyOpen for part names

track: The moving layer.
duplicated content: Clone the strip so the loop has no gap.
edge fade: mask-image at the ends softens the seam.

How to write itOpen for stack patterns

Web (HTML/CSS)@keyframes + transform translateX (not the obsolete <marquee>)

React + Tailwind + shadcn/uiCSS track duplicate / embla-style infinite plugins

SwiftUITimelineView + offset / custom endless scroll

Ant Designcustom; don’t confuse with Carousel (step slides, not continuous crawl)

Notes

Not a carousel: marquees crawl continuously; carousels step slide by slide. The HTML <marquee> tag is obsolete—duplicate content + transform + edge masks is the modern recipe. Continuous motion needs a pause control (WCAG) and reduced-motion freeze. Never put primary click targets on a moving strip.

Common mistakesHumans and models trip here

No reduced-motion handling: continuous text motion hurts vestibular and reading disabilities.
Using obsolete <marquee>: inconsistent and non-standard.
Content narrower than the viewport with only one copy: a visible gap on wide screens.
Animating left/top instead of transform: dropped frames.
Clickable chips on a moving track: impossible to aim.

More failure symptoms on AI broke it.

Related patterns

Carousel / SlideshowA sequence of slides shown one (or a few) at a time with next/prev controls.Easing / Timing FunctionHow speed is distributed over an animation’s duration—what makes motion feel mechanical or natural.Truncation / EllipsisClipping overflow text with an ellipsis so layouts stay intact.

Spotted a wrong name or missing pattern?

Message on X