You have a side project, three features worth mentioning, and a launch post that needs a video. The usual result is a slideshow of screenshots with a title card, which people scroll past in under a second. What you want is something with a built-in reason to keep watching: a goal, a score, a payoff.

An old platform game has exactly that structure. A title screen, a few stages, coins, a power-up at the end of each one, and a "thanks for playing" screen. This is the idea behind Pixel Quest Promo, one of our 38 free MIT skills at Lookbk. It turns a short brief into a 20-second 1080p MP4 that plays like a retro platformer, and every feature of your product becomes a stage.

What the film does

The promo runs at 120 BPM and is built from five scenes of two bars each:

  1. Title screen. Your product name as a large pixel logo, a subtitle, and a blinking PRESS START prompt (or your own text). The prompt is "pressed" near the end of the scene, blinks fast, and a pixel wipe opens the game.
  2. Stages 1 to 3. Each stage is one feature. A STAGE label and the feature name drop in, a dialog box types one line about it, and the hero runs in, collects three coins on the beat, then jumps into a ? block that pops out a power-up.
  3. Ending. Your headline in the big pixel font, a subline, the blinking prompt, your link, fireworks, and the hero jumping on the beat.

A HUD stays on screen the whole time with score, coin count, world and a countdown timer, all counting up with the action. Each coin is worth 100 points and each power-up 1000, so the score tells the same story as the features.

Stage 1 is open hills, stage 2 is mountains, and stage 3 is a castle at night (or at sunset if you pick a light sky). You choose one of three heroes: robot, cat or knight. There are eight power-ups to match your features: bolt, star, heart, key, gem, shield, clock and chat.

No assets, no generated images

Everything on screen is drawn in code from text grids: a 5x7 pixel font, the heroes with walk and jump frames, the power-ups, coins, blocks, hills, mountains and the castle, all turned into crisp SVG. There are no image files, no font files, and nothing generated by a model.

The template is a HyperFrames composition. You fill in a brief, one script writes it into the template, another checks the pixel text, and HyperFrames renders the MP4 on your machine.

You need Node.js 22 or newer and FFmpeg on your PATH. The first render downloads a headless Chrome. The template also loads GSAP from a CDN, so the machine needs to reach cdn.jsdelivr.net (the skill documents a local fallback if that is blocked).

Install

The skill lives in our repository at https://github.com/lookbkdev/lookbk-skills. Pick whichever route fits your setup:

npx skills add lookbkdev/lookbk-skills --skill pixel-quest-promo

Or, inside Claude Code:

/plugin marketplace add lookbkdev/lookbk-skills /plugin install pixel-quest-promo@lookbk-skills

In the commands below, <skill> stands for the folder the skill's SKILL.md lives in.

Write the brief

Pick the three features a player would want as power-ups. The copy rules are strict because the pixel font only has A to Z, 0 to 9, space and a small set of punctuation. There are no accents, emoji or other scripts, and text is always drawn in capitals.

Limits per field: product 12 characters, subtitle 24, cta 16, feature names 14, feature lines 30, headline 12, subline 20, url 28. Feature names work best as titles, not sentences: FAST SEARCH, not SEARCH IS FAST. The line under each says what it does for the user. A stage holds for four seconds, so keep every line short enough to read in two.

Here is the shape of a brief for an imaginary notes app:

{ "product": "INKWELL", "subtitle": "A NOTES APP QUEST", "cta": "PRESS START", "hero": "robot", "level1Name": "QUICK CAPTURE", "level1Text": "NOTES SAVE AS YOU TYPE", "level1Item": "bolt", "level2Name": "FAST SEARCH", "level2Text": "FIND ANY NOTE IN 0.1 S", "level2Item": "gem", "level3Name": "PRIVATE VAULT", "level3Text": "END-TO-END ENCRYPTED", "level3Item": "shield", "headline": "LEVEL UP", "subline": "YOUR NOTES", "url": "INKWELL.EXAMPLE", "sky": "#1b1446", "ink": "#f4f1ff", "accent": "#3fb950", "grass": "#2c8c3c" }

Match each power-up to its feature: bolt for speed, shield for privacy or safety, key for access, clock for time, chat for messaging, heart for favourites, gem for premium, star for anything else. Use three different ones.

For colours, a dark sky gives night scenes with stars and a moon, and a light sky gives daylight and a sunset castle. ink is all the small text, accent is the logo and headline, and grass is the ground.

Build, check, render

Copy the template into a project and apply your brief:

cp -r <skill>/template ./pixel-quest cd pixel-quest node <skill>/scripts/apply-brief.mjs . brief.json

apply-brief validates every value against the template's declared variables: type, length, colour format, hero and power-up names. If anything is off, it lists every problem at once, so you fix the brief and run it again. Fields you leave out keep their current value, so set all of them.

Next comes the step that saves the most time:

node <skill>/scripts/preflight.mjs .

HyperFrames' own text checks can't read a font drawn in code, so this script does the equivalent from the same font and palette the film uses. It reports characters the font can't draw, lines too wide for their place, and colour pairs that don't read: ink against each scene's sky and the dialog box, accent against the title, stage and ending skies, and the ground against the sky. It exits 1 if there is any problem. If it prints preflight: ok, the copy and colours are safe.

Then lint the composition and look at stills before you commit to a render:

npx --yes hyperframes@0.8.192 check --json npx --yes hyperframes@0.8.192 snapshot --at 2.1,5.6,7.6,9.6,13.9,17.3 -o snapshots

check should report "ok": true. One warning is expected: film_silent, because the film ships without sound. The snapshots cover the title screen, a stage mid-run, the power-up coming out of its block, the other two stages and the ending. Check that the logo and headline are centred, the feature lines read in their dialog boxes, and the power-ups suit their features.

When the stills look right:

npx --yes hyperframes@0.8.192 render --quality delivery -o renders/pixel-quest-promo.mp4

Use --quality draft for a fast test pass.

Everything lands on the beat

The film has no audio, but every hit sits on a 120 BPM grid: scene cuts, stage banners, the three coin pickups, the jumps, the block hit and the fireworks. Stage 1 starts at 4 seconds, stage 2 at 8, stage 3 at 12, and the ending at 16.

That makes adding music a matter of lining things up, not guessing. This script writes a cue sheet:

node <skill>/scripts/cues.mjs . -o cues.csv

The CSV lists every beat of the grid and every on-screen hit on the beat where it lands. A musician can score to it, or you can pick any 120 BPM chiptune track that starts on a downbeat. Use music you have the rights to, and if the track has a pickup before its first downbeat, trim it first so its bar 1 starts at zero.

Variations

Two finished briefs ship in the skill's examples/ folder, one night and one daylight, so you can start from a working file. For another product you only edit brief.json and rerun the build, check and render steps. If you need one film per product or language, the render command also accepts a batch file, but note that batch mode skips apply-brief and preflight, so run both on each brief first.

Try it

Pixel Quest Promo is MIT licensed and sits alongside the rest of our free skills in the repository. If you want to see rendered previews and the other skills in the catalogue of 200+ skills, they are on Lookbk. Send us the promo you make; we would like to see which hero you pick.

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