37.5-second example rendered by this skill from examples/relay · 1280×720
Example settingswhat each example above was built from
examples/relaybrief.json
- Brand
- Relay
- Colors
- background #f0ebff · primary #a48af0 · accent #ff9a78
examples/basketbrief.json
- Brand
- Larder
- Colors
- background #ecf7ee · primary #5fc49a · accent #ffcc3d · leaf #a6d16f
What you get
- A 35–38 s MP4 at 1080p for 3 to 5 steps
- Twelve isometric objects drawn in code, each with an idle loop and an action
- A camera that follows the packet from station to station, then pulls out to the whole system
- Large numbered step cards, with titles and lines checked for length
- Accent text colours worked out from your palette to stay readable
- An original soundtrack written by code, free to use, and two made-up example films
- Open-source licenses for every part it builds on
Good fit
- API, infrastructure and security products can show a request travelling from app to edge to device without a single screenshot.
- Delivery, logistics and marketplace teams can walk through an order from basket to door with a warehouse, a chip and a person.
- Onboarding and docs teams get a calm, readable explainer with large numbered cards that works with the sound off.
Not for
- Your own icons or screenshots inside the world: it uses the twelve built-in objects
- More than five steps
- Vertical or square social cuts (16:9 only)
About this skill
A "how it works" film set in a small clay-like isometric world. The question comes up, a floating plate rises and one station per step springs out of it, from a kit of twelve objects drawn in code: phone, laptop, server, database, cloud, padlock, envelope, chart screen, AI chip, warehouse, person and globe. Pipes draw in between, a glowing packet travels them on the beat and the camera follows it from station to station while a big numbered card explains each step. Each object has its own action when the packet lands. The film ends on the whole system running and your brand and URL, with its own soundtrack.
Example request
Make an Isometric Explainer Film answering "How does Relay deliver a message?" in four steps: app sends it, encrypted, routed at the edge, delivered everywhere. End on relay.example/docs.
How it works
Your agent
- 1
Ask the user for the brief
Keep the steps concrete ("Signed and encrypted", not "Security").
- 2
Write
brief.jsonapply-brief.mjschecks every field and lists all problems at once, with the field name, the limit and the text that is too long. - 3
Make the film
It copies the template into
my-film/, writescues.json(the beat sheet for this number of steps) andstoryboard.js, generatessoundtrack.wavon that beat sheet, and rendersmy-film/renders/<brand>-1080p.mp4. - 4
Check it
Before handing it over, look at key frames:
cd my-film && npx --yes hyperframes@0.8.192 snapshot . --at 3,6,12,20,30,36. - 5
Change the look or the sound
Colours: change
colorsin the brief.
- 1
You get
What you need
- Node.js 22 or newer and FFmpeg on the PATH.
- HyperFrames, run through
npxat the tested version:npx --yes hyperframes@0.8.192. The first render downloads its own headless Chrome (npx --yes hyperframes@0.8.192 browser ensureif it says Chrome is missing). - Network access to
fonts.googleapis.com(Bricolage Grotesque and Figtree) andcdn.jsdelivr.net(GSAP 3.14.2) while rendering. If jsDelivr is blocked, setGSAP_FILEto a localgsap.min.js3.14.2. - About 10–20 minutes of render time on a 4-core machine (
--workers 2);--quality draftis faster for a look.
Last checked Nov 2, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
apply-brief: N problem(s)Each line names the field and its limit. Shorten the text, use an object from the kit, or give 3–5 steps.
A title or line looks smaller than the others
It was shrunk to fit. Shorten it; the console prints
[iso-explainer] text too longwhen even the smallest size overflows.The render stops with "buildReady never resolved" or "Composition has zero duration"
The page threw an error before the timeline was built. Run
npx --yes hyperframes@0.8.192 render . --quality draftin the project and look for[Browser:PAGEERROR]in the log; usually it is a hand edit offilm.jsor a missingstoryboard.js(runapply-brief.mjsagain).
What’s in the download
- SKILL.md11.1 KB
- examples/
- examples/basket/1.29 KB1 file
- examples/relay/988 B1 file
- scripts/
- scripts/apply-brief.mjs11.0 KBchecks the brief, builds
cues.jsonfor the number of steps, works out text colours and writesstoryboard.js - scripts/make-film.mjs3.64 KBone command from brief to MP4 (template, beat sheet, music, render;
GSAP_FILEsupport) - scripts/music.mjs22.3 KBthe original 112 BPM soundtrack with sound design on the cue sheet, normalised to -14 LUFS
- template/
- template/cues.json1.20 KBan example beat sheet (rewritten by
apply-brief.mjs) - template/film.css5.68 KBframe, card and type styles
- template/film.js75.9 KBthe isometric kit (12 objects), the world, camera, packets and all type choreography
- template/hyperframes.json298 B
- template/index.html2.40 KBthe HyperFrames composition
- template/package.json203 B
- NOTICE.md1.01 KB
- TESTED.json914 B
14 files · 138 KB · installs to ~/.claude/skills/isometric-explainer-film for Claude Code and ~/.agents/skills/isometric-explainer-film for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- MP4 · 35–38 s · 1080p · with music
- Needs
- Node.js 22+, FFmpeg and Chrome
- Series
- Explainers · 3 skills
- Updated
- Nov 2, 2026
- Checked
- Nov 2, 2026: its own commands ran and passed. That is a working check, not a security audit.
Written for
See all 31 agents that read skill folders.
Install guides
For your agent
Generates with
Installed it? Tell others how it went. Reviews come from people who installed this skill.
Write a reviewFAQ
Which objects can I use?
Twelve built-in objects drawn in code: phone, laptop, server, database, cloud, padlock, envelope, chart screen, AI chip, warehouse, person and globe. Each step names one, and each has its own idle loop and an action when the packet lands.
How many steps fit?
Three to five. The film runs 35 s for three steps and 38 s for four or five, and ends on the whole system running before your brand and URL.
Will light brand colours stay readable?
Yes. Accent text colours are worked out from your palette until they reach a 4.5:1 contrast on the cards and the background, so a yellow brand comes out amber instead of washed out.
Which agents is Isometric Explainer Film written for?
Any agent that reads SKILL.md folders, including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode.
Do I own what I make with it?
Yes. Everything your agent makes with this skill is yours, including for client and commercial work.
What if it doesn’t work for me?
Email support@lookbk.dev within 7 days of buying and we’ll fix it or refund you.
Credits and licensesBuilt on heygen-com/hyperframes
What Lookbk adds on top of heygen-com/hyperframes (Apache-2.0): Lookbk wrote this package from scratch on HyperFrames: the twelve isometric objects, the world layout, the packet and camera choreography, the brief checks and the soundtrack generator.
Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.