Kalem

Kalem: cada escena tiene su propio lápiz

Esta habilidad se ejecuta desde la raíz del repositorio (claude se abre en la carpeta del repo). Todas las rutas son relativas a la raíz del repositorio. El nuevo video se configura dentro de proyectos/<nombre>/.

Los videos hechos con un solo motor se parecen entre sí. Esta habilidad divide el video en escenas, analiza QUÉ HAY DENTRO DE CADA ESCENA y selecciona el motor que mejor la dibuja. El motor es un lápiz: el mismo dibujo se ve diferente con lápiz de grafito que con acuarela.

Qué hay dentro de la escena → qué motor

Dentro de la escena...	Motor	Por qué
Línea dibujada a mano, boceto que se dibuja solo, movimiento de lápiz	Paper.js	El motor que dibuja la línea más suave y natural. Solo para trabajo con lápiz.
Personaje, caminar, levantar la mano, transformación de una forma en otra	Canvas propio (código de dibujo personalizado)	Control total sobre el movimiento y la forma.
Explosión, luz, destello, polvo, miles de partículas pequeñas	PixiJS	Reproduce miles de partículas sin ralentizarse.
Texto en pantalla, números, contador, tarjeta informativa, montaje de noticias	HyperFrames (HTML + GSAP)	Lo más limpio para animación de texto e información.
3D real: cámara girando, luz, sombra, máquina	Three.js	3D real en el navegador.
Fórmula, gráfico, esquema, matemáticas	Manim (Python)	La herramienta de 3Blue1Brown. Si no hay LaTeX, usar Text.

Los asistentes no dibujan escenas, sino que ayudan dentro de un motor:

Tarea	Asistente
Cosas ligeras que caen, se tambalean, saltan	Matter.js
Cosas pesadas que se deslizan, se apilan unas sobre otras	Rapier
Transición entre escenas (125 transiciones listas, paso de página = BookFlip)	gl-transitions (comun/transicion.html)
Algo llega a la pantalla como rebotando	Anime.js
Lluvia de confeti, estrellas, emojis	tsParticles
Reducir modelo 3D	glTF-Transform
Efecto de sonido sincronizado (clic, susurro, golpe)	Tone.js (sonido/sonido.html)

Esta tabla se creó con el gusto de una persona: se probaron 20 herramientas con la misma escena, se observaron y puntuaron. Haz tus propias pruebas y cambia la tabla según tu criterio.

Flujo

1. Dividir en escenas. Divide el video que describe el usuario en 4-8 escenas. Para cada escena escribe una oración en lenguaje cotidiano y selecciona el motor, muéstraselo al usuario en una tabla: "La escena 1 tiene un boceto que se dibuja solo → Hay que dibujarlo con Paper.js." Sin compresión técnica (no "el número corre" sino "dentro de la escena hay un número que aumenta"). Una escena = un motor. Si la escena tiene varias tareas, el motor lo determina la tarea principal que ocupa la pantalla; las tareas secundarias entran como asistentes.
2. Escribir los archivos comunes. <proyecto>/tiempo.json (fps, tamaño, número de fotogramas de transición, lista de escenas y sus fotogramas) y <proyecto>/BRIEF.md (lenguaje visual común, hechos, descripción de cada escena, contrato de entrega). Ejemplo: ejemplo/maquina-voladora/ (si existe).
3. Producir las escenas. La textura de papel, los colores y las tipografías se definen una vez en el BRIEF; cada escena usa los mismos; la consistencia visual del video depende de esto. Cada escena en su propia carpeta: <proyecto>/escenas/<NN-motor>/ → ejecutar.sh, video.mp4, control.png, eventos.json. Las escenas son independientes entre sí y se pueden producir en paralelo (un agente diferente para cada escena).
4. Control. Revisa el control.png de cada escena y algunos fotogramas completos: ¿el texto se desborda?, ¿hay fotogramas vacíos?, ¿los colores siguen el lenguaje común?, ¿el primer fotograma está lleno?.
5. Combinar. python3 combinar.py <proyecto> [--transicion BookFlip] → transiciones + sonido → <proyecto>/salida.mp4. Si quieres mostrar al espectador qué motor dibujó cada escena, añade --etiqueta: en tiempo.json, para cada escena "etiqueta": ["Paper.js", "línea de lápiz que se dibuja sola"] (tercera línea opcional para el asistente), para la primera transición "etiqueta_transicion". En la parte inferior izquierda de cada escena se imprime una pequeña tarjeta del color del papel de cuaderno.
6. Auditoría. Dale a un agente nuevo solo las imágenes de control y el BRIEF, pregúntale: "¿El espectador diría 'eso no puede ser' en algún momento?" Corrige lo que encuentre y luego informa al usuario.

Contrato técnico

• El tiempo viene del número de fotograma. Sin Math.random, aleatoriedad con semilla. Dos ejecuciones deben dar el mismo fotograma.
• Motores de navegador: la página llama a conductor(establecer, fotograma, FOTOGRAMA) en comun/conductor.js, fotograma(f) devuelve un canvas dibujado. Captura: python3 comun/capturar.py <ruta de página> <carpeta de fotogramas> [ancho alto], luego ffmpeg a mp4.
• eventos.json: [{"fotograma": 12, "tipo": "linea|clic|golpe|caida|susurro|destello|ala|contador", "potencia": 0-1}]. Mismo fotograma que el momento visual. El sonido se genera a partir de esto, por lo que el sonido y la imagen nunca se desvían.
• Antes de capturar la página del navegador, prueba el JS con node --check; si hay error de sintaxis, la página nunca se carga y el capturador se detiene tras 60 segundos.
• Manim: si existe .venv-manim/bin/python en la raíz del repo, úsalo (MANIM_PY); si no hay LaTeX, usa Text en lugar de MathTex.
• Sin dibujo de texto en ffmpeg (drawtext); el texto se dibuja dentro del motor.
• Letras turcas (Ç Ğ Ş İ Ö Ü) completas; para mayúsculas usar toLocaleUpperCase('tr').
• Primer fotograma lleno: sin apertura desde negro. Últimos ~15 fotogramas tranquilos (la transición se monta ahí).
• Sin destellos/parpadeos repentinos: el salto de brillo entre fotogramas debe ser pequeño.
• Para video vertical (Reels/Shorts): no coloques elementos significativos en los ~250 px superiores, ~420 px inferiores y ~150 px derechos.

Instalación

./instalar.sh instala los paquetes de los motores (requiere Node 20+, Python 3, ffmpeg, Google Chrome; Manim es opcional: pip install manim).