12-second example rendered by this skill from examples/ardent-quarterly · 1280×720
Example settingswhat each example above was built from
examples/ardent-quarterlybrief.json
- Brand
- Ardent Quarterly
- Format
- wide
- Colors
- ground #14120f · ink #ece5d6 · accent #e0472b
examples/fennick-run-clubbrief.json
- Brand
- Fennick Run Club
- Format
- tall
- Colors
- ground #f2ede3 · ink #171512 · accent #2747c9
What you get
- A 12.6 second MP4 at 1920×1080 or 1080×1920 with its own beat-synced music
- An original soundtrack with sound effects on every cut, synthesised on your machine in six styles, with nothing to license
- Four different brushes: loaded flat, dry two-pass scumble, pressed-in round and heavy wet
- Ink pooling, granulation, drips, splats and specks drawn in code, seeded from your copy so every film paints its own marks
- Titles fitted to each stroke in the real font, with hard cuts on the downbeats
- A URL, accent flick and splat that land on the track's final hit
- A brief checker and a render script that checks the music's loudness, peaks and timing
- Open-source licenses for every part it builds on
Good fit
- A launch or campaign opener that needs three short lines to land with real weight.
- A vertical social cut for Reels or Shorts that should feel hand made rather than templated.
- An event, season or issue announcement that ends on the brand name and a URL.
Not for
- Long titles or sentences, since each card holds 16 characters at most
- Videos with footage, logos or product shots
- Real calligraphy in a specific script or hand
- Vocals or a licensed song, since the music is synthesised
About this skill
An ink brush title sequence with its own original music, where four different hand-painted strokes land on four downbeats of a soundtrack generated on your machine. A loaded flat brush, a dry two-pass scumble, a pressed-in round brush and a heavy wet brush each sweep across a paper texture and reveal a title knocked out of the ink as the brush passes. Ink pools at the edges, granulates into the paper, drips while the card holds and throws splatter and specks. The brand lands in the last stroke, and on the track's final hit the URL, an accent flick and a splat of colour arrive while the chord rings out. Everything is drawn in code from short titles and three colours, at 1920×1080 or 1080×1920.
Example request
Make a brush stroke title sequence for our launch: three short title cards painted in ink strokes, then our brand name and URL, dark and 16:9, plus a light 9:16 version for social.
How it works
Your agent
- 1
Get the copy
Ask for what you can't infer.
- 2
Pick colours
Three hex colours.
- 3
Make the project and apply the brief
musicis optional: left out, you getcinematic-rise, seed 1, at full level. - 4
Check
It opens the project in headless Chrome, plays the timeline to each moment where type has settled (each card settled, the end card before and after the final hit, and the last frame), and fails (exit 1, every problem listed) when any visible text has capitals under 3% of the frame height, leaves the safe area (16:9: the 90% title-safe area; 9:16: clear of the top 14%, the bottom 35% and 6% at each side, where the feed's own buttons and captions sit), or is faded in or out by opacity for longer than 6 frames (use a mask or a hard cut instead).
- 5
Look before you render
Run the
snapshotcommandapply-briefprinted. - 6
Render, with the music
It renders the picture with HyperFrames (
--quality delivery), puts the track under it withscripts/music/mux.mjs(AAC, trimmed to the film, at the brief'smusic.volume), checks the track against its beat map and stems withscripts/music/check.mjs(loudness, peaks, spectrum, every kick on time, and the SFX checks A1 to A11) and checks that the MP4 has a video and an audio stream of the same length. - 7
Hand it off
Give the person the MP4 path and two stills: card 1 complete and the end card.
- 1
You get
- renders/brush-stroke-titles.mp4


What you need
- Node.js 22 or newer and FFmpeg 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. If
rendersays Chrome is missing, runnpx --yes hyperframes@0.8.192 browser ensureonce. - Network access to
cdn.jsdelivr.net, which serves GSAP to the template. See Troubleshooting if it is blocked.
Last checked Nov 1, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
Render hangs, then shows a blank frame, or reports
sub_timeline_script_failure.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.Titles in the wrong font.
The faces are Playfair Display (900), Archivo Black and JetBrains Mono, which HyperFrames embeds. The titles are drawn on canvas only after
document.fonts.loadfinishes; if you swap faces, use another family HyperFrames bundles or add an@font-face.Colours didn't change.
Run
apply-briefagain and check it printedApplied N values. Editing the CSS:rootcolours has no effect; the variables win.
What’s in the download
- SKILL.md21.6 KB
- examples/
- examples/ardent-quarterly/551 Bfinished briefs. The previews on Lookbk are rendered from these. · 1 file
- examples/fennick-run-club/521 B1 file
- scripts/
- scripts/music/beatgen, the music generator, with its own 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.mjs10.3 KBvalidates a brief, makes the music and writes both into the template, with
timing.js. No dependencies. - scripts/gate.mjs15.3 KBthe type gate (cap height, safe area, no long text fades), run by
render.mjsbefore it renders. - scripts/music.mjs16.0 KBreads the
musicblock and builds the beat grid. - scripts/render.mjs9.00 KBruns the type gate, renders, puts the music under the picture and checks the result.
- template/the HyperFrames project.
index.htmlholds the variables, layout and paper;brush.jsis the bristle engine, the specks, the title fitting and the timeline. - template/brush.js37.1 KB
- template/hyperframes.json318 B
- template/index.html13.0 KB
- template/package.json299 B
- template/timing.js583 B
- NOTICE.md1.22 KBthird-party software this skill uses.
- PROMPT.md2.63 KBa prompt to paste into Claude Code or Codex to make a film for your own brand with this skill.
- TESTED.json6.45 KB
28 files · 374 KB · installs to ~/.claude/skills/brush-stroke-titles for Claude Code and ~/.agents/skills/brush-stroke-titles for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- MP4 · 12.6 s · 1080p or 1080×1920
- Needs
- Node.js 22+, ffmpeg and Chrome (HyperFrames downloads its own headless Chrome on first render); network access to cdn.jsdelivr.net for GSAP.
- Series
- Motion Type · 5 skills
- Updated
- Nov 2, 2026
- Checked
- Nov 1, 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
Is any footage or image needed?
No. The paper texture comes from SVG noise, the strokes, drips and splats are painted on a canvas by a bristle model in brush.js, and the music is synthesised by the package's own generator. You only write a brief with titles, captions, a URL and three colours.
How long can each title be?
Up to 16 characters per card and 20 for the brand. Titles are fitted to the body of each stroke in the real font, and split over two lines when that comes out bigger. Ten characters or fewer fill a 16:9 stroke best.
How long is the film?
Five bars of its music: 12.6 s with the default cinematic-rise preset at 95 bpm and 10.7 s with upbeat-pop. Pick a preset, a seed and a volume in the brief, or turn the music off.
Which agents is Brush Stroke Titles 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, including its bristle engine and music generator; it renders with HyperFrames (Apache-2.0) and GSAP (Standard License), and sets type in Playfair Display, Archivo Black and JetBrains Mono (SIL Open Font License 1.1).
Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.