HyperFrames music-to-video prompt — beat-synced cuts

<direction> An 8-second square music-to-video film for MIDNIGHT DRIVE — SYNTH DEMO, 1080x1080 square. Everything moves on a 120 BPM grid (one beat = 0.5s). Sixteen beat ticks across the top light in order. Centre stage cycles on the beats: level bars fill, a square rotates in hard 45° steps, rings pulse out, and a bar visualiser steps — then a waveform polyline draws itself and the track label lands under it. Banned: smooth continuous motion that ignores the grid, glows, gradients, album art of real artists, real song lyrics anywhere. </direction> <structure> Beats 1–4 (0.5–2.5s): ticks light; level bars fill left to right. Beats 5–8: square steps 0→180° in 45° jumps. Beats 9–12: rings pulse, visualiser steps. Beat 13 (6.5s): waveform draws. Beat 14: track + tempo labels fade in. Hold. </structure> <build> One HyperFrames composition, seek-driven GSAP, all steps generated in JS loops from a BEATS array so the grid is data, not hand-placed tweens. Rotations are stepped (immediateRender jumps), never eased sweeps. </build> <gotchas> The rotating square's inner element had an off-centre anchor from a missing position:absolute, which stacked it in flow and threw every stage after it. Absolute-position everything that transforms; then centre rotation stages from the frame centre, not the element's box. </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.