Configurando: Vídeo de lançamento do Frame by Frame

Solicite: o nome do meu produto, um logotipo (ou deixe que você desenhe uma marca simples), a frase que o usuário digita na caixa de prompt, a página que responde a essa pergunta (título + 2 a 3 frases com uma palavra-chave), dois nomes de recursos para os cartões empilhados e uma faixa musical. Se eu omitir algum item, use os padrões: o produto "Frame by Frame" dentro do seu hub Whop, uma marca de visor (quatro colchetes em torno de um "FF" em negrito), o prompt "Crie um vídeo de lançamento para meu aplicativo", uma página de lição intitulada "2.1 Escolha uma referência", os cartões "Lançamento" e "Som" e a faixa house gratuita "Rising Forest" do Mixkit, com a velocidade reduzida para 124 BPM.

Um vídeo promocional quadrado de 12 segundos, 1080x1080, com taxa de quadros de 29,97 fps (f0–f359), renderizado a 59,94 fps. A estética lembra as apresentações da Apple: suave, branca, azul brilhante, com aspecto vítreo. A câmera nunca corta em um quadro estático: cada tomada começa com a câmera já em movimento (suavização exponencial, 12–19% da distância restante por quadro) e termina com um movimento acelerado ou um desfoque gradual. O desfoque acompanha a velocidade e a direção em cada movimento.
Paleta: página #FDFDFB, névoa #B7CFEB, gelo #E6F0FA, azul profundo #294376 → gradiente céu #769CC2, azul marinho #1E2F52, azuis de destaque #2F6BFF / #3CC8F0 / menta #4ED6A0, branco. Tipo: Inter (400/500/600/700). Sem roxo, violeta, magenta ou laranja em nenhuma cor.
História: o cabeçalho do produto surge de uma névoa azul dentro de uma janela clara do aplicativo → um cursor desliza, gira para a frente, cresce ao passar o mouse e clica no logotipo → corte brusco na transição para o ícone do aplicativo com quatro quadrados orbitando em forma de cruz → o ícone se recolhe na barra de menus do Mac → o cursor clica no ícone da barra de menus, uma caixa de diálogo com efeito de vidro fosco surge e o texto é digitado → movimento rápido para cima através de um flash azul claro para a página de respostas que rola para o lugar → um cartão surge sobre ela → transição desfocada para dois cartões empilhados com títulos gigantes em efeito de vidro fosco → transição desfocada para o disco com o logotipo solitário → corte brusco para um cartão final preto com uma marca d'água brilhante.
Proibido: transições suaves, quadros congelados (exceto uma retenção no S7), kits de interface de usuário padrão, brilho no texto da interface, Math.random, qualquer coisa que pareça um modelo.

As coordenadas são em pixels no palco 1080. A batida da música k = 0,048 + 0,4838·ks (124 BPM, uma batida = 14,5 frames). Os três cortes bruscos f72, f101, f159 ocorrem 2 frames antes de uma batida: mantenha esses frames exatos.
S1 f0–71, cabeçalho + janela + clique: névoa #B7CFEB desvanecendo para #FDFDFB em f28, mantém um brilho azul no chão #DBEEFD na parte inferior. Cabeçalho em uma linha: disco do logotipo ⌀132 (#FBFCFE, borda de 1px #E8E8EA, marca escura), o nome do produto (Inter 500), uma cápsula escura "on Whop" (#2F2E2F, texto branco); todo o bloco abrange x474–1063, a linha central sobe y932 (f0) → 776 (f2) → 683 (f5) → 608 (f10) → 546 (f24) → 536 (f37), deslocando-se 1 px/quadro depois. O nome aparece desfocado em f2, a cápsula fica bastante desfocada em f4–5 e desliza 15 px para a esquerda à medida que se torna mais nítida. Uma janela central de luz (raio 93, preenchimento #FCFDFF, faixa superior #F1F6FF, brilho azul no piso interno) surge gradualmente ao redor: opacidade 0 a f14, 0,53 f15, 0,7 f19, 1,0 f24; canto superior esquerdo (408,405), estendendo-se para a direita e para baixo. Dentro: um ícone de pesquisa na faixa superior, uma coluna de ícones à esquerda (ícone de Cursos em (537,739), ícone de Chat esmaecido em (537,900)) e um cartão de curso de (764,700) fora do quadro com sua imagem de capa, título e "Curso · 8 aulas". Cursor (seta preta do macOS, contorno branco, 32x39) aparece em f27 em (891,393), desliza para a esquerda desacelerando para (770,383) f44, gira para apontar para baixo-esquerda f47–51 enquanto mergulha, pousa no canto inferior direito do disco (629,564) f56 → (587,546) f59 → (555,531) f71; cresce ×1,55 ao passar o cursor a partir de f56; um anel de gelo suave (#D5F3FF → #F7FEFF, ⌀174 externo) ilumina o disco a partir de f53. A câmera dá um zoom de aproximadamente (540,540): 1.0 f46 → 1.2 f60 com entrada e saída suaves, mantém f61 e então sai suavemente acelerando para 1.04 em f71 enquanto o cursor pressiona (encolhe 15% f69–71).
S2 f72–100, ícone + órbita: ícone de aplicativo squircle azul-marinho (#294376 → #1E2F52, marca branca), 276 px em f72, diminuindo gradualmente para 178 px em f86, raio de 28% da largura, em um disco halo cinza #E9E9E7 crescendo ⌀240 (f75) → 326 (f86). Quatro quadrados de 92 px (raio 26) giram no sentido anti-horário, desacelerando, e se encaixam em uma cruz no raio da órbita ≈216 em f86: branco (borda de 1px #E3E8EF + sombra fraca) à esquerda, #2F6BFF no topo, #3CC8F0 à direita, #4ED6A0 na parte inferior. f88–100: o ícone encolhe aceleradamente até ≈40 px, os quadrados deslizam para uma linha à sua direita (o branco desliza para trás do ícone), o desfoque aumenta de 0,3 → 6 px.
S3 f101–158, barra de menus + prompt: página branca acima de uma faixa preta na moldura do laptop (y425–475, destaque superior #686866), uma barra de menus azul-marinho escura (y477–538), papel de parede abaixo = gradiente azul-celeste com linhas finas brancas (um círculo grande, duas linhas horizontais, uma vertical, um brilho de quatro pontos em um cruzamento, brilho suave verde-azulado no canto superior direito). Cluster da barra de menus à direita em branco: Wi-Fi, bateria, botões de alternância, a marca do produto em x531–584, três pontos ⌀36 #2F6BFF / #3CC8F0 / #4ED6A0 em x612, 661, 709, "Seg 22 Jun 9:41 AM" 34 px. Entra borrado 3 px e estabiliza em f110. Cursor sobe de baixo (f102), para na marca, pressiona f113–117. A câmera desloca o conteúdo para a direita +125 px f115–130 (mais rápido f118–120). Uma caixa de vidro fosco (vidro branco-azulado sobre o céu, borda superior brilhante, raio 60) surge de baixo da marca f116: a largura atinge o pico de 744 em f126 e se estabiliza em 726x228 por f138 em torno de x196–922, y568–797. O prompt digita de f121 (primeiro "Make" legível) a f150 (concluído) a cerca de 1 caractere/quadro com uma pausa de 1 quadro a cada 2–3 caracteres; cursor sempre visível; três ícones de contorno branco na parte inferior; botão de envio #2F6BFF ⌀51 com uma seta branca para cima. A partir de f136, toda a cena sobe, acelerando em uma inclinação brusca (f158 movendo-se ≈25 px/quadro, desfoque vertical ≈6–8 px) enquanto a página tinge #E6F4FE sobre f154–158.
S4 f159–186, página de respostas: uma página de lição de curso leve (breadcrumb, título, corpo): coluna de texto x120, corpo 47 px Inter 400 cinza #BCBCBA, espaçamento entre linhas 58, uma frase-chave ("quadro por quadro") em preto 600. Aparece borrada e 420 px abaixo, rola para cima com deslocamentos 420, 315, 210, 170, 140, 116, 96, 81 (f166) … 14 (f175) … 0 (f180), depois desce −6 px em f186. Desfoque 24 px (f159) → 1,5 (f165) → 0. Flash #E2F4FE desaparecendo para #FDFDFB em f165. Um cursor apontando diretamente para cima percorre a barra de rolagem e para sob a frase-chave (≈(450,591) f180), depois se move para a direita.
S5 f187–214, cartão: um cartão branco (x203–878, ultrapassa a parte inferior) se eleva sobre a página: imagem da capa 627x536, margem de 24 px, raio 64, uma barra de destaque na parte superior central, legenda semibold 38 px preta, legenda secundária cinza 23 px. Topo da capa y642 (f187) → 456 (f191) → 395 (f196) → 369 (f200) → 348 (f205), depois continua subindo ~4 px/quadro. O desfoque do cartão atinge o pico de 3,8 px em f189, nítido em f201; a página atrás desfoca para ≈2,5 px. Saída f207–214: o cartão encolhe ~5% e sobe enquanto todo o quadro desfoca 1 → 7 px; corte no pico do desfoque.
S6 f215–244, dois cartões: página branca, dois cartões empilhados de 538x348 (raio 57, espaçamento 36) centrados em x540, o cartão superior posicionando-se em y168 por f230, o inferior em y552. Cada um: arte da capa (sem texto incorporado), uma pílula fosca no canto superior esquerdo ("Módulo 3" / "Módulo 5"), um círculo fosco "•••" no canto superior direito e um título grande e em negrito na borda inferior, feito de vidro fosco (uma cópia borrada e clareada da imagem recortada nas letras, cortada pela borda inferior do cartão): "Launch" e "Sound". Ambos entram borrados em 12 px e nítidos em f224; o cartão superior entra 8% maior e se eleva a partir de y264; o cartão inferior se eleva a partir de y927, escalonado atrás dele. Eles sobem 3 px/quadro f230–238, depois aceleram para cima e desaparecem no corte.
S7 f245–300, disco do logotipo: página #FDFDFB, disco ⌀168 #F6F6F6 com a marca escura, sobe para o centro (topo y569 f245 → 491 f250 → 468 f255 → 456 f269) com um borrão vertical no quadro cortado, permanece imóvel f269–287 (o único trecho congelado), depois encolhe acelerando para ⌀123 em f300.
S8 f301–359, cartão final: fundo radial preto (cantos #020204, ≈#272729 ao redor da palavra), a marca denominativa em Inter 600, branco #F3F3F5 com um brilho intenso mais um halo suave e amplo, centralizado (540,540). Largura da palavra: ≈1650 px f301 (borrado horizontalmente, rastros de zoom) → 1350 f302 → 1110 f303 → 1049 f304 → 734 f309 → 678 f311 → 563 f320 → 516 f342 (redução de ≈1 px/quadro) → 492 f350, depois colapsa com suavização de entrada: 450 f355 → 267 f359 com o desfoque aumentando para 3,5 px. O filme termina no meio do colapso.

1. Uma página HTML, 1080x1080, desenhada por seek(t) como uma função pura do número do quadro. Sem transições CSS, sem temporizadores, sem Math.random (apenas hashes com semente). Os frames são registrados como {f0, f1, render(localFrame)}.
2. Cada valor é contínuo no número do quadro (o master 59.94 renderiza meio quadro): anime com tabelas de quadros-chave kf(quadro, [[f, valor],...], ease) e tabelas de consulta por quadro com interpolação linear. Sem Math.floor no movimento.
3. Desfoque: filtro CSS blur para desfoque circular, SVG feGaussianBlur com desvio padrão x/y separado para borrões direcionais. Borrão de zoom no cartão final = 20 a 30 cópias escalonadas e desbotadas da palavra. Vidro fosco = uma cópia desfocada e clareada do que está atrás, recortada para a forma.
4. Cursor: uma seta SVG do macOS (preenchimento preto, contorno branco, sombra suave) com rotação e escala, reutilizada em S1, S3 e S4.
5. Som (sem voz), exatamente 12,075 s: música a 124 BPM, introdução suave, a queda em 2,47 s (batida 5, o corte em f72 precede em 2 frames). Efeitos sonoros sintetizados: impacto suave em 0,10 s; efeitos sonoros com picos nos cortes em 2,402, 3,370, 5,305 e 10,043 s; transições ocorrem exatamente em 6,240 s e 8,175 s; cliques em 2,33 e 3,83 s; toques de teclado muito suaves a cada ~32 ms entre 4,04 e 5,00 s; um brilho suave em 10,05 s. Masterizado para −14 LUFS, pico real de −1 dBTP, sem fade, exceto nos últimos 60 ms.
6. Renderize com Playwright (uma captura de tela por quadro, com as fontes carregadas primeiro), codifique em H.264 yuv420p a 60000/1001 e multiplexe o áudio.

Meça o texto somente após o carregamento das fontes. Um nome de produto longo não caberá onde um nome de 5 letras cabia: dimensione todo o conjunto (espaço do disco, nome, comprimido) para caber na extensão de x474 a x1063, não deixe o comprimido sair do quadro. Um quadrado branco em órbita desaparece na página branca sem uma borda de 1px e uma sombra tênue. Não coloque imagens com seu próprio texto dentro dos cartões S6, ou o título no vidro ficará duplicado. Mantenha os quadros de corte exatos, mesmo onde não estiverem sincronizados com uma batida. Nada congela, exceto S7 f269–287. Tabelas de desfoque pesado podem apagar completamente uma forma: se um quadro parecer vazio, diminua o desfoque até que a forma ainda seja legível.

Peça-me as entradas. Depois, mostre-me 4 imagens estáticas (f40 cabeçalho na janela, f86 ícone de cruz, f150 aviso de conclusão, f230 os dois cartões) antes de renderizar o filme completo.

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.

Prompt retirado de publicar @notdwd.