21-second example rendered by this skill from examples/quiet-ledger · 1280×720
Example settingswhat each example above was built from
examples/quiet-ledgerbrief.json
- Format
- tall
- Headline
- Why we closed on Mondays
examples/field-staticbrief.json
- Format
- square
- Headline
- Listening to ice
What you get
- A 9:16 or 1:1 MP4 with your clip as the soundtrack, untouched apart from a short silent lead-in
- An engraved sonogram computed from your audio, scrolling past an accent playhead
- Word-by-word captions set at the weight each word was spoken, with a live loudness underline
- A pull-quote moment that floods the frame and sets the quote in a display serif
- Your cover art moving from the title card to the header and back to the end card
- An end card that prints the whole clip with the quote marked, plus your call to action and link
- A layout gate and loudness check that run before and after every render
- Open-source licenses for every part it builds on
Good fit
- Podcasters who want a clip of every episode for Reels, TikTok and Shorts without opening an editor.
- Conference teams cutting short talk highlights into square posts with the speaker's best line pulled out.
- Brands with an interview series who need clips that look designed rather than generated from a template.
Not for
- Talking-head video with a presenter on camera
- Music videos or beat-synced promos
- Clips longer than 60 seconds
- Landscape 16:9 audiograms for YouTube
About this skill
A podcast or talk clip turned into a vertical or square audiogram, drawn entirely from the audio file and its timed transcript. The audio is analysed into an engraved sonogram that scrolls past an accent playhead: every frequency band is a ruled line whose thickness is its energy, with heard audio in ink and the audio to come printed faintly ahead. Captions arrive one phrase at a time, each word set at the weight and width it was spoken, with a single underline that works as a live loudness meter. On the pull-quote the playhead splits open and floods the frame with the accent while the quote stamps in word by word in a display serif. The end card prints the whole clip as a record of the episode, and the buyer's audio is never edited.
Example request
Make a 9:16 audiogram from clip.wav and transcript.json for my podcast Quiet Ledger, episode 31, with our cover art, the pull-quote "Closing one day made six matter." and Full episode plus our link on the end card.
How it works
Your agent
- 1
Get the audio and a timed transcript
start/end/wordkeys are accepted too. - 2
Write
brief.jsonColour rules, checked by
apply-brief: -inkongroundmust be at least 7:1. - The better ofinkandgroundonaccentmust be at least 4.5:1: the quote is set in it on the flood. -accentongroundmust be at least 3:1. - 3
Apply the brief
This copies
<skill>/templateintomy-reel/, the cover intoassets/and the audio intoaudio/. - 4
Render
Any failure exits non-zero.
- 5
Look at it
Check a still of each section: - the open card; - a caption with its meter; - the quote flood; - the end card's printed record.
- 1
You get


What you need
- Node.js 22 or newer, FFmpeg (with ffprobe) on the PATH, and Google Chrome or the Chrome that HyperFrames downloads.
- HyperFrames through
npx, pinned:npx --yes hyperframes@0.8.192. Ifrendersays Chrome is missing, runnpx --yes hyperframes@0.8.192 browser ensureonce. - Network access to
fonts.googleapis.com(Bricolage Grotesque, Newsreader) andcdn.jsdelivr.net(GSAP). - No API keys and no paid services. Frames never leave the machine:
render.mjsremoves the vision-model keys from HyperFrames' environment.
Last checked Nov 2, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
The gate fails T1 or T2.
The copy is too long for the format: shorten
show,title,endLine,urlor the quote.A caption is too small, or a quote word is too wide.
Long single words (14+ characters) cannot be set at the minimum size. Break or reword the transcript entry.
The loudness check fails.
The source file is unusual (for example 3+ channels). Convert it to mono or stereo wav first, without changing its level.
What’s in the download
- SKILL.md9.89 KB
- examples/
- examples/field-static/50.9 KB1:1, dark, 17 s. Both are invented shows with stand-in audio. · 3 files
- examples/quiet-ledger/3.71 KB9:16, light, 21 s. · 3 files
- scripts/
- scripts/gate/the layout gate.
- scripts/gate/cdp.mjs5.63 KB
- scripts/gate/gate.mjs20.4 KB
- scripts/analyse.mjs3.76 KBFFT sonogram and loudness;
- scripts/apply-brief.mjs14.2 KBvalidation, the lead-in, phrases and data;
- scripts/render.mjs4.88 KBgate, render and checks;
- scripts/tone.mjs6.40 KBthe stand-in tone for the examples;
- template/
index.html(canvas + type layers,<audio>) andreel.js(layout, the drawing and the GSAP timeline). - template/hyperframes.json318 B
- template/index.html4.46 KB
- template/package.json308 B
- template/reel.js23.1 KB
- NOTICE.md938 B
- TESTED.json1.80 KB
19 files · 151 KB · installs to ~/.claude/skills/audiogram-quote-reel for Claude Code and ~/.agents/skills/audiogram-quote-reel for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- MP4 · 21 s · 1080×1920
- Needs
- Node.js 22+, FFmpeg with ffprobe, and Chrome (or the Chrome HyperFrames downloads); your audio clip, a word-timed transcript and square cover art.
- Series
- Social Shorts · 14 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
Does it change my audio?
No. The file is copied as it is and played as the soundtrack. The only change is silence added at the start so the title can be read, and the render checks that the loudness stays within 0.5 LU of your source.
What transcript does it need?
A JSON list of words with start and end times in seconds, which any word-level aligner or speech-to-text tool can produce. Keep punctuation on the words, and put a | in the transcript wherever you want to force a caption break.
Which sizes does it render?
Vertical 9:16 at 1080×1920 for Reels, TikTok and Shorts, and square 1:1 at 1080×1080 for feeds, both at 30 fps, as an MP4 with AAC audio. Clips can run up to 60 seconds.
Which agents is Audiogram Quote Reel 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 for the catalogue; it renders with HyperFrames (Apache-2.0) and GSAP (Standard License) and sets its type in Bricolage Grotesque and Newsreader (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.