Marquee | Bearnie

Astro

Tailwind CSS

TypeScript

Zero runtime

Accessible

Open source

<Marquee>
  <Badge variant="secondary">Astro</Badge>
  <Badge variant="secondary">Tailwind CSS</Badge>
  <Badge variant="secondary">TypeScript</Badge>
  <Badge variant="secondary">Zero runtime</Badge>
  <Badge variant="secondary">Accessible</Badge>
  <Badge variant="secondary">Open source</Badge>
</Marquee>

Installation

npx bearnie add marquee

Usage

import { Marquee } from "@/components/bearnie/marquee"

<Marquee>
  <img src="/logos/one.svg" alt="Company one" />
  <img src="/logos/two.svg" alt="Company two" />
</Marquee>

The children are duplicated once under the hood (hidden from screen readers) to make the loop seamless, and the animation is pure CSS — no JavaScript ships with this component. Scrolling pauses on hover and stops entirely for visitors with prefers-reduced-motion.

Examples

Reverse direction and speed

Use direction="right" to reverse and duration (seconds per loop) to control speed.

Fast and in reverseFast and in reverseFast and in reverse

<Marquee direction="right" duration={15}>
  <span class="text-sm text-muted-foreground">Fast and in reverse</span>
  <span class="text-sm text-muted-foreground">Fast and in reverse</span>
  <span class="text-sm text-muted-foreground">Fast and in reverse</span>
</Marquee>

Without edge fade

One

Two

Three

Four

<Marquee fade={false}>
  <Badge>One</Badge>
  <Badge>Two</Badge>
  <Badge>Three</Badge>
  <Badge>Four</Badge>
</Marquee>

Props

Prop	Type	Default	Description
duration	number	30	Seconds for one full loop (lower is faster)
direction	“left” \| “right”	“left”	Scroll direction
pauseOnHover	boolean	true	Pause the animation while hovered
fade	boolean	true	Fade the edges out with a mask
gap	number	32	Gap between items in px
class	string	-	Additional CSS classes