madhavsomani/animation-skills

Explicador de Caso (Case File)

Una investigación contada como evidencia: quién, dónde, cuándo y qué dice el registro, con un acento rojo que siempre significa "esto es la evidencia". La tensión proviene de la contención tranquila: sin palabras de hype, sin cortes rápidos. En su lugar, una cámara que nunca deja de moverse, una banda sonora que nunca se queda en silencio, y hechos que aterrizan en las palabras exactas del narrador.

Ejecútalo dentro del skill animated-video de cstack (Remotion; léelo primero) y mantén sus paradas de aprobación, entrega de calidad total y sus cuatro estados de QA separados (técnico, fáctico, creativo, aceptación del propietario). Este skill añade la dirección artística, el vocabulario de planos, la receta de audio y un kit funcional.

• Ejemplo funcional para copiar: template/ (la demo de 30 s xz-backdoor: src/kit/casefile.tsx = el kit, src/scenes/* = una escena por tipo de plano, audio/score.py = la banda sonora). Capturas de pantalla: ../../docs/case-file-explainer/.

Diseña fresco para cada historia. Copia el método y el kit, no los planos de la película xz.

La claridad es lo primero. Nuestro segundo Case File (una historia de ejecución remota de código en PHP) se veía pulido pero era difícil de seguir. Para cualquier video que explique cómo funciona algo, planifícalo con el skill decode-explainer (escalera de conceptos, modelo de juguete primero, leyenda en pantalla, una idea por pantalla, jerga solo después de definirla, escala de tipo ≥ 44 px) y usa este skill solo para el aspecto de sala de evidencias y los beats de investigación.

1. Historia: la columna vertebral de la investigación

Las historias de investigación solo funcionan cuando hay apuestas reales y cada afirmación tiene fuente.

• Gancho (0-3 s): la anomalía, enunciada como un hecho con un número ("sus inicios de sesión eran medio segundo lentos"). El fotograma 0 es la portada: un titular serif más el objeto de evidencia, nunca negro.
• Rastreo (mitad): sigue la evidencia a través de lugares y personas. Un beat cada 2-4 s: sello de fecha, luego tarjeta de persona, luego la ruta en el mapa, luego el objeto que se encontró.
• Revelación: el momento de caída. La música se desvanece y una cosa roja se enciende.
• Registro: una tarjeta de testimonio que cita la fuente primaria real (correo electrónico, testimonio, informe), con el autor y la fecha debajo, más un número de nota al pie. Nunca inventes una cita; marca las reconstrucciones como "reconstrucción".
• Final: un título serif que reafirma el gancho como un veredicto ("Medio segundo."), una regla roja y el número de caso. Mantenlo, luego desvanece a propósito. Añade un CTA de comentario hablado solo cuando el creador lo quiera; si hay un CTA, se dice completo.
• Formato corto: 30-45 s, 4-6 planos. Formato largo (YouTube): capítulos con tarjetas de título serif "Capítulo I".
• Pon cada hecho en NOTES.md con su fuente y estado de verificación antes de que llegue a la pantalla. Los hechos son la puerta de la película.

Variante educativa (incidentes de seguridad): el valor predeterminado para este formato

Hazlos educativos: ayuda a la gente a entender qué es, por qué ocurrió y qué pueden hacer para protegerse. Columna vertebral (~55-60 s, 6 planos):

1. Portada/gancho: sello de fecha, nombre del incidente en serif, sello de gravedad y etiquetas CVE, todo visible en el fotograma 0.
2. Escala: por qué importa (cuánto de la web o cuántos usuarios), con una estadística con fuente y nota al pie.
3. Qué es: un diagrama de tuberías de dónde vive el error (internet, servidor web, motor, aplicación). La solicitud viaja por la ruta roja, la etapa rota se vuelve roja y aparece la consecuencia (ej. un prompt de shell de un extraño). Define la jerga en pantalla ("shell = una línea de comandos en tu servidor").
4. Por qué ocurrió: la causa raíz como una metáfora 3D de arcilla blanca (memoria como bloques: pilas a medio construir, bloques fantasma liberados con punteros supervivientes), más una tarjeta de código benigno de 3 líneas (malloc/free).
5. Cronología + comprobación de realidad: pines con fecha (código afectado más antiguo, primer ataque, fuga, parche), luego una tarjeta de testimonio de una fuente primaria que mantiene el riesgo en proporción.
6. Protégete: un terminal "cómo comprobar" (php -v y la versión corregida), una lista de verificación numerada sincronizada con la VO, y un pie de página para casos extremos (versiones EOL, WAF como solución temporal solo).
7. Veredicto + CTA: un veredicto serif de dos líneas y un CTA de guardar/seguir.

Seguridad educativa: explica la clase de ataque conceptualmente. Nunca muestres payloads, cuerpos de solicitud, offsets ni explotación paso a paso. Nombra la corrección y cómo verificarla.

2. Aspecto (biblia artística)

Elemento	Regla
Fondo	Carbón #0d0d0e con un suave realce radial; viñeta y grano fino siempre activos
Acento	Un rojo #ff2d2a, siempre brillante (triple text-shadow + bloom). Rojo = evidencia: la ruta, la anomalía, el sospechoso, la palabra clave. Nada más tiene color
Contenido	Monocromo: blanco roto #f2f0ea, tenue #8d8b86; fotos de archivo en B/N
Tipografía	Títulos serif (Source Serif 4 700); cuerpo/etiquetas de máquina de escribir (Courier Prime 700); sellos de datos/fecha (IBM Plex Mono 700, mayúsculas espaciadas)
Tarjeta de foto	Foto B/N, borde blanco con bordes ligeramente rasgados, brillo blanco; línea de función en mono mayúsculas; etiqueta de nombre negra con borde blanco rasgado. Persona desconocida = tarjeta borrosa con "NO HAY FOTOGRAFÍAS CONOCIDAS"
Mapa del sistema	Mapa callejero oscuro de líneas grises finas, algunas arterias gruesas y autopistas curvas, marca de agua de distrito enorme en serif espaciado ("D E B I A N"); la ruta se dibuja en rojo brillante con una cabeza blanca; los pines son etiquetas de nombre con un puntero
Diorama	Modelos 3D de arcilla blanca (three.js): bloques blancos mate sobre un suelo gris claro, sombras suaves, niebla. El único objeto rojo ilumina su entorno cuando se enciende
Tarjeta de cita	Grandes comillas serif, reglas blancas, texto mono escrito, palabra clave en rojo, línea de fuente y fecha debajo
Sello de fecha	Reloj rojo brillante + "VIERNES, 29 DE MARZO DE 2024" + una línea de contexto
Notas al pie	[n] en mono tenue en la esquina superior derecha siempre que una afirmación con fuente esté en pantalla

Zonas seguras para 9:16: mantén el contenido en x 60-960 e y 240-1440. Los subtítulos van en y ~1470, en mono sobre una etiqueta oscura con palabras clave en rojo. Nunca los coloques sobre un rostro.

3. Movimiento

• Pocos cortes bruscos. Los documentales largos en este registro cortan solo un puñado de veces en diez minutos. Los planos se enlazan a través del contenido: sumérgete en el sello rojo, que se convierte en el nodo de inicio del mapa; sumérgete en el nodo rojo del mapa, que se convierte en el bloque rojo 3D.
• La cámara nunca se detiene: acercamientos lentos (5-8 % por plano), alejamientos para revelar contexto, y paneos que siguen la ruta. Suaviza cada movimiento al entrar y salir; haz zoom en espacio logarítmico.
• Las tarjetas aparecen con un resorte amortiguado (escala 0.82 a 1); las etiquetas caen 18 px a su lugar; el texto se escribe.
• La ruta roja se dibuja al ritmo del narrador: la cabeza llega a cada nodo en su palabra.
• Cambia algo cada 1.5-3 s y aterriza cada golpe dentro de 2 fotogramas de su palabra.

4. Receta de audio

• La banda sonora nunca se detiene. Sin silencio por debajo de -45 dB en los primeros 5 minutos. Un drone/pad ambiental oscuro en tono menor; apertura en frío solo con música (~12 s en formato largo, ~0 s en Reels).
• Narración encima, música unos 10 dB por debajo. Atenúa desde la envolvente de VO (estilo sidechain). Aumenta la música en los huecos de VO de 0.6 s o más, y bájala justo antes de la palabra de revelación.
• Objetivo para formato largo: aproximadamente -16 LUFS integrados, LRA aproximadamente 6 LU. Tranquilo y denso, no dinámico. Entrega Reels a -14 LUFS / -1.5 dBTP.
• Los efectos de sonido son escasos y físicos: tics de escritura para texto escrito, golpes suaves cuando aterrizan tarjetas y etiquetas, parloteo de datos mientras se dibuja una ruta, un sub-grave en la revelación, un ping de vidrio o campanilla en el veredicto.
• Voz: un narrador tranquilo, grave y mesurado: declarativas cortas, pausas después de los hechos. Usa primero la grabación del propio creador; un clon de voz necesita aprobación de gasto. Un sustituto TTS es solo para borradores y debe etiquetarse.
• audio/score.py en el ejemplo construye toda la banda sonora y la mezcla a partir de las temporizaciones de palabras.

5. Flujo de trabajo

1. Los hechos y fuentes van a NOTES.md; obtener aprobación del guion y la tabla de beats (parada 1 de animated-video).
2. VO, luego words.json (Whisper o los límites de palabras del TTS); corregir divisiones de tokens en audio/fix_words.py.
3. Definir los actos en src/lib.ts a partir de cue(); construir la banda sonora con audio/score.py usando las mismas cues.
4. Copiar src/kit/casefile.tsx y los patrones de escena; renderizar un tablero de fotogramas clave con snap.sh (parada 2: fotogramas de estilo / fotogramas clave).
5. Renderizar a --scale=1.3333333333333333 (1440x2560), luego hacer un loudnorm de dos pasos a -14 LUFS, H.264 High, CRF 14, maxrate 24M, yuv420p rango limitado, etiquetas BT.709, faststart.
6. QA: decodificación completa, blackdetect, sonoridad, una hoja de contactos, fotogramas densos alrededor de cada transición, y Whisper en la VO. Reportar los 4 estados de QA por separado.

Errores encontrados al construir el primero

• Una ejecución de edge-tts para todo el guion va lenta (88 s para 180 palabras). Usa scripts/tts_lines.py (una llamada TTS por línea, huecos controlados, "|" inicia una sección), luego scripts/squeeze.py (acorta pausas de más de 0.45 s y reasigna las temporizaciones de palabras): 68.6 s se convirtieron en 58.5 s.

• cue("Antes"), cue("PHP") y otras palabras repetidas dan problemas. Usa frases de 2 palabras, o pasa nth.

• En el plano general 3D, una sola fila de bloques deja el encuadre vacío. Añade filas traseras (z = -1.6, -3.2, -4.8) para profundidad.

• Mantén la cámara en la ranura de un error hasta unas 6 fotogramas antes del siguiente beat. Moverse antes empuja al sujeto fuera del encuadre a mitad de la frase.

• Una tarjeta superpuesta debe estar en pantalla al menos 1.5 s. Empieza en la palabra anterior, no en la última.

• A través de un navegador compartido, la navegación puede caer en la pestaña que esté activa, incluidas las pestañas del usuario. Selecciona tu propia pestaña primero.

• edge-tts devuelve "March 2024" como un solo límite de palabra. Divídelo antes de chunk(), o los subtítulos fallan.

• cue("It") y otras palabras repetidas necesitan nth, o una frase más larga (cue("It had")).

• Un cubo rojo emisivo más el bloom final se quema a naranja/amarillo. Mantén la emisión en 0.5 o menos, el color base oscuro (#b8120c) y el bloom de la escena en 0.5.

• En 3D vertical, la torre debe sentarse entre la banda de tarjetas (y 300-750) y los subtítulos (y 1470). Aleja la cámara unas 23 unidades para un modelo de 6 unidades de alto.

• El zoom HTML en el terminal recorta sus bordes más allá de aproximadamente 1.12x. Haz zoom al valor leído, no a una esquina.

• Una etiqueta de nodo de mapa más ancha de aproximadamente 300 px se sale del encuadre. Centra debajo del nodo.