Perspective Marquee
A tilted wall of images that scrolls endlessly in alternating columns.
Features
- Columns scroll in opposite directions, forever, with no gaps or jumps.
- Hovering a column pauses it, and hovering an image lifts it.
- The wall scales down on small screens and fades out at the edges.
- Built on Marquee, so it needs no animation library.
- Respects reduced motion by pausing the columns.
Installation
pnpm dlx shadcn@latest add @cortexcn/perspective-marqueeThe CLI also installs Marquee and adds its animations to your globals.css.
Usage
import { PerspectiveMarquee } from "@/components/perspective-marquee";<PerspectiveMarquee
images={[
{ src: "/screens/dashboard.png", alt: "Dashboard" },
{ src: "/screens/pricing.png", alt: "Pricing page" },
]}
/>Images are spread across the columns in order, so the first image goes to the first column, the second to the second, and so on. Around 12 to 20 images fill the wall well. Images use a 4:3 frame and object-cover.
Examples
Three columns
<PerspectiveMarquee columns={3} images={images} />As a hero background
Place it behind your content with absolute inset-0 and lower its opacity so text stays readable.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
images | PerspectiveMarqueeImage[] | required | Images for the wall, each with src and alt |
columns | number | 4 | Number of scrolling columns |
duration | number | 40 | Seconds for one loop. Every other column runs slower |
pauseOnHover | boolean | true | Pause a column while the pointer is over it |
className | string | - | Extra classes for the container, such as a height |