3D Marquee

A tilted 3D grid of images whose columns scroll up and down in an endless loop.

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/3d-marquee.json

Adds components/velora/3d-marquee.tsx and merges the keyframes and tokens into your CSS.

A "Built with Velora" wall of screenshots behind centered headline copy.

Showcase

Dashboards, storefronts and launch pages from teams who shipped faster with copy-paste components.

Prop	Type	Default
`images*` Image URLs, or { src, alt } objects (images without alt are decorative)	`Marquee3DImage[]`	`—`
`columns` Number of columns on the tilted plane	`number`	`5`
`duration` Seconds for one full loop of a column	`number`	`40`
`fade` Fade the edges into the background	`boolean`	`true`
`pauseOnHover` Pause scrolling while hovered	`boolean`	`true`
`imageClassName` Extra classes for every image tile	`string`	`—`

Also accepts every <div> attribute, forwarded to the root element.

type Marquee3DImage = string | { src: string; alt?: string };

Reduced motion: The columns stop scrolling and the grid rests as a static tilted wall. Scrolling also pauses on hover and while offscreen.
Keyboard: Decorative — nothing to operate.
Screen readers: Images are decorative (empty alt) unless you pass alt text, in which case each is read once; duplicated copies are aria-hidden and inert.