CutCraft

---

export const schema = z.object({ product: z.string(), accent: z.string() });
export const defaults = { product: "Shed", accent: "#ff5a1f" };

export default function Video({ product, accent }: z.infer<typeof schema>) {
  return (
    <Composition fps={30} width={1920} height={1080}>
      <Track id="main">
        <Clip id="hook" src="asset:founder" in="word:12" out="word:23.end" />
        <Transition id="x1" type="crossfade" duration={0.4} />
        <Clip id="broll" src="asset:product" in="shot:1" out="shot:1.end" fit="cover" />
      </Track>
      <Track id="overlays">
        <Title id="title" anchor="hook" at="word:14" duration={2.8} color={accent}>{product}</Title>
      </Track>
      <Track id="music" layout="free">
        <Audio id="bed" src="asset:music" start={0} duration="fill" volume={0.35} duck={{ under: "main", to: 0.15 }} />
      </Track>
    </Composition>
  );
}

Drag the end of hook in the timeline and one token in the file changes. The b-roll moves up behind it, the title stays on the word it was timed to, and the music still runs to the end. Whoever opens the file next, a person or a model, reads the edit as ordinary code.

Why

Language models write code well and do arithmetic badly. A cut written as 8.43 seconds can land in the middle of a word; a cut written as word:12 lands on it. CutCraft lets the file say what it means (this word, that shot) and does the math itself.

The goal is a desktop editor's power, in the shape of Premiere Pro's timeline, as a file: tracks, cuts, transitions, titles, captions, sound, colour, keying and export, each an element a model can write and a person can drag.

The timeline part of the file (tracks, clips, transitions, captions) uses elements with literal ids, so an editor gesture can find the element it touched and change one value. Anything you draw on top can be free code: a <Layer> holds any React, CSS, canvas or three.js you write.

And all of it should be free to use. A player, an editor that writes back to the file, a frame-exact export and a layout check are what a product built on video needs, and they belong under a licence that costs it nothing. CutCraft is MIT: no paid tier, no licence key, no watermark. The projects closest to it ask for something: Remotion's licence has a paid tier for companies, and Diffusion Studio's engine stamps a watermark on every frame without a licence key. Building on either would have carried those terms into everything made with CutCraft, so it is written from scratch, on open libraries (React, zod, three.js, Motion, and Mediabunny, which is MPL-2.0 and stays so for its own files).

Free code: three.js, Motion, any React

You aren't limited to the built-in titles and graphics. A <Layer> takes any React component, with hooks, CSS 3D transforms, filters, blend modes, a canvas or WebGL. <Three> and <Motion> bring three.js and Motion onto the timeline:

<Three id="cube" anchor="hook" at="word:14" duration={4}
  camera={{ position: [0, 0, 5], fov: 40 }} background="#101010"
  setup={({ scene, THREE }) => {
    const cube = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshNormalMaterial());
    scene.add(cube);
    return ({ time }) => { cube.rotation.set(time * 0.6, time, 0); };
  }}
/>

<Layer id="card" anchor="hook" at="word:20" duration={3}>
  <FlipCard front="Before" back="After" />   {/* your own component: useT() gives the time */}
</Layer>

All of it runs on the video's clock. Scrub backwards, seek, or play at 2×, and a three.js scene, a Motion sequence or a CSS animation shows exactly the frame for that time. These layers are still timeline elements, so the editor moves, trims and anchors them to words like everything else; only what they draw is up to you.

@cutcraft/graphics has the host setup, and Free code has the details. The player draws all of this, and so does the export, which runs the real player in headless Chrome, frame by frame, with the same sound (exporting).

By topic

Cut on words and shots

A clip's in and out name a word of the transcript or a shot of the camera, and CutCraft turns them into frames through every trim and speed change. Time by meaning

<Clip id="hook" src="asset:founder" in="word:12" out="word:23.end" />
<Clip id="broll" src="asset:product" in="shot:1" out="shot:1.end" fit="cover" />

Titles on the word that says them

An overlay anchors to a clip and starts on one of its words, so it moves when the clip is trimmed or dragged. Titles and graphics

<Title id="title" anchor="hook" at="word:14" duration={2.8} style="h1" animation={{ preset: "word-by-word" }}>Shed</Title>

Captions and sound

Captions come from the transcript and follow the clips. Music fills the video and ducks under speech. Captions and sound

<Captions id="captions" src="asset:founder" style={{ position: "bottom", size: 44 }} animation="karaoke" />
<Audio id="bed" src="asset:music" start={0} duration="fill" volume={0.35} duck={{ under: "main", to: 0.15 }} />

Transitions

Twelve between two clips: crossfade, dips to black and white, wipe, slide, push, iris, clock wipe, blinds, film burn, pixel dissolve and zoom. Transition

<Transition id="x1" type="crossfade" duration={0.4} />
<Transition id="x2" type="iris" duration={0.8} params={{ sides: 5, star: 0.45, feather: 4 }} />

This is the beginning of the README. Read the rest at the original. Read the full README ↗