Perspective Marquee

Pro

A 3D tilted image grid with alternating rows scrolling infinitely in both directions.

css 3d3dmarqueeperspectiveloopscrolldepth

Overview

Perspective Marquee is a React and Tailwind CSS 3D image marquee, a tilted grid whose rows scroll forever in alternating directions, in Next.js or any React app, with no dependencies. Rows run on the same compositor keyframes as Infinite Marquee, so there is no JavaScript loop, and perspective, X and Z tilt, card size, gap, and speed are props. Pause every row on hover, fade the edges, or draw dashed grid lines in the gutters, and reduced motion stops the rows. Use landscape images, since every card is cropped to the same fixed width and height.

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add perspective-marquee

Usage

Import PerspectiveMarquee from @/components/wensity/perspective-marquee and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

 1"use client";
 2import { PerspectiveMarquee } from "@/components/wensity/perspective-marquee";
 3
 4const images = [
 5  { src: "https://assets.wensity.com/photos/landscape/eiffel-tower-sunset.webp", alt: "Eiffel Tower" },
 6  { src: "https://assets.wensity.com/photos/landscape/rainforest-falls.webp", alt: "Rainforest falls" },
 7  { src: "https://assets.wensity.com/photos/landscape/dune-sunset.webp", alt: "Dune sunset" },
 8  { src: "https://assets.wensity.com/photos/landscape/alpine-lake-reflection.webp", alt: "Alpine lake" },
 9];
10
11export function PerspectiveMarqueeDemo() {
12  return (
13    <PerspectiveMarquee
14      images={images}
15      rows={4}
16      speed={40}
17      rotateX={18}
18      rotateZ={-22}
19      className="h-[520px]"
20    />
21  );
22}

Props

Prop	Type	Default	Description
`images`	PerspectiveMarqueeImage[]	-	Landscape images distributed across rows.
`rows`	number	4	Number of horizontal marquee rows.
`imagesPerRow`	number	6	Images per row before the seamless duplicate.
`speed`	number	40	Base cycle duration in seconds. Lower is faster.
`gap`	number	24	Gap between cards in pixels.
`cardWidth`	number	280	Card width in pixels.
`cardHeight`	number	158	Card height in pixels.
`perspective`	number	1000	CSS perspective distance in pixels.
`rotateX`	number	18	3D tilt around X in degrees.
`rotateZ`	number	-22	3D tilt around Z in degrees.
`pauseOnHover`	boolean	false	Pause every row while the cursor is over the stage.
`fadeEdges`	boolean	false	Soft edge fades only, with no center vignette.
`showLines`	boolean	true	Dashed grid lines in the blank gutters between cards.

Featured in React 3D components and React carousel components.