Make a brand video in code

Code renders exact words, numbers, UI screens and brand colours perfectly every time. That is what this skill is for: 30–60 s videos built from big moving words, mock UI screens, a simple character drawn in SVG, music and sound effects, rendered locally with HyperFrames.

A full worked example (a 45 s recruiting video) is in example/ of this repo. Reuse its tools and helpers; write a new story for every new video.

Setup (once per project)

1. npx skills add heygen-com/hyperframes inside the project. This installs the HyperFrames skills (core, animation, audio, CLI, media) that this skill builds on.
2. Copy example/lib, example/tools, example/styles.css and the shape of example/settings.js. Get the assets listed in example/ASSETS.md.
3. Pin one HyperFrames version and use it everywhere (npx --yes hyperframes@<version> ...).

Your brand kit (fill this in first)

Background colour, 1–2 accent colours, a "joke" or contrast colour if the story has a before/after, fonts (local files, never loaded from the internet at render time), a vector logo (SVG — PNG logos go blurry at 4K), tagline, website. Write it at the top of settings.js.

Facts rule

Every number on screen comes from the owner, with its meaning. Ask before using any other figure. Joke labels ("version 37") are fine; invented performance counters are not. No real customer names or faces unless the owner says so.

The build, step by step

1. Direction brief, one short paragraph each: audience · the one action we want · the opening frustration (frame 0 must already show a problem, not an action) · the proof (real figures only) · the ending invitation.
2. Storyboard table: time · on screen · big words · what the viewer should notice. Get 2–3 variants and pick one. Check the jokes aren't lifted from your reference video.
3. Ask for a reference song on day one (any song, only for measuring). See references/sound.md.
4. Stills before motion: one designed still per scene (hyperframes snapshot), approved before anything moves.
5. Build with a subagent from a written spec. Write rhythm in seconds (holds 0.2 / 0.4 / 0.6 s, which cuts are hard): uniform easing and pacing is the giveaway of AI-made video. Expect many rounds; one-shot is a myth.
6. Before every render: hyperframes lint + check clean; a review pass lists problems as P0 (broken / wrong fact) / P1 (hurts the video) / P2 (polish); every number checked.
7. Review (below), fix, get an independent review of the finished render, fix, then load video-delivery.

Settings rule

Every word, number, scene time, colour, music and sound-effect time lives in settings.js, one per line, with a plain-English comment, so a non-developer can change the video by editing one line. HyperFrames needs audio timing as static <audio> attributes, so node tools/sync-audio.mjs [file.html] writes them from settings.js. Run it after changing any music or SFX time.

Review rule (never approve from a report or a contact sheet alone)

• Fresh render + matching contact sheet from the same code.
• Full-size frames at every scene change (+0.15 s) and every punchline.
• Watch and listen at full speed; then muted at phone size (~400 px wide).
• Counters land and hold; no frame shows two scenes at once; no word cut at the edges.
• A subagent's "done" is a claim: re-run its check yourself.

References in this skill

• references/craft.md — readability sizes, easing, holds, transitions, layouts for other shapes.
• references/sound.md — music, free sound effects, mixing, licences.
• references/speed.md — the cheap fast loop, render speed, tokens and model routing.
• references/troubleshooting.md — every gotcha we hit, with the fix.