Marquee
A premium, high-performance infinite auto-scroll component built to display seamless scrolling logos, system alerts, dynamic testimonial cards, or tech stack badges.
Preview
Installation
Tailwind Configuration (v4)
Add these custom keyframe definitions to your main style sheet (e.g., globals.css or tokens.css):
@theme {
--animate-marquee: marquee var(--duration, 30s) linear infinite;
--animate-marquee-reverse: marquee-reverse var(--duration, 30s) linear infinite;
--animate-marquee-vertical: marquee-vertical var(--duration, 30s) linear infinite;
--animate-marquee-vertical-reverse: marquee-vertical-reverse var(--duration, 30s) linear infinite;
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(calc(-100% - var(--gap, 1rem))); }
}
@keyframes marquee-reverse {
from { transform: translateX(calc(-100% - var(--gap, 1rem))); }
to { transform: translateX(0); }
}
@keyframes marquee-vertical {
from { transform: translateY(0); }
to { transform: translateY(calc(-100% - var(--gap, 1rem))); }
}
@keyframes marquee-vertical-reverse {
from { transform: translateY(calc(-100% - var(--gap, 1rem))); }
to { transform: translateY(0); }
}
}Examples
Scroll Directions
Configure motion flows vertically or horizontally, including reverse directions.
Complex Layouts
Combine multi-row staggering or dual opposite scrollings for visual layers.
Aesthetic Variations
Showcase testimonials, rotated 3D bands, neon borders, and matrix log feeds.
Sarah Connor
@sarahcVibe UI has completely transformed how we design dashboards. The neon presets are breathtaking!
Neo Watson
@cyberneoThe cyberpunk matrix configurations are insanely detailed. Pure magic out of the box!
Amélie Poulain
@amelie_pStunning design and effortless animations. Our client feedback has been off the charts.
Bruce Wayne
@darkknightExtremely clean architecture. The glassmorphic components render perfectly on modern engines.
Sarah Connor
@sarahcVibe UI has completely transformed how we design dashboards. The neon presets are breathtaking!
Neo Watson
@cyberneoThe cyberpunk matrix configurations are insanely detailed. Pure magic out of the box!
Amélie Poulain
@amelie_pStunning design and effortless animations. Our client feedback has been off the charts.
Bruce Wayne
@darkknightExtremely clean architecture. The glassmorphic components render perfectly on modern engines.
Sarah Connor
@sarahcVibe UI has completely transformed how we design dashboards. The neon presets are breathtaking!
Neo Watson
@cyberneoThe cyberpunk matrix configurations are insanely detailed. Pure magic out of the box!
Amélie Poulain
@amelie_pStunning design and effortless animations. Our client feedback has been off the charts.
Bruce Wayne
@darkknightExtremely clean architecture. The glassmorphic components render perfectly on modern engines.
Sarah Connor
@sarahcVibe UI has completely transformed how we design dashboards. The neon presets are breathtaking!
Neo Watson
@cyberneoThe cyberpunk matrix configurations are insanely detailed. Pure magic out of the box!
Amélie Poulain
@amelie_pStunning design and effortless animations. Our client feedback has been off the charts.
Bruce Wayne
@darkknightExtremely clean architecture. The glassmorphic components render perfectly on modern engines.
Solaris
Abstract #4
Neon Oasis
Gold Liquid
Solaris
Abstract #4
Neon Oasis
Gold Liquid
Solaris
Abstract #4
Neon Oasis
Gold Liquid
Solaris
Abstract #4
Neon Oasis
Gold Liquid
{"component": "Marquee", "theme": "neon"}const marquee = <Marquee fade={true} />npx vibe-ui-kit@latest add marqueeimport { Marquee } from "@/components/ui/marquee"{"component": "Marquee", "theme": "neon"}const marquee = <Marquee fade={true} />npx vibe-ui-kit@latest add marqueeimport { Marquee } from "@/components/ui/marquee"{"component": "Marquee", "theme": "neon"}const marquee = <Marquee fade={true} />npx vibe-ui-kit@latest add marqueeimport { Marquee } from "@/components/ui/marquee"{"component": "Marquee", "theme": "neon"}const marquee = <Marquee fade={true} />npx vibe-ui-kit@latest add marqueeimport { Marquee } from "@/components/ui/marquee"