# Timeline Editor
URL: https://remocn.dev/docs/product-scenes/timeline-editor

A video editor drops clips onto a timeline, scrubs the preview, then exports with a progress panel.

- Install: `npx shadcn@latest add @remocn/timeline-editor`
- Vibe: tech
- Natural length: 332f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/timeline-editor
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TimelineEditor } from "@/components/remocn/timeline-editor";

const TimelineEditorScene = () => (
  <TimelineEditor
    projectName="Launch video"
    title="Meet Acme"
    audioName="soundtrack.wav"
  />
);

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

A video editor window drops up to three `clips` onto the V1 track one by one, then a `title` clip onto V2 and an `audioName` clip onto A1. A playhead scrubs through the monitor, then the cursor clicks Export and a progress panel finishes on Export complete. Pass `clips` (name, seconds, built-in scene), `projectName`, `title` and `audioName`. Ships dark by default and light.

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 |
|---|---|---|---|
| `clips` | `EditorClip[]` | `DEFAULT_CLIPS` | Up to three clips dragged onto V1: name, seconds, scene |
| `projectName` | `string` | `"Launch video"` | Project name in the title bar |
| `title` | `string` | `"Meet remocn"` | Text of the title clip that lands on V2 |
| `audioName` | `string` | `"soundtrack.wav"` | Name of the audio clip that lands on A1 |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights, buttons and progress |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline |
| `theme` | `"light" \| "dark"` | `"dark"` | Light or dark palette |
| `ground` | `GshPresetId` | — | gradients.sh preset id for the backdrop shader |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the backdrop shader parameters |

## Use when
- A video-editing or motion tool launch where the editor UI itself is the demo.
- A beat that goes from empty tracks to an exported film in one continuous take.
- A scene showing layered tracks: video, title and audio.

## Don't use when
- You want a project roadmap with draggable bars — use `roadmap-timeline`.
- You want one big publish click and a camera pull-back — use `macro-click`.
- You want a player page with subscribe and like — use `video-watch-page`.