dolly: video de lanzamiento en Remotion, todos los formatos

dolly: vídeos de producto y motion graphics en código

El vídeo es un proyecto de Remotion: componentes de React renderizados fotograma a fotograma. starter/ junto a este archivo contiene dos vídeos funcionales: Video, un corte de 41 segundos del vídeo de lanzamiento de Termary hecho a partir de grabaciones reales, y Promo, un corte de motion graphics de 25 segundos hecho solo con plantillas. Ambos se renderizan en cualquiera de los 8 estilos y 4 formatos. Los transformas en los del usuario, manteniendo lo que los hace funcionar.

planificar → material (grabarlo, o escanear el del usuario) → construir escenas → revisar los fotogramas → renderizar

No puedes ver vídeo, así que lo revisas renderizando hojas de contacto y leyendo los PNG. Hazlo después de cada cambio: la mayoría de los malos movimientos se ven en una hoja.

Lee solo lo que el trabajo necesita. Las rutas son desde la carpeta de esta skill:

Cuándo	Leer
Grabas el producto en un Mac (el observee lo maneja): una app, un sitio web, el iOS Simulator	references/record-mac.md
El usuario tiene que grabar: Windows, un teléfono real, un dispositivo o cuenta que no puedes manejar	references/record-elsewhere.md
El usuario te da grabaciones que hizo	references/your-footage.md
Una escena construida a partir de una grabación: el kit 3D y los movimientos de cámara	references/camera.md
Un vídeo que no es un lanzamiento de producto: un evento, contratación, un changelog, una historia de datos…	references/agendas.md
Elegir componentes: plantillas, texto, gráficos, dibujos, fondos, transiciones	starter/src/library/CATALOG.md
Algo se renderiza mal, o estás escribiendo un nuevo componente	references/gotchas.md

1. Inicio

<carpeta de esta skill>/new.sh my-video     # verifica Node, copia el starter, instala todo
cd my-video && npx remotion studio         # opcional: el usuario puede revisarlo en localhost:3000

new.sh instala Node con Homebrew si falta, ejecuta npm install (que también genera los efectos de sonido), descarga el Chrome sin interfaz que Remotion usa para renderizar, e indica si observee está instalado. En Windows, ejecútalo en Git Bash, después de winget install OpenJS.NodeJS.LTS. Para un proyecto existente de Remotion 4.0.320+, copia src/kit.tsx, src/look.tsx, src/parts.tsx, src/sequence.tsx, src/backdrop.tsx y src/library/.

Archivo	Qué contiene
src/brand.ts	El producto: nombre, URL, logotipo (en public/), colores de acento y alerta, su estilo, sus fuentes si tiene las suyas
src/look.tsx	Los 8 estilos y 4 formatos, y useLook(), que cada parte lee a través de ellos
src/Video.tsx, src/Promo.tsx	Un vídeo: sus escenas en orden con sus duraciones, y las señales de sonido
src/scenes/	Las escenas basadas en tomas. takes.ts indica dónde están las cosas en las tomas
src/library/	La biblioteca de componentes, una carpeta por elemento; CATALOG.md los lista con sus props
src/sequence.tsx, src/backdrop.tsx	Scenes une las escenas con transiciones; Backdrop dibuja la página del estilo
src/parts.tsx	Lo que va sobre un plano: Caption, Tap, Callout, Speed, Pop
src/kit.tsx	El kit 3D y los movimientos de cámara (references/camera.md)
public/takes/	Las grabaciones. Reemplázalas con las del usuario
scripts/	take.sh graba una toma, scan.mjs (npm run scan) lee grabaciones, sfx.mjs y music.mjs hacen sonido, voice.mjs una voz en off, library.mjs reconstruye el catálogo, check.mjs (npm run check) mide un renderizado, web.mjs (npm run web) hace la copia de subida

Remotion es gratuito para individuos y empresas de hasta 3 personas; las empresas más grandes necesitan una licencia corporativa (remotion.pro). Informa al usuario una vez si esto aplica.

2. Planificar

Lee primero el sitio web del producto, luego acuerda esto con el usuario, preguntando solo lo que no puedas inferir:

• Dónde se reproduce, lo que establece los formatos y la duración. Renderiza cada formato que necesiten; diseña para el principal y verifica los demás.

  Formato	Composición	Tamaño	Para	Duración
  landscape	Video	1920×1080	YouTube, X, LinkedIn, un sitio web, una charla	lanzamiento 45–90 s
  vertical	Vertical	1080×1920	Reels, TikTok, YouTube Shorts, Stories	15–35 s
  square	Square	1080×1080	feeds en X, LinkedIn, Instagram	15–45 s
  portrait	Portrait	1080×1350	feeds de Instagram y LinkedIn (4:5)	15–45 s

  Los feeds se reproducen sin sonido: las palabras cuentan la historia, y los primeros 2 s deben enganchar por sí solos.

• El estilo. Renderiza un fotograma en cada estilo (npm run styles, añade --props='{"frame":420,"format":"vertical"}' para otro fotograma o formato), muéstralo al usuario, y establece brand.style. Sugiere uno basado en la marca: una herramienta de desarrollador oscura → midnight o terminal, una app de consumo → soft o bold, un producto premium o tranquilo → editorial o swiss, un teaser → cinema, un producto creativo o artesanal → paper.

  Estilo	El aspecto
  editorial	Papel claro, un titular serif con una frase de acento en cursiva, cortes duros. Tranquilo y caro: el vídeo de Termary
  midnight	Casi negro con el acento brillando, una sans apretada, palabras que entran en foco, transiciones de zoom
  bold	El acento como página, tipo enorme y pesado, la frase de acento recortada de un bloque, pops elásticos, deslizamientos
  swiss	Blanco roto, tipo negro en una cuadrícula de columnas, el acento usado con moderación, tarjetas cuadradas, cortinillas duras
  soft	Un tinte pastel del acento, tipo redondeado, la frase de acento en una píldora, pops rebotados, revelados redondos
  terminal	Mono todo, titulares escritos con un cursor, scanlines, cortes con glitch
  cinema	Un tráiler: casi negro, una serif grande y tranquila, grano de película, fundidos lentos a negro
  paper	Dibujar con código: tarjetas de papel en una página lavanda suave, una serif ligera con un acento en negrita, giros de tarjeta

• La única frase que el espectador debe recordar, el momento real del producto que lo demuestra, y la llamada a la acción para la tarjeta final (una URL, una descarga, una lista de espera).

• De dónde viene el material. Un producto con interfaz de usuario obtiene material real, que supera cualquier maqueta: lo grabas tú, lo graba el usuario, o el usuario ya lo tiene (la tabla de arriba dice qué leer). Sin acceso al producto, o para un teaser o un video explicativo, constrúyelo a partir de la biblioteca.

Luego escribe las escenas en orden: el problema (el gancho, nunca el logotipo), el producto (el logotipo en un tiempo fuerte), la prueba (el momento real, o características, una métrica, un antes/después), la llamada a la acción (la tarjeta final). Otras agendas mantienen la forma con su propio medio (references/agendas.md). Como máximo 7 palabras en pantalla a la vez, mantenidas 1 s + 0.3 s por palabra. Pon el resumen en un comentario al principio de Video.tsx.

3. Material

Sea cual sea la forma en que llegue, las mismas cosas lo hacen utilizable: pausas (4–5 s de un estado antes y después de cada acción: los planos se cortan de ellas), el producto real (nunca resultados prefabricados de un modo de demostración, nunca datos privados), y momentos que has leído de él. npm run scan lee cualquier grabación: sus pausas, sus cambios y su sonido, con una hoja de sus fotogramas, para que puedas planificar a partir de material que nadie te ha descrito. Esos momentos son los valores at desde los que se reproducen los planos.

4. Construir escenas

Una escena es un componente que llena el fotograma. SCENES en Video.tsx (o Promo.tsx) las lista con sus duraciones; la transición del estilo las une, y una escena puede nombrar la suya propia (transition: 'iris', la que entra en ella). Un whoosh suena bajo cada transición que mueve todo el fotograma (un deslizamiento, un latigazo, un zoom).

La biblioteca (src/library/) contiene cada pieza prefabricada, una carpeta cada una: plantillas (escenas completas), efectos de texto, gráficos, dibujos, partes de voz, fondos y transiciones. Lee src/library/CATALOG.md antes de construir: el resumen de cada elemento, una línea de uso que funciona tal cual, y sus props. Importa desde la biblioteca (import {Stat, Statement} from './library'). Cada elemento lee el estilo a través de useLook(), toma start (el fotograma en el que comienza, desde el inicio de su escena) y, cuando puede salir, exit. npm run gallery renderiza la muestra de cada elemento, etiquetada con su código (--props='{"only":"graphics","style":"bold","format":"vertical"}' lo reduce).

Una plantilla es una escena completa, por lo que va directamente a SCENES:

{name: 'Features', seconds: 4.5, component: () => (
  <Features title="Everything in" accent="one window." items={[{icon: Columns3, title: 'Split panes', text: '…'}]} />
)},

Una escena de una grabación flota la ventana, el panel o el teléfono en 3D bajo un Caption, con la cámara moviéndose sobre él: references/camera.md.

Usar la biblioteca bien.

• Metric, Stat y Quote toman solo números y citas reales, con permiso.
• Los dibujos se tiñen hacia el color de la marca: para una sensación artesanal y humana, y en paper.
• Voz: npm run voice -- script.txt name pronuncia un guion con las voces integradas de Mac o Windows (o usa WAVs grabados) en public/voice/name/ y src/voice/name.ts. Voiceover lo reproduce, voiceTiming/voiceEnd temporizan las escenas con él, y Captions y Waveform lo siguen. Los feeds se reproducen sin sonido: un vídeo narrado aún necesita sus subtítulos. Las voces integradas son para borradores; para un vídeo publicado, graba a una persona o usa una voz para la que el usuario tenga los derechos.
• Las transiciones que el catálogo llama un shader de WebGL son solo acentos: verifica cada fotograma del renderizado final alrededor de una.
• Devuelve lo que un vídeo inventa. Un diseño, un chip o un movimiento que otro vídeo podría usar se convierte en un elemento en la biblioteca del proyecto (una carpeta con el componente, su muestra en <name>.demo.tsx y item.json, luego npm run library), y ofrece al usuario añadirlo también a la propia biblioteca de dolly.

Varias marcas en un proyecto (variantes para clientes, o un vídeo por producto): <LookProvider style="soft" brand={{name, url, logo, accent}}> los establece para todo lo que contiene, y useBrand() lee la marca.

Cada formato. Las escenas leen el fotograma desde useLook(): look.safe (inserciones que las plataformas cubren con sus propios botones: mantén el texto dentro), look.band (la banda de título en la parte superior), look.aim (pásalo a focusOn), look.size (el tamaño del titular), look.tall, y byShape(look, {wide, tall, square}) para elegir un diseño.

5. Gusto

Lo que hace que se vea caro, en cualquier estilo:

• El propio aspecto del producto. Su acento, sus fuentes (brand.fonts), su logotipo, un estilo que le quede bien.
• Un titular en cada plano, en la banda superior, la frase de acento configurada a la manera del estilo.
• Cosas reales, cortadas de cerca. Ventanas enteras, paneles individuales como tarjetas flotantes, el teléfono junto al Mac. Una escena suele ser de dos o tres cortes, y el título cambia con el corte. Recorta apretado alrededor de lo que un push-in enfoca.
• Muestra la entrada. Tap donde se toca algo, Callout o Spotlight alrededor de lo que importa, un Cursor sobre una plantilla, un chip Speed siempre que el material se acelere.
• Sonido en cada giro, y poco más. public/sfx/ting.wav en cada momento en que la historia gira, en el fotograma en que se vuelve legible (no en la línea de compás posterior); click.wav en un toque; whoosh.wav solo bajo movimientos de todo el fotograma (el vídeo reproduce uno bajo una transición que viaja: deslizamiento, latigazo, zoom, giro, como máximo uno cada 8 s), aproximadamente dos por vídeo. Mantén los efectos en aproximadamente 5 por cada 10 s y deja que la música lleve los otros cortes: la pista con licencia del usuario, o npm run music -- <seconds>.
• Evita las señales de diseño generado: texto degradado, degradados de púrpura a azul, cian sobre oscuro, cada tarjeta igual, un efecto en cada palabra, cinco transiciones en un vídeo. Un efecto por idea, un estilo de transición por vídeo (más un acento), los valores predeterminados del estilo primero.

Reglas de movimiento. Verifica cada plano contra ellas.

1. Mueve la cámara, no los objetos. Una trayectoria de cámara por plano; la profundidad da el paralaje.
2. Un movimiento por plano, con una razón: revelar, seguir, o empujar hacia lo que importa.
3. Plano para leer. Mientras hay texto que leer, mira hacia la cámara y se mueve lentamente.
4. Facilita todo. Llega con ease.out, sale con ease.in (más rápido), ease.inOut entre pausas. Rebota solo donde el estilo es rebotado, o en un logotipo.
5. Nunca te detengas por completo. Dale a cada plano una deriva lenta (el segundo argumento de useShot).
6. Mantén el tiempo suficiente para leer, luego corta. En caso de duda, mantén más tiempo y acorta la siguiente escena.
7. Corta en el tiempo fuerte (0.5 s a 120 BPM), y mantén la dirección del movimiento a través del corte: una escena sale por donde llega la siguiente.
8. Moderación. El producto es la estrella: como máximo un movimiento o efecto llamativo por cada 10 s.

Los números que alcanzan los mejores vídeos de lanzamiento (medidos fotograma a fotograma): la imagen se mueve dentro de 0.1 s y la primera palabra se lee en 0.4 s; el producto está en pantalla para la cuarta parte del metraje; algo cambia aproximadamente cada 0.7 s, incluso dentro de un plano largo; el texto que se lee se mueve menos de unos 3 píxeles por fotograma; una pausa diseñada de 1–1.6 s en la afirmación clave, ninguna otra quietud de más de 0.8 s; el momento más grande alrededor del 80% del tiempo de duración, luego una tarjeta final tranquila de aproximadamente 2 s.

references/gotchas.md tiene las trampas: lo que aplana el 3D, lo que rompe el renderizado fotograma a fotograma, los límites del ffmpeg incluido.

6. Revisar

npx remotion still Sheet out/sheet.png                                          # el vídeo, 1 fotograma/s
npx remotion still Sheet out/focus.png --props='{"scene":"NeedsYou","every":6}' # una escena, 5 fotogramas/s
npx remotion still Sheet out/v.png --props='{"format":"vertical","guides":true}' # otro formato, área segura dibujada
npx remotion still Vertical out/f140.png --frame=140                            # un fotograma, tamaño completo
npm run styles && npm run formats                                               # un fotograma en cada estilo / formato

Lee cada PNG. Verifica que:

• los primeros 2 s tengan sentido sin sonido y sin contexto;
• todo lo que se pueda leer esté cuadrado con la cámara y se mantenga (varias celdas casi idénticas en una fila);
• el texto esté dentro del área segura discontinua en cada formato, y el sujeto entre las líneas punteadas;
• nada importante esté recortado por el borde del fotograma, oculto detrás de una capa más cercana, o debajo de un título;
• ningún fotograma esté en blanco o reflejado (la cámara dentro o detrás de algo);
• las celdas vecinas