3d Marquee: React + Tailwind Component

A tilted 3D grid marquee wall, with multiple columns scrolling infinitely in alternating directions.

A tilted showcase wall built with CSS 3D transforms: the tiles are split into columns that scroll infinitely up and down in alternation, and gradients alone are enough to render it — no external images required.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add "https://webberui.com/r/3d-marquee.en.json?t=<install token>"

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Columnscolumns

Scroll duration (higher is slower)speed

Tile heighttileHeight

150

Column widthcolumnWidth

200

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<ThreeDMarquee/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add "https://webberui.com/r/3d-marquee.en.json?t=<install token>"

Or, once registries are configured in components.json, install it as @webberui/3d-marquee.

Usage

Just drop it into a bounded container with an explicit height, and the component fills it while keeping its 3D tilt.

import { ThreeDMarquee } from "@/components/ui/3d-marquee";

<div className="relative h-[340px] w-full overflow-hidden rounded-xl">
  <ThreeDMarquee />
</div>

Customize the tile content (pass any CSS background string):

<ThreeDMarquee
  tiles={[
    "linear-gradient(135deg, #6366f1, #8b5cf6)",
    "linear-gradient(135deg, #06b6d4, #3b82f6)",
    "#f43f5e",
  ]}
  columns={5}
/>

Props

Prop	Type	Default	Description
`tiles`	`string[]`	built-in gradient set	CSS `background` for each tile (a gradient or a flat color)
`columns`	`number`	`4`	Number of columns, which sets the density of the wall
`speed`	`number`	`40`	Baseline seconds for one column to scroll one round; larger is slower
`tileHeight`	`number`	`150`	Height of a single tile (px)
`columnWidth`	`number`	`200`	Width of a single column (px)
`className`	`string`	—	Forwarded to the root container

Accessibility

When the user has "reduce motion" enabled at the system level, the scrolling freezes into a static tilted wall
The entire decorative layer carries aria-hidden, so it does not interfere with assistive technology
The component exposes its pace through the --wb-marquee-duration CSS variable, making it easy to override from outside

Building an infinite marquee with Tailwind CSS (pause, reverse, reduced motion)

3d Marquee