25-second example rendered by this skill from examples/verlowe-identity · 1280×720
Example settingswhat each example above was built from
examples/verlowe-identitybrief.json
- Name
- Verlowe
- Format
- wide
examples/tessary-identitybrief.json
- Name
- Tessary
- Format
- tall
What you get
- A 20 to 30 second MP4 of your brand system at 1920×1080, 1080×1080 or 1080×1920, with its own beat-synced music
- An original soundtrack with sound effects on every chapter cut and the lock-up, synthesised on your machine, with nothing to license
- Five chapters: mark construction, palette with names and values, type specimen and values, pattern on the drop, mockups
- 3 to 6 lit mockups drawn in code with your logo: business card, app icon, poster, tote, wall sign and social avatar
- Contrast for every colour checked and text sizes held to a layout gate before anything renders
- A pasteable PROMPT.md for Claude Code or Codex, and two finished example brands with original marks
- Open-source licenses for every part it builds on
Good fit
- A studio or freelancer announcing a client rebrand with a case-study film for LinkedIn, Behance or the portfolio.
- A startup launching a new identity that wants a share-ready film from the brand files it already has.
- A team that needs the brand system shown the same way in 16:9 for decks and 9:16 for Stories.
Not for
- A 3 to 6 second logo animation on its own: Logo Sting does that
- Photographic mockups of real products or locations
- Raster logos: the mark must be an SVG
- Vocals or a licensed hit song, since the music is synthesised
About this skill
The identity film a studio posts when it launches a rebrand, made from your logo, colours and fonts and cut to an original beat-synced soundtrack. It plays your brand book as five numbered chapters: construction circles draw over your mark until it resolves on an impact, the palette slams in as tall bars with names, HEX and RGB, a type specimen steps a huge Aa through your Google Fonts weights, your values climb a weight ladder, and on the drop the mark tiles and turns into a pattern. Then come lit mockups drawn in code with your logo applied, from a business card in perspective to a brushed-metal sign, and the logo locks up on your brand colour on the final hit.
Example request
Make a brand identity film for our rebrand from our logo SVG, our five colours and our two Google Fonts: mark construction, palette, type specimen, pattern and mockups, ending on the logo on our primary colour.
How it works
Your agent
- 1
Make the project
- 2
Check the mark
Ask for the mark as an SVG.
- 3
Write the brief
Create
brief.jsonnext to the mark. - 4
Apply the brief
It checks the whole brief and lists every problem at once, each with its fix.
- 5
Check
"ok": truemeans it can render. - 6
Look before you render
Run the
snapshotcommandapply-briefprinted. - 7
Render
It runs the layout gate (below) first.
- 8
Hand it off
Give the person the MP4 and three stills from
snapshots/: the mark, the palette and the end card.
- 1
You get


What you need
- Node.js 22 or newer and FFmpeg (with
ffprobe) on the PATH. - HyperFrames runs through
npx, pinned to the version this template was tested with:npx --yes hyperframes@0.8.192. The first render downloads a headless Chrome. Ifrendersays Chrome is missing, runnpx --yes hyperframes@0.8.192 browser ensureonce. - Network access to
fonts.googleapis.com(your fonts and JetBrains Mono for the captions) andcdn.jsdelivr.net(GSAP). See Troubleshooting if either is blocked. - The brand's mark as an SVG with outlined paths.
Last checked Nov 2, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
The render hangs, then shows a static frame.
GSAP didn't load. If your network blocks
cdn.jsdelivr.net, runnpm i gsap@3.14.2in the project, copynode_modules/gsap/dist/gsap.min.jstoassets/vendor/, and point the<script src>inindex.htmlatassets/vendor/gsap.min.js.apply-briefleaves it alone.The type is in the wrong font.
fonts.googleapis.comwas unreachable, or the family name or a weight is not on Google Fonts. Check the spelling against fonts.google.com.The mark looks wrong or blank.
It probably relies on a mask, a gradient or two colours. Flatten it to one colour in a vector editor.
What’s in the download
- SKILL.md23.1 KB
- examples/
- examples/tessary-identity/2.11 KBa 9:16, dark film for an invented payments infrastructure startup. It has a Truchet-tile mark, six colours, Space Grotesk and IBM Plex Sans, a random-turn edge-to-edge pattern, four mockups (card, sign, poster, avatar), and
tech-minimalat 128 bpm, 27.7 s. · 2 files - examples/verlowe-identity/1.64 KBa 16:9, light film for an invented botanical skincare label. It has a vesica-leaf mark built from seven circles, six colours, Fraunces and Instrument Sans, a half-turn checker pattern, and
warm-houseat 120 bpm, 25.5 s. · 2 files - scripts/
- scripts/gate/the layout gate and its small Chrome DevTools client.
- scripts/gate/cdp.mjs5.63 KB
- scripts/gate/gate.mjs19.5 KB
- scripts/music/beatgen 2.1, the music and sound-effects generator, with its checker (
check.mjs), muxer and README. - scripts/music/examples/
- scripts/music/examples/events.example.json555 B
- scripts/music/samples/
- scripts/music/samples/manifest.json371 B
- scripts/music/beatgen.mjs11.8 KB
- scripts/music/check.mjs50.0 KB
- scripts/music/dsp.mjs20.0 KB
- scripts/music/engine.mjs51.7 KB
- scripts/music/mux.mjs2.36 KB
- scripts/music/presets.mjs36.8 KB
- scripts/music/README.md23.7 KB
- scripts/music/samples.mjs4.90 KB
- scripts/music/sfx.mjs17.1 KB
- scripts/music/theory.mjs3.34 KB
- scripts/music/voices.mjs16.9 KB
- scripts/apply-brief.mjs28.5 KBchecks a brief, cleans the mark, lays the film out on the beat grid, generates the track and writes the project. No dependencies.
- scripts/beat-grid.mjs13.0 KBreads the
musicblock, predicts the music's form and runs beatgen. - scripts/render.mjs8.95 KBruns the gate, renders, checks the track, muxes it in and checks the MP4.
- template/the HyperFrames project.
- template/brand.config.js93 Bis written by
apply-brief; don't edit it. - template/film.js82.6 KBdraws every chapter and mockup and builds the timeline from
brand.config.js. - template/hyperframes.json318 B
- template/index.html4.58 KBholds the page, the clips and the fonts link.
- template/package.json298 B
- NOTICE.md1.42 KBthird-party software this skill uses.
- PROMPT.md2.49 KBa prompt for Claude Code or Codex.
- TESTED.json4.12 KB
31 files · 438 KB · installs to ~/.claude/skills/brand-book-film for Claude Code and ~/.agents/skills/brand-book-film for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- MP4 · 20–30 s · 1920×1080, 1080×1080 or 1080×1920
- Needs
- Node.js 22+, FFmpeg on the PATH and Chrome (HyperFrames downloads its own headless Chrome on first render); network access to fonts.googleapis.com and cdn.jsdelivr.net; your logo mark as an SVG.
- Series
- Social Shorts · 6 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
What do I need to give it?
Your mark as an SVG, 3 to 6 colours with names, one or two Google Fonts with the weights you use, a tagline and 3 to 5 value words. Optional construction circles let the first chapter draw your mark's real geometry; without them it draws generic circles. The mark must be one colour and outlined, with no live text.
Which mockups can it show?
Up to six, in the order you list: a business card in perspective, an app icon, a poster, a tote, a brushed-metal wall sign and a social avatar. All are drawn in code with lighting and shadows, so nothing comes from stock photos.
How is it different from a logo sting?
A logo sting is a 3 to 6 second animation of the mark alone. This film shows the whole system: construction, palette, type, pattern and the brand in use, over 20 to 30 seconds with five chapters on the beat.
Which agents is Brand Book 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, its mockups and its music generator; it renders with HyperFrames (Apache-2.0) and GSAP (Standard License), loads your Google Fonts plus Fraunces, Instrument Sans and JetBrains Mono (SIL Open Font License 1.1), and the brands and marks in its examples are invented.
Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.