CutCraft

Appearance

CutCraft

Video editor as code ​

LLMs write code well and math badly. So a model writes a TSX file of words and shots, and CutCraft does the arithmetic, plays it in the browser, edits it and exports it.

What a desktop editor like Premiere Pro gives you, as a file: tracks, cuts, transitions, titles, captions, sound, colour, keying and export. Anything the timeline doesn't cover is free code: React, CSS, three.js or Motion.

sh
npm install cutcraft @cutcraft/kit react zod

Quick start · Examples · Introduction · GitHub · MIT

tsx
<Composition fps={30} width={1080} height={1920}>
  <Track id="main">
    <Clip id="hook" src="asset:talk" in="word:12" out="word:23.end" />
    <Clip id="broll" src="asset:product" in="shot:1" out="shot:1.end" />
  </Track>
  <Track id="text">
    <Title id="point" anchor="hook" at="word:16" duration={3}>
      10× output
    </Title>
  </Track>
  <Captions id="captions" src="asset:talk" animation="karaoke" />
</Composition>

The model never counts seconds: the cut starts on word 12, the title on word 16 of the clip that says it, and CutCraft works out the frames. Trim or drag the clip and both stay on their words.

Examples ​

Every video on this site is a short file rendered by CutCraft's own export engine; each card opens the file that made it.

A product launch: a three.js phone beside the founder, each feature on the word that names it. Its file →
Kinetic typeMotion sequences that land on their words.A data storySVG and React; each number on the word that says it.A logo revealthree.js particles that settle into a name.A vertical shortCaptions follow the words; the key point lands on its word.Free codeAny React in a Layer, timed by useT().TransitionsA wipe between two clips.KeyframesA slow push-in, eased.TitlesEntrances by letter, word or line.MasksA feathered oval over footage.Speed rampsNormal speed easing into 4×.ColourCool and warm white balance on one shot.

Examples · All elements · Free code

What's inside ​

  • The model writes words, CutCraft does the math. Cuts name transcript words and camera shots, titles name the word they belong to, and CutCraft turns them into frames through every trim and speed change.
  • A full editor's timeline. Tracks, clips, transitions, keyframes, speed ramps, masks, titles, captions, a soundtrack, colour grading and keying, each an element in the file.
  • Free code where the timeline stops. A <Layer> takes any React, CSS or WebGL, and <Three> and <Motion> put three.js and Motion on the timeline. All of it follows the video's clock, so it scrubs frame-exact.
  • Edit by hand, keep the code. Every drag and trim in the editor is an undoable action written back to the file as a one-value change, so the model reads your edit as the code it wrote.
  • What you preview is what you export. The browser plays the file, and the export runs the same player in headless Chrome: MP4, WebM and stills (how it works).
  • Checks like a compiler. A lint for the file, a list of what renders, and a layout check that points at the line where a graphic covers a face or leaves the safe zone.

Fast in the editor ​

In the editor, one drag step on a composition of 1,007 elements (validate the action, patch the file, resolve everything again) takes 0.52 ms (Apple M3 Pro, 12 cores, Node v22.23.4; pnpm docs:bench measures yours).

Read more ​

CutCraft is free and open source under the MIT licence.