Skip to main content

Project case study

Caramel AI Video Studio

A code-driven AI-assisted video editing and animation workflow for branded short-form content, combining agent-directed editing, narrated scenes, motion graphics, timed captions, sound design, and render QA.

Engineering case study by Jonas Viray, Full Stack Developer & AI Automation Engineer

Actual output / portfolio showreel

Three episodes. One creative pipeline.

A 43-second compilation edited from my actual Caramel AI episodes. Watch how AI-assisted production brings together scripted storytelling, presenter animation, captions, sound design, programmatic motion graphics and final render checks.

  1. EP 03 / Resume Glow-Up — animated presenter and resume explainers.
  2. EP 04 / AI, AGI & SI — behind-the-scenes visual production.
  3. EP 05 / AI Hallucinations — illustrated chat example and captions.
43 sec9:16 vertical720p / 30 FPSCaptions included

Sound on recommended. This is an edited showcase of real episode output, not a claim of universal one-click character animation or fully automated creative approval.

Download the 43-second reel

creative production / episodes 03—05

Caramel AI Demo Reel

A 43-second showcase prepared from Episodes 3, 4, and 5, highlighting presenter animation, timed captions, programmed motion graphics, sound design, and technical rendering. Sound-on viewing recommended.

What's demonstrated

  • Episode 3: Resume Glow-Up — narrated presenter scenes and timed captions
  • Episode 4: AI / AGI / Superintelligence — animated educational visuals
  • Episode 5: AI Hallucinations — explanatory graphics and sound-led timing
  • Programmatic editing with HyperFrames, GSAP, FFmpeg, and AI agents

Facial-animation compatibility is source-specific, and automated QA supports rather than replaces human review.

Overview

Caramel AI Video Studio is a personal creative automation system I built by extending the open-source free247editor workflow and Herk Edit Kit/HyperFrames engine, with upstream attribution retained. I direct Claude Code and Codex with production briefs and reusable rules, then use Node.js, HyperFrames, GSAP, and FFmpeg to compose narrated, branded vertical videos. The workflow covers script and storyboard planning, character and scene selection, word-aligned subtitles, motion graphics, sound effects, desktop/mobile rendering, and technical verification. Source-specific facial and gesture experiments are not presented as universal automatic lip-sync, fully rigged animation, or a substitute for sound-on human editorial approval.

engineering summary

Problem → Architecture → Contribution → Result

Problem
Branded short-form video requires scripting, narration, caption alignment, animated graphics, character performance, audio mixing, rendering and visual inspection. Manual coordination can be slow, while one-shot generation is difficult to audit and revise.
Architecture
Claude Code and Codex follow reusable production briefs and skills. Node.js scripts coordinate scenes, timing, asset selection and verification; HyperFrames and GSAP compose programmatic animation; FFmpeg encodes video and processes audio. Raw media, private voice inputs and completed videos remain outside the source repository.
Contribution
Designed and extended a Caramel-branded production workflow on top of the open-source free247editor and Herk Edit Kit foundations, retaining attribution. Built reusable scene and asset selection, editorial rules, QA tools, exact-source animation checks and a human sound-on review gate.
Result
A source-controlled creative system for planning, assembling, rendering, inspecting and revising branded short-form videos, with editable project sources and review reports. Episode examples document actual vertical output and test evidence without suggesting all facial effects work for all character sources.

AI / integration engineering notes

  • Extended a permissively licensed agent-based editing workflow with production briefs, scene templates, character-asset catalogs, selection policies, and local source restoration procedures.
  • Coordinated script-specific narration and caption timing, motion graphics, SFX, and vertical 1080 × 1920 output with a mobile review copy.
  • Automated checks for frame geometry, encoded playback, audio sync, contrast, asset compatibility, and reproducibility; sound-on human review remains mandatory.
  • Uses exact-source compatibility gates for gesture and facial animation instead of claiming universal phoneme-driven or skeletal character animation.

See my AI-assisted engineering approach

Related service: Product Engineering & Business Systems

Public product-surface details below are included as scope context from the observed site or application. They are not presented as claims about business outcomes, revenue, approvals, health results, or other client marketing metrics.

Observed product surface

  • Agent-assisted editing from plain-language instructions
  • Word-aligned captions and scene timing
  • Reusable motion-graphic and presenter layouts
  • Character assets with compatibility-gated gestures
  • FFmpeg encoding, mobile review copies and technical verification

Public product areas

  • Creative briefs and storyboards
  • Scene, character and motion libraries
  • Narration, caption timing and sound design
  • HyperFrames and GSAP composition
  • Render QA and sound-on review

Intended audience · Creators and businesses needing branded explainers, product walkthroughs and short-form educational content

Planning a system with similar complexity?

Send the requirements, current stack, and constraints. I'll outline how I would structure the system, where the main risks are, and what an implementation path could look like.

Discuss the system Book a call

More projects

All work