Podcast Audiogram

About this style

An audiogram is a short video clip of podcast audio, made so that a sound-only medium can travel on video-first social feeds. The format settled into a familiar kit of cover art, a moving waveform, a progress bar and burned-in captions, since many feeds autoplay without sound. Word-by-word highlighting, borrowed from karaoke, keeps viewers reading in step with the speaker. Podcasters, radio stations and publishers use audiograms to promote episodes.

Make a 10-second podcast audiogram: cover art, a live waveform and word-by-word captions.

<inputs>
Show: Kettle Hours. Episode: "Ep. 42 · Why bread takes its time". Guest: Hana Ostrow, baker. Quote, in three phrases: "Most of baking is waiting." / "You mix it, then you leave it alone," / "and the dough does the work." Clip position: 12:41 of 48:03. Duration: 10s. If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Palette: ground forest #14271F, card #1B3329, cream #F3EAD8, apricot #F2A65A, sage #8FAF97 for secondary text.
Type: Young Serif 400 for the show name (54px) and on the cover; Figtree for everything else: captions 64px 700, line height 1.15; episode line 28px 500; guest line 24px 500 in sage. Timestamps in IBM Plex Mono 500, 22px.
Layout: a 1680×840 card, radius 28px, centered on the ground (x 120–1800, y 120–960). Left, the cover: 600×600 at x 200, y 240, radius 16px. Right column, x 880–1720: the show name at y 210 with the episode and guest lines beneath; captions in a two-line block at y 400–560; the waveform strip at y 620–780; at y 860 a 44px round play-pause button, then the progress track to x 1720, with timestamps under its ends.
Cover art, drawn in code: an apricot ground, a big cream circle like a loaf seen from above with three diagonal score cuts in forest green, a faint seeded flour speckle, and "KETTLE HOURS" in Young Serif at its lower left.
The signal: a synthetic speech envelope built from the quote. Phrase windows: 0.90–2.60s, 2.95–5.40s, 5.75–8.20s. Inside each, words get time in proportion to their syllables, with 0.06s gaps and 0.22s after the comma. Each syllable is a raised-cosine bump of seeded height 0.55–1.0 over a 0.05 breath floor, with fine texture from seeded value noise at 30Hz. Captions and waveform read the same timing table, so peaks sit under spoken words and pauses show as low bars.
Waveform: 84 bars, 6px wide with 4px gaps and rounded caps, mirrored about the strip's centerline. It scrolls left at 100px/s with "now" at the right end: bar positions shift by (100t mod 10)px and each bar's height is the envelope at its own moment. Bars are cream; the newest 12 are apricot.
Captions: one phrase at a time, flush left. Spoken words in cream, upcoming words in cream at 35%, and the current word on an apricot pill (radius 10px, 8px side padding) in forest. The pill glides and resizes between words in 0.12s on cubic-bezier(0.3, 0, 0.2, 1). A new phrase replaces the old by rising 16px out of a mask over 0.3s, starting 0.2s before its first word.
Progress: a 4px track in cream at 20%, a cream fill and a 14px knob, advancing from 12:41 toward 12:51; the left timestamp counts up once per second.
Motion is calm: entrances take 0.5–0.7s on cubic-bezier(0.2, 0, 0, 1), and the cover's circle swells by at most 1% with the envelope.
Premium is tight sync: pill, peaks and words agree to the frame. Cheap is a random bouncing equalizer with captions on their own clock.
Banned: bar heights unrelated to the speech, rainbow bars, glow, gradients, emoji, real podcast app logos, flashing more than 3 times per second.
</direction>

<structure>
0.0–0.8s: the card rises 24px as it fades in; cover, header and progress row follow 0.08s apart; the waveform's floor draws left to right.
0.9–2.6s: phrase 1, word by word.
2.95–5.4s: phrase 2.
5.75–8.2s: phrase 3.
8.2–8.8s: the envelope settles to the floor; at 8.8s the button turns from pause to play, and the waveform and progress freeze.
8.8–10.0s: hold, still, the last phrase fully cream.
For other durations, keep the phrase timing and stretch the gaps between phrases.
</structure>

<build>
One self-contained index.html, CSS and JS inline. The stage is 1920×1080 (16:9), scaled to fit the window. Design for 60fps. window.seek(t), t in seconds, must compute every visual from t alone, clamping past the end to the last frame: no CSS transitions or animations, no setTimeout or setInterval, no state carried between frames, and randomness only from a seeded PRNG. Anything cumulative is precomputed once at load at a fixed step or solved analytically, so seek can jump to any time. Load Google Fonts via <link> and await document.fonts.load() for each face before defining window.seek. Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
Engine: inline SVG for the cover, waveform and progress, with captions as HTML spans; measure each word's box once after the fonts load and position the pill from those boxes. No canvas or three.js.
</build>

<check>
Before showing me, step through one frame per second (0–10s): screenshot each and look at it. Fix overlaps, clipped or cramped text, accidental edge collisions, and anything off-style or Banned. Check that the pill sits on the word being spoken in each sampled frame, peaks line up under spoken words with low bars in the pauses, captions never exceed two lines, and the play-pause icon changes exactly once. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Kinetic Lyric Video

Made by us

Original lyrics land word by word on a 120 BPM grid over a dark plum ground: small italic words tuck against giant expa…

Skeuomorphic Synth Plugin

Made by us

A brushed-aluminium synth plugin with walnut end cheeks powers up on a dark desk: a 16-step pattern plays, VU needles s…

Audio Visualizer

Made by us

A coral-colored audio visualizer: a track synthesized in code drives a ring of 128 cream spectrum bars around an ink di…

Oscilloscope Music

Made by us

A green phosphor oscilloscope in X-Y mode: a glowing beam draws Lissajous figures that seem to turn in depth, morphs in…