3D Marquee

A tilted wall of endlessly scrolling columns with alternating directions — a striking hero backdrop, zero JS.

css-3drsczero-js2 files · 57 locdeps: clsx, tailwind-merge

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/marquee-3d.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs marquee-3d

import { Marquee3D } from "@/components/opus/three/marquee-3d";

<Marquee3D items={thumbnails} className="h-[600px]" />

Prop	Type	Default	Description
items	ReactNode[]	—	Tiles distributed across columns.
columns	number	4	Column count.
duration	number	40	Seconds per loop.
rotateX / rotateZ	number	28 / -22	Wall tilt (deg).