Text Animations

Marquee Text

A marquee that scrolls only when its text overflows the container.

Install

bun add clsx tailwind-merge

Then copy 3 files into your project:

  • components/registry/marquee-text/marquee-text.tsx
  • components/registry/marquee-text/auto-mask-horizontal.tsx
  • lib/utils.ts

Props

PropTypeDefaultDescription
speednumber35Scroll speed (px/s).
gapnumber40Gap between repetitions.
pausenumber5Pause at the start before scrolling.

What It Demonstrates

Marquee
Text or content that scrolls continuously in a loop.
Loop
An animation that repeats, a set number of times or infinitely.
Linear
Constant speed. Avoid for UI; reserve for spinners or marquees.

Related Components

Appears In