How-it-works 3-step explainer — HTML/GSAP prompt (numbered steps + progress line)

<direction> An 8-second how-it-works explainer as a single self-contained HTML page driven by GSAP (1280x720, 30fps, seek-driven). House style: near-black #0a0a0a background, panels #141414, borders #2a2a2a, text #ffffff/#c9c9c9, ONE accent #ff5c1a, Arial/Helvetica bold, no webfonts. The universal pattern: three numbered steps on one progress line, each lighting up as the line reaches it. Fictional service. No gradients, no stock photos, no real brand logos, no lorem ipsum, no purple/blue tech gradient. </direction> <structure> 0.0-0.9s — Kicker "HOW IT WORKS — FixFlow". Title: "HOW IT WORKS, IN 3 STEPS". A grey progress track sits under the title. 0.9-2.2s — Step 1 rises in: big numeral in a bordered circle, "DESCRIBE IT", one plain-language line. Its circle border and numeral turn accent; the progress fill grows to the halfway point. 2.2-3.6s — Step 2 the same ("GET MATCHED"); fill completes to step 3's position as step 3 lands ("GET IT FIXED"). 3.6-8.0s — All three lit. The end line lands: "THAT'S THE WHOLE PROCESS." Fine print: fictional service. </structure> <build> One paused GSAP timeline on window.__timelines["main"]. Step activation = a timeline .add() callback toggling an "on" class at the exact frame the fill arrives (the capture engine fires callbacks while seeking — verified in production). Fill = scaleX on a child of the track, transform-origin left. </build> <gotchas> - One idea per step and one line of description — the format dies at two lines. - The numeral circles must sit ON the track line (same centre Y) or the progress metaphor breaks. - Keep step titles in the imperative voice (describe / match / done), it reads as instructions, not marketing. </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.