# Panel Split
URL: https://remocn.dev/docs/media/panel-split

One portfolio panel splits into four, filling with a bio, a case study, a question and a reel card.

- Install: `npx shadcn@latest add @remocn/panel-split`
- Vibe: premium
- Natural length: 120f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/panel-split
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PanelSplit } from "@/components/remocn/panel-split";

const PanelSplitScene = () => (
  <PanelSplit
    name="Mara Okafor"
    role="Motion designer"
    headline={["Driven by motion,", "obsessed with", "the seamless."]}
    images={["/work/a.jpg", "/work/b.jpg", "/work/c.jpg"]}
  />
);

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

A single hero panel with the `name`, `role` and `headline` lines splits into four panels. They fill with a case-study image and `caption`, a `question` with `body` text, and a reel panel that floods with color and fans out preview cards. Pass your own `images`; the defaults are `staticFile` images from the Remocn repo. It ships light and dark 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 |
|---|---|---|---|
| `images` | `string[]` | — | Image URLs for the panels. Defaults to repo-only files. |
| `name` | `string` | `"Mara Okafor"` | Person or studio name on the hero panel. |
| `role` | `string` | `"Motion designer"` | Role line under the name. |
| `headline` | `string[]` | — | Headline lines on the hero panel. |
| `question` | `string` | `"What if every launch felt this good?"` | Question text on the third panel. |
| `body` | `string` | `"A studio practice built on timing, rhythm and the frames in between."` | Body text under the question. |
| `caption` | `string` | `"Horizon, brand film"` | Caption under the case-study image. |
| `labels` | `string[]` | — | Short header labels for the four panels. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme. Ships light and dark. |
| `accent` | `string` | `"#3B5BFD"` | Accent color of the final flood. |
| `panel` | `string` | — | Panel background color. Defaults depend on theme. |
| `ground` | `GshPresetId` | — | Shader preset id for the animated background. |
| `groundParams` | `Partial<GradientParams>` | — | Partial shader parameters that override the ground preset. |

## Use when
- An about-me or studio intro that grows from a single hero panel into a bento of bio, work and reel.
- A portfolio beat where the final panel floods with color and fans out preview cards.
- Presenting a person or studio with a headline, a question and a body line.

## Don't use when
- Only two sides are compared against each other — use `versus-split`.
- You want feature tiles building up rather than a hero splitting — use `bento-build`.
- A montage of shots cutting on the beat is the goal — use `grid-montage`.