Skill: Motion Video 3D (Remotion + Three.js + PiP)

Cuándo usar

"haz un video 3D con mi video hablando en la esquina"
"video estilo TikTok cinematográfico sobre [tema]"
"video con fondo 3D y leyendas animadas"
"video con [mi audio/mi video] diciendo X"

Filosofía (REGLAS DE ORO)

El video debe ser CREATIVO y CONTEXTUAL al tema. No basta con 3D genérico. Cada frase del guion debe inspirar un elemento visual único que traduzca el concepto. Ejemplo:

Frase "8 minutos y 20 segundos" → odómetro digital que gira hasta 8:20
Frase "300.000 km/s" → velocímetro HUD de ciencia ficción con aguja
Frase "un avión daría 3 vueltas" → avión orbitando la Tierra con estela
Frase "la luz viaja del Sol a la Tierra" → fotón con lens flare viajando

El usuario exige este nivel de creatividad contextual. NUNCA hagas solo texto estático con fade-in.

Prerrequisitos (verificar antes de comenzar)

Node.js + npm instalados
FFmpeg instalado (brew install ffmpeg)
Whisper-cpp instalado (brew install whisper-cpp) — para sincronizar palabras
FREESOUND_API_KEY en ~/.zshrc (API de SFX obligatoria)
Video/audio del narrador en public/eu.mp4 o public/audio/*.mp3

Si falta alguno, DETENTE y avisa al usuario.

1. Estructura del Proyecto

~/Documents/[nombre-del-proyecto]/ ├── public/ │ ├── eu.mp4 # video del narrador (si hay PiP) │ ├── audio/*.mp3 # audio puro (si no hay video) │ ├── images/[tema]/ # imágenes descargadas (con credits.json) │ └── sfx/ # SFX descargados de Freesound ├── src/ │ ├── three/ # escena 3D (Three.js) │ ├── components/ # Leyendas, HUDs, overlays │ ├── timeline.json # TODOS los timings (fuente de la verdad) │ └── Root.tsx ├── scripts/ │ ├── align-words.py # Whisper → timestamps de palabras │ ├── gen-sfx.mjs # síntesis local (pads, drones) │ ├── fetch-freesound.mjs # OBLIGATORIO: descarga SFX de la API │ ├── finalize.sh # -14 LUFS + faststart │ └── contact-sheet.sh # contact sheet con zonas seguras ├── out/ │ ├── final_[tema].mp4 │ ├── thumbnail.png # portada 1080x1920 │ └── contact_sheet.png └── timeline.json

2. Flujo de Trabajo Obligatorio (en orden)

Fase 0: Briefing

Confirmar con el usuario:

Tema del video
Duración real del audio (nunca cortar el remate)
Paleta (por defecto: negro profundo + color de acento coherente con el tema)
Estilo del fondo 3D (ver sección 3)
PiP (si hay video): posición inferior derecha, x ≤ 940
Leyendas: cinéticas (ver sección 5)

Fase 1: Setup + Whisper

Inicializar/verificar Remotion + @remotion/three + @react-three/fiber + three
Ejecutar scripts/align-words.py para transcribir el audio
Crear timeline.json con timings EXACTOS de cada palabra
DETENERSE Y ESPERAR APROBACIÓN antes de programar escenas

Fase 2: Fondo 3D temático (ver sección 3)

Fase 3: PiP (si hay) + Leyendas + HUDs (ver secciones 4 y 5)

Fase 4: SFX vía Freesound (ver sección 6) — OBLIGATORIO

Fase 5: Render + Mezcla + Contact Sheet + Thumbnail

3. Fondo 3D Dinámico (CREATIVIDAD OBLIGATORIA)

Regla: el fondo NO puede ser estático. Debe tener movimiento continuo y elementos flotantes. Usa el tema para decidir el estilo:

Tema	Fondo 3D
Espacio / Universo	3 capas de estrellas con parallax, nebulosa sutil, planetas en el horizonte
Programación / Tech	Matriz de código flotante, partículas de "bits", circuitos en wireframe, grid animado
iPhone / Minimalista	Partículas de polvo flotantes (lentas, tamaños variados), luz volumétrica suave, estilo Stranger Things upside down
Naturaleza	Hojas/partículas orgánicas flotando, luz de sol filtrada, profundidad con parallax
Ciudad / Urbano	Luces de neón distantes, partículas de lluvia, skyline con parallax
Ciencia / Laboratorio	Moléculas flotando, tubos de ensayo en wireframe, partículas brillantes

Siempre incluir:

Parallax (mínimo 3 capas con velocidades diferentes)
Movimiento de cámara (drift sutil a lo largo de todo el video)
Iluminación volumétrica (luz suave, no plana)
Post-procesamiento (bloom, viñeta sutil)
Colores coherentes con el tema (no usar paleta genérica)

4. PiP (Talking-head) — si hay video

Usar <OffthreadVideo> de Remotion
Aspect ratio exacto (no distorsionar el rostro)
Posición: inferior derecha, PERO respetando zona segura (x ≤ 940)
Estilo: esquinas redondeadas 24px, sombra suave, borde fino
Nunca alterar colores, fondo, aspect ratio ni audio del video original
Scale up solo en momentos de payoff (ej: 1.12x)
Si es solo audio: añadir un "Audio Visualizer HUD" pulsando con la voz en lugar del PiP

5. Leyendas (KINÉTICAS + sin "rectángulo")

Reglas de animación:

Palabra por palabra (no frase por frase) — cada palabra en el frame exacto del habla
Ease-out con overshoot (~0.15s por palabra)
Palabras clave: flash blanco + settle en color de acento + glow + scale up breve
Líneas pre-maquetadas (no dejar que las palabras "salten" de línea)

⚠️ REGLA CRÍTICA: SIN RECTÁNGULOS

NO usar background-color sólido detrás del texto. Para legibilidad, usar SOLO:

text-shadow: 4px 4px 8px rgba(0,0,0,0.9)
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.8))
Opcional: gradient radial ≤ 15% de opacidad detrás de palabras aisladas
NUNCA: <div style="background: rgba(0,0,0,0.7)"> alrededor de la frase

El texto debe flotar sobre el fondo, no parecer una tarjeta.

Posicionamiento:

Centro horizontal
Y entre 1400-1550
Tamaño mínimo: 72px (legible en celular)

6. SFX vía Freesound API (OBLIGATORIO)

El usuario EXIGE que los sonidos se descarguen de la Freesound API. No uses solo síntesis local.

Flujo:

Verificar FREESOUND_API_KEY en ~/.zshrc
Crear/usar scripts/fetch-freesound.mjs para buscar y descargar
Mapa mínimo de SFX (adaptar al tema):

Momento	Tipo	Query en Freesound
Apertura	boot digital suave	"soft digital boot"
Impactos de texto	hit cinematográfico	"cinematic impact hit"
Contador	tick de reloj	"digital counter tick"
Velocímetro	gemido de velocímetro	"engine whine pitch up"
Objeto volador	whoosh de jet	"jet flyby whoosh"
Revelación 3D	riser creciente	"cinematic riser"
Llegada / clímax	boom + campana	"cinematic boom chime"
CTA final	campana suave	"soft notification chime"

Filtrar por CC0 primero; fallback CC-BY (anotar en public/sfx/CREDITS.json)
Guardar en public/sfx/
Sintetizar LOCALMENTE solo lo continuo (space pad, drone, riser largo) vía scripts/gen-sfx.mjs

Mezcla:

Voz: NUNCA procesar (solo +ganancia para alcanzar -14 LUFS, con limiter -1 dBTP)
SFX: ducking -3dB (whooshes), -8dB (booms) — significa bajar el SFX bajo la voz, no la voz
Space pad: -24dB continuo, fade-in 1s, fade-out 2s
Loudness final: -14 LUFS, pico máximo -1 dBTP

7. Zonas Seguras de TikTok (OBLIGATORIO)

Canvas: 1080×1920, 60fps
Área segura: x ∈ [60, 1020], y ∈ [120, 1670]
Barra de acción (derecha): no invadir x > 960
Barra superior: y < 120
Inferior (caption): y > 1670
PiP: nunca superponer x > 940
Siempre validar con contact sheet con overlay de las zonas seguras

8. Checklist Final

9. Manejo de trabas de macOS (Sandbox)

Si Claude Code pierde acceso a la carpeta por "Operation not permitted":

Preparar todos los archivos en scratchpad
Generar script único finish-v2.sh que instala y renderiza
El usuario lo ejecuta manualmente en el terminal
Claude Code luego lee el ffprobe output que el usuario pega de vuelta

Siempre incluir fallback manual al final.

10. Sobre licencias de imágenes (si hay descarga)

PREFERIR Wikimedia Commons (CC0/CC-BY/CC-BY-SA) — siempre verificar licencia
PREFERIR Apple/empresas oficiales (fair use editorial)
EVITAR sitios aleatorios / Pinterest / stock
Guardar credits.json con {filename, source_url, author, license}
Crear LICENSE_CHECK.md antes de descargar, auditando cada una
Si no tiene licencia clara, generar alternativa procedimental con Three.js

Resumen: esta skill transforma cualquier guion en video TikTok cinematográfico con 3D temático, kinetic typography, HUDs creativos, PiP (opcional) y diseño de sonido profesional vía Freesound. La creatividad contextual es OBLIGATORIA — cada frase del guion debe inspirar un elemento visual único.

igoharaujo/remotion-sun-video

¿Qué es remotion-sun-video?

Preguntar en tu IA favorita

Documentación