vikramdevesh/3d-ani-lcs

Vídeo con código y 3D (vídeos y Shorts)

Cada fotograma es una función pura del tiempo, escrita como HTML/CSS/three.js. La misma página es el editor en vivo (se reproduce al instante, no se guarda nada) y la fuente de renderizado (Chromium la captura fotograma a fotograma, ffmpeg la une). El usuario es el director; tú haces el trabajo. No se renderiza nada hasta que hayan visto la versión en vivo.

El flujo de trabajo tiene siete pasos. Realízalos en orden y no te saltes el paso 5.

#	Paso	Lo que produces
1	Configuración	carpeta del proyecto copiada de template/, servidor en ejecución
2	Guión	script.md, luego un plan de tomas: una oración = una toma
3	Voz	voiceover.mp3 + tiempos de palabras, o tiempos estimados si la voz llega después
4	Estilo	el aspecto escrito como números en STYLE.md y construido en el mundo 3D
5	Corrección	revisión del editor en vivo, notas aplicadas, errores repetidos añadidos a references/lessons.md
6	Renderizado	renderizado por fragmentos, unido con audio
7	Subida	opciones de título, descripción, capítulos, sugerencia de miniatura

1. Configuración

• Las herramientas residen en ~/.youtube-video-editor/venv (Playwright Chromium, imageio-ffmpeg, pillow, faster-whisper). Si falta, ejecuta ~/.claude/skills/youtube-video-editor/scripts/setup.sh. Llámalo siempre como ~/.youtube-video-editor/venv/bin/python -I. No hay ffmpeg ni node del sistema en el Mac del usuario.
• Copia template/ a <proyecto>/ dentro de una carpeta que el usuario pueda ver (normalmente trabajan en ~/Downloads). Vídeo 16:9 → index.html + scenes.js. Short vertical → short.html + scenes-short.js (escenario 1080×1920).
• Sírvelo: python3 -m http.server 8766 --bind 127.0.0.1 desde la carpeta del proyecto (ejecútalo con nohup … &), luego abre http://localhost:8766/index.html en el panel del Navegador. Una página file:// se muestra como una instantánea muerta allí, y preview_start con un launch.json no levantó el servidor en este Mac, así que inícialo desde Bash.

2. Guión

• El guión decide el vídeo. Escríbelo en la voz del usuario: oraciones cortas habladas, palabras sencillas, sin tono de libro de texto. Su audiencia son principiantes no técnicos (Low Code Studio). ~150 palabras por minuto; un Short tiene 60–110 palabras.
• Luego planifica las tomas antes de animar: una oración = una escena, y para cada una una línea que diga lo que ve la cámara. Cambiar un plan es gratis, cambiar una animación no.
• ¿Inspirado por otro vídeo? Conserva la estructura y la lección, cambia todos los ejemplos, lo visual y las líneas. Nunca reutilices su metraje, redacción, miniaturas o personajes.

3. Voz

• El usuario graba su propia voz (es parte de la marca) y añade un retrato más tarde. Por lo tanto, la primera pasada no tiene audio: la duración de cada escena se estima a partir de su recuento de palabras vo (WPS/PAD en engine.js).
• Cuando exista voiceover.mp3: conviértelo a wav mono de 16 kHz, ejecuta ~/.claude/skills/youtube-video-editor/scripts/transcribe.py para los tiempos de las palabras, establece dur de cada escena como el espacio entre su primera palabra y la primera palabra de la siguiente escena, y ajusta los valores data-in a las palabras clave. Los tiempos dentro de la escena se estiran automáticamente con la duración de la escena (ritmo escrito → ritmo real), por lo que la mayoría de las escenas solo necesitan dur. Pasa --audio voiceover.mp3 al renderizar.
• En este Mac con i3, whisper small puede ralentizarse cuando la máquina está ocupada. base, beam_size=1, sin marcas de tiempo de palabras es aproximadamente 5 veces más rápido y suficiente para leer una referencia; usa small + marcas de tiempo de palabras solo para la sincronización final.

4. Estilo: números, no adjetivos

"Cinematográfico" no significa nada; cada escena lo interpretaría de manera diferente. Escribe STYLE.md en el proyecto con reglas que puedas verificar, luego constrúyelas en el mundo una vez. Comienza desde references/style-rules.md (el aspecto 3D característico: ángulos de cámara, lente, valores de iluminación, paleta, movimiento, subtítulos). Si el usuario da imágenes de referencia, léelas y convierte lo que ves en esos mismos números. Sus propias referencias, no una copia del vídeo de otro creador.

Los gráficos en movimiento 2D cuestan muchos menos tokens y se rompen menos que el 3D. Usa 3D para tomas donde el espacio, la escala o un viaje importan (el gancho, las tomas del "mundo") y tarjetas 2D para indicaciones, listas, comparaciones y tarjetas de capítulo. Una buena mezcla es aproximadamente una toma 3D de cada tres o cuatro escenas. Un Short puede ser completamente 3D porque solo tiene unas pocas tomas.

5. Corrección: el editor en vivo (nunca lo saltes)

• Abre el editor para el usuario y detente allí. Ellos pidieron esto explícitamente: revisión en el editor en vivo antes de cualquier renderizado completo. El panel lateral muestra la voz en off de cada escena, permite cambiar su duración (±0.5 s) y escribir una nota; Copiar mis notas de revisión pone todo en el portapapeles para que lo peguen de vuelta.
• Antes de entregar, revisa tu propio trabajo: render.py --sheet sheet.jpg da un fotograma por escena. Míralo (divide una hoja alta en 3 recortes para que siga siendo legible), corrige lo que esté mal, repite. Los fallos típicos de la primera pasada están en references/lessons.md. Lee ese archivo antes de construir.
• Cuando la misma nota aparezca en más de una escena, corrige el vídeo y añade una línea a references/lessons.md, para que el próximo vídeo comience con ella resuelta. Este es el objetivo principal del skill.

6. Renderizado

• Solo después de que el usuario apruebe la versión en vivo. render.py --chunks out/chunks --chunk-len 60 luego render.py --join out/chunks final.mp4 [--audio voiceover.mp3]. Para Shorts añade --size 1080x1920 y la URL short.html?render. Una escena incorrecta después → elimina ese chunk_NNN.mp4 y vuelve a ejecutar; solo se vuelve a renderizar esa.
• Velocidad en el i3 (medida): aproximadamente 1 s por fotograma para una escena 3D a pantalla completa en 1080p, porque WebGL sin cabeza se ejecuta en software. Un vídeo de 10 minutos a 30 fps son 18.000 fotogramas, así que planifica 3–5 horas e informa al usuario antes de comenzar. Usa --fps 24 si el usuario está de acuerdo, ejecuta con nohup en segundo plano, mantén el Mac despierto (request_keep_awake) y renderiza como máximo dos procesos de fragmentos a la vez (divide el rango con --start/--end en diferentes carpetas).
• Chromium sin cabeza necesita --use-angle=swiftshader --enable-unsafe-swiftshader para WebGL (ya está en render.py).
• Re-corta sin reconstruir: las escenas son un array, por lo que reordenar o eliminar escenas es una lista de edición. Si la apertura es lenta, mueve la toma más fuerte al índice 0.

7. Subida

Conoces el guión, así que escribe 5 opciones de título (recomienda una), una descripción, capítulos a partir de los tiempos de inicio de las escenas y etiquetas. Sigue ~/.claude/skills/youtube-video-editor/references/youtube-metadata.md. La miniatura es el único lugar donde un modelo de imágenes ayuda: renderiza un fotograma fijo llamativo (render.py --stills), escribe la indicación y deja que el usuario lo genere o lo componga. Cada afirmación en la miniatura debe ser verdadera para el vídeo.

Formato de escena (engine.js)

SCENES.push({
  id: 'cinta', chapter: '2 · Guión', title: 'Caja en la cinta',
  vo: `Tu caja viaja en una cinta.`,
  dur: 4,
  cls: 'z',
  html: `<div class="three abs" style="inset:0"></div>
         <div class="h1" data-in="0.4" data-a="pop">Hola</div>`,
  tick: (t, root) => K.draw3d(root.querySelector('.three'), 1920, 1080, t, 'cinta'),
});

• Declarativo: data-in / data-out (segundos), data-a (up down left right pop fade drop zoom), data-d, data-type (máquina de escribir), data-count="0,2400000", data-w="0,80" (ancho %), data-draw (trazo SVG).
• tick(t) es para cualquier cosa personalizada. Debe depender solo de t: no Date.now(), no Math.random() (usa E.rnd(i)), ni animaciones o transiciones CSS. De lo contrario, el renderizado no coincidirá con la vista previa.
• Kit: K.chat() cuadro de indicación estilo Claude, K.track() rastreador de pasos, K.chapter() tarjeta de capítulo a sangre, K.wave() + K.waveTick(), K.draw3d(contenedor, w, h, t, modo) para una vista 3D, K.snap(canvas, t, modo) para mostrar varias vistas de cámara en una escena (un renderizador WebGL compartido; nunca crees un renderizador por escena).
• El mundo 3D es K.world() en kit.js: construido una vez, update(t, modo) mueve objetos y coloca la cámara. Para una nueva película, reemplaza los objetos y modos de cámara allí; mantén el patrón. examples/workflow-video/ es un vídeo completo de 10 minutos (45 escenas) hecho con este skill. Léelo para ver patrones antes de escribir nuevas escenas.

Dos aspectos: diorama de juguete y mundos narrativos

• kit.js K.world() es el diorama simple de sombreado plano (rápido de construir, bueno para explicaciones y fondos).
• template/worlds.js es el aspecto narrativo más rico que el usuario prefirió después de llamar al diorama "no muy realista": personajes suaves similares a juguetes (person() con cabeza, brazos, piernas animables, más walk()), un domo de cielo degradado, mapeo de tonos ACES fílmico, un sol cálido bajo más luces prácticas cálidas, sprites de brillo aditivos para lámparas, vapor y haces, ventanas con textura de lienzo, niebla para profundidad. Tres mundos completos de 6 segundos están en él (puesto de chai al amanecer, repartidor nocturno, farero); examples/story-samples/ muestra cómo ponerlos en una página. Carga worlds.js después de kit.js y dibuja con K.drawStory(contenedor, w, h, t, nombre).
• El 3D con código no puede ser fotorrealista. Si el usuario pide "ultra realista", dilo claramente y ofrece la opción: vídeo con IA (cuesta créditos, y el vídeo ya no puede afirmar "todo código") o el aspecto narrativo. Luego da 2-3 clips de muestra cortos para elegir antes de construir toda la película en un solo aspecto.
• Dale a cada toma narrativa un personaje haciendo algo con un principio y un final dentro de la toma (camina, se detiene, saluda; levanta una linterna), una etiqueta de nombre y una fuente de luz en movimiento. Eso es lo que se lee como "una historia".

Lista de verificación para Shorts

1080×1920, 20–45 s, una idea. El gancho visible y hablado en menos de 2 segundos, comenzando con movimiento. Subtítulos de 2–5 palabras sobre una pastilla oscura (el texto directamente sobre un cielo 3D brillante es ilegible), dentro del área segura: nada importante en los 220 px superiores o 420 px inferiores. Usa modos de cámara más ajustados (cinta, seguir, héroe) porque los planos generales se vuelven pequeños en vertical. Termina con la recompensa más una línea pidiendo un seguimiento; corta cualquier outro.

Archivos incluidos

• template/: index.html, short.html, engine.js, kit.js, worlds.js, style.css, render.py, escenas iniciales, lib/three.min.js
• examples/story-samples/: la página de clips de muestra de los tres personajes
• examples/workflow-video/: la construcción completa del vídeo "Cómo uso Claude Code para vídeo" (scenes-1/2/3.js + index.html); copia estos junto a los archivos de plantilla para ejecutarlo (las miniaturas en su muro 0:21 no están incluidas)
• references/style-rules.md: el aspecto 3D característico en números
• references/lessons.md: errores ya pagados (lee antes de construir, añade después de cada revisión)