3d Marquee
A tilted 3D grid marquee wall, with multiple columns scrolling infinitely in alternating directions.
This is a WebberUI Pro component
Free during the launch campaign: sign up or sign in, then hit “Copy install command” in the preview above and it installs straight away — no payment, no credit card. The command below returns 401 while you are signed out.
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.
npx shadcn@latest add "https://webberui.com/r/3d-marquee.json?t=<install token>"Playground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<3dMarquee />
Installation
npx shadcn@latest add "https://webberui.com/r/3d-marquee.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-durationCSS variable, making it easy to override from outside