Scroll marquee

A marquee that flips direction with the page scroll.

Behaviour

Reduced motion: it stands still.
Scrolling down runs it left, scrolling up runs it right.
Fixed speed per second whatever the frame rate; as many copies as the width needs, wrapped by exactly one copy.
Only runs while on screen. Screen readers and Tab get the first copy; the repeats are inert.

Props

Prop	Type	Description
children	`ReactNode`	One copy of what scrolls past. Put the gap after it (padding-right) inside.
speed	`number`default `80`	Pixels per second.
direction	`"left" \| "right"`default `"left"`	Which way it runs before the first scroll.
container	`RefObject<HTMLElement \| null>`default `the page`	Follow a scrolling box instead of the page.
className	`string`	Extra classes on the root.

Installation

npx shadcn@latest add https://purrfectui.com/r/scroll-marquee.json

How to use

import { ScrollMarquee } from "@/components/ui/scroll-marquee";

<ScrollMarquee speed={80}>
  <p className="pr-12 text-8xl font-medium whitespace-nowrap">Vaibhav Tomar —</p>
</ScrollMarquee>

Source code

Loading…

Credits

Ported from vaibhavtomar.com.

License

MIT. Copy it into your project and change it as you like.