Configurando: Vídeo de lanzamiento fotograma a fotograma

Pídeme: el nombre de mi producto, un logotipo (o deja que dibujes una marca simple), la frase de una línea que el usuario escribe en el cuadro de solicitud, la página que la responde (título + 2-3 oraciones con una frase clave), dos nombres de características para las tarjetas apiladas y una pista de música. Si omito alguno, usa los valores predeterminados: producto "Frame by Frame" dentro de su hub Whop, una marca de visor (cuatro corchetes angulares alrededor de un "FF" en negrita), solicitud "Crea un video de lanzamiento para mi aplicación", una página de lección titulada "2.1 Elige una referencia", tarjetas "Lanzamiento" y "Sonido", y la pista de house gratuita de Mixkit "Rising Forest" ralentizada a 124 BPM.

Un breve vídeo de presentación de producto de 12 segundos, 1080x1080, con una velocidad de fotogramas de 29,97 fps (f0–f359), renderizado a 59,94 fps. Estilo de presentación de Apple: suave, blanco, azul brillante, cristalino. La cámara nunca corta en un fotograma fijo: cada toma entra ya en movimiento (desvanecimiento exponencial, 12–19% de la distancia restante por fotograma) y sale con un movimiento acelerado o una rampa de desenfoque. El desenfoque sigue la velocidad y la dirección en cada movimiento.
Paleta: página #FDFDFB, neblina #B7CFEB, hielo #E6F0FA, azul oscuro #294376 → #769CC2 degradado cielo, azul marino #1E2F52, azules de acento #2F6BFF / #3CC8F0 / menta #4ED6A0, blanco. Tipo: Inter (400/500/600/700). Sin morado, violeta, magenta ni naranja en ninguna parte.
Historia: el encabezado del producto emerge de una neblina azul dentro de una ventana de aplicación clara → un cursor se desliza, gira para mirar hacia donde va, crece al pasar el cursor y hace clic en el logotipo → corte brusco en la caída de la música al icono de la aplicación con cuatro cuadrados orbitando en una cruz → el icono colapsa en una barra de menú de Mac → el cursor hace clic en el icono de la barra de menú, un cuadro de mensaje de vidrio esmerilado salta y el mensaje escribe → inclinación rápida hacia arriba a través de un destello azul claro en la página de respuesta desplazándose a su lugar → una tarjeta se eleva sobre ella → disolución borrosa a dos tarjetas apiladas con títulos gigantes de vidrio esmerilado → disolución borrosa al disco del logotipo solitario → corte brusco a una tarjeta final negra con una marca de texto brillante.
Prohibido: fundidos cruzados, fotogramas congelados (excepto una pausa en S7), kits de interfaz de usuario predeterminados, brillos en el texto de la interfaz de usuario, Math.random, cualquier cosa que parezca una plantilla.

Las coordenadas están en píxeles en el escenario de 1080. Ritmo musical k = 0,048 + 0,4838·ks (124 BPM, un tiempo = 14,5 fotogramas). Los tres cortes bruscos f72, f101, f159 se producen 2 fotogramas antes de un tiempo: conservar estos fotogramas exactos.
S1 f0–71, encabezado + ventana + clic: neblina #B7CFEB desvaneciéndose a #FDFDFB por f28, mantener un brillo azul en el suelo #DBEEFD en la parte inferior. Encabezado en una línea: disco de logotipo ⌀132 (#FBFCFE, borde de 1px #E8E8EA, marca oscura), el nombre del producto (Inter 500), una píldora de cápsula oscura "on Whop" (#2F2E2F, texto blanco); todo el bloqueo abarca x474–1063, la línea central sube y932 (f0) → 776 (f2) → 683 (f5) → 608 (f10) → 546 (f24) → 536 (f37), desplazándose 1 px/fotograma después. El nombre aparece borroso f2, la píldora f4–5 muy borrosa y deslizándose 15 px a la izquierda mientras se enfoca. Una ventana de centro de luz (radio 93, relleno #FCFDFF, banda superior #F1F6FF, brillo interior azul en el suelo) aparece gradualmente a su alrededor: opacidad de 0 a f14, 0,53 f15, 0,7 f19, 1,0 f24; esquina superior izquierda (408,405), se extiende hacia la derecha y la parte inferior. Dentro: una píldora de búsqueda en la banda superior, una columna de iconos a la izquierda (icono de Cursos en (537,739), icono de Chat atenuado en (537,900)), y una tarjeta de curso de (764,700) fuera de marco con su imagen de portada, título y "Curso · 8 lecciones". Cursor (flecha negra de macOS, contorno blanco, 32x39) aparece f27 en (891,393), se desliza hacia la izquierda desacelerando hasta (770,383) f44, gira para apuntar hacia abajo a la izquierda f47–51 mientras se sumerge, aterriza en la parte inferior derecha del disco (629,564) f56 → (587,546) f59 → (555,531) f71; crece ×1.55 al pasar el cursor desde f56; un suave anillo de hielo (#D5F3FF → #F7FEFF, exterior ⌀174) ilumina alrededor del disco desde f53. La cámara hace zoom aproximadamente (540,540): 1.0 f46 → 1.2 f60 acercamiento y alejamiento gradual, mantiene f61, luego se aleja gradualmente acelerando a 1.04 en f71 mientras el cursor presiona (se encoge un 15% f69–71).
S2 f72–100, icono + órbita: icono de aplicación squircle azul marino (#294376 → #1E2F52, marca blanca), 276 px en f72 encogiéndose suavemente a 178 px en f86, radio 28% del ancho, en un disco de halo gris #E9E9E7 creciendo ⌀240 (f75) → 326 (f86). Cuatro cuadrados de 92 px (radio 26) giran en sentido contrario a las agujas del reloj, desacelerando, y se bloquean en una cruz en el radio de órbita ≈216 en f86: blanco (borde de 1 px #E3E8EF + sombra tenue) izquierda, #2F6BFF arriba, #3CC8F0 derecha, #4ED6A0 abajo. f88–100: el icono se encoge acelerando hasta ≈40 px, los cuadrados se deslizan en una fila a su derecha (el blanco se desliza detrás del icono), el desenfoque aumenta gradualmente de 0,3 a 6 px.
S3 f101–158, barra de menú + mensaje: página blanca sobre una banda negra del bisel de la computadora portátil (y425–475, resaltado superior #686866), una barra de menú azul marino oscuro (y477–538), fondo de pantalla debajo = el degradado del cielo azul con un dibujo de línea blanca delgada (un círculo grande, dos líneas horizontales, una vertical, un brillo de cuatro puntas en un cruce, un suave brillo verde azulado en la parte superior derecha). Grupo derecho de la barra de menú en blanco: Wi-Fi, batería, interruptores, la marca del producto en x531–584, tres puntos ⌀36 #2F6BFF / #3CC8F0 / #4ED6A0 en x612, 661, 709, "Lun Jun 22 9:41 AM" 34 px. Entra borroso 3 px y se asienta en f110. Cursor se eleva desde abajo (f102), se posa sobre la marca, presiona f113–117. La cámara desplaza el contenido hacia la derecha +125 px f115–130 (más rápido f118–120). Una caja de vidrio esmerilado (vidrio blanco-azul sobre el cielo, borde superior brillante, radio 60) surge de debajo de la marca f116: el ancho alcanza un máximo de 744 en f126 y se estabiliza en 726x228 en f138 alrededor de x196–922, y568–797. El mensaje escribe desde f121 (primer "Make " legible) hasta f150 (completo) a aproximadamente 1 carácter/fotograma con una pausa de 1 fotograma cada 2–3 caracteres; el cursor siempre está encendido; tres iconos de contorno blanco en la parte inferior; botón de envío #2F6BFF ⌀51 con una flecha blanca hacia arriba. Desde f136, toda la escena se desplaza hacia arriba, acelerando en una inclinación brusca (f158 moviéndose ≈25 px/fotograma, desenfoque vertical ≈6–8 px) mientras la página se tiñe de #E6F4FE entre f154 y 158.
S4 f159–186, página de respuesta: una página de lección de curso ligero (miga de pan, título, cuerpo): columna de texto x120, cuerpo 47 px Inter 400 gris #BCBCBA, paso de línea 58, una frase clave ("fotograma por fotograma") en negro 600. Llega borroso y 420 px bajo, se desplaza hacia arriba con desplazamientos 420, 315, 210, 170, 140, 116, 96, 81 (f166) … 14 (f175) … 0 (f180), luego se arrastra −6 px en f186. Desenfoque 24 px (f159) → 1.5 (f165) → 0. Flash #E2F4FE desvaneciéndose a #FDFDFB en f165. Un cursor que apunta directamente hacia arriba recorre el desplazamiento y se detiene bajo la frase clave (≈(450,591) f180), luego se desplaza hacia la derecha.
S5 f187–214, tarjeta: una tarjeta blanca (x203–878, se extiende por la parte inferior) se eleva sobre la página: imagen de portada 627x536 inset 24 px, radio 64, una barra de agarre de luz en su centro superior, leyenda seminegrita 38 px negro, subtítulo gris 23 px. Portada superior y642 (f187) → 456 (f191) → 395 (f196) → 369 (f200) → 348 (f205), luego continúa desplazándose hacia arriba ~4 px/fotograma. El desenfoque de la tarjeta alcanza un máximo de 3,8 px en f189, nítido en f201; la página detrás se desenfoca a ≈2,5 px. Salida f207–214: la tarjeta se encoge ~5% y se eleva mientras todo el marco se desenfoca 1 → 7 px; Corte en el punto máximo de desenfoque.
S6 f215–244, dos tarjetas: página blanca, dos tarjetas apiladas 538x348 (radio 57, espacio 36) centradas en x540, la tarjeta superior se asienta en y168 por f230, la inferior en y552. Cada una: arte de portada (sin texto incorporado), una píldora esmerilada arriba a la izquierda ("Módulo 3" / "Módulo 5"), un círculo esmerilado "•••" arriba a la derecha, y un título enorme en negrita a lo largo del borde inferior hecho de vidrio esmerilado (una copia borrosa y aclarada de la imagen recortada a las letras, cortada por el borde inferior de la tarjeta): "Lanzamiento" y "Sonido". Ambas entran borrosas 12 px y nítidas por f224; la tarjeta superior entra un 8% más grande y se eleva desde y264; la tarjeta inferior se eleva desde y927, escalonada detrás de ella. Se desplazan hacia arriba 3 px/fotograma f230–238, luego aceleran hacia arriba y se desenfocan en el corte.
S7 f245–300, disco del logo: página #FDFDFB, disco ⌀168 #F6F6F6 con la marca oscura, se eleva hacia el centro (arriba y569 f245 → 491 f250 → 468 f255 → 456 f269) con una mancha vertical en el marco cortado, se mantiene quieto f269–287 (el único tramo congelado), luego se encoge acelerando a ⌀123 en f300.
S8 f301–359, tarjeta final: fondo radial negro (esquinas #020204, ≈#272729 alrededor de la palabra), el logotipo en Inter 600, blanco #F3F3F5 con un brillo ajustado más un halo suave y amplio, centrado (540,540). Ancho de palabra: ≈1650 px f301 (desenfoque horizontal, rayas de zoom) → 1350 f302 → 1110 f303 → 1049 f304 → 734 f309 → 678 f311 → 563 f320 → 516 f342 (reducción de ≈1 px/fotograma) → 492 f350, luego colapsa con entrada suave: 450 f355 → 267 f359 con desenfoque que aumenta a 3,5 px. La película termina a mitad del colapso.

1. Una página HTML de 1080x1080, generada por seek(t) en función del número de fotograma. Sin transiciones CSS, sin temporizadores, sin Math.random (solo hashes con semilla). Los fotogramas se registran como {f0, f1, render(localFrame)}.
2. Cada valor es continuo en el número de fotograma (el maestro 59.94 renderiza medios fotogramas): animar con tablas de fotogramas clave kf(fotograma, [[f, valor],...], ease) y tablas de búsqueda por fotograma con interpolación lineal. No Math.floor en movimiento.
3. Desenfoque: filtro CSS blur para desenfoque circular, SVG feGaussianBlur con desviación estándar x/y separada para desenfoques direccionales. Desenfoque de zoom en la tarjeta final = 20–30 copias escaladas y difuminadas de la palabra. Vidrio esmerilado = una copia borrosa y aclarada de lo que hay detrás, recortada a la forma.
4. Cursor: una flecha SVG de macOS (relleno negro, contorno blanco, sombra suave) con rotación y escala, reutilizada en S1, S3, S4.
5. Sonido (sin voz), exactamente 12.075 s: música a 124 BPM, introducción suave, la caída a los 2.47 s (tiempo 5, el corte f72 lo adelanta por 2 fotogramas). SFX sintetizado: impacto suave 0.10 s; silbidos que alcanzan su punto máximo en los cortes 2.402, 3.370, 5.305, 10.043 s; transiciones que llegan exactamente a los 6.240 s y 8.175 s; clics a los 2.33 y 3.83 s; tics de teclas muy suaves cada ~32 ms durante 4.04–5.00 s; un brillo suave a los 10.05 s. Master a −14 LUFS, pico real −1 dBTP, sin desvanecimiento excepto los últimos 60 ms.
6. Renderizar con Playwright (una captura de pantalla por fotograma, cargando primero las fuentes), codificar H.264 yuv420p a 60000/1001, multiplexar el audio.

Mide el texto solo después de que se carguen las fuentes. Un nombre de producto largo no cabe donde cabía un nombre de 5 letras: escala todo el bloque (espacio del disco, nombre, píldora) para que quepa en el rango x474–1063, no dejes que la píldora se salga del marco. Un cuadrado de órbita blanco desaparece en la página blanca sin un borde de 1px y una sombra tenue. No coloques imágenes con su propio texto dentro de las tarjetas S6, o el título del cristal se duplica. Mantén los marcos de corte exactos incluso donde no se asientan en un ritmo. Nada se congela excepto S7 f269–287. Las tablas de desenfoque fuertes pueden borrar una forma por completo: si un marco parece vacío, reduce el desenfoque hasta que la forma aún se lea.

Pídeme los datos de entrada. Luego muéstrame 4 imágenes fijas (f40 encabezado en la ventana, f86 icono cruz, f150 mensaje de finalización, f230 las dos tarjetas) antes de renderizar la película completa.

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.

Mensaje tomado de correo @notdwd.