Skip to main content
Pro Feature - Video Editor requires a Pro subscription.

Overview

Video artifacts extend the canvas system with temporal properties. Each shape becomes a clip on a timeline.
{
  "width": 1920,
  "height": 1080,
  "duration": 10,
  "backgroundColor": "#0a0a0f",
  "shapes": [
    {
      "type": "text",
      "x": 960, "y": 540,
      "text": "WELCOME",
      "fontSize": 120,
      "color": "#ffffff",
      "bold": true,
      "align": "center",
      "startTime": 0,
      "duration": 4,
      "trackId": "track-1"
    }
  ]
}

Structure

{
  "width": 1920,
  "height": 1080,
  "duration": 60,
  "backgroundColor": "#000000",
  "shapes": [...]
}

Temporal Properties

Every shape has these additional properties:
PropertyDescriptionDefault
startTimeWhen shape appears (seconds)0
durationHow long visible (seconds)5
trackIdTrack assignment”track-1”

Video Resolutions

PresetSizeUse Case
1080p1920 × 1080YouTube
Vertical1080 × 1920TikTok, Reels
Square1080 × 1080Instagram
720p1280 × 720Twitter

Shapes

All canvas shapes plus:
TypeProperties
videox, y, width, height, src
audiox, y, width, height, src

Effects

{
  "type": "effect",
  "subtype": "chromatic",
  "name": "Chromatic Aberration",
  "startTime": 0,
  "duration": 5,
  "trackId": "track-fx-1",
  "intensity": 100,
  "offset": 5
}
Available effects: dropShadow, glow, vignette, blur, grain, glitch, chromatic, pixelate

Filters

{
  "type": "filter",
  "subtype": "temperature",
  "name": "Temperature",
  "startTime": 0,
  "duration": 5,
  "trackId": "track-fx-1",
  "value": 50
}
FilterMinMaxDefault
brightness0200100
contrast0200100
saturation0200100
hue03600
grayscale01000
sepia01000
temperature-1001000

Transitions

{
  "type": "transition",
  "subtype": "fade",
  "name": "Fade",
  "startTime": 0,
  "duration": 1,
  "trackId": "track-fx-1",
  "easing": "ease-in-out"
}
Available: fade, dissolve, wipeLeft, wipeRight, wipeUp, wipeDown, slideLeft, slideRight, zoomIn, zoomOut, crossZoom, blur

Tracks

Organize clips on tracks:
  • track-1: Main content (titles)
  • track-2: Secondary (subtitles)
  • track-3: Background elements
  • track-fx-*: Effects/filters/transitions

Timing Tips

ElementDuration
Title cards3-5 seconds
Lower thirds4-6 seconds
Stagger delays0.3-0.5 seconds
Total intro5-15 seconds

Example: Title Sequence

{
  "width": 1920,
  "height": 1080,
  "duration": 15,
  "backgroundColor": "#0a0a0f",
  "shapes": [
    {
      "type": "text", "x": 960, "y": 540,
      "text": "WELCOME", "fontSize": 120, "color": "#ffffff", "bold": true, "align": "center",
      "startTime": 0, "duration": 4, "trackId": "track-1"
    },
    {
      "type": "text", "x": 960, "y": 640,
      "text": "to the show", "fontSize": 36, "color": "#888888", "align": "center",
      "startTime": 1, "duration": 3, "trackId": "track-2"
    },
    {
      "type": "rect", "x": 760, "y": 520, "width": 400, "height": 4,
      "fillColor": "#e94560",
      "startTime": 0.5, "duration": 3, "trackId": "track-3"
    },
    {
      "type": "text", "x": 960, "y": 540,
      "text": "Episode 1", "fontSize": 72, "color": "#ffffff", "align": "center",
      "startTime": 5, "duration": 5, "trackId": "track-1"
    }
  ]
}