Onďák
@ondakx
Skill release postMake videos
Post summary
Builds deterministic 60fps MP4 recaps and demos from HTML Canvas or SVG with Playwright frame-stepping, contact-sheet visual QA, and procedural audio.
programmatic-video: 60fps code MP4s
Renders deterministic 60fps 1080p MP4s from HTML Canvas or SVG via Playwright frame-stepping, contact-sheet visual QA, procedural audio, and FFmpeg.
Source facts
- Repository
- jblxo/programmatic-video-skill
- Last source activity
- October 23, 2026 at 19:13
- Detected SKILL.md language
- English
- Stars
- 0
- Forks
- 0
Examples
Author farewell article video for Portal Stack at eMan was built with this pipeline and the skill open-sourced (https://x.com/ondakx/status/2114648149817950520).
Uses
Use to make animated videos, release recaps or Wrapped videos, product demos, farewell videos with SFX, or metric/chart animations without Remotion boilerplate.
Prerequisites
Node.js 18+, Playwright (or playwright-core with Chrome/Chromium), FFmpeg; Python 3.8+ optional for NumPy/Pillow audio and labeled contact sheets. Multimodal coding agent with shell and image-read.
How to use
Gather real metrics or storyboard → implement scenes as pure functions of time with window.__setFrame → run contact-sheet visual self-review and fix overlaps → synthesize or mix audio → pipe frames into FFmpeg for a 60fps MP4.
Limitations
Diffusion video models are out of scope. Screen-recording headless browsers drops frames; the skill requires deterministic frame stepping. Vision QA on downscaled contact sheets can miss small edge bleeds.
Install options
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Review the source files
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
File Explorer
7 filesShowing SKILL.md
SKILL.md
Source instructions · Read-only preview| name | programmatic-video |
|---|---|
| description | Build and render deterministic 60fps 1080p MP4 animated videos, motion graphics, release recaps, product demos, and data-driven "Wrapped" videos using HTML5 Canvas, SVG, Playwright frame-stepping (window.__setFrame), multimodal contact-sheet visual self-review, procedural Python/NumPy audio synthesis, WAV SFX cue mixing, and FFmpeg. Use whenever the user asks to "make an animated video", "generate an MP4 video from code", "build a release recap / Wrapped video", "render HTML/Canvas/SVG to MP4", "create a programmatic video without Remotion boilerplate", "make a demo or farewell video with sound effects", or "animate metrics/charts into a 60fps video". |