Video explicativo de pizarra blanca
Una pizarra blanca que se dibuja mientras el narrador habla. La persona sale con el mapa completo en la cabeza.
Lo que hace que el estilo funcione, y no se puede eliminar:
- Todo se dibuja en el momento en que la voz lo menciona. Nada aparece ya listo.
- Un solo lienzo: la cámara se desplaza y lo que ya se explicó permanece en su lugar.
- El alejamiento final muestra el lienzo completo y se convierte en el resumen del video. Solo funciona si el mapa se planifica antes de dibujar.
- Si existe una app o algo real, la grabación de pantalla dentro de una ventana dibujada demuestra lo que el dibujo afirma.
SD a continuación es la carpeta de esta skill. Comandos: node "$SD/scripts/...".
Antes de comenzar
node "$SD/scripts/config.mjs". Sin clave, pídele a la persona una de estas y guárdala sin repetir el valor en el chat:- OpenRouter (openrouter.ai/keys), que proporciona voz y transcripción:
node "$SD/scripts/config.mjs" OPENROUTER_API_KEY=... - ElevenLabs (elevenlabs.io/app/settings/api-keys):
node "$SD/scripts/config.mjs" ELEVENLABS_API_KEY=...
- OpenRouter (openrouter.ai/keys), que proporciona voz y transcripción:
- Se necesita Node 20+ y ffmpeg. Si falta algo: indica cómo instalarlo en su sistema.
- Antes de construir, define: tema, audiencia, duración, idioma y qué debe quedar claro en el video. Una vez que el pedido esté claro, continúa sin preguntar.
El orden de producción
| # | Paso | Resultado |
|---|---|---|
| 1 | node "$SD/scripts/new-project.mjs" <carpeta> | proyecto Remotion |
| 2 | Guion en fragmentos cortos, un tema por fragmento, sin número inventado | script/script.md |
| 3 | Video de más de 1 minuto: 3 muestras (narrate.mjs <carpeta> --samples "primera frase") y la persona elige. Graba en script/voice.json. Prueba corta usa la predeterminada | la voz |
| 4 | node "$SD/scripts/narrate.mjs" <carpeta> | public/audio/, src/data/narration.json |
| 5 | Encadenar los fragmentos en src/sections.ts | línea de tiempo |
| 6 | Mapa del mundo: una región por fragmento, agrupadas por parte del video | constantes R_* |
| 7 | Una región por vez: dibujar, anclar en las palabras, revisar con un still | src/scenes/*.tsx |
| 8 | Cámara y cierre | src/Video.tsx |
| 9 | npx remotion studio src/index.ts para que la persona lo vea, si quiere revisar | ok |
| 10 | Render de un fragmento, revisar, render completo, revisar, loudness | out/video.mp4 |
La escena src/scenes/Example.tsx es solo una plantilla: bórrala y dibuja el lienzo del tema. Cada video tiene su propio dibujo.
Lee references/method.md antes del paso 6. Si hay grabación de pantalla en el video, lee también references/screens.md.
Guion
**s01**
Texto hablado del fragmento, en un solo párrafo.
- Frase hablada, no de texto. Puntuación simple: guion largo y puntos suspensivos crean silencios extraños.
- Número en letras cuando la lectura importa.
- Cada fragmento debe dar lugar a un dibujo. Si no se puede dibujar, reescríbelo.
- Sin fecha en el video si debe perdurar, y todo número necesita fuente.
Revisión: no puedes verlo, así que lee los cuadros
npx remotion still src/index.ts Whiteboard /tmp/f.png --frame=N --scale=0.5
node "$SD/scripts/render.mjs" <carpeta> --frames=0-299
node "$SD/scripts/qa.mjs" sheet <carpeta>/out/video.mp4 24 # revisa: busca fragmento repetido y superposición
node "$SD/scripts/qa.mjs" scan <carpeta>/out/video.mp4 # segundos congelados, cuadro negro, cuadro que parpadea
node "$SD/scripts/qa.mjs" loud <carpeta>/out/video.mp4 # apunta a -14 a -16 LUFS, pico hasta -1 dBTP
El scan mide lo que el ojo percibe: más del 5% congelado, el video parece una diapositiva. Corrígelo antes de entregar, incluso en pruebas, con más elementos por frase y claves de cámara en los detalles; la respiración de la cámara por sí sola cuenta como congelado.
Abre las imágenes. No digas que quedó bien sin haber visto la revisión y medido el audio.
Solo usa efecto de useCurrentFrame: las transiciones y animaciones CSS no se muestran en el render.