# Tilt Settle List
URL: https://remocn.dev/docs/product-scenes/tilt-settle-list

A tilted player card settles beside a ranked list of top scenes

- Install: `npx shadcn@latest add @remocn/tilt-settle-list`
- Vibe: premium
- Natural length: 126f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/tilt-settle-list
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TiltSettleList } from "@/components/remocn/tilt-settle-list";

const TiltSettleListScene = () => (
  <TiltSettleList title="Your top scenes" heroTitle="Zoom Blur" heroMeta="Transition · 2.4k renders" />
);

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

A title appears, a tilted player card swings in and settles while a checklist of lines steps forward one by one, then ranked rows with thumbnails slide in. Pass `title`, `heroTitle`, `heroMeta`, `lines` and `rows` to make it yours, and `heroSrc` plus `src` on each row with your own images (the default files only exist in the Remocn repo). It ships dark and light through `theme`.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Your top scenes"` | Heading above the list. |
| `accentWord` | `number` | `1` | Index of the title word drawn in the accent color. |
| `heroTitle` | `string` | `"Zoom Blur"` | Title on the tilted player card. |
| `heroMeta` | `string` | `"Transition · 2.4k renders"` | Secondary line under the hero title. |
| `heroSrc` | `string` | — | Cover image URL for the player card; the default ships with Remocn only. |
| `lines` | `string[]` | `DEFAULT_LINES` | Checklist lines that step forward one after another. |
| `rows` | `ListRow[]` | — | Ranked rows with title, meta and optional thumbnail src. |
| `theme` | `"dark" \| "light"` | `"dark"` | Visual theme; ships dark and light. |
| `accent` | `string` | — | Accent color; defaults per theme. |
| `ink` | `string` | — | Main text color; defaults per theme. |
| `ground` | `GshPresetId` | — | Preset id for the gradients.sh background shader. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the shader parameters of the chosen ground. |

## Use when
- A beat that shows a player card with a ranked list of the user's most used items beside it.
- A product recap or wrapped-style moment listing top scenes, tracks or projects with a featured item.
- A premium feature walkthrough where a checklist advances line by line next to a hero card.

## Don't use when
- The point is a leaderboard where one row climbs to first place — use `leaderboard-climb`.
- You need only a ranked list reordering with no hero card — use `rank-climb`.
- You want a sequence of phone screens rather than a card and list — use `phone-trio`.