# Perspective Marquee
URL: https://remocn.dev/docs/typography/perspective-marquee

A 3D-tilted infinite marquee with depth-of-field blur on items rolling toward the horizon

- Install: `npx shadcn@latest add @remocn/perspective-marquee`
- Vibe: premium
- Natural length: 240f @ 30fps

## Installation

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

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PerspectiveMarquee } from "@/components/remocn/perspective-marquee";

const PerspectiveMarqueeScene = () => (
  <PerspectiveMarquee
    items={["Vercel", "Linear", "Stripe", "Figma"]}
    rotateY={-28}
    pixelsPerFrame={2}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="PerspectiveMarquee"
    component={PerspectiveMarqueeScene}
    durationInFrames={240}
    fps={30}
    width={1280}
    height={720}
  />
);
```

### With Backdrop

Renders transparent — supply the background via `Backdrop`:

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

<Backdrop fill={{ type: "color", value: "#050505" }}>
  <PerspectiveMarquee items={["Vercel", "Linear", "Stripe", "Figma"]} rotateY={-28} pixelsPerFrame={2} />
</Backdrop>
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `items` | `string[]` | `["Vercel", "Linear", "Stripe", "Figma", "Notion", "Raycast", "Arc", "Cursor"]` | Items rendered in the marquee. Repeated three times under the hood for a seamless loop. |
| `fontSize` | `number` | `84` | Font size in pixels |
| `color` | `string` | `"#fafafa"` | Text color of each item |
| `fontWeight` | `number` | `700` | CSS font-weight |
| `pixelsPerFrame` | `number` | `2` | Horizontal scroll speed in pixels per frame |
| `rotateY` | `number` | `-28` | Y-axis rotation in degrees applied to the marquee row |
| `rotateX` | `number` | `8` | X-axis rotation in degrees applied to the marquee row |
| `perspective` | `number` | `1200` | CSS perspective in pixels on the parent |
| `fadeColor` | `string` | `"#050505"` | Color used in the edge vignette gradients |
| `speed` | `number` | `1` | Playback speed multiplier |
| `className` | `string` | — | Optional className passed to the root container |

## Use when
- A dark, cinematic background treatment is needed with text rolling into a 3D vanishing point.
- Feature names, brand words, or a tagline list should scroll with depth and atmosphere rather than flat.
- The scene calls for a premium looping background element that holds for 4–8 seconds without feeling static.

## Don't use when
- A flat, 2D looping ticker is sufficient — use `infinite-marquee` for a simpler, lighter strip with no perspective transform.
- The marquee should stop or the words should land on a specific item — both marquee components loop indefinitely; compose a `Sequence` with a static component for a hold state.
- The background is light-colored — the default `fadeColor="#050505"` creates edge fades tuned for dark scenes; adapt carefully or use `infinite-marquee` on light backgrounds.