Seven templates.
One JSON file each.

The five free templates and the PRO templates, built with HyperFrames (HTML + GSAP). Each is rendered here with the example brand and its own sound design. Every word, colour, image, number and sound is a slot. Change the slots, run the validator, render an MP4.

5 + 2free + PRO 16:9 · 9:16every one + 1:1 · 4:5on PRO 298slots 22original sounds

The templates

What each one does

Each player starts muted on the 16:9 cut. Turn the sound on, or switch to the other formats. The bar under each video is the real scene timing.

PRO examples

Every PRO template, in all four formats

PRO templates render 16:9, 9:16, 1:1 and 4:5 from the same brand.json. Pick a template: these are the real renders with the example brand, with sound.

Prompts

Copy a prompt, paste it into Claude Code

Pick a template, fill in your links, and copy. Open Claude Code (or any coding agent) in that template's folder and paste: the agent reads your site, fills brand.json, runs the validator until it passes, and renders. Leave a field empty to keep its placeholder.

How it works

From a brand to an MP4 in three commands

Every template folder works the same way. A person can edit the JSON by hand, or an agent can fill it from a website using the prompt that ships with each template.

Step 1 · Fill the slots

Copy the example and change the words, colours, logo, screenshot or quote. Anything left out keeps the example value.

cp brand.example.json brand.json

Step 2 · Validate

Checks lengths, colours, contrast, file paths and sources before anything renders. It exits non-zero until every problem is fixed.

node scripts/validate.mjs brand.json

Step 3 · Render

Headless Chrome renders it frame by frame and FFmpeg encodes it. The same input always gives the same video.

npx hyperframes render --variables-file brand.json -o renders/video.mp4

Inside a template folder

launch-12s/
├── index.html          # the composition; slots declared on <html>
├── brand.example.json  # every slot with the example values
├── SLOTS.md            # slot reference + character limits
├── PROMPT.md           # prompts: "make it about my website"
├── scripts/
│   ├── validate.mjs    # run before every render
│   ├── rules.mjs       # this template's own checks
│   └── shoot.mjs       # Launch only: 2880×1800 screenshot
└── assets/
    ├── audio/          # sfx.mp3 (the sound design) + silence.mp3
    └── fonts/          # woff2 + OFL licence
launch-12s-9x16/        # same slots, vertical layout

Every folder is generated from one source in kit/src/ by kit/core/build.mjs, so the formats can never drift apart.

The agent route

Each PROMPT.md has a ready prompt. Paste it into Claude Code with a product URL and the agent reads the site, writes the copy, grabs the real logo, runs the validator until it passes, and renders. The motion design is already done, so a small fast model (Haiku 4.5 or Sonnet 5) is enough.

The prompts forbid inventing claims, numbers, quotes or logos. If the agent cannot find a real logo, screenshot or review, it stops and asks.

The other formats use the same brand.json: copy it into the -9x16 (or -1x1, -4x5) folder and render again. Add --resolution landscape-4k for a 4K master.

Sound

Every template has its own sound design

The kit synthesises 22 effects from scratch, using oscillators, filtered noise and a small reverb. There are no samples, so the pack owns every sound outright. Each template places them on its own timeline (whooshes on camera moves, clicks on the cursor, ticks on count-ups, a boom on the logo impact) and the build mixes one track at −18 LUFS.

Tap a name to jump to it in the preview.

Two sound slots on every template

sfxTrack is the designed effects track. Point it at assets/audio/silence.mp3 to mute it, or at your own file to replace it.

musicSrc takes the customer's own music. It plays under the effects and fades out at the end. Pulse, Flash and Recap run on a 120 BPM grid, so a 120 BPM track lines up with the cuts.

Batch

One brand file, every template

A brand folder holds one brand.json (name, URL, logo, tagline, palette, fonts, music) that every template maps onto its own slots, plus one file per template with that template's copy. The batch command validates each template, then renders every format.

node kit/core/batch.mjs kit/brands/northwind

Pulse with the example brand

The same template, re-skinned by Northwind's brand folder (a fictional sample brand)

Ignite needs nothing but the brand file: logo, name, tagline, palette

Creative Tim, from its own website

Every template rendered for Creative Tim from two screenshots and the logo. Real claims come from creative-tim.com, with the source in the brand folder; anything the site doesn't say (prices, dates, quotes, customers) is labelled SAMPLE on screen.

node kit/core/batch.mjs kit/brands/creativetim

Guard rails

Why a re-skin can't break the video

Text always fits. Every line is measured with the real font and shrinks until it fits its box. The validator also caps each slot's length.
Readable colours. The validator requires 7:1 contrast for body text and at least 3:1 for large display text and buttons (the WCAG AA large-text minimum).
No invented numbers. Any stat, rating or claim with a digit needs a _sources URL, and quotes must be verbatim with their source.
Samples are flagged. Example avatars, logos and "(sample)" labels raise warnings once the brand name changes, so placeholders never ship.
Camera stays on the content. Launch clamps its zoom so the screenshot always fills the frame, and Ignite reads the logo's own pixels to build its sparks.
Deterministic renders. No clocks or random calls at render time. Ignite's sparks, Flash's confetti and Recap's fireworks use seeded generators, so a re-render gives the same motion every time.
Scenes fit every format. Flash scales each scene to the band between its header and its ticker, so long copy can't run off a square or vertical frame.
Offers add up. Flash needs the sale page as a source, rejects a sale price above the old one, and warns when the discount doesn't match the prices.
The year is real. Recap needs a source for its milestones and one for its numbers, keeps the milestones in calendar order, and warns when a line names the wrong year.

At a glance

All of them side by side

Template	Job	Length	Slots	You supply	Render time*

* 16:9 cut, with sound, on a CPU-only cloud container with software rendering. A laptop with a GPU is faster.

The 20 PRO templates:

Each free template opens a family. The PRO set reuses the same slot system, validator, sound engine and prompts, and adds the 1:1 and 4:5 feed formats.

Status

5 free templates in 16:9 and 9:16, and all 20 PRO templates in 16:9, 9:16, 1:1 and 4:5.
Sound design and a music slot on every template; one source, one validator engine and one font set, generated into every format.
A copy-ready prompt for every template, on every video on this page and in each folder's PROMPT.md.
Batch rendering for a brand folder, and Creative Tim versions of 20 templates from the website, with sources.
Your final pass across every template for batch adjustments.
Sharper Creative Tim captures (2880px) and real content for the sample slots: a customer quote, an offer, the year's milestones, an event.

Where it lives

Repository alexandru-paduraru/videos, branch claude/lucid-einstein-ligbyt, under kit/. Renders are not committed: run the three commands in any template folder to produce them.

Requirements: Node 22+, FFmpeg, and the HyperFrames CLI pinned to 0.8.75 (it downloads its own headless Chrome).

Seven templates.One JSON file each.