Videoclip de lansare cadru cu cadru

Cere-mi: numele produsului meu, un logo (sau te las să desenezi un semn simplu), textul pe o singură linie pe care un utilizator îl introduce în caseta de solicitare, pagina care răspunde (titlu + 2-3 propoziții cu o frază cheie), două nume de caracteristici pentru cărțile stivuite și o piesă muzicală. Dacă sar peste vreuna, folosesc valorile implicite: produsul „Cadru cu cadru” aflat în interiorul hub-ului său Whop, un semn în vizor (patru paranteze în jurul unui „FF” îngroșat), solicitarea „Creează un videoclip de lansare pentru aplicația mea”, o pagină de lecție intitulată „2.1 Alege o referință”, cărțile „Lansare” și „Sunet” și piesa house gratuită de la Mixkit „Rising Forest” încetinită la 124 BPM.

O imagine pătrată de 12 secunde, rezoluție 1080x1080, număr de cadre la 29,97 fps (f0–f359), randare master la 59,94 fps. Senzație de prezentare Apple: moale, alb, albastru strălucitor, cristalin. Camera nu se oprește niciodată într-un cadru static: fiecare cadru intră deja în mișcare (reducere exponențială, 12–19% din distanța rămasă per cadru) și pleacă într-o mișcare accelerată sau o rampă de estompare. Estomparea urmează viteza și direcția la fiecare mișcare.
Paletă: pagina #FDFDFB, culoarea pâleței #B7CFEB, culoarea gheții #E6F0FA, albastru intens #294376 → #769CC2 gradient cer, bleumarin #1E2F52, albastru accent #2F6BFF / #3CC8F0 / verde mentă #4ED6A0, alb. Tip: Inter (400/500/600/700). Nu conține violet, magenta sau portocaliu.
Poveste: antetul produsului se ridică dintr-o ceață albastră în interiorul unei ferestre luminoase a aplicației → un cursor alunecă, se întoarce cu fața spre locul în care merge, crește la trecerea cu mouse-ul și dă clic pe siglă → tăiere bruscă pe muzica care se deplasează către pictograma aplicației cu patru pătrate care orbitează într-o cruce → pictograma se restrânge într-o bară de meniu Mac → cursorul dă clic pe pictograma barei de meniu, apare o casetă de răspuns din sticlă mată și se tastează solicitarea → se înclină rapid în sus printr-o licărire albastru deschis în pagina de răspunsuri derulând la locul ei → un card se ridică deasupra lui → se dizolvă estompat în două carduri stivuite cu titluri gigantice din sticlă mată → se dizolvă estompat în discul cu sigla singuratică → tăiere bruscă pe un card negru la capăt cu un marcaj verbal strălucitor.
Interzise: crossfade-uri, cadre înghețate (cu excepția uneia în S7), kituri UI standard, străluciri pe textul UI, Math.random, orice arată ca un șablon.

Coordonatele sunt în px pe scena 1080. Ritmul muzicii k = 0,048 + 0,4838·ks (124 BPM, un ritm = 14,5 cadre). Cele trei tranșe fixe f72, f101, f159 aterizează cu 2 cadre înainte de un ritm: păstrați aceste cadre exacte.
S1 f0–71, antet + fereastră + clic: ceață #B7CFEB se estompează la #FDFDFB cu f28, se menține o strălucire albastră pe podea #DBEEFD în partea de jos. Antet pe o singură linie: discul cu sigla ⌀132 (#FBFCFE, margine de 1px #E8E8EA, marcaj întunecat), numele produsului (Inter 500), o capsulă întunecată „pe Whop” (#2F2E2F, text alb); întreaga zonă se întinde pe x474–1063, linia centrală crește y932 (f0) → 776 (f2) → 683 (f5) → 608 (f10) → 546 (f24) → 536 (f37), derivând 1 px/cadru după aceea. Numele apare neclar la f2, pilula f4–5 puternic neclară și alunecând 15 px la stânga pe măsură ce se ascuțește. O fereastră de tip hub luminos (rază 93, umplere #FCFDFF, bandă superioară #F1F6FF, strălucire albastră a podelei interioare) se estompează în jurul ei: opacitate 0 până la f14, 0,53 f15, 0,7 f19, 1,0 f24; colțul din stânga sus (408,405), se întinde din dreapta și jos. În interior: o pilulă de căutare în banda superioară, o coloană cu pictograme din stânga (pictograma Cursuri la (537,739), pictograma Chat estompată la (537,900)) și o fișă de curs din (764,700) în afara cadrului cu imaginea de copertă, titlul și „Curs · 8 lecții”. Cursor (săgeată macOS neagră, contur alb, 32x39) apare f27 la (891,393), planează la stânga decelerând până la (770,383) f44, se rotește pentru a indica stânga-jos f47–51 în timp ce se scufundă, aterizează în colțul din dreapta jos al discului (629,564) f56 → (587,546) f59 → (555,531) f71; crește ×1,55 la suprapunere de la f56; un inel moale de gheață (#D5F3FF → #F7FEFF, ⌀174 exterior) luminează în jurul discului de la f53. Camera mărește cu aproximativ (540,540): 1,0 f46 → 1,2 f60, se menține apăsat f61, apoi se micșorează accelerând până la 1,04 la f71 în timp ce cursorul apasă (se micșorează cu 15% f69–71).
S2 f72–100, pictogramă + orbită: pictogramă aplicație squircle bleumarin (#294376 → #1E2F52, marcaj alb), 276 px la f72, micșorându-se la 178 px pe f86, rază 28% din lățime, pe un disc halo gri #E9E9E7 care crește ⌀240 (f75) → 326 (f86). Patru pătrate de 92 px (rază 26) se rotesc în sens invers acelor de ceasornic, decelerează și se blochează într-o cruce la raza orbitei ≈216 pe f86: alb (1px #E3E8EF margine + umbră slabă) stânga, #2F6BFF sus, #3CC8F0 dreapta, #4ED6A0 jos. f88–100: pictograma se micșorează accelerând la ≈40 px, pătratele alunecă într-un rând în dreapta sa (albul se deplasează în spatele pictogramei), estomparea crește cu 0,3 → 6 px.
S3 f101–158, bara de meniu + prompt: pagină albă deasupra unei benzi negre de laptop (y425–475, evidențiere sus #686866), o bară de meniu bleumarin închis (y477–538), imaginea de fundal dedesubt = gradientul de cer albastru cu linii albe subțiri (un cerc mare, două linii orizontale, una verticală, o sclipire în patru puncte la o intersecție, o strălucire turcoaz moale în dreapta sus). Grupul de meniuri din dreapta este alb: Wi-Fi, baterie, comutatoare, marcajul produsului la x531–584, trei puncte ⌀36 #2F6BFF / #3CC8F0 / #4ED6A0 la x612, 661, 709, „Lun 22 Iun 9:41 AM” 34 px. Introducere neclară la 3 px și stabilizare cu f110. Cursor se ridică de jos (f102), se așază pe marcaj, apasă f113–117. Camera panoramizează conținutul la dreapta +125 px f115–130 (cea mai rapidă f118–120). O cutie de sticlă mată (sticlă alb-albastră deasupra cerului, margine superioară strălucitoare, rază 60) iese de sub marcajul f116: lățimea atinge un vârf de 744 la f126 și se stabilizează la 726x228 pe f138 în jurul valorii de x196–922, y568–797. Solicitarea se tastează de la f121 (prima „Make” lizibilă) la f150 (complet) la aproximativ 1 caracter/cadru cu o menținere de 1 cadru la fiecare 2–3 caractere; semnul circumflex este mereu activ; trei pictograme cu contur alb în partea de jos; butonul de trimitere #2F6BFF ⌀51 cu o săgeată albă în sus. De la f136, întreaga scenă derivă în sus, accelerând într-o mișcare de bici (f158 mișcându-se ≈25 px/cadru, estompare verticală ≈6–8 px), în timp ce pagina se nuanță #E6F4FE peste f154–158.
S4 f159–186, pagina de răspunsuri: o pagină de lecție a unui curs ușor de realizat (breadcrumb, titlu, corp): coloană de text x120, corp 47 px Inter 400 gri #BCBCBA, pas între linii 58, o frază cheie („cadru cu cadru”) cu negru 600. Sosește pătată și cu o valoare joasă de 420 px, se derulează în sus cu decalaje de 420, 315, 210, 170, 140, 116, 96, 81 (f166) … 14 (f175) … 0 (f180), apoi se deplasează lent cu −6 px cu f186. Estompare 24 px (f159) → 1.5 (f165) → 0. Bliț #E2F4FE care se estompează la #FDFDFB cu f165. Un cursor îndreptat direct în sus parcurge derularea și se oprește sub fraza cheie (≈(450,591) f180), apoi se deplasează spre dreapta.
S5 f187–214, carton: un carton alb (x203–878, se întinde de jos în sus) se ridică deasupra paginii: imaginea copertei 627x536 inserată 24 px, raza 64, o bară de prindere luminoasă în centrul său superior, legendă semibold 38 px neagră, sublegendă gri 23 px. Copertă sus y642 (f187) → 456 (f191) → 395 (f196) → 369 (f200) → 348 (f205), apoi continuă să urce cu ~4 px/cadru. Estomparea cartonului atinge un vârf de 3,8 px la f189, clară la f201; pagina din spate se estompează la ≈2,5 px. Ieșire f207–214: cartonul se micșorează ~5% și se ridică în timp ce întregul cadru se estompează cu 1 → 7 px; tăiere la vârful de estompare.
S6 f215–244, două cărți: pagină albă, două cărți stivuite 538x348 (rază 57, spațiu 36) centrate pe x540, cartea de sus se așază la y168 cu f230, cea de jos la y552. Fiecare: copertă (fără text inclus), o pilulă mată în stânga sus („Modulul 3” / „Modulul 5”), un „•••” rotund mată în dreapta sus și un titlu imens, îngroșat, de-a lungul marginii de jos, realizat din sticlă mată (o copie neclară și luminată a imaginii decupată de litere, decupată de marginea de jos a cărții): „Lansare” și „Sunet”. Ambele intră în neclaritate la 12 px și claritate la f224; cartea de sus intră la 8% mărime și se ridică de la y264; cartea de jos se ridică de la y927, clătinate în spatele ei. Acestea urcă 3 px/cadru f230–238, apoi accelerează și se estompează în interiorul tăieturii.
S7 f245–300, disc cu sigla: pagina #FDFDFB, discul ⌀168 #F6F6F6 cu marcajul întunecat, se ridică în centru (sus y569 f245 → 491 f250 → 468 f255 → 456 f269) cu o pată verticală pe cadrul decupat, se menține nemișcat f269–287 (singura porțiune înghețată), apoi se micșorează accelerând până la ⌀123 la f300.
S8 f301–359, carte de sfârșit: fundal radial negru (#020204 colțuri, ≈#272729 în jurul cuvântului), marca verbală în Inter 600, #F3F3F5 alb cu o strălucire densă plus un halou lat și delicat, centrat (540,540). Lățimea cuvântului: ≈1650 px f301 (pătat orizontal, dungi de zoom) → 1350 f302 → 1110 f303 → 1049 f304 → 734 f309 → 678 f311 → 563 f320 → 516 f342 (≈1 px/cadru micșorat) → 492 f350, apoi se restrânge la micșorare: 450 f355 → 267 f359 cu neclaritate crescând la 3,5 px. Filmul se termină la mijlocul restrângerii.

1. O pagină HTML, 1080x1080, desenată de seek(t) ca o funcție pură a numărului cadrului. Fără tranziții CSS, fără cronometre, fără Math.random (doar hash-uri cu rădăcini). Imaginile se înregistrează ca {f0, f1, render(localFrame)}.
2. Fiecare valoare este continuă în numărul cadrului (masterul 59.94 randează jumătăți de cadre): animați cu tabele de cadre cheie kf(frame, [[f, value],...], ease) și tabele de căutare per cadru cu interpolare liniară. Nu există Math.floor în mișcare.
3. Estompare: estompare filtru CSS pentru estompare rotundă, SVG feGaussianBlur cu deviere std x/y separată pentru mânjiri direcționale. Măsurare cu zoom pe cartonașul de la capăt = 20–30 de copii scalate, estompate, ale cuvântului. Sticlă mată = o copie estompată, luminată a ceea ce este în spate, fixată pe formă.
4. Cursor: o săgeată SVG macOS (umplere neagră, contur alb, umbră fină) cu rotație și scalare, reutilizată în S1, S3, S4.
5. Sunet (fără voce), exact 12,075 s: muzică la 124 BPM, intro ușor, scăderea la 2,47 s (beat-ul 5, reducerea la f72 o conduce cu 2 cadre pe oră). SFX sintetizat: impact ușor 0,10 s; șuierături atingând vârfurile la reduceri 2,402, 3,370, 5,305, 10,043 s; tranziții exact la 6,240 s și 8,175 s; clicuri la 2,33 și 3,83 s; ticăituri foarte silențioase ale tastelor la fiecare ~32 ms pe o perioadă de 4,04–5,00 s; o strălucire ușoară la 10,05 s. Masterizare la -14 LUFS, vârf real -1 dBTP, fără fade cu excepția ultimilor 60 ms.
6. Randează cu Playwright (o captură de ecran per cadru, fonturile se încarcă mai întâi), codifică H.264 yuv420p la 60000/1001, multiplică audio-ul.

Măsurați textul numai după încărcarea fonturilor. Un nume lung de produs nu se va potrivi acolo unde s-a potrivit un nume de 5 litere: scalați întreaga suprafață (spațiul discului, numele, pilula) pentru a se potrivi pe intervalul x474–1063, nu lăsați pilula să cadă în afara cadrului. Un pătrat alb pe orbită dispare pe pagina albă fără o margine de 1px și o umbră slabă. Nu puneți imagini cu propriul text în interiorul cardurilor S6, altfel titlul din sticlă se va dubla. Păstrați cadrele decupate exacte chiar și acolo unde nu se află pe o bătaie. Nimic nu se blochează cu excepția S7 f269–287. Tabelele de estompare puternică pot șterge complet o formă: dacă un cadru pare gol, reduceți estomparea până când forma încă se citește.

Cere-mi informațiile. Apoi arată-mi 4 imagini statice (f40 antet în fereastră, f86 pictogramă cruce, f150 solicitare finalizare, f230 cele două carduri) înainte să randezi filmul complet.

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.

Îndemn preluat de la post @notdwd.