Moessif/code-video-showcase

This is a production recipe, not a finished video maker. It is worth trying only if you already have an agent-driven code workflow and want a reproducible, template-based way to assemble a short style film. There is no finished demo video in the repository; the previews are analysis artifacts of an external 61 s reference film project README.

The problem

You want a short branded showcase film: an opening, a run of style segments with big cards between them, a fast montage and an ending. Normally you would scrub a timeline in an editor and hand-time every cut to the music. Here the timeline becomes a formula, each frame is a pure function of time t, and the soundtrack is synthesized at a fixed 120 BPM. The step that changes is timing and rendering: you edit HTML/Canvas/SVG/Three.js segments or the style recipes, render frames, and get a deterministic result for the same second on any machine.

What's different

The mechanism is the split between structure and assets. A documented timeline formula fixes the 61 s default (8 s opening, eleven 4 s rounds, a 1 s transition card, an eight-flash 2 s montage, a 6 s ending), with each style segment starting on a beat hit project README. The picture is drawn by web technologies and captured through Playwright; the score comes from numpy/scipy; FFmpeg concatenates and encodes. The README also packages eleven style recipes, a big-card system, a QA checklist and runnable templates, so the expensive part is deciding what the film says, not hand-keyframing it.

The trade-off is that nothing is finished for you. The templates are a scaffold, the coral brand colour and sample copy are placeholders, fonts are not bundled, and there is no distributed demo file. This is a recipe for someone who can write or adapt segment code and is comfortable with agent-driven file work, not a drag-and-drop generator.

Who should try it

A good fit is a developer or small team already using a SKILL.md-compatible agent and wanting a repeatable short showcase for a launch or a style reel, where the same film can be edited by changing text and recipes. A poor fit is someone who wants to drop in footage or images, or who expects a ready-made video: the repository contains no media assets and no finished sample. People who want an editor-style interface or model-generated visuals should look elsewhere, since this approach deliberately avoids generative models.

Requirements and limitations

You need Node.js 20 or newer, Playwright (or playwright-core) with a Chromium-family browser, FFmpeg/ffprobe with libx264 and AAC, and Python 3.10 with numpy and scipy. The skill installs by copying the repository into an agent skills directory such as ~/.claude/skills/, ~/.dsh/skills/ or .agents/skills/ install instructions. Rendering runs locally on CPU. On WSL/Linux the README warns that node_modules, the Python environment and frame output should live on a Linux filesystem, and it documents falling back to Chrome for Testing or Edge when the bundled browser is unavailable project README.

Ongoing upkeep is mostly environmental: you must download OFL fonts yourself and serve them locally, and verify that the browser, FFmpeg and Python audio stack remain available on each machine used for rendering. Frame-count checks (for example, 1830 frames for the 61 s default) are part of the workflow and should be run after changes to segment durations.

HotRepo's take

HotRepo recorded 128 total stars and a rank of #22 on the NEW-REPOSITORY board for JavaScript on 2026-10-27, a single observation two days after repository creation. No comparable daily-board history exists, so persistence cannot be judged. Before investing, check the timeline formula and the font/browser setup in the README against your own segment plan.