38.4-second example rendered by this skill from examples/weekly · 1280×720
Example settingswhat each example above was built from
examples/weeklybrief.json
- Brand
- Shipwright
- Colors
- ink #2142a6 · marker #ffcf26
examples/compostbrief.json
- Brand
- Greenloop
- Colors
- ink #1d1a16 · marker #4fae45
What you get
- A 37 to 39 s MP4 at 1080p for 3 to 6 steps
- 26 hand-drawn icons drawn in code, from target and rocket to house, plant and thermometer
- Lines that draw on stroke by stroke and boil like hand-drawn animation, with streaky marker fills
- A box round your big idea and a pull-out to the whole board before the end card
- White or kraft paper in your own ink and marker colours
- An original 3/4 folk waltz with pen and paper sounds, free to use, and two made-up example films
- Open-source licenses for every part it builds on
Good fit
- Teams explaining a process, such as how they ship, onboard or support customers, get a friendly film without hiring an illustrator.
- Community services, schools and nonprofits can explain how something works in plain steps, on white or kraft paper.
- Onboarding and social teams get an explainer where every title is large enough to read with the sound off.
Not for
- Fewer than 3 or more than 6 steps
- Your own drawings, photos or screenshots: it uses the 26 built-in icons
- Vertical or square social cuts (16:9 only)
About this skill
A hand-drawn whiteboard explainer that answers one "how does it work?" question in 3 to 6 steps, all on one sheet of dotted paper. A felt-tip pen circles a big question mark and letters the question, then for each step draws a big icon from a kit of 26, a hatched number badge, a hand-lettered title with a marker underline and one line of explanation. The camera pulls back between steps while a thick arrow draws to the next one, a box is drawn round your big idea, the camera pulls out to the whole board, and a taped paper card ends on your brand and circled URL. It comes with an original folk waltz and the sounds of the pen, marker and paper.
Example request
Make a Sketch Explainer Film answering "How does our team ship every week?" in five steps, on white paper with blue ink and a yellow marker, ending on https://shipwright.example.
How it works
Your agent
- 1
Ask the user for the brief
Keep it concrete.
- 2
Write
brief.jsonStart from
<skill>/examples/weekly/brief.json. - 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
Look at key frames before handing it over:
cd my-film && npx --yes hyperframes@0.8.192 snapshot . --at 0.4,2.5,8,14,26,31,36. - 5
Change the look or the sound
Colours:
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(Kalam, Shantell Sans, Permanent Marker) andcdn.jsdelivr.net(GSAP 3.14.2) while rendering. If jsDelivr is blocked, setGSAP_FILEto a localgsap.min.js3.14.2. - About 5–15 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, pick an icon from the kit, or give 3–6 steps.
A title looks smaller than the others
It was shrunk to fit. Shorten it; the console prints
[sketch-explainer] text too longwhen even the smallest size overflows.The render stops with "buildReady never resolved" or "Composition has zero duration"
The page threw before the timeline was built. Run
npx --yes hyperframes@0.8.192 render . --quality draftin the project and look for[Browser:PAGEERROR]; usually a hand edit offilm.jsor a missingstoryboard.js(runapply-brief.mjsagain).
What’s in the download
- SKILL.md12.4 KB
- examples/
- examples/compost/1.00 KB1 file
- examples/weekly/1.14 KB1 file
- scripts/
- scripts/apply-brief.mjs12.1 KBchecks the brief, builds
cues.jsonfor the number of steps, works out the colours and writesstoryboard.js - scripts/make-film.mjs3.65 KBone command from brief to MP4 (template, beat sheet, music, render;
GSAP_FILEsupport) - scripts/music.mjs19.9 KBthe original 3/4 folk waltz with pen, marker, paper and tape sounds on the cue sheet, normalised to -14 LUFS
- template/
- template/cues.json5.36 KBan example beat sheet (rewritten by
apply-brief.mjs) - template/film.css4.19 KBpaper, type, end card and pen styles
- template/film.js61.3 KBthe sketchy-line engine, the 26-icon kit, the board layout, camera, pen and all lettering
- template/hyperframes.json298 B
- template/index.html2.09 KBthe HyperFrames composition
- template/package.json200 B
- NOTICE.md1.19 KB
- TESTED.json1.37 KB
14 files · 126 KB · installs to ~/.claude/skills/sketch-explainer-film for Claude Code and ~/.agents/skills/sketch-explainer-film for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- MP4 · 37–39 s · 1080p · with music
- Needs
- Node.js 22+, FFmpeg and Chrome
- Series
- Explainers · 5 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 icons can the steps use?
Each step picks one of 26 hand-drawn icons, such as target, puzzle, people, rocket, house, truck, clock, plant, bulb, gear, chat, calendar and chart. Aliases like goal, team or launch also work.
How long is the film?
Every film runs 37 to 39 s whatever the number of steps. The tempo rises with the count, from 112 BPM for 3 or 4 steps to 134 BPM for 6.
What does it sound like?
An original 3/4 folk waltz on nylon-string guitar, upright bass and glockenspiel, generated on the same beat sheet as the picture, with the pen scribbling under every line and a slap when the end card lands.
Which agents is Sketch 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 sketchy-line engine, the 26 icons, the board layout, the pen and camera, 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.