Lanseringsvideo för bildruta för bildruta

Fråga mig om: mitt produktnamn, en logotyp (eller låt dig rita ett enkelt tecken), den enradiga sak som en användare skriver i promptrutan, sidan som svarar på den (titel + 2–3 meningar med en nyckelfras), två funktionsnamn för de staplade korten och ett musikspår. Om jag hoppar över något använder jag standardinställningarna: produkten "Frame by Frame" som finns inuti dess Whop-hubb, ett sökarmärke (fyra hörnparenteser runt ett fetstilt "FF"), prompten "Skapa en lanseringsvideo för min app", en lektionssida med titeln "2.1 Välj en referens", korten "Launch" och "Ljud", och Mixkits gratis house-spår "Rising Forest" saktat ner till 124 BPM.

En 12 sekunder lång fyrkantig produktbild, 1080x1080, bildrutenummer vid 29,97 fps (f0–f359), masterrenderad vid 59,94 fps. Apple-keynote-känsla: mjuk, vit, klarblå, glasartad. Kameran klipper aldrig på en stillbild: varje bild går in i en redan rörlig bild (exponentiell utjämning, 12–19 % av det återstående avståndet per bildruta) och lämnar i en accelererande rörelse eller en oskärpa-ramp. Oskärpan följer hastighet och riktning i varje rörelse.
Palett: sida #FDFDFB, dis #B7CFEB, is #E6F0FA, djupblå #294376 → #769CC2 himmelsblå toning, marinblå #1E2F52, accentblå #2F6BFF / #3CC8F0 / mint #4ED6A0, vit. Typ: Inter (400/500/600/700). Inget lila, violett, magenta eller orange någonstans.
Handling: produktrubriken reser sig ur ett blått dis inuti ett ljust appfönster → en markör glider in, vrids för att vara riktad mot det den ska, växer när du hovrar över den och klickar på logotypen → klipp ut musiken som faller ner till appikonen med fyra rutor som kretsar runt i ett kors → ikonen kollapsar i en Mac-menyrad → markören klickar på menyradsikonen, en frostad glasruta hoppar ut och prompten skriver → pisk-lutas uppåt genom en ljusblå blixt in på svarssidan som rullar på plats → ett kort reser sig över det → oskärpa-upplöses till två staplade kort med gigantiska frostade glastitlar → oskärpa-upplöses till den ensamma logotypskivan → klipp ut till ett svart kort med ett glödande ordmärke.
Bannad: crossfades, frysta bildrutor (förutom en hold i S7), standard UI-kit, glöder på UI-text, Math.random, allt som ser ut som en mall.

Koordinaterna är px på 1080-scenen. Musiktakt k = 0,048 + 0,4838·ks (124 BPM, ett taktslag = 14,5 bildrutor). De tre hårda snitten f72, f101, f159 landar 2 bildrutor före ett taktslag: behåll exakt dessa bildrutor.
S1 f0–71, rubrik + fönster + klick: dis #B7CFEB tonar ut till #FDFDFB vid f28, behåller en blå golvglöd #DBEEFD längst ner. Rubrik på en rad: logotypskiva ⌀132 (#FBFCFE, 1px kant #E8E8EA, mörk markering), produktnamnet (Inter 500), ett mörkt kapselpiller "på Whop" (#2F2E2F, vit text); hela upplåsningen sträcker sig över x474–1063, mittlinjen stiger y932 (f0) → 776 (f2) → 683 (f5) → 608 (f10) → 546 (f24) → 536 (f37), driver 1 px/bildruta senare. Namnet visas f2 suddigt, piller f4–5 kraftigt suddigt och glider 15 px åt vänster när det skärper. Ett ljust navfönster (radie 93, fyllning #FCFDFF, övre band #F1F6FF, blå innergolvsskim) tonas in runt det: opacitet 0 till f14, 0,53 f15, 0,7 f19, 1,0 f24; övre vänstra hörnet (408, 405), löper från höger och nedre. Inuti: en sökpiller i det övre bandet, en vänster ikonkolumn (Kursikon vid (537, 739), bleknad chattikon vid (537, 900)), och ett kurskort från (764, 700) utanför bildrutan med dess omslagsbild, titel och "Kurs · 8 lektioner". Cursor (svart macOS-pil, vit kontur, 32x39) visas f27 vid (891,393), glider åt vänster och retarderar till (770,383) f44, roterar för att peka nedåt åt vänster f47–51 när den dyker, landar på skivans nedre högra sida (629,564) f56 → (587,546) f59 → (555,531) f71; växer ×1,55 vid muspekaren från f56; en mjuk isring (#D5F3FF → #F7FEFF, yttre ⌀174) lyser runt skivan från f53. Kameran zoomar ungefär (540,540): 1,0 f46 → 1,2 f60 lättnad inuti, håller f61, lättar sedan ut och accelererar till 1,04 vid f71 medan markören trycks (krymper 15% f69–71).
S2 f72–100, ikon + omloppsbana: marinblå cirkelformad appikon (#294376 → #1E2F52, vit markering), 276 px vid f72 som krymper utvidgningen till 178 px gånger f86, radie 28 % av bredden, på en grå halo-skiva #E9E9E7 som växer ⌀240 (f75) → 326 (f86). Fyra 92 px fyrkanter (radie 26) snurrar in moturs, retarderar och låses i ett kors vid omloppsbanan ≈216 gånger f86: vit (1px #E3E8EF kant + svag skugga) vänster, #2F6BFF överst, #3CC8F0 höger, #4ED6A0 längst ner. f88–100: ikonen krymper accelererande till ≈40 px, rutorna glider in i en rad till höger (vitt glider bakom ikonen), oskärpan ökar 0,3 → 6 px.
S3 f101–158, menyrad + prompt: vit sida ovanför ett svart laptop-band (y425–475, övre markering #686866), en mörkblå menyrad (y477–538), bakgrundsbild nedan = den blå himlens gradient med tunn vit linjeteckning (en stor cirkel, två horisontella linjer, en vertikal, en fyrpunktsgnista vid en korsning, mjukt blågrönt sken uppe till höger). Menyradens högra kluster i vitt: Wi-Fi, batteri, växlar, produktmärket vid x531–584, tre ⌀36 punkter #2F6BFF / #3CC8F0 / #4ED6A0 vid x612, 661, 709, "Mån 22 jun 9:41 AM" 34 px. Suddigt 3 px och stabiliseras vid f110. Cursor stiger underifrån (f102), placeras på märket, trycker på f113–117. Kameran panorerar innehållet åt höger +125 px f115–130 (snabbast f118–120). En frostad glaslåda (vitblått glas över himlen, ljus övre kant, radie 60) skjuter ut under märket f116: bredden når 744 vid f126 och stabiliseras 726x228 gånger f138 runt x196–922, y568–797. Prompten skriver från f121 (första läsbara "Skapa") till f150 (slutför) vid ungefär 1 tecken/bildruta med 1 bildruta-hållning vartannat–tredje tecken; cirkumflektorn alltid på; tre vita konturikoner längst ner; skicka-knapp #2F6BFF ⌀51 med en vit uppåtpil. Från f136 driver hela scenen uppåt och accelererar till en whip-tilt (f158 rör sig ≈25 px/bildruta, vertikal oskärpa ≈6–8 px) medan sidan nyansar #E6F4FE över f154–158.
S4 f159–186, svarssida: en lätt kurslektion (brödsmulor, titel, brödtext): textkolumn x120, brödtext 47 px Inter 400 grå #BCBCBA, radavstånd 58, en nyckelfras ("ram för ram") i svart 600. Den anländer suddig och 420 px låg, rullar uppåt med förskjutningar 420, 315, 210, 170, 140, 116, 96, 81 (f166) … 14 (f175) … 0 (f180), kryper sedan −6 px med f186. Oskärpa 24 px (f159) → 1,5 (f165) → 0. Blixt #E2F4FE tonas ut till #FDFDFB med f165. En markör som pekar rakt uppåt rider längs rullningen och stannar under nyckelfrasen (≈(450,591) f180), och flyttar sig sedan åt höger.
S5 f187–214, kort: ett vitt kort (x203–878, löper av längst ner) reser sig över sidan: omslagsbild 627x536 infälld bild 24 px, radie 64, en ljus gripstång högst upp i mitten, bildtext halvfet 38 px svart, underbildtext grå 23 px. Omslagsöverdel y642 (f187) → 456 (f191) → 395 (f196) → 369 (f200) → 348 (f205), fortsätter sedan att glida upp ~4 px/bildruta. Kortets oskärpa når en topp på 3,8 px vid f189, skarpt vid f201; sidan bakom suddar ut till ≈2,5 px. Avsluta f207–214: kortet krymper ~5 % och reser sig medan hela bilden suddar ut 1 → 7 px; klipp vid oskärpetoppen.
S6 f215–244, två kort: vit sida, två staplade kort 538x348 (radie 57, mellanrum 36) centrerade på x540, det övre kortet placeras vid y168 med f230, det nedre vid y552. Vardera: omslagsbild (ingen text inbakad), en frostad tablett uppe till vänster ("Modul 3" / "Modul 5"), en frostad rund "•••" uppe till höger, och en enorm fet titel längs den nedre kanten gjord av frostat glas (en suddig, ljusare kopia av bilden klippt till bokstäverna, avskuren av kortets nedre kant): "Launch" och "Sound". Båda går in i suddiga 12 px och skarpa med f224; det övre kortet går in i 8 % stor storlek och stiger från y264; det nedre kortet stiger från y927, förskjutet bakom det. De driver upp 3 px/bildruta f230–238, accelererar sedan upp och suddas ut i snittet.
S7 f245–300, logotypskiva: sida #FDFDFB, skiva ⌀168 #F6F6F6 med det mörka märket, stiger in i mitten (överst y569 f245 → 491 f250 → 468 f255 → 456 f269) med en vertikal fläck på den skurna ramen, håller f269–287 stilla (den enda frysta sträckan), krymper sedan och accelererar till ⌀123 vid f300.
S8 f301–359, slutkort: svart radiell bakgrund (#020204 hörn, ≈#272729 runt ordet), ordmärket i Inter 600, vitt #F3F3F5 med en tät glöd plus en bred mjuk gloria, centrerat (540, 540). Ordbredd: ≈1650 px f301 (horisontellt utsmetad, zoomstreck) → 1350 f302 → 1110 f303 → 1049 f304 → 734 f309 → 678 f311 → 563 f320 → 516 f342 (≈1 px/bildruteförminskning) → 492 f350, sedan hopfälld vid infällning: 450 f355 → 267 f359 med oskärpa som ökar till 3,5 px. Filmen slutar mitt i hopfällningen.

1. En HTML sida, 1080x1080, ritad av seek(t) som en ren funktion av bildrutenumret. Inga CSS övergångar, inga timers, ingen Math.random (endast seedade hashkoder). Bilderna registreras som {f0, f1, render(localFrame)}.
2. Varje värde är kontinuerligt i bildrutanumret (59.94-mastern renderar halva bildrutor): animera med nyckelbildrutetabeller kf(bildruta, [[f, värde],...], mellanrum) och uppslagstabeller per bildruta med linjär interpolering. Ingen Math.floor vid rörelse.
3. Blur: CSS filtersuddighet för rund oskärpa, SVG feGaussianBlur med separat x/y stdDeviation för riktningsutsmetning. Zoomutsmetning på slutet av kortet = 20–30 skalade, blekta kopior av ordet. Frostat glas = en suddig, ljusare kopia av det som finns bakom, klippt till formen.
4. Cursor: en SVG macOS-pil (svart fyllning, vit kontur, mjuk skugga) med rotation och skala, återanvänd i S1, S3, S4.
5. Ljud (ingen röst), exakt 12,075 s: musik vid 124 BPM, mjukt intro, droppen vid 2,47 s (slag 5, f72-klippet leder det med 2 bildrutor). Syntetiserad SFX: mjuk anslag 0,10 s; susningar som toppar vid klippningarna 2,402, 3,370, 5,305, 10,043 s; övergången träffar exakt vid 6,240 s och 8,175 s; klick vid 2,33 och 3,83 s; mycket tysta tangenttick var ~32 ms under 4,04–5,00 s; ett mjukt skimmer vid 10,05 s. Master till −14 LUFS, sann topp −1 dBTP, ingen fade förutom de sista 60 ms.
6. Rendera med Playwright (en skärmdump per bildruta, typsnitt laddas först), koda H.264 yuv420p vid 60000/1001, mixa ljudet.

Mät texten först efter att teckensnitten har laddats. Ett långt produktnamn får inte plats där ett namn med 5 bokstäver gjorde det: skala hela produktbilden (skivavstånd, namn, piller) så att den passar spannet x474–1063, låt inte pillern falla utanför ramen. En vit omloppsruta försvinner på den vita sidan utan en 1px kant och en svag skugga. Placera inte bilder med egen text inuti S6-korten, annars fördubblas glastiteln. Håll de klippta ramarna exakta även där de inte står stilla. Ingenting fryser förutom S7 f269–287. Tabeller med tunga oskärpa kan utplåna en form helt: om en ram ser tom ut, minska oskärpan tills formen fortfarande är läsbar.

Be mig om indata. Visa mig sedan fyra stillbilder (f40 rubrik i fönstret, f86 ikonkryss, f150 färdig prompt, f230 de två korten) innan du renderar hela filmen.

Ask me for: my product name, a logo (or let you draw a simple mark), the one-line thing a user types into the prompt box, the page that answers it (title + 2–3 sentences with one key phrase), two feature names for the stacked cards, and a music track. If I skip any, use the defaults: product "Frame by Frame" living inside its Whop hub, a viewfinder mark (four corner brackets around a bold "FF"), prompt "Make a launch video for my app", a lesson page titled "2.1 Choose a reference", cards "Launch" and "Sound", and Mixkit's free house track "Rising Forest" slowed to 124 BPM.

A 12 second square product sting, 1080x1080, frame numbers at 29.97 fps (f0–f359), master rendered at 59.94 fps. Apple-keynote feel: soft, white, bright blue, glassy. The camera never cuts on a still frame: every shot enters already moving (exponential ease-out, 12–19% of the remaining distance per frame) and leaves on an accelerating move or a blur ramp. Blur follows speed and direction on every move.
Palette: page #FDFDFB, haze #B7CFEB, ice #E6F0FA, deep blue #294376 → #769CC2 sky gradient, navy #1E2F52, accent blues #2F6BFF / #3CC8F0 / mint #4ED6A0, white. Type: Inter (400/500/600/700). No purple, violet, magenta or orange anywhere.
Story: the product header rises out of a blue haze inside a light app window → a cursor glides in, turns to face where it's going, grows on hover and clicks the logo → hard cut on the music drop to the app icon with four squares orbiting into a cross → the icon collapses into a Mac menu bar → the cursor clicks the menu-bar icon, a frosted glass prompt box springs out and the prompt types → whip-tilt up through a light-blue flash into the answer page scrolling into place → a card rises over it → blur-dissolve to two stacked cards with giant frosted-glass titles → blur-dissolve to the lone logo disc → hard cut to a black end card with a glowing wordmark.
Banned: crossfades, frozen frames (except one hold in S7), stock UI kits, glows on UI text, Math.random, anything that looks like a template.

Coordinates are px on the 1080 stage. Music beat k = 0.048 + 0.4838·k s (124 BPM, one beat = 14.5 frames). The three hard cuts f72, f101, f159 land 2 frames before a beat: keep these exact frames.
S1 f0–71, header + window + click: haze #B7CFEB fading to #FDFDFB by f28, keep a blue floor glow #DBEEFD at the bottom. Header on one line: logo disc ⌀132 (#FBFCFE, 1px rim #E8E8EA, dark mark), the product name (Inter 500), a dark capsule pill "on Whop" (#2F2E2F, white text); the whole lockup spans x474–1063, centre line rises y932 (f0) → 776 (f2) → 683 (f5) → 608 (f10) → 546 (f24) → 536 (f37), drifting 1 px/frame after. Name appears f2 blurred, pill f4–5 heavily blurred and sliding 15 px left as it sharpens. A light hub window (radius 93, fill #FCFDFF, top band #F1F6FF, blue inner floor glow) fades in around it: opacity 0 to f14, 0.53 f15, 0.7 f19, 1.0 f24; top-left corner (408,405), runs off the right and bottom. Inside: a search pill in the top band, a left icon column (Courses icon at (537,739), faded Chat icon at (537,900)), and a course card from (764,700) off-frame with its cover image, title and "Course · 8 lessons". Cursor (black macOS arrow, white outline, 32x39) appears f27 at (891,393), glides left decelerating to (770,383) f44, rotates to point down-left f47–51 as it dives, lands on the disc's lower right (629,564) f56 → (587,546) f59 → (555,531) f71; grows ×1.55 on hover from f56; a soft ice ring (#D5F3FF → #F7FEFF, outer ⌀174) lights around the disc from f53. Camera zooms about (540,540): 1.0 f46 → 1.2 f60 ease-in-out, holds f61, then eases out accelerating to 1.04 at f71 while the cursor presses (shrinks 15% f69–71).
S2 f72–100, icon + orbit: navy squircle app icon (#294376 → #1E2F52, white mark), 276 px at f72 shrinking ease-out to 178 px by f86, radius 28% of width, on a grey halo disc #E9E9E7 growing ⌀240 (f75) → 326 (f86). Four 92 px squares (radius 26) spin in counter-clockwise, decelerating, and lock into a cross at orbit radius ≈216 by f86: white (1px #E3E8EF edge + faint shadow) left, #2F6BFF top, #3CC8F0 right, #4ED6A0 bottom. f88–100: the icon shrinks accelerating to ≈40 px, the squares slide into a row on its right (white slips behind the icon), blur ramps 0.3 → 6 px.
S3 f101–158, menu bar + prompt: white page above a black laptop bezel band (y425–475, top highlight #686866), a dark navy menu bar (y477–538), wallpaper below = the blue sky gradient with thin white line art (one big circle, two horizontal lines, one vertical, a four-point sparkle at a crossing, soft teal glow top-right). Menu bar right cluster in white: Wi-Fi, battery, toggles, the product mark at x531–584, three ⌀36 dots #2F6BFF / #3CC8F0 / #4ED6A0 at x612, 661, 709, "Mon Jun 22  9:41 AM" 34 px. Enters blurred 3 px and settling by f110. Cursor rises from below (f102), sits on the mark, presses f113–117. Camera pans content right +125 px f115–130 (fastest f118–120). A frosted glass box (white-blue glass over the sky, bright top rim, radius 60) springs out from under the mark f116: width peaks 744 at f126 and settles 726x228 by f138 around x196–922, y568–797. The prompt types from f121 (first legible "Make ") to f150 (complete) at about 1 char/frame with a 1-frame hold every 2–3 chars; caret always on; three white outline icons along the bottom; send button #2F6BFF ⌀51 with a white up arrow. From f136 the whole scene drifts up, accelerating into a whip-tilt (f158 moving ≈25 px/frame, vertical blur ≈6–8 px) while the page tints #E6F4FE over f154–158.
S4 f159–186, answer page: a light course lesson page (breadcrumb, title, body): text column x120, body 47 px Inter 400 grey #BCBCBA, line pitch 58, one key phrase ("frame for frame") in black 600. It arrives smeared and 420 px low, scrolls up with offsets 420, 315, 210, 170, 140, 116, 96, 81 (f166) … 14 (f175) … 0 (f180), then creeps −6 px by f186. Blur 24 px (f159) → 1.5 (f165) → 0. Flash #E2F4FE fading to #FDFDFB by f165. A cursor pointing straight up rides the scroll and stops under the key phrase (≈(450,591) f180), then drifts right.
S5 f187–214, card: a white card (x203–878, runs off the bottom) rises over the page: cover image 627x536 inset 24 px, radius 64, a light grabber bar at its top centre, caption semibold 38 px black, sub-caption grey 23 px. Cover top y642 (f187) → 456 (f191) → 395 (f196) → 369 (f200) → 348 (f205), then keeps drifting up ~4 px/frame. Card blur peaks 3.8 px at f189, sharp by f201; the page behind blurs to ≈2.5 px. Exit f207–214: card shrinks ~5% and rises while the whole frame blurs 1 → 7 px; cut at the blur peak.
S6 f215–244, two cards: white page, two stacked cards 538x348 (radius 57, gap 36) centred on x540, top card settling at y168 by f230, bottom at y552. Each: cover art (no text baked into it), a frosted pill top-left ("Module 3" / "Module 5"), a frosted round "•••" top-right, and a huge bold title along the bottom edge made of frosted glass (a blurred, lightened copy of the image clipped to the letters, cut off by the card's bottom edge): "Launch" and "Sound". Both enter blurred 12 px and sharp by f224; the top card enters 8% large and rises from y264; the bottom card rises from y927, staggered behind it. They drift up 3 px/frame f230–238, then accelerate up and blur out into the cut.
S7 f245–300, logo disc: page #FDFDFB, disc ⌀168 #F6F6F6 with the dark mark, rises into the centre (top y569 f245 → 491 f250 → 468 f255 → 456 f269) with a vertical smear on the cut frame, holds still f269–287 (the only frozen stretch), then shrinks accelerating to ⌀123 at f300.
S8 f301–359, end card: black radial background (#020204 corners, ≈#272729 around the word), the wordmark in Inter 600, white #F3F3F5 with a tight glow plus a wide soft halo, centred (540,540). Word width: ≈1650 px f301 (horizontally smeared, zoom streaks) → 1350 f302 → 1110 f303 → 1049 f304 → 734 f309 → 678 f311 → 563 f320 → 516 f342 (≈1 px/frame shrink) → 492 f350, then collapses ease-in: 450 f355 → 267 f359 with blur rising to 3.5 px. The film ends mid-collapse.

1. One HTML page, 1080x1080, drawn by seek(t) as a pure function of the frame number. No CSS transitions, no timers, no Math.random (seeded hashes only). Shots register as {f0, f1, render(localFrame)}.
2. Every value is continuous in the frame number (the 59.94 master renders half frames): animate with keyframe tables kf(frame, [[f, value], ...], ease) and per-frame lookup tables with linear interpolation. No Math.floor on motion.
3. Blur: CSS filter blur for round blur, SVG feGaussianBlur with separate x/y stdDeviation for directional smears. Zoom smear on the end card = 20–30 scaled, faded copies of the word. Frosted glass = a blurred, lightened copy of what's behind, clipped to the shape.
4. Cursor: one SVG macOS arrow (black fill, white outline, soft shadow) with rotation and scale, reused in S1, S3, S4.
5. Sound (no voice), exactly 12.075 s: music at 124 BPM, soft intro, the drop at 2.47 s (beat 5, the f72 cut leads it by 2 frames). Synthesized SFX: soft impact 0.10 s; whooshes peaking at the cuts 2.402, 3.370, 5.305, 10.043 s; transition hits exactly on 6.240 s and 8.175 s; clicks at 2.33 and 3.83 s; very quiet key ticks every ~32 ms over 4.04–5.00 s; a soft shimmer at 10.05 s. Master to −14 LUFS, true peak −1 dBTP, no fade except the last 60 ms.
6. Render with Playwright (one screenshot per frame, fonts loaded first), encode H.264 yuv420p at 60000/1001, mux the audio.

Measure text only after the fonts load. A long product name won't fit where a 5-letter name did: scale the whole lockup (disc gap, name, pill) to fit the span x474–1063, don't let the pill fall off-frame. A white orbit square vanishes on the white page without a 1px edge and a faint shadow. Don't put images with their own text inside the S6 cards, or the glass title doubles up. Keep the cut frames exact even where they don't sit on a beat. Nothing freezes except S7 f269–287. Heavy blur tables can wipe a shape out completely: if a frame looks empty, lower the blur until the shape still reads.

Ask me for the inputs. Then show me 4 stills (f40 header in the window, f86 icon cross, f150 finished prompt, f230 the two cards) before you render the full film.

Uppmaning hämtad från posta @notdwd.