Make Claude Code render a 6-second title video, not just write the code for one

Lookbk — Fri, 06 Nov 2026 14:55:32 +0000

Ask a coding agent for "an animated title for our launch" and you usually get a page of animation code that you still have to run, fix and screen-record. This walkthrough uses an agent skill that takes the agent all the way to a finished MP4: three words in, a 1920×1080 kinetic-type video out, rendered on your own machine.

The skill is Kinetic Title Drop. It is MIT-licensed and free, it never calls an AI model, and it doesn't need an API key.

What it makes

A six-second, type-only film in three beats:

A huge first word opens the frame with a hairline slash through it, then settles into the top left.
A second word drops in as an outline and fills with your accent colour.
A payoff line whips in from the right with a motion smear, and an accent bar wipes under it. A small chip and a footer fade in, everything holds, then exits cleanly.

It works for launch openers, release announcements, reel intros and the first seconds of a demo video.

Install it

The skill is a folder with a SKILL.md, a template and a couple of scripts. Any agent that reads SKILL.md folders can use it. With the skills CLI (Node.js 22.20 or later):

npx skills add lookbkdev/lookbk-skills --skill kinetic-title-drop

It asks which agents to install it for (Claude Code, Codex, Cursor and others) and copies the folder into each one's skills directory. Add -g to install it for every project.

In Claude Code you can use the plugin marketplace instead:

/plugin marketplace add lookbkdev/lookbk-skills
/plugin install kinetic-title-drop@lookbk-skills

You also need FFmpeg on your PATH. The first render downloads a headless Chrome.

Ask for the video

In a fresh session, describe the title in plain words:

Make a kinetic title video. Lines: "Ship", "it", "today." Chip: "v2.0 · Out now". Footer: "Release notes · 14 fixes" on the left and our changelog URL on the right. Dark background, orange accent.

The agent picks up the skill from its description and follows the steps in SKILL.md. You don't have to name it.

What the agent actually does

This is the part that makes the result reliable. The skill doesn't ask the agent to improvise animation code; it gives it a fixed pipeline with checks at every step.

1. It writes a brief. The agent copies the template into a new project folder and fills in brief.json:

{
  "line1": "Ship",
  "line2": "it",
  "line3": "today.",
  "chip": "v2.0 · Out now",
  "metaLeft": "Release notes · 14 fixes",
  "metaRight": "relay.example/changelog",
  "ground": "#0f1013",
  "ink": "#f5f4ef",
  "accent": "#ff5b2e"
}

Every field has a hard length limit: 10 characters for the first word, 6 for the second, 12 for the payoff, 24 for the chip.

2. A script validates and applies it. apply-brief.mjs checks every value against the template's declared variables (type, length, colour format) and lists every problem at once, so the agent fixes the brief in one go instead of guessing.

3. It checks the layout before rendering. The template is an HTML composition rendered by HyperFrames, an open-source HTML-to-video tool, with the motion done in GSAP. Its check command plays the file in a browser, measures the layout over time and tests contrast:

npx --yes hyperframes@0.8.192 check --json

If a colour pair is too close, it reports contrast_aa_failure with a suggested colour. If a footer runs into the bar, you get text_box_overflow or content_overlap. The skill tells the agent to fix the brief, never the template, so a finding can't be silenced by breaking the design.

4. It looks before it renders. The agent takes four snapshots (the opening frame, the second word landing, the payoff and the held end frame) and inspects them for collisions:

npx --yes hyperframes@0.8.192 snapshot --at 0.3,1.6,3.6,5.2 -o snapshots

5. It renders the MP4.

npx --yes hyperframes@0.8.192 render --quality delivery -o renders/title-drop.mp4

The text is measured in the real font and sized to fill the frame, so a short word and a long word land in the same space.

Writing copy that reads well

A few tips from the skill's own notes:

Lines 1 and 2 share the top row, so together they should read as the start of one phrase: "Ship / it", "Meet / the", "Notes / that". Line 3 finishes it.
Everything is set in capitals. Single words read best; the payoff can be two short words.
Keep line 1 and line 2 under about 12 characters together, or the top row gets small next to the payoff.
The footer holds for about two seconds, so keep it scannable.

For colours, start from a preset if you don't have brand colours. "Ember" is #0f1013 / #f5f4ef / #ff5b2e, and "Fieldnote" is a light paper look: #f1ede4 / #18201c / #2f6b4f. The accent needs at least 3:1 contrast against the background, because the second word is drawn in it.

If something goes wrong

"Chrome is missing" on the first render: run npx --yes hyperframes@0.8.192 browser ensure once.
The render hangs or the animation is missing: the template loads GSAP from cdn.jsdelivr.net, so that host has to be reachable.
check keeps failing on overflow: shorten the chip or footer. That is almost always the cause.

Why this pattern works

The interesting part isn't the animation. It's that the skill turns a fuzzy request ("make a cool title") into a short loop the agent can't skip: fill a constrained brief, validate, measure, look, render. The agent does the tedious part, and the checks catch the mistakes agents usually make with layout and contrast.

The same repository has seven more free skills built this way: an 8-bit promo video, a slide deck, link-preview images, an architecture diagram, two landing pages and a hero section visitors can drag around. They are at github.com/lookbkdev/lookbk-skills. We build Lookbk, where the rest of the catalogue lives.

This post was drafted with AI assistance and checked step by step against the skill's SKILL.md and scripts.

DEV Community: Lookbk