🎬 ReactCut

The AI IDE-First, Code-Based Video Editing Framework.

---

ReactCut is an open-source, high-performance "Video-as-Code" framework designed for the AI IDE era. Instead of fighting with complex GUI timelines, you define videos using TypeScript. It's built to be the perfect target for AI agents (like Cursor, Claude, or GPT) to generate, validate, and render professional videos.

🤖 Why ReactCut?

In the age of AI, the best video editor isn't a GUI—it's your code editor.

• 🧑‍💻 AI-First Workflow: Perfect for LLMs to generate video scripts as deterministic TypeScript code.
• ⚡ Rust-Powered Core: High-speed timeline validation and animation calculation via Rust & WebAssembly.
• ⚛️ React-Based Rendering: Leverage the full power of the React ecosystem to design your frames.
• 🖥️ CLI-Driven: Validate, preview, and render videos directly from your terminal.
• 📦 Seamless Export: Professional MP4 export powered by Remotion Renderer, FFmpeg, and ReactCut's Rust core.

🤖 AI IDE Support

ReactCut is built for the AI era. If you are using an AI agent (like Cursor), please refer to AGENTS.md for optimized instructions and workspace rules.

🏗️ Architecture

graph TD
    subgraph Development [AI IDE / Cursor]
        Code["video.ts (Fluent API)"] --> Validate["CLI: reactcut validate"]
        Validate --> Preview["CLI: reactcut preview"]
    end

    subgraph Runtime [ReactCut Engine]
        Preview --> Player["@eosa/react<br/>ReactCutPlayer"]
        Player --> WASM["@eosa/wasm<br/>(Rust Math)"]
    end

    subgraph Output [Production]
        Code --> Render["CLI: reactcut render"]
        Render --> NAPI["@eosa/napi<br/>(Rust Core)"]
        NAPI --> FFmpeg["FFmpeg MP4"]
    end

Loading

🚀 Quick Start

1. Initialize a Project

npx @eosa/cli init my-video
cd my-video

2. Define Your Video (video.ts)

import { createProject } from "@eosa/core";
import { text, image, vertical } from "@eosa/presets";

export const project = createProject("My Product Ad")
  .composition(vertical.short({ durationInSeconds: 5 }))
  .addTrack("background", (track) =>
    track.addImage("assets/bg.jpg", image.fullscreen())
  )
  .addTrack("text", (track) =>
    track.addText("Built with ReactCut", {
      ...text.centerTitle(),
      from: 30,
      durationInFrames: 90,
      color: "#ffffff",
      animations: [
        { type: "slideIn", direction: "bottom", durationInFrames: 20, easing: "spring" }
      ]
    })
  )
  .build();

3. Preview & Render

# Preview in browser
reactcut preview video.ts

# Render to MP4
reactcut render video.ts --out output.mp4

📜 License

This project is licensed under the Apache License 2.0. See the LICENSE file for details.