tugrulz/kurzgesagt-style

Videos explicativos estilo Kurzgesagt

Este skill es dirección creativa. Decide cómo se ve, se mueve, suena y se lee un video. Los skills remotion-* deciden cómo construirlo en código: lee remotion-best-practices (el enrutador) y remotion-markup antes de escribir cualquier composición, y síguelos cuando un fragmento aquí discrepe.

El género funciona porque hace que las ideas complejas se sientan pequeñas, cálidas y divertidas mientras las imágenes se mantienen claras. La mayoría de las reglas a continuación sirven a eso: formas simples para que la idea sea legible, movimiento suave constante para que se sienta vivo, y grandes saltos de escala para que un número o una distancia se sientan en lugar de leerse.

El estilo en diez reglas

1. Sin contornos. Las formas se definen por relleno, gradiente y una forma de sombra. Los trazos aparecen solo para líneas de diagramas, gráficos y punteros, con un peso uniforme y extremos redondeados.
2. Geometría simple y redondeada. Círculos, cápsulas, rectángulos redondeados, manchas suaves. Si una forma necesita más de una docena de puntos de trayectoria, simplifícala.
3. Fondo saturado y oscuro, acentos cálidos. Un campo de gradiente oscuro (azul marino, añil, berenjena, verde azulado profundo) con uno o dos tonos de acento vívidos. El contraste cálido contra frío atrae la mirada hacia el sujeto.
4. La luz tiene una dirección. Cada objeto es base + sombra (con cambio de tono hacia azul/violeta, no solo más oscuro) + una lámina de brillo. Una dirección de luz por escena.
5. Personajes diminutos y casi sin rostro. Ojos de punto, normalmente sin boca, extremidades rechonchas. La emoción viene de la postura y el movimiento, no del detalle facial.
6. Bordes ocupados, centro claro. Las capas de fondo llevan pequeños detalles de bajo contraste (estrellas, partículas, formas lejanas). El sujeto es audaz y legible en tamaño de miniatura.
7. Nada está nunca estático. Deriva inactiva, cámara lenta, paralaje, parpadeo. Un fotograma fijo se siente muerto.
8. Entrada rápida, salida suave. Los elementos aparecen con un pequeño rebasamiento, escalonados en oleadas. Los fundidos y movimientos de cámara se suavizan gradualmente.
9. La escala es el efecto especial principal. Acércate a través de un objeto a un mundo más pequeño, aléjate para mostrar lo pequeño que era algo, repite iconos hasta que un número aterrice.
10. Las palabras son escasas. La narración lleva el contenido. El texto en pantalla es para etiquetas, números y el remate ocasional.

Flujo de trabajo

Trabaja por etapas con dos puntos de control de aprobación. Los guiones y storyboards son baratos de cambiar y la animación es costosa, así que obtén acuerdo antes de construir.

0. Brief. Pregunta solo lo que falte: tema, audiencia, duración, relación de aspecto, fuente de voz (grabación del usuario, ElevenLabs a través de voiceover.md de remotion-markup, o marcador de posición silencioso), y estado de ánimo. Valores predeterminados: 16:9, 1920×1080, 30 fps, 3-5 minutos.
1. Investigación → research/facts.md. Tabla de afirmación | número | fuente | confianza. Nunca inventes una estadística; marca las estimaciones como estimaciones. El explicador solo es tan bueno como sus datos.
2. Guión → script.md. Lee references/script-and-structure.md. Punto de control: el usuario aprueba el guión.
3. Storyboard → storyboard.md, una fila por toma (plantilla en la referencia del guión). Elige una receta de references/scene-recipes.md para cada toma. Punto de control: el usuario aprueba el storyboard.
4. Biblia de estilo. Copia assets/theme.ts a src/kg/theme.ts. Elige una paleta por acto (un "guión de color"; consulta references/visual-language.md) para que el estado de ánimo cambie a medida que avanza el argumento.
5. Construcción. Primero las primitivas compartidas en src/kg/ (formas sombreadas, campo de estrellas, personajes, etiqueta, cámara), luego un componente por escena en src/scenes/. Lee references/visual-language.md y references/motion-language.md. Usa remotion-create para el andamiaje y remotion-markup para la mecánica.
6. Audio. Primero la narración, luego deriva la duración de cada toma a partir de los tiempos de audio (remotion-captions para los tiempos de palabra, calculateMetadata para la duración dinámica). Añade una banda sonora y un pop/whoosh suave por cada entrada importante (sfx.md de remotion-markup). Mezcla con la narración alrededor de -20 dB RMS, la banda sonora unos 8 dB por debajo, y el pico en o por debajo de -1 dBFS. Los archivos de texto a voz a menudo alcanzan picos de 0 dBFS, así que escala la narración a aproximadamente 0.8 antes de agregar cualquier otra cosa (detalles en references/motion-language.md).
7. QA y renderizado. Renderiza fotogramas fijos en cada golpe, en el fotograma 0, y a cada lado de cada límite de escena. Ejecuta la lista de verificación a continuación, renderiza con remotion-render, luego mide el audio del resultado.

Estructura del proyecto

src/
  kg/theme.ts          paletas, rampas de sombra, preajustes de easing
  kg/primitives/       ShadedSphere, StarField, Character, Label, CameraRig, ...
  scenes/NN-name.tsx   una escena por grupo de tomas del storyboard
  Video.tsx            secuencia las escenas; posee el audio
public/                narración, música, sfx
research/facts.md
script.md
storyboard.md

Notas de entorno

• Windows: mantén la ruta del proyecto corta. Las herramientas que lanza Remotion (esbuild, el renderizador, Chrome sin cabeza) fallan con ENOENT cuando su ruta resuelta supera los 260 caracteres. Es fácil alcanzarlo en AppData o dentro de una carpeta de sesión profunda, donde la ruta también se alarga una vez que el sistema la resuelve. Crea el andamiaje en algo como D:\my-video y renderiza un fotograma fijo antes de construir cualquier cosa.
• El ffmpeg incluido de Remotion es una compilación mínima sin el filtro volumedetect. Para verificar los niveles, decodifica el renderizado a WAV (npx remotion ffmpeg -i out.mp4 -vn -ac 1 -c:a pcm_s16le check.wav) y calcula el pico y RMS en un script corto.

Lista de verificación previa al renderizado

Ejecuta esto sobre fotogramas fijos del inicio, la mitad y el final de cada escena, y sobre el fotograma 0 y los fotogramas a cada lado de cada límite de escena.

• ¿Hay algún contorno en una forma que no sea una línea de diagrama? Elimínalo.
• ¿Cada objeto tiene un lado sombreado y un brillo, iluminado desde la dirección única de la escena?
• ¿Hay como máximo 2 tonos de acento más la familia de fondo en el fotograma?
• ¿El sujeto es legible al 25% del tamaño? Si no, agrándalo o reduce el contraste de la periferia.
• ¿Se mueve algo en cada segundo de la escena (movimiento inactivo, cámara, partículas)?
• ¿Llega un nuevo golpe visual al menos cada 2-4 segundos, generalmente alineado con una oración?
• ¿El texto en pantalla tiene 6 palabras o menos, al menos 36 px a 1080p, en mayúscula y minúscula?
• ¿Cada número en pantalla está en research/facts.md con una fuente?
• ¿Cada brillo es un solo gradiente (sin bandas apiladas), y algo que espera fuera de la pantalla está libre de brillo visible en el fotograma 0?
• ¿La viñeta es clara (alrededor del 35% en las esquinas) y teñida de púrpura, para que los sujetos brillantes no se vuelvan turbios?
• ¿El texto junto a un sujeto que crece se mantiene alejado del tamaño máximo del sujeto, y la caja de un contador encaja con su valor más ancho?
• Después de renderizar: ¿el pico de audio está en o por debajo de -1 dBFS, con la narración claramente por encima de la música?

Barreras de protección

• Originalidad. El aspecto es un género; la identidad del canal no lo es. No uses el nombre, logotipo, intro/outro de Kurzgesagt, ni sus personajes específicos (como su pájaro) en la salida. Diseña personajes originales y una tarjeta final original, y no presentes el video como trabajo del canal.
• Precisión. Un explicador enseña, por lo que los datos con fuente importan más que un fotograma bonito. Manifiesta la incertidumbre en la narración ("los científicos estiman...") en lugar de redondearla, y termina el video con una lista de fuentes.
• Accesibilidad. Añade subtítulos (remotion-captions). Evita destellos más rápidos de 3 por segundo, incluidos los destellos de zoom a pantalla completa. No codifiques series de gráficos solo por color; etiquétalos directamente.
• Temas pesados. Visuales lindos más un tema serio es parte del encanto del género y su riesgo. Para muerte, enfermedad, guerra o pobreza, mantén los visuales simples y los chistes fuera del camino.

Archivos de referencia

Lee esto	Cuándo
references/visual-language.md	Elegir paletas, dibujar formas sombreadas, fondos, personajes, tipografía, composición, recetas de objetos
references/motion-language.md	Escribir cualquier animación: easing, aparición, movimiento inactivo, cámara, paralaje, zoom, gráficos, temporización
references/script-and-structure.md	Escribir la narración, planificar el arco, ritmo, hoja de datos, lista de tomas
references/scene-recipes.md	Planificar cada toma: revelación de escala, multitud de 100, corte, carrera de línea de tiempo, diagrama de proceso, etc.
assets/theme.ts	Punto de partida para tokens de diseño (paletas, rampas de sombra, preajustes de easing)