Video

Video quickstart

Create, preview, render, and inspect a Cuitty Video composition.

HTML Markdown JSON

Video quickstart

Cuitty Video turns a TypeScript composition or YAML document into a rendered video. The local pipeline compiles the composition into IR, renders frames with Playwright, and encodes the final artifact with FFmpeg.

Install the workspace

From the video repository:

cd ~/Code/cuitty/video
bun install
bun run typecheck

Rendering requires FFmpeg and a Playwright-compatible browser on the machine that runs the renderer.

Create a composition

Create examples/hello.yaml:

composition:
  id: hello-video
  width: 1280
  height: 720
  fps: 30
  duration: 5s

layers:
  - id: background
    render:
      type: gradient
      colors: ["#0f172a", "#312e81"]
      direction: "135deg"

  - id: title
    clips:
      - id: intro-title
        start: 0s
        end: 5s
        render:
          type: text
          text: "Hello from Cuitty Video"
          fontSize: 64
          color: "#ffffff"
        animate:
          - property: opacity
            from: 0
            to: 1
            start: 0s
            duration: 1s
            easing: cubic-out

output:
  codec: h264
  crf: 18

Preview the composition

Use the CLI to validate the file and print its timeline summary:

bun --cwd packages/cli src/index.ts preview ../../examples/hello.yaml

Inspect a single frame:

bun --cwd packages/cli src/index.ts preview ../../examples/hello.yaml --frame 60

Render the video

Render to MP4:

mkdir -p output
bun --cwd packages/cli src/index.ts render ../../examples/hello.yaml -o ../../output/hello.mp4 --codec h264 --crf 18

Use --dry-run when you want to parse and validate without invoking Playwright or FFmpeg:

bun --cwd packages/cli src/index.ts render ../../examples/hello.yaml --dry-run

Next steps