Podcast audiogram — HyperFrames prompt (waveform + word captions)

<direction> A 12-second square podcast audiogram (1080x1080, 30fps) for the show THE BUILD LOG, episode EP 24 — SHIPPING UGLY. House style: near-black #0a0a0a background, white type, ONE orange accent #ff5c1a, Arial/Helvetica bold, no webfonts. The audiogram plays a real audio clip of the quote Nobody ships the first version. You ship, you listen, you fix.: the waveform is drawn from that clip's measured peak data (56 bars), and the quote runs underneath as captions that light up word by word in time with the voice. Disclose on screen that the audio is a sample. Banned: fake random waveforms that ignore the audio, stock photos, cover-art mockups, gradients, glows, 3D, real podcast names or real people's voices. </direction> <structure> 0.0-1.5s: title card — an accent play badge, THE BUILD LOG large, EP 24 — SHIPPING UGLY in accent underneath. 1.5-6.26s: the clip plays (a 4.76s sample of Nobody ships the first version. You ship, you listen, you fix. starting at 1.5s); a small show header sits at top, the 56-bar waveform centre-frame lights each bar in accent as the playhead passes with a gentle pulse, and the caption words turn accent while spoken, then white. 6.26-12.0s: outro — the waveform settles dim, the finished caption holds in white, and "FULL EPISODE OUT NOW" + THE BUILD LOG hold to the end. </structure> <build> One HyperFrames composition, 1080x1080, seek-driven paused GSAP timeline. Synthesize or record the quote clip first, then extract its real peaks with a small script (stdlib wave/struct, ~56 bars, normalised 0-1) and bake the peaks array plus per-word caption timings into the page as JS data; keep the clip, the script and its peaks.json in an assets/ folder. Mount the clip as an <audio class="clip"> element starting at 1.5s so the render carries the sound, and verify with ffprobe afterwards that the MP4 has an audio stream with voice onset at the clip start. Bars are flex children coloured by timeline tweens at each bar's slice time; caption words are spans tweened grey -> accent -> white on their timings. </build> <gotchas> - A waveform invented in code instead of measured from the clip is a lie the viewer can hear — extract the peaks, every time. - Word timings proportional to word length are an approximation, not forced alignment; say so in the run log instead of claiming karaoke accuracy. - Verify the rendered MP4 actually contains audio (ffprobe) — a silent audiogram is just a picture, and the check step will not catch it. - Keep the sample disclosure on screen for the whole film, not only under the title card. </gotchas> Before you finish: step through the timeline at five points and fix anything that overlaps, clips the frame, or drifts off the beat grid.