I was tired of manually editing dev reels, so I built an open-source CLI to automate 9:16 videos from code

A few weeks ago, I finished building a tool I was genuinely excited about. I wanted to share it with other developers, so I did what most of us do: opened OBS, hit record, and spent four minutes typing commands in a terminal while talking quietly into my laptop microphone.

The result was painfully dry. Almost nobody watched past the first four seconds.

It is a common frustration for developers. You can spend 40 hours building clean architecture, write thorough unit tests, and design a responsive UI, but if your launch demo looks like a boring webcam recording, people simply scroll past it on Twitter, LinkedIn, Reels, and Shorts.

Short-form video has become one of the fastest discovery channels for developer tools. But manual video editing in Premiere or CapCut is exhausting. You have to capture the screen, zoom in on code lines, add captions, hunt for royalty-free audio, and align everything by hand.

I wanted a tool where I could just point a CLI at my repository and get back a studio-grade 9:16 vertical video automatically.

Because I could not find a tool that did this without charging monthly subscriptions, I built one myself. It is called Reelcraft, and it is completely open source under the MIT license.

Reelcraft — Turn Code Into High-Retention 9:16 Vertical Viral Videos

Intelligent AI Agent Skill & Standalone CLI engine that transforms code repositories, technical posts, and CLI tools into studio-grade 9:16 vertical videos in 60fps.

dusmamud.github.io

Here is how the engine works under the hood, the engineering challenges I ran into, and how you can run it on your own codebase.

1. Why OBS Screen Recordings Flop

Social media algorithms are unforgiving. If a viewer does not see something compelling within the first 400 milliseconds, they swipe away.

When you record raw desktop footage:

• Text is tiny and unreadable on mobile screens.
• Desktop 16:9 aspect ratio leaves massive black bars on phones.
• There is no pacing or visual rhythm to keep attention.

Developers do not need slower walkthroughs. They need rapid proof: what the tool does, how fast it runs, and how to install it.

2. The 400ms Swipe Rule: 4-Beat Retention

When studying high-performing technical reels, almost all of them follow a strict four-beat kinetic structure:

1. Beat 1: The Hook (0.0s to 3.5s). A high-contrast visual shock or problem statement that interrupts the swipe before the brain decides to move on.
2. Beat 2: Problem Agitation (3.5s to 8.0s). Highlighting the painful old way of doing things or wasted engineering hours.
3. Beat 3: Live Code Proof (8.0s to 18.0s). Real terminal execution, animated code syntax, and dynamic metric counters.
4. Beat 4: Call to Action (18.0s to 25.0s). A clean payoff with a seamless loop transition back to the first frame.

Reelcraft uses this structure as its default storyboard engine so the generated video stays engaging without needing manual timeline trimming.

3. Mobile Safe-Zone Mathematics

One of the most annoying bugs with developer reels is platform UI overlay.

On mobile devices, platform UI covers:

• Top 140px: Status bar, back arrows, and search headers.
• Bottom 280px: Account handle, multi-line caption, and audio marquees.
• Right 160px: Like button, comment bubbles, bookmarks, and share stack.

If you center a terminal window or place code near the bottom of a 9:16 canvas, your key commands get completely blocked by the platform buttons.

Reelcraft calculates strict CSS safe-zone bounding boxes. All code blocks, terminal outputs, and text animations are confined to the central safe area so they remain 100% visible on every phone screen.

4. Architecture: How Reelcraft Works Under the Hood

Reelcraft is built on Node.js and uses Hyperframes with headless Chromium to render 60fps compositions into MP4 files.

Step 1: Automatic Brand Extraction

Instead of asking you to choose colors and hex codes, the CLI inspects the target directory:

• Detects whether your project uses a light or dark aesthetic.
• Scans tailwind.config, CSS variables, or styles to extract primary and accent colors.
• Locates vector SVG or PNG logos and scales them for high-DPI displays.
• Reads your README.md or package.json description to understand what the product actually does.

Step 2: Voiceover and Sub-Frame Audio Synchronization

Silent videos fail on mobile feeds. Reelcraft integrates two local neural voice engines:

• Kokoro-82M for natural English narration.
• Edge-TTS for Hindi and Hinglish narration.

It also bundles tactile sound effects (mechanical keyboard clicks, switches, interface pops) from the Kenney audio library. The engine targets roughly 140 words per minute for comfortable reading and aligns visual transitions to audio beats.

Step 3: Headless Chromium 60fps Rendering

Once the HTML and CSS composition is ready, Reelcraft runs Hyperframes in headless Chromium at 1080x1920 resolution at 60fps. It combines audio tracks with FFmpeg and outputs:

• video.mp4: The finished 1080x1920 video.
• poster.jpg: A high-CTR Frame-1 thumbnail.
• captions.txt: Ready-to-copy social post description with relevant hashtags.

5. The Packaging Trap: Fixing a 290MB NPM Tarball

When I first tested publishing the CLI to npm, I ran npm pack --dry-run to see the archive size.

To my horror, the tarball was 289.7 MB.

What happened? I had included five pre-rendered test suites in the repository for benchmarking. Each suite had a 1080p MP4 video and audio files. Because package.json did not have an explicit files field, npm tried to package every single video and temporary build folder.

If a developer ran npx reelcraft, they would have had to download nearly 300MB of data just to run a CLI tool.

The fix was adding a strict whitelist in package.json:

"files": [
  "bin",
  "skills",
  "scripts",
  "assets",
  "README.md",
  "LICENSE",
  "PRODUCT.md"
]

This immediately dropped the unpacked tarball down to 22 MB, keeping all the necessary audio assets and CLI code while stripping test videos and documentation build artifacts.

6. Trying It Out on Your Own Project

You do not need to install anything globally or create an account to test Reelcraft.

Verify your local environment (Node, Python, FFmpeg):

npx reelcraft doctor

See available presets and options:

npx reelcraft --help

Inspect the 12 built-in viral hook formulas:

npx reelcraft hooks

If you use AI coding assistants like Google Antigravity, Claude Code, or Cursor, Reelcraft also works directly as an agent skill. You can drop it into your agent workspace and trigger it with /reelcraft.

7. Source Code & Contributing

The entire project is public and open source under the MIT license:

• NPM Package: https://dusmamud.github.io/reelcraft/
• Interactive 3D Showcase: https://dusmamud.github.io/reelcraft/

If you build side projects or open-source libraries, give it a spin on your next release. Feedback, bug reports, and PRs are always welcome!