How I Built a Programmatic Video Engine for SaaS Product Demos

Bojan Josifoski — Fri, 15 May 2026 12:39:56 +0000

Every SaaS product needs a demo video. The standard options are screen recording, which looks amateur and breaks every time the UI changes, or hiring a motion designer, which costs thousands of dollars and takes weeks. Both produce a static artifact that is outdated the moment you ship a new feature.

I needed a product walkthrough for SampleHQ. Instead of choosing between those two bad options, I built a third: a React-based framework that generates cinematic demo videos programmatically. The result is remotion-cinematic, an open-source template built on Remotion.

Here is the video it produced:

Why Code Instead of a Screen Recording

A screen recording captures pixels. When you redesign a page, rename a feature, or change the navigation structure, the recording is wrong. You re-record, re-edit, re-export. Every time.

A programmatic video captures intent. The video is a React composition that renders your actual UI components. When the UI changes, you update the component and re-render. The choreography, camera movement, cursor interactions, and transitions stay intact. The whole process takes minutes, not days.

There are other advantages. Version control. Branching. Code review. The same workflow you use for your product applies to your marketing video. You can diff two versions of a demo video the way you diff two versions of a feature.

What Remotion Cinematic Does

Remotion is a framework for making videos with React. You write components, they render frames, and Remotion stitches those frames into an MP4. It is excellent infrastructure but it does not solve the choreography problem. Moving a cursor smoothly across the screen, timing window entrances, coordinating camera movement with scene transitions: that is a lot of custom code.

Remotion Cinematic is the layer on top. It provides:

Prop-driven choreography. Every visual element, including window positions, sizes, entrance animations, rotation, and z-index, is defined as an input prop. You edit values in Remotion Studio's right panel and see the result immediately. No code changes for layout tweaks.

Geometry-aware cursor. The cursor targets real elements by their DOM ID. It follows arc, linear, or eased curves between waypoints. When it clicks a button, the button actually responds. When it drags a window, the window moves. The cursor changes shape based on what it is interacting with.

Scene-relative camera. Camera keyframes reference scene names, not absolute frame numbers. If you change a scene's duration or reorder scenes, the camera timeline adjusts automatically. The camera supports zoom, pan, and rotation with per-keyframe easing.

A full visual editor. Click any element in the preview to select it. Drag to reposition. Use handles to resize. Snap guides appear when elements align. Double-click text to edit inline. A floating property panel shows context-aware controls for whatever is selected. There is a visual cursor path editor with SVG overlays for drawing and adjusting cursor movement.

App UI from JSON. A descriptor format defines entire app interfaces: sidebars, navigation bars, data tables, stat cards, chat panels. Drop in a JSON object and the framework renders a full application interface with interactive elements. The descriptor can be generated from Figma files or screenshots.

Figma and screenshot import. A CLI tool converts Figma frames into app descriptors via the Figma REST API. Alternatively, point it at a screenshot and Claude vision generates the descriptor. Either way, you go from a design to a rendered app UI in the video without manually coding components.

The Architecture

The framework is organized into three layers.

The engine handles motion. It includes the choreography system (resolving window positions at any frame), the cursor system (interpolation, anchoring, shape switching), the camera rig (global transforms applied to the composition), and the audio manager (music bed with auto-fade, sound effects with volume ducking).

The primitives are reusable visual components. macOS-style windows with traffic lights. Serif headlines with word-stream animation. An end card with logo and call to action. Push transitions that slide scenes continuously instead of cutting. 17 app-ui building blocks that compose into realistic application interfaces.

The editor is a separate layer that reads and writes input props. The composition itself is pure: it receives props and renders frames. The editor overlays selection boxes, drag handles, snap guides, and property panels on top. This separation means the editor can be disabled for production renders without touching composition code.

The interaction layer ties everything together. A UIKeyframe system defines state changes on a timeline: at frame 24 the sidebar highlights item 1, at frame 40 the tab switches to "Orders," at frame 56 a table row highlights. These keyframes sync with cursor actions. When the cursor clicks a sidebar item, the sidebar responds. No manual wiring required.

Claude Integration

The template includes a Claude skill file that teaches Claude the full API. When you open the project in Claude Code, Claude can add new scenes from a description, wire up cursor choreography, build app UI from screenshots, and adjust timing and easing. The same AI-assisted approach that works for operational software works for video production.

This is not a gimmick. Scene creation involves writing a React component that uses specific engine APIs, registering it in the composition, adding window layout entries, defining cursor waypoints, and setting camera keyframes. Having Claude handle the boilerplate while you focus on creative direction is a genuine productivity multiplier.

The Numbers

The framework has 509 tests covering the engine, primitives, editor, CLI, schema validation, and end-to-end wiring. It ships with 5 example scenes: a chaos desktop, product reveal, feature showcase, headline, and end card. The tech stack is Remotion 4.x, React 19, TypeScript 5.9, and Zod for schema validation. Output is 1920x1080 at 30fps.

The entire thing is MIT licensed. Clone it, swap in your screenshots and brand colors, and you have a cinematic product demo.

npx degit codeverbojan/remotion-cinematic my-video
cd my-video
npm install
npm run studio

What I Learned

Three things surprised me during the build.

First, the visual editor was harder than the engine. Getting drag-to-move, resize handles, snap guides, and inline text editing to work correctly inside Remotion Studio required a careful separation between the editor overlay and the composition iframe. The postMessage bridge between them is where most of the complexity lives.

Second, scene-relative timing is essential. Early versions used absolute frame numbers for everything. Changing one scene's duration broke every cursor waypoint and camera keyframe that followed. Referencing scene names instead of frame numbers eliminated an entire class of bugs.

Third, the prop-driven approach pays for itself immediately. Being able to hand the Remotion Studio interface to someone who does not write code and let them adjust copy, colors, timing, and layout without touching a source file changes who can iterate on the video. The feedback loop goes from "file a request and wait" to "change it and preview."

Try It

The repository is at github.com/codeverbojan/remotion-cinematic. The README has a quickstart, customization guide, and full project structure. The docs folder covers the engine API, scene creation, and advanced customization.

If you are building a SaaS product and need a demo video that does not go stale, this is the approach. Fork it, make it yours, render it.

SampleHQ is the product this framework was built to demo. It manages samples, tracks fulfillment, and connects sample activity to pipeline data.

DEV Community: Bojan Josifoski