A Claude Code skill that turns a website URL into a 60 fps product launch video built from HTML, with music-synced sound effects and motion blur.
Lob0Garou/opus-visual-motion-engine
An agent skill giving coding models a gated pipeline for motion graphics and code-rendered video: plan, render, automated QA, and MP4 export.
- Stars
- 3
- Forks
- 0
- Open issues
- 0
- Last commit
- 26 days ago
What is it?
opus-visual-motion-engine is an agent skill for producing motion graphics, code-rendered video, kinetic typography, landing pages and diagrams. It walks a coding model through a fixed sequence: write a plan with beats and a timeline, build from a 1920×1080 HTML template that exposes a seek(t) and DURATION contract, render headlessly, run automated QA, fix issues, and export to MP4, WebM or GIF with ffmpeg.
The QA script renders each frame and checks for frozen or empty frames, non-deterministic output, text collisions, contrast and minimum type size, and common AI-generated design patterns. It writes a contact sheet, key frames, and a report.json with per-frame ink coverage, so a model without image input can still reason about the result. Page mode also checks desktop, mobile and dark-scheme layouts.
The repository also includes a score script that generates deterministic background music and sound effects from a cue sheet, and an audio-data script that extracts beat, onset and loudness data so motion can sync to sound.
Key features
- 01Plan-to-export pipeline with a reusable 1920×1080 HTML composition template.
- 02Deterministic seek(t) timing contract with a seeded random generator and easing helpers.
- 03Headless render QA that flags frozen frames, text collisions, low contrast and scene gaps.
- 04Exports frame-exact MP4, WebM or GIF via ffmpeg, with optional audio.
- 05Generates original music and sound effects from a cue sheet, and extracts beat data for syncing motion to audio.
Use cases
- Producing short motion graphics or showreels with a coding agent.
- Building code-rendered video or kinetic typography without a manual editor.
- Checking an agent-generated animation for layout and timing defects without seeing the frames.
- Creating landing pages or diagrams with animated transitions that are verified by automated checks.
Quick start
- 1
Clone the repository into your harness skills folder
git clone https://github.com/Lob0Garou/opus-visual-motion-engine ~/.dsh/skills/opus-visual-motion-engine - 2
Install the script dependencies and the Chromium browser
cd ~/.dsh/skills/opus-visual-motion-engine/scripts && npm install && npx playwright install chromium - 3
Start a new session and ask the agent to use the skill; then run the QA check on its composition
node scripts/qa.mjs composition.html
Things to know
- It is an agent skill for coding models, so it needs a compatible agent harness to be useful.
- Export requires ffmpeg on PATH and Node 18 or newer.
- The only benchmark is a single run per arm, so the reported gains are not statistically established.
- The project is new, with only 3 stars.
Topics
FAQ
- What is opus-visual-motion-engine?
- An agent skill giving coding models a gated pipeline for motion graphics and code-rendered video: plan, render, automated QA, and MP4 export. opus-visual-motion-engine is an agent skill for producing motion graphics, code-rendered video, kinetic typography, landing pages and diagrams. It walks a coding model through a fixed sequence: write a plan with beats and a timeline, build from a 1920×1080 HTML template that exposes a seek(t) and DURATION contract, render headlessly, run automated QA, fix issues, and export to MP4, WebM or GIF with ffmpeg.
- Is opus-visual-motion-engine free to use? What license does it have?
- opus-visual-motion-engine is open source under the MIT license. Check the license terms before using it in commercial products.
- Is opus-visual-motion-engine still maintained?
- Actively maintained. The last commit to opus-visual-motion-engine was on Sep 26, 2026.
- What can I use opus-visual-motion-engine for?
- Producing short motion graphics or showreels with a coding agent. Building code-rendered video or kinetic typography without a manual editor. Checking an agent-generated animation for layout and timing defects without seeing the frames. Creating landing pages or diagrams with animated transitions that are verified by automated checks.
- How do I install opus-visual-motion-engine?
- Clone the repository into your harness skills folder: git clone https://github.com/Lob0Garou/opus-visual-motion-engine ~/.dsh/skills/opus-visual-motion-engine Install the script dependencies and the Chromium browser: cd ~/.dsh/skills/opus-visual-motion-engine/scripts && npm install && npx playwright install chromium Start a new session and ask the agent to use the skill; then run the QA check on its composition: node scripts/qa.mjs composition.html
- Where can I get opus-visual-motion-engine?
- The source code and installation instructions are on GitHub: https://github.com/Lob0Garou/opus-visual-motion-engine
Summary generated by AI from the project's README. GitHub stats refresh daily.
Related projects
Turns a written script into a narrated explainer video or product demo, with a local voice, word timing and canvas rendering, driven by a coding agent.
An agent skill for Claude Code and Codex that turns your app's real UI into launch films and short videos, cut to music and rendered locally.
A Claude Code skill that turns a short theme into a beat-synced motion graphics video rendered to MP4 with HyperFrames.
A Claude Code and Codex agent skill that guides you through making 30-90 second motion graphics videos, with stage-by-stage quality gates.
A set of four Agent Skills that teach AI coding agents to build broadcast-style motion graphics with Remotion.