logo

Aki UI

アキ ウイ

Marquee

マーキー

An infinite scroller running on a single CSS keyframe↗↗ — the children are duplicated once and the track translates by half its width, so the loop is seamless without measuring anything at runtime. Hover to pause.

Arc
Linear
Raycast
Spotify
Tailwind CSS
Bootstrap
Shadcn
Arc
Linear
Raycast
Spotify
Tailwind CSS
Bootstrap
Shadcn

Installation

Install the following dependencies:1

npm install tailwind-mergenpm install clsx

Copy and paste the following code into a new component file:2

"use client"

import { Children, type HTMLAttributes, type ReactNode } from "react"
import { cn } from "@/lib/utils"

export type MarqueeProps = HTMLAttributes<HTMLDivElement>

export function Marquee({ className, ...props }: MarqueeProps) {
return <div className={cn("group relative w-full overflow-hidden", className)} {...props} />
}

How to use it3

"use client"

import Image from "next/image"
import { Marquee, MarqueeContent, MarqueeFade, MarqueeItem } from "@/components/ui/marquee"

import arc from "@/public/assets/arc.svg"
import linear from "@/public/assets/linear.svg"
import raycast from "@/public/assets/raycast.svg"

export default function Page() {

Props

Marquee

NameDefaultDescription
children—

ReactNode

MarqueeContent and optionally two MarqueeFade

className—

string

Additional classes on the clipping container

MarqueeContent

NameDefaultDescription
children—

ReactNode

MarqueeItem elements. They are duplicated once to make the loop seamless

speed40

number

Seconds for one full cycle. Higher is slower

direction"left"

"left" | "right"

Scroll direction

pauseOnHovertrue

boolean

Pause the animation while the pointer is over the marquee

MarqueeFade

NameDefaultDescription
side—

"left" | "right"

Which edge to fade out

className—

string

Additional classes, typically to match the background it sits on

MarqueeItem

NameDefaultDescription
children—

ReactNode

Content of a single item

className—

string

Additional classes, typically horizontal spacing