--- title: "Marquee" type: component version: "2.1.1" doc_version: "2.1.1" status: stable date: 2026-05-13 library: Frutjam stack: tailwind_css compatibility: universal framework_agnostic: true runtime_requirement: none description: "Pure CSS Tailwind CSS Marquee with infinite scroll, pause-on-hover, reverse direction, and vertical support. No JavaScript required." url: https://frutjam.com/components/marquee --- # Marquee Marquee components create infinite, continuously scrolling strips of content — ideal for brand logos, announcement banners, testimonials, or tag clouds. Built entirely with CSS animations, the Frutjam marquee supports horizontal and vertical directions, pause-on-hover, reversible playback, and speed control. Duplicate the `marquee-track` element (with `aria-hidden`) for a seamless, gapless loop. | Class | Type | Description | | ---------------- | -------- | --------------------------------------------------------------------- | | marquee | Base | Outer container — clips overflow and holds animation variables | | marquee-track | Modifier | Scrolling inner row; duplicate with `aria-hidden` for a seamless loop | | marquee-pause | Modifier | Pauses animation on hover | | marquee-reverse | Modifier | Scrolls in the opposite direction | | marquee-vertical | Modifier | Scrolls top-to-bottom instead of left-to-right | | marquee-slow | Speed | Slow scroll (40s cycle) | | marquee-normal | Speed | Default speed (20s cycle) | | marquee-fast | Speed | Fast scroll (10s cycle) | | marquee-fade | Modifier | Adds gradient fade-out edges on both sides | ## Basic Usage Add two identical `marquee-track` elements — the second one (with `aria-hidden="true"`) fills the gap as the first scrolls off screen. ## Pause on Hover Add `marquee-pause` to stop the animation when the user hovers over the strip. ```html
Hover me to pause the scroll Animation stops here
``` ## Reverse Direction Use `marquee-reverse` to scroll right-to-left instead of left-to-right. Combine two rows for a layered effect. ```html
Alpha Beta Gamma Delta Epsilon
Alpha Beta Gamma Delta Epsilon
``` ## Speed Variants ```html
Slow Slow Slow Slow Slow
Normal Normal Normal Normal Normal
Fast Fast Fast Fast Fast
``` ## Vertical Marquee Add `marquee-vertical` and give the container a fixed height for a top-to-bottom scroll. ```html
Announcement one
Announcement two
Announcement three
Announcement four
Announcement five
``` ## Technology Tags A common pattern for showcasing a skill set or tech stack. ```html
HTML CSS JavaScript TypeScript React Vue Tailwind CSS Node.js
``` ## Custom Gap Override `--marquee--gap` or `--marquee--duration` with an inline utility to fine-tune spacing and speed. ```html
Wide gap Wide gap Wide gap Wide gap
``` ## Fade Edges Add `marquee-fade` to fade out both ends of the strip into the page background for a polished look. ```html
Design Development Performance Accessibility Open Source Security Testing
``` ## Announcement Banner A slim ticker bar for promotions or site-wide notices. Combine `marquee-fade` and `marquee-pause` for the best experience. ```html
🎉 Version 2.0 is here — explore what's new 🌿 Built with Tailwind CSS v4 ⚡ Zero JavaScript, pure CSS components 🎨 Fully themeable with CSS variables
``` ## Logo Marquee Showcase partners or trusted brands in a continuously scrolling strip. Use `marquee-fade` to blend the edges into the background. ```html
Acme
Globex
Initech
Umbrella
Hooli
Pied Piper
Vehement
Massive
``` ## Testimonial Cards Scroll through testimonial cards with a subtle pause-on-hover for readability. ```html

"Absolutely love the component library. Saves us hours every sprint."

A

Alex Morgan

Frontend Engineer

"The best Tailwind UI kit I've used. Clean, accessible, and easy to customize."

J

Jamie Lee

Product Designer

"Shipped our design system 3× faster thanks to Frutjam. Highly recommend."

S

Sam Rivera

Tech Lead

"Great DX, thoughtful defaults, and the dark mode just works out of the box."

R

Riley Chen

Full Stack Developer

```