Scroll Marquee Word

Drift an oversized word behind a short statement as the page scrolls.

Dependencies: motion
Size: 134 lines
Controls: 10 controls

example.tsx

1import { ScrollMarqueeWord } from "@/components/onycx/scroll-marquee-word";23export default function Example() {4  return (5    <ScrollMarqueeWord6      word={"STUDIO VEXA"}7      repeat={3}8      drift={1000}9      wordOpacity={0.05}10      italic11      eyebrow={"Philosophy of Form"}12      heading={"Made for the|Considered."}13      height={180}14      accent={"#e23e28"}15      background={"#0c0a09"}16    />17  );18}

Installation

CLI · shadcn registry

npx shadcn@latest add https://ui.onycx.dev/r/scroll-marquee-word.json

1 · Dependencies

npm install motion

2 · Copy the source

components/onycx/scroll-marquee-word.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the scroll-marquee-word.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.

Props

Prop	Type	Default	Description
word / repeat	string / number	"STUDIO VEXA" / 3	Backdrop word and how many times it repeats in the row.
drift	number	1000	Pixels the row travels left while the section crosses the viewport.
wordOpacity / italic	number / boolean	0.05 / true	Backdrop opacity and italic serif.
eyebrow / heading / body	string	—	Statement copy; use \| in heading for line breaks.
height	number	180	Section min-height in vh.
color / muted / accent / background	string	—	Text, body, eyebrow and section colours.