Raam-vir-raam bekendstellingsvideo

Vra my vir: my produknaam, 'n logo (of laat jou 'n eenvoudige merk teken), die een-reël ding wat 'n gebruiker in die aanwysingsblokkie tik, die bladsy wat dit beantwoord (titel + 2-3 sinne met een sleutelfrase), twee kenmerkname vir die gestapelde kaarte, en 'n musieksnit. As ek enige oorslaan, gebruik die verstekwaardes: produk "Raam vir Raam" wat binne sy Whop-hub woon, 'n soekermerk (vier hoekhakies om 'n vetgedrukte "FF"), aanwysing "Maak 'n bekendstellingsvideo vir my toepassing", 'n lesbladsy getiteld "2.1 Kies 'n verwysing", kaarte "Bekendstelling" en "Klank", en Mixkit se gratis huissnit "Rising Forest" vertraag na 124 BPM.

'n Vierkantige produksteek van 12 sekondes, 1080x1080, raamnommers teen 29.97 fps (f0–f359), meesterweergawe teen 59.94 fps. Apple-hoofkaraktergevoel: sag, wit, helderblou, glasagtig. Die kamera sny nooit op 'n stilstaande raam nie: elke skoot gaan reeds bewegend in (eksponensiële uitskakeling, 12–19% van die oorblywende afstand per raam) en vertrek op 'n versnellende beweging of 'n vervaagde helling. Vervaag volg spoed en rigting op elke beweging.
Palet: bladsy #FDFDFB, waas #B7CFEB, ys #E6F0FA, diepblou #294376 → #769CC2 luggradiënt, vlootblou #1E2F52, aksentblou #2F6BFF / #3CC8F0 / kruisement #4ED6A0, wit. Tipe: Inter (400/500/600/700). Geen pers, violet, magenta of oranje enige plek nie.
Storie: die produkopskrif rys uit 'n blou waas binne 'n ligte toepassingsvenster → 'n wyser gly in, draai om na waarheen dit gaan, groei as jy daaroor sweef en klik op die logo → sny hard op die musiek wat val na die toepassingsikoon met vier vierkante wat in 'n kruis wentel → die ikoon stort in 'n Mac-kieslysbalk in → die wyser klik op die kieslysbalk-ikoon, 'n matglas-promptboks spring uit en die prompt tik → kantel op deur 'n ligblou flits na die antwoordbladsy wat in plek blaai → 'n kaart rys daaroor → vervaag-los op na twee gestapelde kaarte met reuse-matglastitels → vervaag-los op na die eensame logo-skyf → hard sny na 'n swart eindkaart met 'n gloeiende woordmerk.
Verban: kruisvervagings, gevriesde rame (behalwe een houvas in S7), standaard UI-kits, gloei op UI-teks, Math.random, enigiets wat soos 'n sjabloon lyk.

Koördinate is px op die 1080-verhoog. Musiekmaat k = 0.048 + 0.4838·ks (124 BPM, een maat = 14.5 rame). Die drie harde snitte f72, f101, f159 land 2 rame voor 'n maat: behou hierdie presiese rame.
S1 f0–71, koptekst + venster + klik: waas #B7CFEB vervaag na #FDFDFB met f28, hou 'n blou vloergloed #DBEEFD onderaan. Koptekst op een lyn: logo-skyf ⌀132 (#FBFCFE, 1px rand #E8E8EA, donker merk), die produknaam (Inter 500), 'n donker kapsule-pil "op Whop" (#2F2E2F, wit teks); die hele sluiting strek oor x474–1063, middellyn styg y932 (f0) → 776 (f2) → 683 (f5) → 608 (f10) → 546 (f24) → 536 (f37), dryf 1 px/raam daarna. Naam verskyn f2 vaag, pil f4–5 erg vaag en gly 15 px links soos dit skerper word. 'n Ligte spilpuntvenster (radius 93, vul #FCFDFF, boonste band #F1F6FF, blou binneste vloergloed) vervaag daaromheen: ondeursigtigheid 0 tot f14, 0.53 f15, 0.7 f19, 1.0 f24; boonste linkerhoek (408,405), loop regs en onder. Binne: 'n soekpil in die boonste band, 'n linkerikoonkolom (Kursusse-ikoon by (537,739), vervaagde Klets-ikoon by (537,900)), en 'n kursuskaart van (764,700) buite die raam met sy omslagbeeld, titel en "Kursus · 8 lesse". Cursor (swart macOS-pyltjie, wit buitelyn, 32x39) verskyn f27 by (891,393), gly links en vertraag na (770,383) f44, roteer om links onder f47–51 te wys terwyl dit duik, land op die skyf se onderste regterkant (629,564) f56 → (587,546) f59 → (555,531) f71; groei ×1.55 met sweef vanaf f56; 'n sagte ysring (#D5F3FF → #F7FEFF, buitenste ⌀174) lig om die skyf vanaf f53. Kamera zoem ongeveer (540,540): 1.0 f46 → 1.2 f60 in-uit, hou f61, beweeg dan uit en versnel na 1.04 by f71 terwyl die wyser druk (krimp 15% f69–71).
S2 f72–100, ikoon + wentelbaan: donkerblou sirkel-app-ikoon (#294376 → #1E2F52, wit merk), 276 px by f72 wat krimp na 178 px by f86, radius 28% van breedte, op 'n grys halo-skyf #E9E9E7 wat ⌀240 (f75) → 326 (f86) groei. Vier 92 px-vierkante (radius 26) draai antikloksgewys in, vertraag, en sluit in 'n kruis by wentelbaanradius ≈216 by f86: wit (1 px #E3E8EF rand + dowwe skaduwee) links, #2F6BFF bo, #3CC8F0 regs, #4ED6A0 onder. f88–100: die ikoon krimp en versnel tot ≈40 px, die vierkante gly in 'n ry aan sy regterkant (wit gly agter die ikoon), vervaaging neem toe met 0.3 → 6 px.
S3 f101–158, menubalk + aanwyser: wit bladsy bo 'n swart skootrekenaar-randband (y425–475, boonste hoogtepunt #686866), 'n donkerblou menubalk (y477–538), agtergrond onder = die blou luggradiënt met dun wit lynkuns (een groot sirkel, twee horisontale lyne, een vertikaal, 'n vierpunt-vonkeling by 'n kruising, sagte seegroen gloed regs bo). Menubalk regterkantse groep in wit: Wi-Fi, battery, skakelaars, die produkmerk by x531–584, drie ⌀36 kolletjies #2F6BFF / #3CC8F0 / #4ED6A0 by x612, 661, 709, "Ma Jun 22 9:41 VM" 34 px. Gaan vaag 3 px binne en vestig by f110. Cursor styg van onder af (f102), sit op die merk, druk f113–117. Kamera pan inhoud regs +125 px f115–130 (vinnigste f118–120). 'n Matglasboks (witblou glas oor die lug, helder boonste rand, radius 60) spring onder die merk f116 uit: breedte piek 744 by f126 en vestig 726x228 by f138 rondom x196–922, y568–797. Die aanwyser tik van f121 (eerste leesbare "Maak") na f150 (voltooi) teen ongeveer 1 karakter/raam met 'n 1-raam hou elke 2–3 karakters; 'n dwarspen altyd aan; drie wit buitelynikone langs die onderkant; stuurknoppie #2F6BFF ⌀51 met 'n wit pyltjie op. Van f136 af dryf die hele toneel op, en versnel in 'n sweepkanteling (f158 beweeg ≈25 px/raam, vertikale vervaaging ≈6–8 px) terwyl die bladsy #E6F4FE oor f154–158 tint.
S4 f159–186, antwoordbladsy: 'n ligte kursuslesbladsy (broodkrummel, titel, liggaam): tekskolom x120, liggaam 47 px Inter 400 grys #BCBCBA, lynafstand 58, een sleutelfrase ("raam vir raam") in swart 600. Dit arriveer gesmeer en 420 px laag, blaai op met verrekenings 420, 315, 210, 170, 140, 116, 96, 81 (f166) … 14 (f175) … 0 (f180), kruip dan −6 px met f186. Vervaag 24 px (f159) → 1.5 (f165) → 0. Flits #E2F4FE vervaag na #FDFDFB met f165. 'n Wyser wat reguit op wys, ry die boekrol en stop onder die sleutelfrase (≈(450,591) f180), en dryf dan regs.
S5 f187–214, kaart: 'n wit kaart (x203–878, loop van die onderkant af) styg oor die bladsy: omslagbeeld 627x536 insetsel 24 px, radius 64, 'n ligte grypbalk bo-in die middel, onderskrif halfvet 38 px swart, subonderskrif grys 23 px. Omslag bo y642 (f187) → 456 (f191) → 395 (f196) → 369 (f200) → 348 (f205), en bly dan opdryf ~4 px/raam. Kaartvervaagdheid bereik 'n piek van 3.8 px by f189, skerp teen f201; die bladsy daaragter vervaag tot ≈2.5 px. Verlaat f207–214: kaart krimp ~5% en styg terwyl die hele raam vervaag 1 → 7 px; sny by die vervaagdheidspiek.
S6 f215–244, twee kaarte: wit bladsy, twee gestapelde kaarte 538x348 (radius 57, gaping 36) gesentreer op x540, boonste kaart vestig by y168 deur f230, onder by y552. Elk: omslagkuns (geen teks daarin ingebak nie), 'n matte pil links bo ("Module 3" / "Module 5"), 'n matte ronde "•••" regs bo, en 'n groot vetgedrukte titel langs die onderrand gemaak van matglas (’n vae, ligter kopie van die beeld geknip aan die letters, afgesny deur die kaart se onderrand): "Launch" en "Sound". Beide betree vae 12 px en skerp deur f224; die boonste kaart betree 8% groot en styg vanaf y264; die onderste kaart styg vanaf y927, daaragter gestruikel. Hulle dryf 3 px/raam f230–238 op, versnel dan op en vervaag uit in die sny.
S7 f245–300, logo-skyf: bladsy #FDFDFB, skyf ⌀168 #F6F6F6 met die donker merk, styg na die middel (bo y569 f245 → 491 f250 → 468 f255 → 456 f269) met 'n vertikale smeer op die snyraam, hou f269–287 stil (die enigste bevrore stuk), krimp dan en versnel tot ⌀123 by f300.
S8 f301–359, eindkaart: swart radiale agtergrond (#020204 hoeke, ≈#272729 rondom die woord), die woordmerk in Inter 600, wit #F3F3F5 met 'n digte gloed plus 'n wye sagte stralekrans, gesentreer (540,540). Woordwydte: ≈1650 px f301 (horisontaal gesmeer, zoomstrepe) → 1350 f302 → 1110 f303 → 1049 f304 → 734 f309 → 678 f311 → 563 f320 → 516 f342 (≈1 px/raamkrimping) → 492 f350, dan vou dit in: 450 f355 → 267 f359 met vervaagdheid wat styg tot 3.5 px. Die film eindig mid-ingevou.

1. Een HTML bladsy, 1080x1080, geteken deur seek(t) as 'n suiwer funksie van die raamnommer. Geen CSS oorgange, geen tydtellers, geen Math.random (slegs gesaaide hashes). Skote registreer as {f0, f1, render(localFrame)}.
2. Elke waarde is kontinu in die raamnommer (die 59.94-meester lewer halframe op): animeer met sleutelraamtabelle kf(raam, [[f, waarde],...], gemak) en per-raam opsoektabelle met lineêre interpolasie. Geen Math.floor op beweging nie.
3. Vervaag: CSS filtervervaag vir ronde vervaag, SVG feGaussianBlur met aparte x/y stdDeviation vir rigtingsmere. Zoem-smeer op die eindkaart = 20–30 afgeskaalde, verbleikte kopieë van die woord. Matglas = 'n vervaagde, ligter kopie van wat agter is, aan die vorm geknip.
4. Cursor: een SVG macOS-pyltjie (swart vulsel, wit buitelyn, sagte skaduwee) met rotasie en skaal, hergebruik in S1, S3, S4.
5. Klank (geen stem nie), presies 12.075 s: musiek teen 124 BPM, sagte intro, die daling teen 2.47 s (maat 5, die f72-snit lei dit met 2 rame). Gesintetiseerde SFX: sagte impak 0.10 s; whooshes wat piek by die snitte 2.402, 3.370, 5.305, 10.043 s; oorgang tref presies op 6.240 s en 8.175 s; klikke teen 2.33 en 3.83 s; baie stil sleuteltikke elke ~32 ms oor 4.04–5.00 s; 'n sagte glinstering teen 10.05 s. Master na −14 LUFS, ware piek −1 dBTP, geen vervaag behalwe die laaste 60 ms.
6. Render met Playwright (een skermkiekie per raam, lettertipes eerste gelaai), enkodeer H.264 yuv420p teen 60000/1001, mix die klank.

Meet teks slegs nadat die lettertipes gelaai het. 'n Lang produknaam sal nie pas waar 'n 5-letter naam wel pas nie: skaal die hele opsluiting (skyfgaping, naam, pil) om die span x474–1063 te pas, moenie toelaat dat die pil van die raam af val nie. 'n Wit wentelbaan verdwyn op die wit bladsy sonder 'n 1px-rand en 'n dowwe skaduwee. Moenie beelde met hul eie teks binne die S6-kaarte plaas nie, anders verdubbel die glastitel. Hou die snyrame presies selfs waar hulle nie op 'n maat sit nie. Niks vries behalwe S7 f269–287 nie. Swaar vervaagtabelle kan 'n vorm heeltemal uitwis: as 'n raam leeg lyk, verlaag die vervaag totdat die vorm steeds leesbaar is.

Vra my vir die insette. Wys my dan 4 stilfoto's (f40 kop in die venster, f86 ikoon kruis, f150 voltooide prompt, f230 die twee kaarte) voordat jy die volle film weergee.

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.

Aanwysing geneem van pos @notdwd.