Delta Components

Docs

Marquee

A smooth, highly customizable marquee component with support for dragging, hover effects, scroll velocity, and various animation options.

4 views

0 downloads

Demo

Code

Open in

React

Next.js

TypeScript

Tailwind CSS

Framer Motion

Overview

The Marquee component provides smooth horizontal or vertical scrolling animation for content. It supports advanced features like drag interaction, hover slowdown, scroll-aware direction changes, and custom easing functions.

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/marquee

Usage

1import Marquee from "@/registry/components/marquee"
2
3export function Component() {
4  return (
5    <div className="w-full overflow-hidden">
6      <Marquee baseVelocity={20} className="py-4">
7        <div className="flex gap-8 mr-8">
8          <div className="rounded-lg bg-primary px-4 py-2 text-primary-foreground font-medium">
9            React
10          </div>
11          <div className="rounded-lg bg-primary px-4 py-2 text-primary-foreground font-medium">
12            Next.js
13          </div>
14          <div className="rounded-lg bg-primary px-4 py-2 text-primary-foreground font-medium">
15            TypeScript
16          </div>
17        </div>
18      </Marquee>
19    </div>
20  )
21}

API Reference

Parameter	Type	Default	Description
`children`	`React.ReactNode`	-	The elements to be scrolled
`className`	`string`	-	Additional CSS classes for the container
`direction`	`"left" \| "right" \| "up" \| "down"`	`"right"`	The direction of the marquee
`baseVelocity`	`number`	`5`	The base velocity of the marquee in pixels per second
`easing`	`(value: number) => number`	-	The easing function for the animation
`slowdownOnHover`	`boolean`	`false`	Whether to slow down the animation on hover
`slowDownFactor`	`number`	`0.3`	The factor to slow down the animation on hover
`slowDownSpringConfig`	`SpringOptions`	`{ damping: 50, stiffness: 400 }`	The spring config for the slow down animation
`useScrollVelocity`	`boolean`	`false`	Whether to use the scroll velocity to control the marquee speed
`scrollAwareDirection`	`boolean`	`false`	Whether to adjust the direction based on the scroll direction
`scrollSpringConfig`	`SpringOptions`	`{ damping: 50, stiffness: 400 }`	The spring config for the scroll velocity-based direction adjustment
`scrollContainer`	`RefObject<HTMLElement> \| HTMLElement \| null`	-	The container to use for the scroll velocity
`repeat`	`number`	`3`	The number of times to repeat the children
`draggable`	`boolean`	`false`	Whether to allow dragging of the marquee
`dragSensitivity`	`number`	`0.2`	The sensitivity of the drag movement
`dragVelocityDecay`	`number`	`0.96`	The decay of the drag velocity
`dragAwareDirection`	`boolean`	`false`	Whether to adjust the direction based on the drag velocity
`dragAngle`	`number`	`0`	The angle of the drag movement in degrees
`grabCursor`	`boolean`	`false`	Whether to change the cursor to grabbing when dragging