Installation
Usage
import { Marquee } from "@/components/ui/marquee"
export default function Example() {
return (
<Marquee speed={12} pauseOnHover>
<img src="/logo-1.svg" alt="Logo 1" className="mx-8 h-8 w-auto" />
<img src="/logo-2.svg" alt="Logo 2" className="mx-8 h-8 w-auto" />
<img src="/logo-3.svg" alt="Logo 3" className="mx-8 h-8 w-auto" />
{/* Any React children work as marquee items */}
</Marquee>
)
}Children scroll horizontally by default. Set spacing with margin utilities on
the items themselves (e.g. mx-8) — the marquee does not add gaps for you.
speed is a relative value (not a real-world unit): lower scrolls slower,
higher scrolls faster. For reference, the speedPreset values map to
slow = 5, default = 10, fast = 20.
Examples
Testimonial Cards
Drop any card markup in as children. This demo reuses the same card used by the Testimonials block and pauses on hover so visitors can read.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint.
Stacked Marquees
Stack two rows scrolling in opposite directions for a dynamic logo wall. Give
both rows the same speed so they stay visually in sync.
Edge Fade with ScrollFade
The Marquee has no built-in fade. To fade the leading and trailing edges into
the background, wrap it in the Scroll Fade Effect
component. Because the marquee animates with transform inside an
overflow: hidden track (so nothing actually scroll-overflows), pass the
force prop so the fade applies regardless of scroll detection. intensity
sets the fade size in pixels.
import { Marquee } from "@/components/ui/marquee"
import { ScrollFadeEffect } from "@/components/ui/scroll-fade-effect"
export default function Example() {
return (
<ScrollFadeEffect orientation="horizontal" force intensity={96}>
<Marquee speed={12}>{/* items */}</Marquee>
</ScrollFadeEffect>
)
}The fade lives in its own component. Add it with
npx shadcn@latest add https://deltacomponents.dev/r/scroll-fade-effect.json.
Vertical Direction
Set direction to up or down to scroll vertically. Constrain the height so
the column has somewhere to loop.
<Marquee direction="up" speed={12} className="h-80">
<div className="bg-card my-3 w-64 rounded-lg border p-4">Card 1</div>
<div className="bg-card my-3 w-64 rounded-lg border p-4">Card 2</div>
<div className="bg-card my-3 w-64 rounded-lg border p-4">Card 3</div>
</Marquee>Draggable
Enable draggable to let users fling the marquee with a pointer; it eases back
into its automatic scroll on release.
<Marquee draggable speed={12}>
{/* items */}
</Marquee>API Reference
Marquee
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Content to scroll. Any React nodes. |
direction | "left" | "right" | "up" | "down" | "right" | Scroll direction. left/right are horizontal; up/down are vertical. |
speed | number | from speedPreset | Scroll speed — lower is slower, higher is faster. Overrides speedPreset when set. |
speedPreset | "slow" | "default" | "fast" | "default" | Preset speed used when speed is unset (slow = 5, default = 10, fast = 20). |
pauseOnHover | boolean | false | Pause the animation while hovered. |
slowdownOnHover | boolean | false | Slow (rather than pause) the animation while hovered. |
slowDownFactor | number | 0.3 | Speed multiplier applied while slowing on hover. |
slowDownSpringConfig | SpringOptions | { damping: 50, stiffness: 400 } | Spring config for the hover slow-down. |
repeat | number | 3 | Number of times children are repeated to fill the loop seamlessly. |
useScrollVelocity | boolean | false | Modulate marquee speed with the page's scroll velocity. |
scrollAwareDirection | boolean | false | Flip scroll direction based on scroll direction. |
scrollSpringConfig | SpringOptions | { damping: 50, stiffness: 400 } | Spring config for scroll-velocity direction changes. |
scrollContainer | RefObject<HTMLElement> | HTMLElement | null | window | Scroll container to read velocity from. |
draggable | boolean | false | Allow dragging the marquee with a pointer. |
dragSensitivity | number | 0.2 | How strongly drag movement maps to marquee movement. |
dragVelocityDecay | number | 0.96 | How quickly drag momentum decays after release. |
dragAwareDirection | boolean | false | Flip direction based on drag direction. |
dragAngle | number | 0 | Angle (degrees) projected onto when measuring drag movement. |
grabCursor | boolean | true | Show grab/grabbing cursors while draggable. |
easing | (value: number) => number | — | Custom easing applied to the loop position. |
className | string | — | Classes for the marquee container. |
The Marquee adds no gap between items and no edge fade. Space items with
margin utilities (mx-8), and add a fade by wrapping the marquee in the
Scroll Fade Effect component (see
above).
Features
- Any content: Logos, cards, text, or custom components as children.
- Seamless loop: Children are repeated (
repeat) for an unbroken scroll. - Direction control: Horizontal (
left/right) or vertical (up/down). - Hover behavior: Pause (
pauseOnHover) or slow down (slowdownOnHover). - Scroll-reactive: Optionally tie speed and direction to page scroll velocity.
- Draggable: Optional pointer dragging with momentum.
- GPU-accelerated: Animates
transformfor smooth, jank-free motion.
Use Cases
- Brand logos: A trusted-by / partner logo wall.
- Testimonials: Scrolling customer quotes.
- Product highlights: Feature cards or screenshots.
- Announcements: Rotating promotional messages.