3D Marquee for Radix UI

A grid of images laid back and turned at an angle, its columns scrolling without end, every other one the other way.

Use it as a backdrop that says "there's a lot here": behind a hero heading, at the top of a gallery or a template library. It's decoration, so put what the page says in text over it or beside it. For a row of logos or quotes that people should read, use a Marquee. In React the scroll is a CSS animation, so nothing else is installed.

Installation

Anatomy

Marquee3D
└── grid
    └── column (one per column, a set of tiles three times over)
        └── tile (an image, or a colour)

Usage

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

<Marquee3D className="h-96" images={["/shots/1.jpg", "/shots/2.jpg", "/shots/3.jpg"]} />

Accessibility

The images are decorative: each has empty alternative text, and the repeats that make the loop are hidden from assistive tech. Say what matters in text, as the Hero demo does. The columns keep moving, so keep them out of the way of anything people read, and slow them with duration behind text. With reduced motion they hold still.

Demos

Colors

Tiles painted with colors instead of images, sixteen of them. Each value is any CSS colour; here they're theme tokens (var(--chart-1), var(--primary), var(--muted)), so the grid follows the theme and dark mode. colors wins when both it and images are given.

Reverse

Eight images in three columns, leaning the other way with reverse. columns deals the tiles out in order, and each column repeats its own until it has enough to cover the box. In a right-to-left page the grid leans the other way on its own, and reverse flips that too.

Hero

The marquee behind a heading, a line and a button: absolutely placed under the content, at reduced opacity, with a radial wash of the background behind the words. duration is 40 seconds here, slow enough not to pull the eye off the heading. The marquee fills whatever box it's given, so it covers the section at any size.

Pause on hover

pauseOnHover stops every column while the pointer is over the grid, so a tile can be looked at. The columns here run fast, at 12 seconds, which is where a pause helps most. A hovered tile still lifts toward the viewer.

FAQ

API Reference