Process explainer — HyperFrames prompt (refund flow with day labels)

<direction> A 9-second process explainer, 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. A package marker travels a progress line through 5 named stations, each with a day label — the format for any "what happens after I click" question. Fictional store; times labelled examples in the film. No gradients, no stock photos, no real brand logos, no lorem ipsum, no purple/blue tech gradient. </direction> <structure> 0.0-1.1s — Kicker "PROCESS EXPLAINER — BrightCart". Title: "HOW A REFUND FLOWS". A progress track appears with a small accent package marker at its start. 1.1-6.1s — The marker travels station to station (one every ~1.25s); as it arrives, that station's card rises and its border turns accent: REQUEST (DAY 0) → REVIEW (DAY 1) → APPROVED (DAY 2) → AT THE BANK (DAY 3-5) → DONE (DAY 5). Each card carries ONE plain line about that step. 6.1-9.0s — All stations lit; the end line: "FIVE STEPS. NO PHONE CALL NEEDED." Fine print: fictional store, times are examples, real policies vary. </structure> <build> One paused GSAP timeline; the travel is a loop in code over stop positions — the marker's x tween and the fill's scaleX share each segment's timing, and a class toggle lights the station on arrival. Cards are fixed-width, evenly pitched so the marker stops line up with card centres. </build> <gotchas> - Day labels must reflect a REALISTIC version of the process (banks genuinely take days) — and the film says "examples", because they are. - The marker's stop positions are pixel math: card pitch × index. Change the step count and you must recompute the stops. - One line per station. If a step needs two lines, it is two steps. </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.