Marquee

An infinite scrolling row built from two duplicated tracks, with an edge mask, hover pause and a reduced-motion opt-out. No dependency and no JavaScript loop.

Motion

marqueelogosinfinite-scrollcss

Vercel

Linear

Raycast

Stripe

Supabase

Resend

Usage

Drop the file into your project and import it. There is no package to install.

usage.tsx

import { Marquee } from "@/registry/components/marquee";

export function Example() {
  return <Marquee />;
}

Install prerequisites

Every component here relies only on Tailwind and the cn helper from shadcn/ui.

terminal

npm i clsx tailwind-merge

More in Motion

Spotlight Card

A card that lights up under the cursor. The gradient is positioned from pointer coordinates rather than a CSS hover state, so the highlight follows the exact path of the mouse.

Flip Card

A 3D card flip on hover using preserve-3d and backface-visibility. Disabled entirely when prefers-reduced-motion is on.