# Perspective Marquee

> A tilted wall of images that scrolls endlessly in alternating columns.

Source: https://ui.cortexcn.dev/docs/cortex/perspective-marquee

## 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](https://ui.cortexcn.dev/docs/cortex/marquee), so it needs no animation library.
- Respects reduced motion by pausing the columns.

## Installation

```bash
npx shadcn@latest add @cortexcn/perspective-marquee
```

The CLI also installs [Marquee](https://ui.cortexcn.dev/docs/cortex/marquee) and adds its animations to your `globals.css`.

## Usage

```tsx
import { PerspectiveMarquee } from "@/components/perspective-marquee";
```

```tsx
<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

### 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    |