Instellen: Frame by Frame lanceringsvideo

Vraag me om: mijn productnaam, een logo (of laat je zelf een eenvoudig symbool tekenen), de korte tekst die een gebruiker in het promptvak typt, de pagina met het antwoord (titel + 2-3 zinnen met één kernzin), twee functienamen voor de gestapelde kaarten en een muzieknummer. Als ik iets oversla, gebruik dan de standaardinstellingen: product "Frame by Frame" in de Whop-hub, een zoekersymbool (vier haakjes rond een vetgedrukt "FF"), prompt "Maak een lanceringsvideo voor mijn app", een lespagina met de titel "2.1 Kies een referentie", kaarten "Lancering" en "Geluid", en Mixkit's gratis house-nummer "Rising Forest" vertraagd naar 124 BPM.

Een vierkante productpresentatie van 12 seconden, 1080x1080, framesnelheid 29,97 fps (f0–f359), master gerenderd op 59,94 fps. De sfeer van een Apple-keynote: zacht, wit, helderblauw, glanzend. De camera maakt nooit een abrupte overgang: elke opname begint al in beweging (exponentiële vervaging, 12–19% van de resterende afstand per frame) en eindigt met een versnellende beweging of een geleidelijke onscherpte. De onscherpte volgt de snelheid en richting van elke beweging.
Kleurenpalet: pagina #FDFDFB, waas #B7CFEB, ijs #E6F0FA, diepblauw #294376 → #769CC2 hemelsblauw verloop, marineblauw #1E2F52, accentblauwen #2F6BFF / #3CC8F0 / mintgroen #4ED6A0, wit. Type: Inter (400/500/600/700). Geen paars, violet, magenta of oranje.
Verhaal: de productheader komt omhoog uit een blauwe waas in een licht app-venster → een cursor glijdt naar binnen, draait zich om in de richting waar hij heen gaat, wordt groter bij hover en klikt op het logo → abrupte overgang naar het app-icoon met vier vierkanten die in een kruis cirkelen → het icoon verdwijnt in een Mac-menubalk → de cursor klikt op het menubalkicoon, een promptvenster van mat glas springt eruit en de prompt wordt getypt → snelle kantelbeweging omhoog door een lichtblauwe flits naar de antwoordpagina die op zijn plaats scrollt → een kaart komt erboven → wazige overgang naar twee gestapelde kaarten met gigantische titels van mat glas → wazige overgang naar de enige logoschijf → abrupte overgang naar een zwarte eindkaart met een gloeiend woordmerk.
Verboden: crossfades, bevroren frames (behalve één hold in S7), standaard UI-kits, gloed op UI-tekst, Math.random, alles wat op een sjabloon lijkt.

De coördinaten zijn in pixels op het 1080-podium. Muziekbeat k = 0,048 + 0,4838·ks (124 BPM, één beat = 14,5 frames). De drie harde cuts f72, f101, f159 landen 2 frames vóór een beat: behoud deze exacte frames.
S1 f0–71, koptekst + venster + klik: waas #B7CFEB vervagend naar #FDFDFB bij f28, behoud een blauwe gloed op de vloer #DBEEFD onderaan. Koptekst op één regel: logoschijf ⌀132 (#FBFCFE, 1px rand #E8E8EA, donkere markering), de productnaam (Inter 500), een donkere capsulepil "op Whop" (#2F2E2F, witte tekst); de hele opstelling beslaat x474–1063, middenlijn stijgt y932 (f0) → 776 (f2) → 683 (f5) → 608 (f10) → 546 (f24) → 536 (f37), verschuivend 1 px/frame daarna. Naam verschijnt f2 wazig, pil f4–5 sterk wazig en schuift 15 px naar links terwijl hij scherper wordt. Een lichtvenster (radius 93, vulling #FCFDFF, bovenste band #F1F6FF, blauwe gloed in de bodem) verschijnt eromheen: dekking 0 tot f14, 0,53 f15, 0,7 f19, 1,0 f24; linksboven (408,405), loopt door naar rechts en onder. Binnenin: een zoekbalk in de bovenste band, een linker kolom met pictogrammen (Cursus-pictogram op (537,739), vervaagd Chat-pictogram op (537,900)), en een cursuskaart van (764,700) buiten beeld met de omslagafbeelding, titel en "Cursus · 8 lessen". Cursor (zwarte macOS-pijl, witte omtrek, 32x39) verschijnt f27 op (891,393), glijdt naar links en vertraagt tot (770,383) f44, draait naar linksonder f47–51 terwijl hij duikt, landt rechtsonder op de schijf (629,564) f56 → (587,546) f59 → (555,531) f71; groeit ×1,55 bij het zweven vanaf f56; een zachte ijsring (#D5F3FF → #F7FEFF, buitenste ⌀174) licht op rond de schijf vanaf f53. De camera zoomt ongeveer (540,540): 1.0 f46 → 1.2 f60 geleidelijk in- en uitzoomen, houdt f61 vast, en zoomt dan geleidelijk uit met een versnelling naar 1.04 bij f71 terwijl de cursor ingedrukt blijft (verkleint met 15% f69–71).
S2 f72–100, icoon + baan: marineblauwe afgeronde hoek app-icoon (#294376 → #1E2F52, witte markering), 276 px bij f72, geleidelijk kleiner wordend tot 178 px bij f86, straal 28% van de breedte, op een grijze halo-schijf #E9E9E7 die groeit van ⌀240 (f75) → 326 (f86). Vier vierkanten van 92 px (straal 26) draaien tegen de klok in, vertragen en vormen een kruis bij een baanstraal van ≈216 bij f86: wit (1px #E3E8EF rand + vage schaduw) links, #2F6BFF boven, #3CC8F0 rechts, #4ED6A0 onder. f88–100: het pictogram krimpt versneld tot ongeveer 40 px, de vierkantjes schuiven naar een rij rechts ervan (wit verdwijnt achter het pictogram), de onscherpte neemt toe van 0,3 → 6 px.
S3 f101–158, menubalk + prompt: witte pagina boven een zwarte rand van de laptop (y425–475, bovenste highlight #686866), een donkerblauwe menubalk (y477–538), achtergrond eronder = de blauwe hemelgradiënt met dunne witte lijntekening (één grote cirkel, twee horizontale lijnen, één verticale, een vierpuntige glinstering op een kruispunt, zachte turquoise gloed rechtsboven). Menubalk rechter cluster in wit: Wi-Fi, batterij, schakelaars, het productlogo op x531–584, drie ⌀36 stippen #2F6BFF / #3CC8F0 / #4ED6A0 op x612, 661, 709, "Mon Jun 22 9:41 AM" 34 px. Vervaagt 3 px en stabiliseert zich bij f110. Cursor komt van onderen omhoog (f102), blijft op het logo staan, drukt op f113–117. De camera beweegt de inhoud 125 px naar rechts, f115–130 (snelst f118–120). Een doos van mat glas (witblauw glas over de lucht, heldere bovenrand, straal 60) verschijnt onder de markering f116: de breedte bereikt een piek van 744 bij f126 en stabiliseert zich op 726x228 bij f138 rond x196–922, y568–797. De prompts worden getypt van f121 (eerste leesbare "Make ") tot f150 (compleet) met ongeveer 1 teken per frame, met een pauze van 1 frame om de 2-3 tekens; de cursor is altijd aan; drie witte omtrekpictogrammen onderaan; verzendknop #2F6BFF ⌀51 met een witte pijl omhoog. Vanaf f136 beweegt de hele scène omhoog en versnelt tot een zweepslagbeweging (f158 beweegt ≈25 px/frame, verticale onscherpte ≈6–8 px), terwijl de pagina tussen f154 en f158 de kleur #E6F4FE krijgt.
S4 f159–186, antwoordpagina: een eenvoudige lespagina (breadcrumb, titel, body): tekstkolom x120, body 47 px Inter 400 grijs #BCBCBA, regelafstand 58, één sleutelzin ("frame voor frame") in zwart 600. Het verschijnt wazig en 420 px laag, scrollt omhoog met offsets 420, 315, 210, 170, 140, 116, 96, 81 (f166) … 14 (f175) … 0 (f180), en kruipt dan −6 px naar beneden bij f186. Vervaging 24 px (f159) → 1,5 (f165) → 0. Flits #E2F4FE vervagend naar #FDFDFB bij f165. Een cursor die recht omhoog wijst, beweegt mee met het scrollwiel en stopt onder de sleutelzin (≈(450,591) f180), waarna hij naar rechts verschuift.
S5 f187–214, kaart: een witte kaart (x203–878, loopt door tot onderaan) komt boven de pagina uit: omslagafbeelding 627x536, inzet 24 px, straal 64, een lichtvangerbalk in het midden bovenaan, bijschrift halfvet 38 px zwart, subbijschrift grijs 23 px. Bovenkant omslag y642 (f187) → 456 (f191) → 395 (f196) → 369 (f200) → 348 (f205), en blijft dan ~4 px/frame omhoog bewegen. De onscherpte van de kaart bereikt een piek van 3,8 px bij f189, scherp bij f201; de pagina erachter vervaagt tot ≈2,5 px. Exit f207–214: kaart krimpt met ongeveer 5% en komt omhoog terwijl het hele frame 1 → 7 px wazig wordt; knippen op het punt waar de wazigheid het grootst is.
S6 f215–244, twee kaarten: witte pagina, twee gestapelde kaarten 538x348 (radius 57, tussenruimte 36) gecentreerd op x540, bovenste kaart op y168 bij f230, onderste op y552. Elk: omslagafbeelding (zonder ingebakken tekst), een matglazen pil linksboven ("Module 3" / "Module 5"), een matglazen ronde "•••" rechtsboven, en een enorme, vetgedrukte titel langs de onderrand van mat glas (een wazige, lichtere kopie van de afbeelding, bijgesneden tot de letters, afgesneden door de onderrand van de kaart): "Launch" en "Sound". Beide verschijnen wazig met 12 px en scherp bij f224; de bovenste kaart verschijnt 8% groter en stijgt vanaf y264; de onderste kaart stijgt vanaf y927, verspringend erachter. Ze bewegen 3 pixels per frame omhoog bij f230–238, versnellen vervolgens en vervagen in de uitsnede.
S7 f245–300, logoschijf: pagina #FDFDFB, schijf ⌀168 #F6F6F6 met de donkere markering, stijgt naar het midden (boven y569 f245 → 491 f250 → 468 f255 → 456 f269) met een verticale vlek op het uitgesneden kader, blijft stil staan f269–287 (het enige bevroren gedeelte), krimpt dan versnellend tot ⌀123 bij f300.
S8 f301–359, eindkaart: zwarte radiale achtergrond (#020204 hoeken, ≈#272729 rond het woord), het woordmerk in Inter 600, wit #F3F3F5 met een strakke gloed plus een brede zachte halo, gecentreerd (540,540). Woordbreedte: ≈1650 px f301 (horizontaal uitgesmeerd, zoomstrepen) → 1350 f302 → 1110 f303 → 1049 f304 → 734 f309 → 678 f311 → 563 f320 → 516 f342 (≈1 px/frame krimp) → 492 f350, vervolgens in elkaar stortend ease-in: 450 f355 → 267 f359 met onscherpte die oploopt tot 3,5 px. De film eindigt midden in het in elkaar storten.

1. Eén HTML pagina, 1080x1080, getekend door seek(t) als een pure functie van het framenummer. Geen CSS transities, geen timers, geen Math.random (alleen hashes met een seed). Shots worden geregistreerd als {f0, f1, render(localFrame)}.
2. Elke waarde is continu in het framenummer (de 59.94 master rendert halve frames): animeer met keyframe-tabellen kf(frame, [[f, waarde],...], ease) en per-frame opzoektabellen met lineaire interpolatie. Geen Math.floor op beweging.
3. Vervaging: CSS filtervervaging voor ronde vervaging, SVG feGaussianBlur met aparte x/y stdDeviation voor directionele vervagingen. Zoomvervaging op de eindkaart = 20-30 geschaalde, vervaagde kopieën van het woord. Matglas = een vervaagde, lichtere kopie van wat erachter ligt, bijgesneden tot de vorm.
4. Cursor: één SVG macOS-pijl (zwarte vulling, witte omtrek, zachte schaduw) met rotatie en schaal, hergebruikt in S1, S3, S4.
5. Geluid (geen stem), exact 12.075 s: muziek op 124 BPM, zachte intro, de drop op 2.47 s (tel 5, de f72 cut loopt er 2 frames op vooruit). Gesynthetiseerde SFX: zachte impact op 0.10 s; suizende geluiden met pieken op de cuts 2.402, 3.370, 5.305, 10.043 s; overgangen precies op 6.240 s en 8.175 s; klikgeluiden op 2.33 en 3.83 s; zeer zachte toetstikken om de ~32 ms tussen 4.04 en 5.00 s; een zachte glinstering op 10.05 s. Mastering naar −14 LUFS, ware piek −1 dBTP, geen fade behalve de laatste 60 ms.
6. Render met Playwright (één screenshot per frame, lettertypen eerst laden), codeer H.264 yuv420p op 60000/1001, mux de audio.

Meet de tekst pas nadat de lettertypen zijn geladen. Een lange productnaam past niet waar een naam van 5 letters wel paste: schaal de hele vergrendeling (schijfopening, naam, pil) zodat deze binnen het bereik van x474–1063 past, zorg ervoor dat de pil niet buiten het kader valt. Een wit orbit-vierkant verdwijnt op de witte pagina zonder een rand van 1px en met een vage schaduw. Plaats geen afbeeldingen met eigen tekst in de S6-kaarten, anders wordt de titel op het glas dubbel weergegeven. Houd de uitgesneden kaders exact, zelfs waar ze niet op een beat vallen. Niets bevriest behalve S7 f269–287. Sterke vervagingstabellen kunnen een vorm volledig doen verdwijnen: als een kader er leeg uitziet, verlaag dan de vervaging totdat de vorm nog steeds leesbaar is.

Vraag me naar de invoer. Laat me vervolgens 4 stilstaande beelden zien (f40 koptekst in het venster, f86 kruispictogram, f150 voltooid prompt, f230 de twee kaarten) voordat je de volledige film rendert.

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.

Aanwijzing afkomstig van na @notdwd.