30-second SaaS explainer — HyperFrames prompt (4-act grid, 9s demo cut included)

<direction> A 30-second SaaS explainer structure, written as a four-act beat grid, HyperFrames 1280x720 at 30fps. House style: near-black #0a0a0a background, panels #141414, borders #2a2a2a, text #ffffff/#c9c9c9, ONE accent #ff5c1a, Arial/Helvetica bold, no webfonts. The prompt below is the full 30s grid. The rendered demo on this page is a 9-second compressed cut of the same grid (each act shortened proportionally) so you can judge the format in seconds — timings in <structure> are the 30s master's. Fictional product; the result claim is labelled a demo claim in the film. No gradients, no stock photos, no real brand logos, no lorem ipsum, no purple/blue tech gradient. </direction> <structure> 0-7s — THE PROBLEM. "Your tools don't talk to each other." Four app tiles (EMAIL / SHEETS / CRM / CHAT) sit apart, disconnected. 7-15s — STEP 1, CONNECT. The tiles draw lines into one hub: "Syncro HUB". Headline: "Plug everything into one hub." 15-23s — STEP 2, AUTOMATE. One rule card types out: "WHEN an invoice is paid → update the sheet → ping the team". Headline: "Set the rule once." 23-30s — THE RESULT. "4 HOURS BACK." huge, with the honest subline "every week, per person — a demo claim, not a measured result", the wordmark, and the fictional fine print. A thin progress bar runs under the kicker for the whole film. </structure> <build> One paused GSAP timeline; acts are full-screen layers crossfaded on hard cuts (0.2s) — explainer pacing comes from the cuts, not from slow fades. The progress bar is a scaleX tween spanning the full duration. For the 9s demo cut, divide every act boundary by ~3.33 and keep the order and copy identical. </build> <gotchas> - Do not ship the compressed cut labelled as 30 seconds: state the real duration wherever the video appears (this entry's note does). - The result claim needs its honesty subline in the same frame, at a readable size — not in a caption elsewhere. - Keep one idea per act; a second sentence per act is where explainers go to die. </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.