# Parallax Lockup
URL: https://remocn.dev/docs/typography/parallax-lockup

A stacked headline scrolls into a lockup with parallax between lines, the last line in a gradient.

- Install: `npx shadcn@latest add @remocn/parallax-lockup`
- Vibe: premium
- Natural length: 98f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/parallax-lockup
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ParallaxLockup } from "@/components/remocn/parallax-lockup";

const ParallaxLockupScene = () => (
  <ParallaxLockup
    lines={["Every launch", "deserves", "a film"]}
    accentLine={2}
    accent="#3B5BFD"
  />
);

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

The lines scroll in at slightly different speeds and lock into a tightly sized stack while the accent line fills with the gradient. Pass `lines` and `accentLine` (zero-based index of the gradient line); it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | `["Every launch", "deserves", "a film"]` | Lines of the stack, top to bottom |
| `accentLine` | `number` | `2` | Zero-based index of the line filled with the gradient |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `speed` | `number` | `1` | Playback speed multiplier |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |

## Use when
- A multi-line brand statement that should settle into a tight typographic lockup.
- A closing title where the final line is the call to action.

## Don't use when
- The text is one short line - use `tracking-in`.
- You want lines to arrive one at a time without scroll - use `line-by-line-slide`.
- You want a per-word fade - use `staggered-fade-up`.