reels-motion

¿Qué hace reels-motion?

Produce un reel vertical (1080×1920, 30 fps, ~40–50 s) con el estilo "Terminal Pop": fondo oscuro con grid, un solo color de acento, texto grande por palabras con una palabra clave en caja de color, una mascota pixel que hace la acción, un contador 01 / 04 y un CTA de palabra clave al final.

Archivos de esta skill (rutas relativas a esta carpeta):

• references/motion_system.md: paleta, tipografía, movimiento, transiciones, composición y ritmo. Léelo antes de diseñar.
• template/: proyecto Remotion completo y funcionando (el reel "Cartuchos" sobre qué es una skill). Úsalo como base; no empieces de cero.
• template/README.md: estructura del proyecto, comandos y ajustes.

Flujo

1. Entender el pedido

Pregunta solo lo que falte: tema, público, @ de la cuenta, palabra clave del CTA y qué se entrega a quien comente, si lleva voz en off (y qué voz de ElevenLabs) y la duración aproximada.

2. Guion y storyboard (muéstralos y espera el OK antes de animar)

• Estructura: hook (≤ 2 s) → 4 secciones con HUD 01–04 → CTA (~4 s).
• Hook: 3 golpes de texto, el último con la palabra clave en caja y una acción de la mascota en ese golpe.
• Frases de voz: ≤ 14 palabras, habladas y no leídas del texto en pantalla. En pantalla, ≤ 6 palabras por frase.
• Mascota: cada sección necesita una acción que explique el concepto (enchufar, elegir, escanear…), no decoración.
• CTA: "Comenta PALABRA y te mando X", con la palabra en caja de acento.

3. Crear el proyecto

cp -r <ruta-de-esta-skill>/template <carpeta-del-usuario>/<nombre-del-reel>
cd <carpeta-del-usuario>/<nombre-del-reel>
npm install

Pide al usuario una ruta corta. En Windows, las rutas largas (más de ~200 caracteres) impiden que arranque el Chrome que usa Remotion para renderizar.

4. Adaptar al tema

• src/config/texts.ts: todos los textos en pantalla y BRAND.handle. [palabras] = caja de acento.
• src/config/voiceover.ts: guion por escena, dividido en blocks (una frase cada uno).
• src/config/theme.ts: color de acento y posiciones.
• src/scenes/S2…S5: son el ejemplo "Cartuchos". Para otro tema, reescribe la acción de cada sección reutilizando components/ (Headline, Appear, Bit, Cartridge, Terminal, Pill, CommentBar, Transitions, Sfx) y lib/anim.ts. Mantén el patrón: cada fase arranca con cue('escena', n, fallback), que es el inicio de la frase n de la voz.
• Bit: la matriz MAP de src/components/Bit.tsx (16×16) define su forma; cámbiala si la cuenta tiene otra mascota.

5. Efectos de sonido

npm run sfx sintetiza los .wav de public/sfx/. Colócalos con <Sfx name="…" at={frame} /> usando las mismas constantes que la animación. Volumen y on/off en src/config/audio.ts.

6. Voz en off (elige una vía)

• API key propia: ELEVENLABS_API_KEY en .env, voice ID en VOICE.voiceId y npm run voiceover. Genera un MP3 por escena y escribe src/config/voiceover.generated.ts con el inicio exacto de cada frase.
• Conector de ElevenLabs en Claude: genera cada escena con el texto exacto de sus blocks unidos y descarga los MP3 a public/voiceover/<reel>/. El conector no da timestamps, así que:
  1. Decodifica cada MP3 a WAV (npx remotion ffmpeg -i x.mp3 -ac 1 -ar 16000 x.wav).
  2. Mide en Node la energía en ventanas de 10 ms y detecta pausas de 80 ms o más.
  3. Asigna cada frase a la pausa más cercana a su posición esperada (proporcional a los caracteres).
  4. Escribe a mano voiceover.generated.ts con duration = fin del habla (sin el silencio final) y blockStarts.
• Sin voz: deja VOICE_TIMINGS = {} y las escenas usan los fallback de cada cue.

7. Ritmo

Cada escena dura lo que su frase + 0,2–0,4 s de respiro hasta la voz siguiente: SCENES.x ≈ (fin del habla + 0,3 s) × 30. Hook ≤ 2 s. El CTA deja ~1,5 s tras la voz para leerlo. La voz nunca se recorta: cada MP3 empieza con su escena y su cola de silencio puede sonar bajo la siguiente. Si una animación queda apretada, simplifícala; no la aceleres.

8. Verificar antes de entregar

1. npx tsc --noEmit.
2. Renderiza fotogramas clave (hook, cada sección y CTA) y míralos: textos que se parten, solapes, zona segura (120 px arriba, 340 px abajo, 64 px a los lados) y que el @ quepa en una línea.
3. Mezcla: renderiza dos pistas WAV por separado (--codec=wav), una con sfxEnabled = false y otra con voiceEnabled = false, y compara su volumen cada 0,1 s. Mientras hay voz, los efectos deben quedar ≥ 10 dB por debajo; si no, baja la ganancia de ese efecto en audio.ts. El ffmpeg de Remotion no trae volumedetect: decodifica a WAV y mide en Node.
4. Render final: npx remotion render ReelCartuchos out/<nombre>.mp4.

9. Miniatura y publicación

• Miniatura: npm run thumbnail (composición Miniatura, frame 29). El contenido debe caber en el recorte 4:5 (y 285–1635).
• Textos: entrega descripción para TikTok (corta, CTA, 3–5 hashtags) e Instagram (valor en pasos, CTA, máx. 5 hashtags), texto alternativo y el mensaje del DM automático para la palabra clave.

Errores conocidos

• Windows, Failed to launch the browser process … ENOENT: ruta demasiado larga. Usa una carpeta corta o --browser-executable=<ruta corta>/chrome-headless-shell.exe.
• Titulares invisibles en un still del frame 0: las entradas empiezan en opacidad 0. Renderiza la miniatura en el frame 29.
• generate-*.ts: requieren Node 22.18+ (TypeScript nativo).