Timeline Editor

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

Installation

$ pnpm dlx 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.

Props9

Prop	Type	Default
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	number1 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

clipsEditorClip[]
Up to three clips dragged onto V1: name, seconds, scene
DefaultDEFAULT_CLIPS
projectNamestring
Project name in the title bar
Default"Launch video"
titlestring
Text of the title clip that lands on V2
Default"Meet remocn"
audioNamestring
Name of the audio clip that lands on A1
Default"soundtrack.wav"
accentstring
Accent color for highlights, buttons and progress
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline
Default1
theme"light" | "dark"
Light or dark palette
Default"dark"
groundGshPresetId
gradients.sh preset id for the backdrop shader
groundParamsPartial<GradientParams>
Overrides for the backdrop shader parameters