Heatmap to Runway: An AI Creative Platform Launch

<inputs>
Ask me for: the brand name (mine is "Opus 5.5"), about 25 studio photos of one model in black on white, a photo of a desk with a monitor by big windows, a cloud photo, a photo of someone working on a laptop, and a 30 second track.
</inputs>

<direction>
A 30 second AI-product launch film, 1920x1080. Paper background #e6e7e5, ink #111, one font (Inter 400, 76px, -5% tracking), a big Times New Roman wordmark in sky blue #56c6f7. Two looks carry it: a heat-map (yellow → peach → hot pink → violet, cycling) and flat paper with small black tracking squares (24px) flickering at the corners of whatever is on screen. Motion is half smooth glides, half stop-motion steps on a 25fps clock.
Banned: crossfades between scenes, drop shadows on text, bouncy easing, any color you didn't pick from the palette above.
</direction>

<structure>
29.5 seconds, 9 scenes, hard cuts only where marked.

Heat-map silhouette of a woman in profile, "Imagine to have all your tool" wipes in pink and turns white, scanlines, glitch bands (0-2.6s) → 40px pixel blocks eat the frame from the top-left with hot yellow and pink edge pixels (2.6-3.4) → "{ in }" grows to "{ in one }" to "{ in one place }", braces sliding apart, then "{ intro [3 tiny photos] ducing }" in maroon with two pale arrows drifting outwards (3-6) → a stone desk appears in heat-map on paper, the whole room follows, then turns real from the desk outwards, windows last (6.4-8.6) → CUT closer, slow push on the monitor showing the wordmark over clouds (8.6-10) → CUT into the screen: dithered clouds, wordmark, a frosted glass prompt bar (10) → 11x zoom onto the bar while "Create a neo goth model for a clothing brand." is typed, camera riding the caret (10.7-12.5) → zoom out, pointer clicks send, the arrow turns left and sweeps the text away (12.8-14.3) → CUT to paper: "Building Image" arrives in pastel and inks itself, shrinks to the top-left, four steps drop in (Processing, Generating, Image, Assemble), each pushing the list up (14.3-16.8) → colored dots fill a 17x23 grid, take the portrait's tones, turn to mosaic, then the photo (16.8-17.7) → the photo shrinks and swaps stop-motion through the set, tilts into a 3D deck, fans into a row, then one hero card with a trail receding left: "gets / better", then "you [cards] create" (17.7-24.4) → everything blurs and tints while orange, red and magenta blobs rise (24.4-25) → "The AI powered platform for modern creatives" lands word by word, white, 56px (25-28) → the words vanish, a thin strip of photo opens in perspective and settles into a white result card with the prompt text and a footer bar (28-29.5).
</structure>

<build>
1. One HTML canvas, 1920x1080. Every frame is computed from time inside seek(t): no CSS transitions, no timers.
2. Heat-map: a 1024-step cyclic palette indexed by brightness plus a phase that moves with time, drawn at half resolution and scaled up.
3. Pixel dissolve: a 48x27 grid, each block gets a value from its position plus low noise, and a threshold sweeps across it.
4. Clouds: take the cloud photo's whiteness and brightness, then a 4x4 ordered dither between sky blue and white.
5. Glass bar: a pre-blurred copy of the backdrop clipped to a rounded rect, a pale tint, a white rim. Draw the clouds with smoothing off when zoomed so the dither stays crisp.
6. 3D cards: project four corners (rotate around Y, perspective 1500px), then draw the photo as 72 vertical strips between them.
7. Gradient: five soft blobs drawn on a 192x108 canvas and scaled up, which blurs them for free. Render with Playwright, 8 subframes per frame, 60fps.
</build>

<gotchas>
The typing close-up is not a pure zoom: the bar gets slimmer as you push in. Text that grows word by word must re-center every frame or it drifts. The tracking squares and photo swaps snap to 25fps even though the film is 60. Blur the outgoing scene on a small copy, tint it by position not brightness, or you get glowing outlines.
</gotchas>

<start>
Ask me for the inputs, then show me stills of all 9 scenes before you render.
</start>