Animated line chart — HyperFrames prompt (a data story in one line)

<direction> A 9-second animated line chart film (1280x720, 30fps) telling a product launch, told in one line in a single drawn line. House style: near-black #0a0a0a, white type, ONE orange accent #ff5c1a, Arial/Helvetica bold, no webfonts. The line draws left to right across one chart; three story beats pop at their anchor points: THE DIP, THE TURN, THE CLIMB. Sample data, labelled SAMPLE on screen. Banned: second lines, area fills, glows, gradients, gridlines denser than the story needs, real company data. </direction> <structure> 0.0-0.8s: kicker "ONE LINE. ONE STORY." + chart frame in. 0.8-2.6s: line draws down to the dip; "THE DIP" pops. 2.6-5.0s: line flattens and turns; "THE TURN" pops. 5.0-7.2s: line climbs steeply; "THE CLIMB" pops and the end dot lands. 7.2-9.0s: end callout "ENDS +212% ABOVE WHERE IT STARTED" + "ILLUSTRATIVE SAMPLE DATA"; hold. </structure> <build> One HyperFrames composition, 1280x720, seek-driven GSAP timeline, paused. The line is an SVG path drawn by stroke-dashoffset; beat labels are absolutely positioned pills that pop (scale from 0.9, opacity) only when the line reaches their anchor. Render at 30fps. </build> <gotchas> - Labels must sit clear of the line itself: anchor each label above its point with a small dot connector, never on the stroke. - The draw easing must be steady (power1.inOut): a fast-then-dead draw makes the middle beats feel rushed. - End callout value must match the line's final height or the chart contradicts itself. </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.