Vidéo Explicative de Données (Style Tatakye)

Créez une courte vidéo explicative pilotée par sous-titres (chinois) sous forme d'un seul fichier HTML autonome que l'utilisateur lit dans un navigateur et enregistre via capture d'écran.

À quoi cela sert

Transformer un article, un essai ou une découverte de recherche en une vidéo de 3 à 6 minutes
Esthétique minimale noir et or "think-piece" (héritage 3Blue1Brown / Veritasium / Tatakye)
Livrables où l'utilisateur souhaite publier sur Xiaohongshu / WeChat Video / Bilibili / YouTube
Zéro actif externe — pas de polices à acheter, pas d'images libres de droits, pas de problèmes de droits d'auteur, pas de serveur

Avant d'écrire une seule ligne de code

Questions préliminaires non négociables — posez-les avec AskUserQuestion, pas après. Les avoir mal comprises signifie une réécriture.

Thème en une phrase : Pas "ce dont parle l'article" — l'affirmation que la vidéo défend. Si vous ne pouvez pas la dire en une phrase, vous n'avez pas encore de vidéo, vous avez une liste de lecture.
La colonne vertébrale : Quel objet visuel unique ancrera toute la vidéo ? (Voir la section "La Colonne Vertébrale" ci-dessous — c'est la décision de conception la plus importante, et celle que la plupart des vidéos explicatives oublient complètement.)
Durée : 3-4 min (points forts) vs 5-6 min (durée standard Tatakye) vs 8-10 min (approfondi). La durée détermine combien de sections survivent. Pour un article de 10 sections visant 5 min, vous devez supprimer 60 à 70 % des sections.
Mode de narration : Sous-titres uniquement (rythme piloté par le texte) vs voix off IA vs auto-enregistré. "Sous-titres uniquement" est la valeur par défaut — les sous-titres eux-mêmes deviennent le rythme.
Attribution : Comment créditer l'auteur original. "原文 · [Nom]" en haut à droite est la valeur par défaut propre. Si vous avez une colonne vertébrale, l'attribution va sous la colonne vertébrale, pas à sa place.
Le résultat (pas une question rhétorique) : Qu'est-ce que le spectateur emporte spécifiquement ? Une question reformulée n'est PAS un résultat. "Êtes-vous eux ?" semble puissant mais ne donne rien à emporter au spectateur. Un vrai résultat est une courte liste nommée (2 à 4 éléments) qu'il peut répéter le lendemain. Voir "Résultat, pas de rhétorique" ci-dessous.

Ne sautez jamais ces étapes. La première tentative échoue presque toujours sur les points #1 (thème) et #5 (atterrissage). Vous pouvez réécrire librement une fois que ceux-ci sont fixés.

La Colonne Vertébrale — la décision de conception unique la plus importante

Une grande vidéo explicative a une colonne vertébrale : un objet visuel persistant à l'écran qui reste visible pendant la majeure partie de la vidéo, et chaque temps fort éclaire une partie différente de celui-ci.

La vidéo 股市回报 de Tatakye en est l'exemple canonique. La colonne vertébrale est la formule p = E[mx], épinglée dans le coin supérieur droit de 1:00 à 3:30. Chaque section met en évidence un symbole — x, puis m, puis π_s — en enseignant la signification de ce symbole. À la fin, la formule "se déverrouille" en trois points concrets à retenir (x → "quels futurs", m → "quel monde", π_s → "combien de temps attendre").

Pourquoi cela fonctionne, et pourquoi les vidéos sans colonne vertébrale semblent faibles :

La colonne vertébrale est une ancre visuelle. Si un spectateur détourne le regard et revient, il sait immédiatement "ce que nous décomposons actuellement".
Elle convertit un cadre abstrait en un objet physique à l'écran. L'idée a des coordonnées.
Les étiquettes de chapitre ne peuvent dire au spectateur que où dans la structure il se trouve. La colonne vertébrale dit au spectateur quel composant de l'idée est expliqué — ce qui est un signal plus fort.
Le résultat à la fin peut littéralement être "la colonne vertébrale, résolue". Vous commencez par une question, construisez chaque partie de la colonne vertébrale, et terminez en rendant la colonne vertébrale comme réponse.

Ce qui fait une bonne colonne vertébrale

Un candidat pour la colonne vertébrale doit :

Tenir sur une ligne (pour pouvoir vivre dans un coin tout le temps)
Avoir 3 à 5 composants nommés qui correspondent chacun à un temps fort de la vidéo
Être visuellement stable — pas une animation, un cadre de référence statique
Porter la thèse — si vous comprenez chaque partie de la colonne vertébrale, vous comprenez la pièce

Formes courantes (classées par impact) :

Une équation : 工作 = 肌肉 × 心智, p = E[mx], 价值 = 稀缺性 × 关注度
Un diagramme avec des flèches nommées : 生产者 → 产品 → 用户, des nœuds que vous pouvez mettre en évidence un par un
Un rapport ou une comparaison étiqueté(e) : 过去 : 现在 : 未来
Une séquence courte : 观察 → 假设 → 实验 → 结论

À éviter comme colonne vertébrale :

Un seul nombre (pas de composants à éclairer)
Une longue phrase (trop verbeuse pour un coin, va à l'encontre du but)
Un graphique (les graphiques sont des visuels clés, ils vivent au centre, pas comme colonne vertébrale)

La colonne vertébrale doit apparaître AVANT la fin de l'Acte I, et persister

Ne laissez pas tomber la colonne vertébrale sur le spectateur au début et n'y revenez jamais. N'attendez pas l'Acte II pour l'introduire. La structure est :

0:00–0:30 Accroche : pas encore de colonne vertébrale ; posez la question
~0:30 Révélation de la colonne vertébrale : l'équation/le diagramme apparaît en fondu en haut à droite
Acte I–III : la colonne vertébrale reste, chaque acte éclaire un composant
Résultat : la colonne vertébrale se dissout et devient la liste des trois points à retenir

Mise en évidence des termes de la colonne vertébrale (recette visuelle)

Chaque terme de la colonne vertébrale doit avoir trois états :

faible (par défaut) : color: var(--dim) — gris, présent mais atténué
éclairé (actuellement expliqué) : color: var(--gold) + lueur d'ombre de texte — indubitablement "nous sommes ici maintenant"
terminé (déjà expliqué) : color: var(--fg) — blanc, enseigné, réglé

Lorsqu'une nouvelle section commence, rétrogradez le précédent .lit en .done, promouvez le nouveau terme en .lit. Un terme éclairé à la fois. L'effet visuel : la colonne vertébrale s'illumine progressivement de gauche à droite, et à la fin tout est blanc (entièrement enseigné), prêt à se dissoudre dans le résultat.

Structure narrative — une affirmation, peu de temps forts

La seule règle absolue : la pièce défend une affirmation, et chaque temps fort existe pour la servir. Si une section ne fait pas avancer l'affirmation ou ne prépare pas un temps fort ultérieur qui le fait, coupez-la.

Au-delà, la structure est un outil, pas un modèle. Choisissez la forme qui convient à l'affirmation :

Trois actes (Accroche → Schéma → Rebondissement → Coût) — bon quand l'affirmation a un retournement surprenant (comme "nous avons déjà fait cela, mais cette fois il y a un coût")
Problème → Mécanisme → Implication — bon pour expliquer pourquoi quelque chose fonctionne comme ça
Chronologie / accumulation — bon quand le but est l'accumulation ("regardez jusqu'où cela est arrivé")
Comparaison — bon pour "A vs B, et voici pourquoi c'est important"
Question → Tentatives → Résolution — bon pour des découvertes de recherche ou des pièces d'investigation
Dépliage d'une seule idée — un fait surprenant, construit lentement puis atterri (la vidéo 股市回报 de Tatakye est de ce type)

Comment choisir : dites à voix haute l'affirmation en une phrase. Quel est le rythme naturel pour faire cet argument ? C'est votre structure.

Le nombre de sections évolue avec la durée, pas la structure :

3-4 min → 3-4 temps forts clés
5-6 min → 5-7 temps forts
8-10 min → 8-12 temps forts

Chaque temps fort a besoin :

D'un visuel clé (une courbe, une comparaison, un diagramme, un événement de particules)
D'un nombre clé OU d'une phrase clé
D'une transition qui pivote vers le temps fort suivant (pas juste "et maintenant section 2")

Drapeau rouge : si votre plan ressemble à "section 1, section 2, section 3..." comme une liste plate, vous promenez l'utilisateur à travers une liste de lecture. Compressez ou réorganisez pour que les temps forts s'enchaînent — chacun rendant le suivant inévitable.

Économie de scènes — moins de scènes, des évolutions plus longues

Un mode d'échec courant : faire de chaque section une nouvelle scène. Résultat : sept visuels non liés à la suite, chacun durant 30 secondes, les spectateurs ont le tournis et ne se souviennent de rien.

Le principe Tatakye : un objet visuel, évoluant sur 2 à 3 minutes. Dans la vidéo 股市回报, la "grille des espaces de probabilité" est à l'écran de ~0:40 à ~2:30 — près de deux minutes. Pendant cette durée, elle :

Apparaît simplement comme des lignes ("tous les mondes possibles")
Fait pousser des barres dorées (x, gain dans chaque monde)
Les barres sont colorées (m, poids de chaque monde)
La formule apparaît au-dessus (valeur attendue)
Des nombres spécifiques se superposent (exemple concret : 0,86, +16,9%)
Des étiquettes verbales se superposent ("萧条/繁荣")

Six itérations, un seul objet visuel. Les yeux du spectateur ne se réinitialisent jamais.

Règles empiriques

Objectif : 3 à 5 scènes au total pour une vidéo de 5 minutes. Plus que cela = probablement trop de changements.
Durée minimale de scène : 60 à 90 secondes pour les scènes substantielles. Moins d'une minute = probablement fait partie d'un calque dans une autre scène, pas une scène à part entière.
Préférez la scène qui se développe dans la scène suivante plutôt que le cut. Exemple : un tracé à double courbe fait pousser une zone ombrée entre les courbes, qui fait pousser des barres sortant de cette zone — trois "sections" de contenu, zéro cut de scène.
Les changements de scène se produisent aux limites des actes, pas à l'intérieur des actes. À l'intérieur d'un acte, utilisez des superpositions, des surlignages, des compteurs de nombres, des étiquettes — pas des changements de scène.

Quand un changement de scène EST justifié

Accroche → première scène de contenu
Acte N → Acte N+1 si la métaphore visuelle ne peut fondamentalement pas porter l'idée suivante
Contenu → résultat (la fin mérite une réinitialisation visuelle)

C'est tout. Trois changements de scène maximum dans une vidéo de 5 minutes.

Résultat, pas de rhétorique

Les grandes vidéos explicatives se terminent par une liste spécifique et nommée de 2 à 4 éléments que le spectateur peut emporter. Pas une question. Pas un sentiment. Une liste.

La vidéo 股市回报 de Tatakye se termine en vous donnant trois choses (x, m, π_s) avec des interprétations concrètes : "quels futurs acheter, dans quel monde vous êtes, combien de temps attendre." Le spectateur peut le répéter au dîner ce soir-là.

Anti-modèles courants :

"你，是吗？" / "Êtes-vous eux ?" — question reformulée. Semble puissant. N'enseigne rien. Le spectateur ferme la vidéo, se souvient de l'ambiance, oublie le contenu.
"Qu'en pensez-vous ?" — esquive rhétorique. La vidéo ne s'est engagée à rien.
"Seul le temps le dira." — esquive journalistique. Même problème.
Une seule phrase de réconfort. "Nous avons déjà été ici." — plat, non actionnable.

Comment se sent un bon résultat : comme déverrouiller la colonne vertébrale. La colonne vertébrale était A = B × C. Le résultat est "donc ce qui importe, ce sont : (1) B, (2) C, (3) l'interaction entre eux." La vidéo se résout littéralement en sa réponse.

L'écran de réponse en 3 éléments (recette)

     01            02            03
      X             Y             Z
    étiquette     étiquette     étiquette
    légende       légende       légende

Trois colonnes verticales, espacement égal
Les éléments apparaissent un par un, à ~1 seconde d'intervalle (carillon par élément)
Chaque élément : numéro d'index (01/02/03), emblème à un seul glyphe (un caractère chinois ou symbole mathématique), étiquette courte (2-4 caractères), légende d'une phrase
Maintenez 3 à 4 secondes après l'apparition des trois, puis transitionnez
Ensuite une ligne de clôture, qui peut être l'accroche reformulée comme résolue : "你，在哪一侧？" fonctionne APRÈS avoir nommé les côtés.

Étiquettes de chapitre comme signpost de contenu

Étiquettes de chapitre faibles : ACTE I, ACTE II, ACTE III — disent au spectateur où dans la structure il se trouve. Il s'en moque.

Étiquettes de chapitre fortes : 肌肉 · 第一次外包, 心智 · 第二次外包, × · 相乘, = · 代价, 答案 · 三件事 — chaque étiquette est un terme de la colonne vertébrale ou un élément de contenu direct. En lisant l'étiquette, le spectateur sait immédiatement quelle idée est en train d'être décomposée.

Règle : l'étiquette de chapitre doit être un mot que la colonne vertébrale mettrait en évidence. Si "ACTE II" est votre étiquette de chapitre mais que votre colonne vertébrale dit "心智", changez l'étiquette de chapitre en "心智". Ne dupliquez pas l'échafaudage structurel dans l'étiquette de chapitre — la structure est implicite, le contenu est ce dont les spectateurs ont besoin.

Système visuel (Style Tatakye)

Couleurs

--bg:    #0a0a0f   /* PAS #000000 — le noir pur semble mort à l'écran */
--fg:    #eceae4   /* blanc chaud, 2% de biais bleu ; jamais blanc pur */
--dim:   #8a8a90   /* pour les étiquettes d'axe et les légendes */
--gold:  #d4a85a   /* SEULE couleur utilisée pour l'emphase */
--red:   #c15b4e   /* uniquement pour les stats "négatives" (retard de salaires) */

N'utilisez jamais plus de ces 5 couleurs. Résistez à l'envie d'ajouter du bleu/vert pour la variété.

Typographie — c'est là que les vidéos échouent

Chinois ou anglais, choisissez-en un par élément. Jamais "ACTE II · THE PARALLEL · 第二幕 · 现在轮到心智" — c'est redondant, difficile à lire, et crie "diapositive bilingue faite par IA". Choisissez une langue par étiquette.
Minimisez l'italique. L'italique sur du CJK est moche dans presque tous les navigateurs (glyphes faussement inclinés). Utilisez la couleur (var(--gold)) pour l'emphase, pas l'italique.
Tailles minimales pour la visualisation mobile :
- Graduations d'axe : 17px de base (mis à l'échelle par fontPx())
- Étiquettes d'axe : 17-19px
- Étiquettes de fin de courbe : 19px
- Étiquette de chapitre (en haut à gauche) : 1.1rem
- Sous-titre (en bas au centre) : 1.15rem
- Nombres titres (au centre) : 4.5rem+
- Texte d'ouverture/fermeture méga : 1.9rem+
Serif pour les nombres d'affichage (fallback EB Garamond → Noto Serif SC). Sans pour tout le reste (Inter → PingFang/Noto Sans).

Architecture de l'information en quatre couches (signature Tatakye)

Chaque scène a jusqu'à quatre couches de texte à des positions fixes :

En haut à gauche : Étiquette de chapitre (petite, espacée, faible)
En haut à droite : Crédit auteur (petite, faible)
Au centre : Grand nombre / titre (grand, serif)
En bas au centre : Narration sous-titrée (moyen, sans)
En bas à gauche italique (optionnel) : Citation académique (恩格斯停滞 · Robert Allen)

Motifs principaux (réutilisez-en 3 à 5 dans la pièce)

N'inventez pas un nouveau visuel par section — choisissez un petit ensemble et variez-les :

Champ de particules avec perspective : grille 120×36, rangées éloignées près de l'horizon, légère onde sinusoïdale
Courbe ascendante sur axe temporel : plat pendant la majeure partie de X, décollage exponentiel ; étiquetez les ancres temporelles comme des mots narratifs ("现在", "未来") pas des années spécifiques (2000 est déjà passé)
Courbe descendante avec remplissage de zone : effondrement des prix / fuite de valeur
Barres de temps horizontales : comparaison de longueur proportionnelle (40年 vs 5年 à l'échelle 1/8)
Pluie de code : courtes lignes spécifiques au domaine qui tombent, pour "la machine prend le travail cognitif"
Éclatement de points/particules : pour les moments "quelque chose se brise"

Respiration de caméra

Ajoutez une micro parallaxe à toute scène statique : camBreath = sin(t*0.14)*6, camSway = sin(t*0.09)*4, appliquée avec un multiplicateur pondéré par la profondeur pour que les éléments proches bougent plus que les lointains. Évite la sensation de "cadre mort".

Transitions de scène

Utilisez toujours des clignotements noirs entre les scènes — jamais de cuts bruts. sceneBlink(cb, {dark:0.45, hold:0.08, light:0.5}) : fondu au noir sur 0,45 s → exécutez le changement de scène → retour en fondu sur 0,5 s. Total ~1 s par transition. Semblable à des coupes de film, pas des changements de diapositives.

Comptage des nombres

Chaque grand nombre s'anime de 0 à la cible avec easeOutCubic sur ~1,1 s lorsqu'il est révélé. Utilisez <span class="count" data-to="...">

Gestion audio

Pas de musique de fond. L'audio est purement ambiant : un bourdonnement grave (80 Hz sinusoïde, volume 0.03) tout au long, avec des carillons au niveau des articulations (révélations du grand nombre, révélations de la colonne vertébrale, étapes de résultat)
Trois sons de carillon : chimeRise (ton positif, tiers majeur ascendant), chimeFall (ton négatif, tiers mineur descendant), chimeDone (ton de résolution, quinte juste)
Les carillons sont courts (~0,3 s) et calibrés en décibels pour être ressentis plutôt qu'entendus consciemment. Le spectateur ne devrait pas pouvoir fredonner la bande son après la vidéo.

Pièges techniques — n'écrivez pas du code comme si c'était une page web

N'utilisez pas de divs, pas de CSS flex, pas de DOM. Zéro. Faites tout sur un seul <canvas> avec un contexte 2D. La vidéo doit pouvoir être enregistrée proprement sans artefacts de superposition de navigateur.
Le titre de la page n'est pas le titre de la vidéo. Le <title> du document dit "Vidéo Explicative — concepts-clés" ou similaire. Le titre de la vidéo est dessiné sur le canvas dans les deux premières secondes.
Pas de défilement. overflow: hidden sur html, body. Aucun défilement n'est autorisé. Si le contenu ne tient pas sur un seul viewport 16:9, c'est une erreur de conception, pas un problème de mise en page.
Les animations sont paramétrées par performance.now(), pas par requestAnimationFrame implicite. Le code doit pouvoir passer à time *= 1.5 (mode aperçu rapide) sans se casser.
Pas de chemins de polices externes. Les polices sont soit Google Fonts (chargée via Web Font Loader au début de la configuration) soit des polices système. Aucune police chargée après la lecture n'est autorisée — le texte ne devrait pas apparaître en Times New Roman puis se réorganiser une seconde plus tard.
Le support des écrans Retina est obligatoire. Multipliez toutes les coordonnées canvas par window.devicePixelRatio et définissez la taille de la feuille en conséquence.

Taille de feuille et viewport

const W = 1920, H = 1080;
canvas.style.width = `${window.innerWidth}px`;
canvas.style.height = `${window.innerHeight}px`;
canvas.width = W * (window.innerWidth / window.innerHeight > 16/9 ? window.innerHeight / H : window.innerWidth / W) * devicePixelRatio;

Simplification : le canvas s'adapte à la fenêtre tout en maintenant le rapport hauteur/largeur 16:9, non déformé, avec une prise en charge Retina.

Assistance stylistique du code — ceci n'est PAS une bibliothèque de graphiques

Le point de vue à adopter : chaque vidéo est une page HTML unique, écrite à la main, totalement spécifique. Il n'y a pas de framework. Il n'y a pas de bibliothèque d'animations. Il n'y a pas de moteur de rendu de formules (KaTeX/MathJax). Chaque forme, chaque particule, chaque transition est dessinée via Canvas 2D raw.

Cependant, le bloc de balisage style et le bloc script partagent des constantes et utilitaires communs. Ceux-ci sont attendus dans chaque sortie :

// Constantes partagées
const W = 1920, H = 1080;
const GOLD = '#d4a85a', BG = '#0a0a0f', FG = '#eceae4', DIM = '#8a8a90', RED = '#c15b4e';
let t = 0; // temps global en secondes
let ctx, canvas;

// Fonctions utilitaires
function lerp(a, b, t) { return a + (b - a) * t; }
function clamp(v, min, max) { return Math.max(min, Math.min(max, v)); }
function easeOutCubic(x) { return 1 - Math.pow(1 - x, 3); }
function fontPx(px) { return `${px}px`; } // mise à l'échelle en fonction de la fenêtre ?

// Fonctions de respiration de caméra
function camBreath(t) { return Math.sin(t * 0.14) * 6; }
function camSway(t)  { return Math.sin(t * 0.09) * 4; }
function camDrift(t, depth) { return { x: camSway(t) * depth, y: camBreath(t) * depth }; }

Le bloc style doit :

/* Empêche le défilement */
html, body { margin: 0; padding: 0; overflow: hidden; width: 100%; height: 100%; background: #0a0a0f; }

/* Positionnement du canvas */
canvas { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* Pas de survol, pas de curseur personnalisé, pas de barre de défilement */

Résumé du processus de travail pour l'agent

Questions préliminaires : en utilisant AskUserQuestion, obtenez l'affirmation en une phrase, la colonne vertébrale, la durée, le mode de narration, l'attribution et le résultat. N'écrivez pas de code avant d'avoir les six.
Plan de la vidéo : produisez un plan de temps forts sous forme de tableau markdown (temps, section, description du visuel, nombre clé, phrase de sous-titre) — cela devient votre contrat.
Rédigez les sous-titres : écrivez les sous-titres en premier, dans leur intégralité. Ajustez la longueur pour qu'ils tiennent sur 2 lignes au maximum (25-30 caractères par ligne pour le chinois). Les sous-titres définissent le rythme ; les visuels suivent.
Dessinez chaque scène : créez un code de tracé canvas séparé pour chaque scène. Ne les fusionnez pas. Chaque scène a sa propre fonction drawSceneN(t, ctx).
Assemblez et testez : séquencez les scènes dans une boucle, ajoutez des transitions .sceneBlink(), vérifiez le timing du carillon, vérifiez qu'il n'y a pas de divergence de résolution.
Documentation d'exportation : dites à l'utilisateur comment lire et enregistrer : "Ouvrez ce fichier HTML dans Chrome/Edge/Firefox. Il devrait remplir l'écran. Appuyez sur F11 pour le plein écran. Utilisez OBS/QuickTime/etc. pour enregistrer l'écran à 30 ips. Assurez-vous que la résolution de la zone de capture correspond à 16:9 (par ex., 1920×1080)."

Rappel : extraits sonores (courts, rares, précis)

La bande sonore d'une vidéo Tatakye est à 95 % un bourdonnement (grave sinusoïde, volume 0.03). Les 5 % restants sont des carillons à des endroits précis :

Moment	Carillon	Volume
Montée du grand nombre	`chimeRise`	0.4
La colonne vertébrale s'illumine	`chimeRise`	0.35
Rebondissement / tournant	`chimeFall`	0.3
Étape de résultat	`chimeDone`	0.45
Image finale (maintenue)	—	—

Liqiuyue9597/data-video-skill

Qu'est-ce que data-video-skill ?

Demander à votre IA préférée

Documentation