Storyboard

Make a 4.5 s, 1920x1080, 24 fps piece for Orbit. Background: a near-black diagonal gradient (#181B1C, #272B2B, #111314) with a soft magenta glow. Inter, regular weight only, sentence case, no bold. Set every font size in px and use only 120, 64 and 44. Give each object the id or class in brackets so later messages can point at it. Build the piece as three groups, back to front, each with its own start time and length: scene 1 [#intro], scene 2 [#camera] and a top layer [#overlay]. Build everything now as stills at its final size, including what only shows up later; later messages will move things, not size them. No animation yet. Write every element in the HTML itself; do not use a script to create elements or text. Use one composition and one timeline, with no sub-compositions. Replace the starter's title and its style. - Scene 1, 0 to 0.33 s [#intro]: the heading "Your next launch" [#suggest] in white at 120 px, about half the frame width, centered at x 0.50, y 0.53 (just below the middle of the frame). Below it a card [#suggest-card] spanning x 0.11 to 0.89 and y 0.68 to 0.99, fill #222830 with a magenta #D900EF halo: a thumbnail on the left (assets/clips/clip-01.jpg), the title "Orbit found 12 clips" in white at 44 px, two lines of gray body text at 44 px ("Your latest uploads are ready to" and "become a launch video."), and a magenta arc spinner at the right. - Scene 2, 0.33 to 4.5 s [#camera], one wrapper that holds the panel, header, drop area, label and tiles below: a dark panel [#modal] (fill #1D2021 to #25292B, corner radius about 45 px, pink-purple rim along the top and left) spanning x 0.07 to 0.93 from y 0.09, its bottom below the frame. Its header "Library" [#header] in gray at 64 px at the top left and a close X at the top right, drawn as two strokes, not text. A dashed drop area [#dropzone] spanning x 0.11 to 0.89 and y 0.28 to 0.86 with "Drop clips here or browse" in gray at 44 px, centered. - The settled grid: 12 tiles [.tile] (#3A3B3B, radius 10 px, 13% of the frame width) in rows of 5, 5 and 2, row tops at y 0.31, 0.57 and 0.84, column lefts at x 0.13, 0.28, 0.44, 0.59 and 0.74, each holding one clip (clip-01.jpg to clip-12.jpg in reading order). - The label "Adding clips..." [#importing] in gray at 44 px with a small gray arc spinner, to the right of the header. - The top layer [#overlay], 0.33 to 4.5 s, holds the end headline, the cursor and the cards. The end headline "Launch from your clips" [#headline] in white at 120 px, about two thirds of the frame width, centered, each word its own element [.hword]. - The cursor [#cursor], also in [#overlay]: a white arrow with a 3 px black outline and a light shadow, about 4% of the frame width, tip at x 0.80, y 0.25. With it four fanned drag cards [.drag], each a rounded portrait card (radius about 20 px) 11% of the frame width by 25% of the frame height holding a clip (clip-09, clip-08, clip-07, clip-03, back to front), tilted about 5 degrees either way, the fan spanning about x 0.51 to 1.02 and y 0.00 to 0.56. Both are in [#overlay] and sit at this place at 0.33 s. Show the stills at these times: heading and card at 0.2 s; panel, drop area, cursor and cards at 0.4 s; the label at 1.8 s; the grid at 2.4 s; the headline at 4.3 s.