Devlog: The Kinetic Journey — Building a Code-First Video Editor

The Goal

The objective of Kinetic was to build a desktop motion-graphics editor that functions like Adobe After Effects but compiles videos programmatically using standard React code and Remotion, rather than raw pixel rendering.

The Timeline of Development

Phase 1: The Building Blocks

We started by establishing the React, Vite, and Electron runtime environments. To ensure we had uniform design parameters, we created a Primitive SDK, building out modular structure components (e.g., BrowserFrame, DataGrid, SidebarLayout) and basic transition modules.

Phase 2: Mathematics of Movement (The Morph SDK)

An animatable system needs transitions, but writing manual CSS animations or custom interpolation code for every layout shift is slow and error-prone. We built the Morph SDK, a keyframe interpolation engine. By defining simple schemas in a central registry, the system gained the ability to smoothly calculate transitions for numbers, colors, vectors, booleans, and strings across any custom component.

Phase 3 & AI Orchestration: The Full Studio Integration

Finally, we shifted from a tool that just previews code to a tool that creates it. We established a 4-agent AI network to automate the scene creation process, linked real-time controls in the studio workspace to tweak components, synchronized audio waveforms to the visual timeline, and linked Electron’s IPC system directly to the local terminal to export MP4 files.

The Hardest Part: Bridging Node.js and the React DOM

One of the most complex parts of this project was bridging the gap between Node.js file operations and the browser-based React UI. Since Electron has strict security protocols, the renderer cannot write files or execute terminal commands directly.

We overcame this challenge by constructing a secure Inter-Process Communication (IPC) bridge. The React frontend formats the request details and sends them across the bridge, allowing the Node main process to safely handle file saving, font checks, and command execution, while keeping the UI running smoothly at 60 FPS.