3D Marquee

A wall of images on a plane tilted in 3D, its four columns drifting up and down in opposite directions. Images lift on hover. Plain CSS animation; under reduced motion the wall stands still.

Installation

npx nuecrea-ui add 3d-marquee

Usage

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

const images = Array.from({ length: 32 }, (_, i) => `/marquee/${(i % 16) + 1}.svg`);

export default function ThreeDMarqueeStory() {
  return <ThreeDMarquee images={images} />;
}

API reference

ThreeDMarquee

The clipped viewport. The images are decorative (empty alt), so put any text the page needs beside it. Renders <div>.

Prop	Type	Default	Description
`images`	`string[]`	—	Image URLs, split in order across four columns. Shown at 970×700 (cropped to fit).