Video Explicativo de Datos (Estilo Tatakye)

Crea un video explicativo corto, con subtítulos en chino, como un único archivo HTML autónomo que el usuario reproduce en un navegador y graba en pantalla.

Para qué sirve esto

Convertir un artículo, ensayo o hallazgo de investigación en un video de 3 a 6 minutos
Estética minimalista negro-dorado "think-piece" (linaje 3Blue1Brown / Veritasium / Tatakye)
Entregables que el usuario quiere publicar en Xiaohongshu / WeChat Video / Bilibili / YouTube
Sin recursos externos — sin fuentes que comprar, sin metraje de archivo, sin problemas de derechos de autor, sin servidor

Antes de escribir una sola línea de código

Preguntas iniciales no negociables — haz estas con AskUserQuestion, no después. Equivocarse significa reescribir.

Tema en una oración: No "de qué trata el artículo" — la afirmación que el video defiende. Si no puedes decirlo en una oración, no tienes un video todavía, tienes una lista de lectura.
La espina dorsal: ¿Qué objeto único en pantalla anclará todo el video? (Consulta la sección "La Espina Dorsal" más abajo — esta es la decisión de diseño más importante, y la que la mayoría de los videos explicativos se equivocan al omitirla por completo).
Duración: 3-4 min (destacados) vs 5-6 min (duración estándar Tatakye) vs 8-10 min (profundo). La duración determina cuántas secciones sobreviven. Para un artículo de 10 secciones que apunta a 5 min, necesitas eliminar el 60-70% de las secciones.
Modo de narración: Solo subtítulos (ritmo basado en texto) vs locución AI vs grabación propia. "Solo subtítulos" es el valor predeterminado: los propios subtítulos se convierten en el ritmo.
Atribución: Cómo acreditar al autor original. "原文 · [Nombre]" en la parte superior derecha es el valor predeterminado limpio. Si tienes una espina dorsal, la atribución va debajo de la espina dorsal, no en lugar de ella.
La conclusión (no es una pregunta retórica): ¿Qué cosa específica se lleva el espectador? Una pregunta reformulada NO es una conclusión. "¿Eres tú?" suena poderoso pero no le da nada al espectador para llevar a casa. Una conclusión real es una lista breve con nombre (2-4 elementos) que pueden repetir al día siguiente. Consulta "Conclusión, no retórica" más abajo.

Nunca te saltes esto. El primer intento casi siempre falla en #1 (tema) y #5 (aterrizaje). Puedes reescribir libremente una vez que estos estén fijados.

La Espina Dorsal — la decisión de diseño más importante

Un gran video explicativo tiene una espina dorsal: un objeto persistente en la pantalla que permanece visible la mayor parte del video, y cada sección ilumina una parte diferente de él.

El video de Tatakye sobre rendimiento bursátil (股市回报) es el ejemplo canónico. La espina dorsal es la fórmula p = E[mx], fijada en la esquina superior derecha desde el 1:00 hasta el 3:30. Cada sección resalta un símbolo — x, luego m, luego π_s — enseñando el significado de ese símbolo. Al final, la fórmula se "desbloquea" en tres conclusiones concretas (x → "qué futuros", m → "qué mundo", π_s → "cuánto esperar").

Por qué funciona esto, y por qué los videos sin espina dorsal se sienten débiles:

La espina dorsal es un ancla visual. Si un espectador mira hacia otro lado y vuelve, sabe inmediatamente "qué estamos descomponiendo ahora".
Convierte un marco abstracto en un objeto físico en la pantalla. La idea tiene coordenadas.
Las etiquetas de capítulo solo pueden decirle al espectador dónde en la estructura se encuentran. La espina dorsal le dice al espectador qué componente de la idea se está explicando — que es una señal más fuerte.
La conclusión al final puede ser literalmente "la espina dorsal, resuelta". Comienzas con una pregunta, construyes cada parte de la espina dorsal y cierras entregando la espina dorsal como respuesta.

Qué hace una buena espina dorsal

Un candidato a espina dorsal debe:

Caber en una línea (para que pueda vivir en una esquina todo el tiempo)
Tener 3-5 componentes nombrados que cada uno se asigne a un ritmo del video
Ser visualmente estable — no una animación, sino un marco de referencia estático
Mantener la tesis — si entiendes cada parte de la espina dorsal, entiendes la pieza

Formas comunes (clasificadas por impacto):

Una ecuación: 工作 = 肌肉 × 心智, p = E[mx], 价值 = 稀缺性 × 关注度
Un diagrama con flechas nombradas: 生产者 → 产品 → 用户, nodos que puedes resaltar uno a la vez
Una proporción o comparación etiquetada: 过去 : 现在 : 未来
Una secuencia corta: 观察 → 假设 → 实验 → 结论

Evitar como espina dorsal:

Un solo número (sin componentes que iluminar)
Una oración larga (demasiado verbosa para una esquina, anula el propósito)
Un gráfico (los gráficos son visuales clave, viven en el centro, no como espina dorsal)

La espina dorsal debe aparecer ANTES de que termine el Acto I y persistir

No dejes caer la espina dorsal al espectador al principio y nunca regreses. No esperes hasta el Acto II para presentarla. La estructura es:

0:00–0:30 Gancho: sin espina dorsal todavía; plantea la pregunta
~0:30 Revelación de la espina dorsal: la ecuación/diagrama aparece en la parte superior derecha
Acto I–III: la espina dorsal permanece, cada acto ilumina un componente
Conclusión: la espina dorsal se disuelve y se convierte en la lista de tres elementos de conclusiones

Resaltado de términos de la espina dorsal (receta visual)

Cada término de la espina dorsal debe tener tres estados:

atenuado (por defecto): color: var(--dim) — gris, presente pero apagado
iluminado (explicándose actualmente): color: var(--gold) + brillo de sombra de texto — inconfundiblemente "estamos aquí ahora"
completado (ya explicado): color: var(--fg) — blanco, enseñado, resuelto

Cuando comienza una nueva sección, degrada el .lit anterior a .done, promueve el nuevo término a .lit. Un término iluminado a la vez. El efecto visual: la espina dorsal se ilumina progresivamente de izquierda a derecha, y al final todo es blanco (completamente enseñado), listo para disolverse en la conclusión.

Estructura narrativa — una afirmación, pocos ritmos

La única regla estricta: la pieza defiende una afirmación, y cada ritmo existe para servirla. Si una sección no impulsa la afirmación o no prepara un ritmo posterior que lo haga, elimínala.

Más allá de eso, la estructura es una herramienta, no una plantilla. Elige la forma que se ajuste a la afirmación:

Tres actos (Gancho → Patrón → Giro → Costo) — bueno cuando la afirmación tiene una inversión sorprendente (como "hemos hecho esto antes, pero esta vez hay un costo")
Problema → Mecanismo → Implicación — bueno para explicar por qué algo funciona como lo hace
Línea de tiempo / acumulación — bueno cuando el punto es la acumulación ("mira hasta dónde ha llegado esto")
Comparación — bueno para "A vs B, y por qué importa"
Pregunta → Intentos → Resolución — bueno para hallazgos de investigación o piezas de investigación
Despliegue de una sola idea — un hecho sorprendente, construido lentamente y luego aterrizado (el video de rendimiento bursátil de Tatakye es esto)

Cómo elegir: di la afirmación de una oración en voz alta. ¿Cuál es el ritmo natural de hacer ese argumento? Esa es tu estructura.

El número de secciones escala con la duración, no con la estructura:

3-4 min → 3-4 ritmos clave
5-6 min → 5-7 ritmos
8-10 min → 8-12 ritmos

Cada ritmo necesita:

Un visual clave (una curva, una comparación, un diagrama, un evento de partículas)
Un número clave O una frase clave
Una transición que gire al siguiente ritmo (no solo "y ahora la sección 2")

Señal de alerta: si tu esquema se lee como "sección 1, sección 2, sección 3..." como una lista plana, estás guiando al usuario a través de una lista de lectura. Comprime o reorganiza para que los ritmos encadenen — cada uno haciendo que el siguiente se sienta inevitable.

Economía de escenas — menos escenas, evoluciones más largas

Un modo de fallo común: hacer de cada sección una nueva escena. Resultado: siete visuales no relacionados seguidos, cada uno de 30 segundos, los espectadores sufren latigazo visual y no recuerdan nada.

El principio Tatakye: un objeto visual, evolucionando durante 2-3 minutos. En el video de rendimiento bursátil, la "cuadrícula del espacio de probabilidad" está en pantalla desde ~0:40 hasta ~2:30 — casi dos minutos. Durante ese lapso:

Aparece solo como líneas ("todos los mundos posibles")
Crecen barras doradas (x, rendimiento en cada mundo)
Las barras se colorean (m, peso de cada mundo)
La fórmula aparece arriba (valor esperado)
Números específicos se superponen (ejemplo concreto: 0.86, +16.9%)
Etiquetas verbales se superponen ("crisis/auge")

Seis iteraciones, un objeto visual. Los ojos del espectador nunca se reinician.

Reglas generales

Objetivo: 3-5 escenas totales para un video de 5 minutos. Más que eso = probablemente cambiar demasiado.
Duración mínima de escena: 60-90 segundos para escenas sustanciales. Menos de un minuto = probablemente pertenece como una capa dentro de otra escena, no como una escena propia.
Prefiere escena-crece-hacia-la-siguiente-escena sobre corte. Ejemplo: un gráfico de doble curva crece un área sombreada entre las curvas, que crece barras que se elevan desde esa área — tres "secciones" de contenido, cero cortes de escena.
Los cambios de escena ocurren en los límites de los actos, no dentro de los actos. Dentro de un acto, usa superposiciones, resaltados, conteos de números, etiquetas — no cambios de escena.

Cuando un cambio de escena SÍ está justificado

Gancho → primera escena de contenido
Acto N → Acto N+1 si la metáfora visual fundamentalmente no puede llevar la siguiente idea
Contenido → conclusión (el final merece un reinicio visual)

Eso es todo. Tres cambios de escena como máximo en un video de 5 minutos.

Conclusión, no retórica

Los grandes videos explicativos terminan con una lista específica y nombrada de 2-4 cosas que el espectador puede llevarse. No una pregunta. No un sentimiento. Una lista.

El video de rendimiento bursátil de Tatakye termina entregándote tres cosas (x, m, π_s) con interpretaciones concretas: "qué futuros comprar, en qué mundo estás, cuánto esperar". El espectador puede repetir esto en la cena esa noche.

Anti-patrones comunes:

"你，是吗？" / "¿Eres tú?" — pregunta reformulada. Se siente poderosa. No enseña nada. El espectador cierra el video, recuerda la vibra, olvida el contenido.
"¿Qué piensas?" — evasión retórica. El video no se comprometió con nada.
"Solo el tiempo lo dirá." — ambigüedad periodística. Mismo problema.
Una sola oración de consuelo. "Ya hemos estado aquí antes." — plano, no procesable.

Cómo se siente una buena conclusión: como desbloquear la espina dorsal. La espina dorsal era A = B × C. La conclusión es "entonces lo que importa son: (1) B, (2) C, (3) la interacción entre ellos". El video literalmente se resuelve en su respuesta.

La pantalla de respuesta de 3 elementos (receta)

     01            02            03
      X             Y             Z
    label         label         label
   caption       caption       caption

Tres columnas verticales, espaciado igual
Los elementos aparecen uno a la vez, con ~1 segundo de diferencia (un sonido por elemento)
Cada elemento: número de índice (01/02/03), emblema de un solo glifo (un carácter chino o símbolo matemático), etiqueta corta (2-4 caracteres), subtítulo de una oración
Mantén 3-4 segundos después de que aparezcan los tres, luego transición de salida
Luego una línea de cierre, que puede ser el gancho reformulado como resuelto: "你，在哪一侧？" funciona DESPUÉS de que hayas nombrado los lados.

Etiquetas de capítulo como señales de contenido

Etiquetas de capítulo débiles: ACT I, ACT II, ACT III — le dice al espectador dónde en la estructura están. No les importa.

Etiquetas de capítulo fuertes: 肌肉 · 第一次外包, 心智 · 第二次外包, × · 相乘, = · 代价, 答案 · 三件事 — cada etiqueta es un término de la espina dorsal o un contenido directo. Leyendo la etiqueta, el espectador sabe inmediatamente qué idea se está descomponiendo ahora.

Regla: la etiqueta del capítulo debe ser una palabra que la espina dorsal resaltaría. Si "ACT II" es tu etiqueta de capítulo pero tu espina dorsal dice "心智", cambia la etiqueta del capítulo a "心智". No dupliques el andamiaje estructural en la etiqueta del capítulo — la estructura es implícita, el contenido es lo que los espectadores necesitan.

Sistema visual (Estilo Tatakye)

Color

--bg:    #0a0a0f   /* NO #000000 — el negro puro se ve muerto en pantalla */
--fg:    #eceae4   /* blanco cálido, 2% de sesgo azul; nunca blanco puro */
--dim:   #8a8a90   /* para etiquetas de ejes y subtítulos */
--gold:  #d4a85a   /* ÚNICO color usado para énfasis */
--red:   #c15b4e   /* solo para estadísticas "negativas" (salarios rezagados) */

Nunca uses más de estos 5. Resiste la tentación de agregar azul/verde para variedad.

Tipografía — aquí es donde los videos mueren

Chino o inglés, elige uno por elemento. Nunca "ACT II · THE PARALLEL · 第二幕 · 现在轮到心智" — eso es redundante, difícil de leer y grita "diapositiva bilingüe hecha por IA". Elige un idioma por etiqueta.
Minimiza las cursivas. Las cursivas en CJK se ven mal en casi todos los navegadores (glifos falsos inclinados). Usa color (var(--gold)) para énfasis, no cursivas.
Tamaños mínimos para visualización móvil:
- Marcas del eje: 17px de línea base (escalado por fontPx())
- Etiquetas del eje: 17-19px
- Etiquetas finales de curva: 19px
- Etiqueta de capítulo (superior izquierda): 1.1rem
- Subtítulo (centro inferior): 1.15rem
- Números destacados (centro): 4.5rem+
- Texto de apertura/cierre mega: 1.9rem+
Serif para números de visualización (EB Garamond fallback → Noto Serif SC). Sans para todo lo demás (Inter → PingFang/Noto Sans).

Arquitectura de información de cuatro capas (firma Tatakye)

Cada escena tiene hasta cuatro capas de texto en posiciones fijas:

Superior izquierda: Etiqueta de capítulo (pequeña, espaciada, atenuada)
Superior derecha: Crédito del autor (pequeño, atenuado)
Centro: Número grande / titular (grande, serif)
Centro inferior: Narración de subtítulos (mediano, sans)
Inferior izquierda cursiva (opcional): Cita académica (恩格斯停滞 · Robert Allen)

Motivos centrales (reutiliza 3-5 en toda la pieza)

No inventes un nuevo visual por sección — elige un conjunto pequeño y varíalos:

Campo de partículas con perspectiva: cuadrícula 120×36, filas lejanas cerca del horizonte, ligera onda sinusoidal
Curva ascendente en el eje de tiempo: plana la mayor parte de X, despegue exponencial; etiqueta anclas de tiempo como palabras narrativas ("ahora", "futuro"), no años específicos (2000 ya es pasado)
Curva descendente con relleno de área: colapso de precios / drenaje de valor
Barras de tiempo horizontales: comparación de longitud proporcional (40 años vs 5 años a escala 1/8)
Lluvia de código: líneas cortas específicas del dominio cayendo, para "la máquina se hace cargo del trabajo cognitivo"
Explosión de puntos/partículas: para momentos de "algo se rompe"

Respiración de cámara

Agrega micro paralaje a cualquier escena estática: camBreath = sin(t*0.14)*6, camSway = sin(t*0.09)*4, aplicado con un multiplicador ponderado por profundidad para que los elementos cercanos se muevan más que los lejanos. Evita la sensación de "marco muerto".

Transiciones de escena

Siempre usa parpadeos a negro entre escenas — nunca cortes bruscos. sceneBlink(cb, {dark:0.45, hold:0.08, light:0.5}): desvanecer a negro en 0.45s → ejecutar cambio de escena → desvanecer de vuelta en 0.5s. Total ~1s por transición. Se siente como cortes de película, no como cambios de diapositiva.

Conteo de números

Cada número grande anima desde 0 → objetivo con easeOutCubic en ~1.1s cuando se revela. Usa <span class="count" data-to="..." data-from="0"></span> y un script corto que actualice requestAnimationFrame.

Audio — tan importante como lo visual

El archivo HTML debe generar su propio audio. Sin archivos de audio externos.

Capas de sonido:

Nota de ambiente baja: un zumbido sinusoidal suave (~55 Hz, 3% de ganancia, ligeramente modulado por LFO) durante toda la duración. Proporciona un suelo.
Armónicos emergentes: cuando comienza una sección clave, surge un acorde mayor suave (C:EG) por encima del zumbido. Desaparece cuando termina la sección.
Golpes de transición: un clic de percusión sintético corto (envolvente 50ms) al inicio/final de cada sección.
Pings de datos: un tono corto (100ms, 880 Hz caída a 440 Hz, con eco) al revelar números clave. Debe sonar como un instrumento de laboratorio, no como una campana.
Silencio: las pausas deben ser audibles. Nunca llenes todo el tiempo con sonido.

Configuración de ganancia (directrices, ajustar sensorialmente):

Zumbido ambiente: -25dB
Armónicos: -18dB
Golpes: -12dB
Pings: -9dB

Evitar: música de fondo (estropea el ritmo), sonidos de UI (clic de botón, tonos de error), sonidos de "naturaleza" (lluvia, pájaros), grabaciones de campo, samples.

Animación de subtítulos (receta)

const subtitleBeats = [
  { text: "我们曾经外包过肌肉", start: 0.0, end: 2.5 },
  { text: "第一次工业革命", start: 2.5, end: 4.8 },
  { text: "现在我们外包心智", start: 4.8, end: 7.2 },
]

Cada subtítulo se desvanece (fade in 0.15s, hold, fade out 0.15s)
Sin animación de escritura de letras: los subtítulos aparecen completos
Sin más de 15 caracteres por línea (2 líneas máximo)
Sin puntuación final (los subtítulos ya son oraciones completas; agregar puntos es ruido de píxeles en la parte inferior de la pantalla)
Los subtítulos DEBEN estar sincronizados con lo que se muestra visualmente. Si el subtítulo dice "ahora mira la curva", debe haber una curva notable en la pantalla.

Sintaxis de marcado del archivo de construcción

Organiza la generación de HTML como un archivo de construcción de Python que produce HTML/JS/CSS en línea. El archivo de construcción debe:

Definir config de escena como una lista de diccionarios, cada uno con duration, subtitleBeats, spine, visuals
Generar funciones de dibujo de Canvas por motivos en lugar de por escena: drawParticleField(ctx, t), drawBars(ctx, t), drawCurve(ctx, t)
Línea de tiempo principal en requestAnimationFrame: elapsed += dt, buscar currentScene, delegar a funciones de dibujo, actualizar audio
No importar nada. Sin NPM, sin CDN. Sin CDATA. Sin polyfills. El archivo debe ser completamente válido como .html servido desde file://

Resiliencia del archivo de salida

El HTML producido debe:

Funcionar sin servidor: ni un solo XHR/fetch/import. Cero solicitudes de red.
Funcionar sin conexión a internet: fuentes incluidas por completo o con respaldo de fuente del sistema. Cero CDN.
Funcionar en Chrome & Safari: sin funciones que fallen en Safari (sin OffscreenCanvas, sin AudioWorklet — usa createOscillator/createGain)
No contener funcionalidad de grabación: el usuario abre el archivo, presiona Grabar Pantalla, presiona Reproducir en la página, espera que termine, presiona Detener Grabar Pantalla. El archivo HTML solo reproduce el video.

Lo que NO se debe hacer (lista de verificación de revisión final)

❌ Sin fetch/import/XHR de ningún tipo
❌ Sin dependencias de terceros (sin CDN, sin NPM, sin fuentes descargadas desde la web)
❌ Sin enlaces a redes sociales (sin "Sígueme", sin íconos de compartir)
❌ Sin logotipos (ni del creador, ni del sujeto, ni del tema)
❌ Sin enlaces patrocinados / afiliados
❌ Sin superposiciones interactivas (sin botones, sin slider de línea de tiempo, sin controles de velocidad de reproducción)
❌ Sin marcas de agua. A menos que el usuario lo solicite explícitamente, no hay texto de marca
❌ Sin texto/TTS generado por IA en los subtítulos — los subtítulos son el texto borrador del video, no la transcripción de una locución. Si el usuario quiere locución, la grabarán ellos mismos.

Liqiuyue9597/data-video-skill

¿Qué es data-video-skill?

Preguntar en tu IA favorita

Documentación