Programmatic video for coding agents — HTML to video on your laptop. Turn HTML, CSS & data into real MP4s with pluggable render engines, 21 templates, AI soundtrack. Apache-2.0, no per-render fees. An official project by the Open Design team.
html-video is a local tool that turns HTML, CSS, and data into animated MP4 videos using configurable rendering engines and templates. Coding agents use it to create and export videos on a user's machine, with optional AI-generated soundtracks. The catalogue skills operate the tool and its video-generation workflow.
This repository also configures its own agents. See what html-video tells them →
Skill Claude CodeCodex
A 1970s European editorial poster in motion — a red rule draws across, a giant tilted figure drops in, a three-line headline rises line-by-line, an italic serif standfirst fades.
Skill Claude CodeCodex
Bold colored card on a dark gradient — big section number, nav breadcrumb, orange card sliding in, title rising.
Skill Claude CodeCodex
Luxury-minimal whitespace hero — single word reveals letter by letter, warm-gold hairline, breathing indicators.
Skill Claude CodeCodex
Electric split with hand-drawn script — offset panels slide in, display title rises with an outlined word, script strokes itself in.
Skill Claude CodeCodex
NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).
Skill Claude CodeCodex
A native Remotion data frame — bars grow from zero by real data via spring physics while the figures roll 0→target in sync. The numbers come alive in a way a static HTML chart can't.
Skill Claude CodeCodex
Two-panel split with quote as hero — white/blue panels open from center, accent bar grows, quote reveals line by line.
Skill Claude CodeCodex
Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes.
Skill Claude CodeCodex
Film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards.
Skill Claude CodeCodex
WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.
Skill Claude CodeCodex
Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.
Skill Claude CodeCodex
Swiss-grid statistic anchor — giant number, red accent, growing bars, black data bar. Rational and editorial.
Skill Claude CodeCodex
Soft-tech radial node graph as art — frosted rounded card, curved links drawing in, nodes popping outward, gentle float.
Skill Claude CodeCodex
Cursor light trail, chromatic rays, and directional flares for word-by-word quote reveals in video intros.
At most 3 mods per repository are shown here, and a mod shipped inside a plugin is left to that plugin's page — the rest are on their repository pages: