Clips

Clips are individual elements within a track. Each clip has timing, transform, style, and optional animations.

Base Properties

interface BaseClip {
  id?: string;
  type: ClipType;
  start: number;
  duration: number;
  transform?: Transform;
  style?: Style;
  animations?: Animation[];
  keyframes?: Keyframe[];
  transition?: Transition;
  zIndex?: number;
}

Clip Types

Type	Description	Required Fields
text	Text content	text
image	Static image	src
video	Video content	src
rect	Rectangle shape	-
circle	Circle shape	size
audio	Audio clip	src
layout	Container	children
subtitle	Subtitle	words

Text Clip

{
  "type": "text",
  "text": "Hello World",
  "start": 0,
  "duration": 5,
  "transform": { "x": "50%", "y": "50%", "anchor": "center" },
  "style": { "fontSize": 48, "fill": "#ffffff" }
}

Image Clip

{
  "type": "image",
  "src": "https://example.com/image.png",
  "start": 0,
  "duration": 5,
  "transform": { "width": 400, "height": 300 }
}

Video Clip

{
  "type": "video",
  "src": "https://example.com/video.mp4",
  "start": 0,
  "duration": 10,
  "source": { "start": 0, "end": 10 },
  "volume": 0.8
}

Shape Clips

{
  "type": "rect",
  "start": 0,
  "duration": 10,
  "transform": { "width": 200, "height": 100 },
  "style": { "fill": "#3b82f6" }
}

Timing

Every clip has timing properties:

start: When the clip appears (seconds)
duration: How long it's visible (seconds)

The clip is visible from start to start + duration.

Clips

On this page