lroe/apple-dracula

Compétence : Animation Explicative Minimaliste — Dracula Dark (Style MinutePhysics / Vidéos Conceptuelles)

Génère des storyboards, des feuilles de timing, des scripts visuels et des prompts de production correspondant au style visuel et au rythme des vidéos explicatives conceptuelles minimalistes dessinées à la main.

---

1. Identité Visuelle & Règles Esthétiques

• Canvas : Fond nuit Dracula (#282A36), zéro dégradé, zéro ombre portée.
• Tracé : Style encre dessiné à la main (craie/monoline avec légère rugosité organique), épaisseur de trait constante (3px–4px), premier plan Dracula (#F8F8F2). Limite basse pour téléphone : aucun trait de diagramme en dessous de 3px en 1080p ; les lignes de sol utilisent 4px.
• Limite typographique basse pour téléphone (master YouTube 16:9 unique) : Aucun texte à l'écran en dessous de 36px en 1080p. Étiquettes secondaires 36–44px, étiquettes clés 48–56px, titres 72–80px. Si une étiquette ne tient pas en 36px, coupez-la ou déplacez ce détail dans la narration plutôt que de la réduire.
• Palette (Dracula) :
  • Base : Fond Dracula (#282A36) + premier plan (#F8F8F2).
  • Surface : Ligne courante Dracula (#44475A) pour les cartes surlignées/actives ; utiliser #313342 pour les panneaux standards et #1E1F29 pour les puits/écrans encastrés.
  • Accent fonctionnel A : Dracula Rouge (#FF5555) — pertes, licenciements, solde négatif, friction.
  • Accent fonctionnel B : Dracula Vert (#50FA7B) — gains, emploi, remplacement, équilibre.
  • Accents de support (à utiliser avec parcimonie) : Rose (#FF79C6), Violet (#BD93F9), Cyan (#8BE9FD), Orange (#FFB86C), Jaune (#F1FA8C).
  • Remplissage neutre : Ligne courante Dracula (#44475A) — remplissages d'objets subtils (bureaux, bâtiments).
  • Remplissage profond : Commentaire Dracula (#6272A4) — uniquement pour les grandes formes remplies, jamais pour le texte du corps.
• Typographie :
  • Style de police : Sans-serif manuscrit propre ou lettrage décontracté (par ex. Caveat, Patrick Hand).
  • Densité de mots : Maximum 1–5 mots par légende. Ne jamais transcrire l'intégralité de la narration à l'écran.
  • Placement : Positionné directement au-dessus, en dessous ou à côté de l'ancrage visuel associé.
  • Pas de texte à faible contraste : Les étiquettes secondaires, les sourcils et les sous-titres doivent rester lisibles sur fond sombre : premier plan Dracula (#F8F8F2) ou gris lavande (#B8B9C5). Ne jamais utiliser le commentaire Dracula (#6272A4) ou un gris délavé pour le texte ; il disparaît sur les projecteurs.
  • Pas d'en-tête de scène en haut à gauche : Ne pas répéter la narration sous forme de titre + sous-titre en haut des scènes de contenu. La narration porte la phrase ; le diagramme ne porte que de courtes étiquettes fonctionnelles. Cela évite le « ping-pong visuel » lire en haut à gauche, puis regarder au centre.
  • Les cartes de chapitre sont la seule exception : un numéro de chapitre + un motif unique peuvent être utilisés comme transition plein écran. Gardez-les rares et n'ajoutez jamais de paragraphe.

---

2. Conception des Personnages & Métaphores

• Personnages : Figures simples en bâtons ou en haricots. Visages minimaux (yeux en points, bouche neutre/subtile). Distinctions faites via des accessoires simples (chapeau, bureau, téléphone).
• Métaphores Conceptuelles :
  • Tâches/Emplois : Amas circulaires, contours pointillés apparaissant/disparaissant.
  • Macroéconomie : Balances de pesée, graphiques linéaires 2D, grilles de points (ex : 1 000 points).
  • Institutions : Dessin au trait géométrique de bâtiments de base, cadres de porte représentant l'accès/les postes vacants.

---

3. Règles de Tempo, Synchronisation & Rythme

• Déclencheur de Synchronisation Vocale : Les éléments visuels se dessinent ou apparaissent exactement sur la syllabe où ils sont prononcés.
• Échelonnement Séquentiel : Décomposer les concepts complexes en composants visuels discrets introduits un par un (ex : Tâche 1 $\rightarrow$ Tâche 2 $\rightarrow$ le bras du DAB retire la Tâche 1).
• La Règle de « Respiration » (Cruciale) :
  • Ne jamais transitionner immédiatement après l'apparition d'un élément.
  • Maintenir le cadre complété pendant 1,5 à 3,0 secondes ou plus si nécessaire après la fin de la narration sur ce point. Nous devons nous assurer que l'utilisateur a le temps de tout assimiler.
  • Les spectateurs ont besoin de temps pour lire les légendes, enregistrer la relation et absorber la compréhension avant que le mouvement ne reprenne.
• Temps de Traitement Minimum (règle stricte) :
  • La révélation visuelle finale d'une scène doit avoir au moins 2,0 secondes de temps d'écran avant le cut. Si la narration rend cela impossible, déplacez la révélation plus tôt lorsqu'elle est contextuelle, ou prolongez la scène jusqu'à la prochaine pause naturelle.
  • Ne jamais couper sur le même mot qui complète un diagramme.
  • Si la dernière ligne de narration n'est qu'une transition (« passons aux chiffres », « les adaptateurs résolvent ça »), déplacez ce texte dans la scène suivante au lieu de le laisser 0,1–0,8 s à l'écran.
  • Les scènes denses (diagrammes multi-parties, mathématiques, architecture) nécessitent que l'état final soit maintenu 2,5–3,5 s. Simplifiez la dernière mesure plutôt que de précipiter le cut.
• Transitions = fondu court à travers le fond Dracula (règle stricte) :
  • Utilisez un fondu de 4 à 6 images à travers #282A36 à 30 ips (0,13–0,2 s). N'utilisez pas de balayage de gauche à droite ; cela rend le cut mécanique.
  • Pré-rollez le premier visuel de la scène suivante pour que l'intervalle sombre ne soit qu'un clin d'œil, jamais une scène vide. N'exposez jamais un canevas vide pendant plus de ~0,2 s.
  • Si une scène a vraiment besoin d'une carte de chapitre, gardez un motif à l'écran pour que la carte ne soit jamais une simple diapositive de texte vide.
  • Vérifiez avec un arrêt sur image au début de la scène + 0,4 s. S'il est vide à plus de ~80 %, déplacez le premier visuel plus tôt.

---

4. Composition & Espace Négatif

• Espace Négatif : Gardez 60 % à 80 % du canevas vide en permanence.
• Ligne de Sol / Ligne de Base : Ancrez les figures et les bâtiments sur une ligne directrice horizontale ininterrompue en bas.
• Isolement du Point Focal : Gardez 1 zone de focalisation active par temps (gauche, centre ou droite). N'animez pas simultanément plusieurs quadrants non liés.
• Transitions : Fondu court à travers le fond Dracula #282A36 (4–6 images), panoramique latéral le long de la ligne de sol, ou passage soudain au noir. Pas de balayage de gauche à droite, de zooms flashy ou de rotations.
• Gardez une taille de police grande.

---

5. Workflow de Génération de Storyboard

Lorsqu'un script de narration ou un sujet conceptuel est fourni :

1. Décomposition au Niveau des Tâches : Segmentez la narration en séquences visuelles de 3 à 7 secondes.
2. Attribution de Métaphore Visuelle : Assignez des métaphores concrètes et minimales aux affirmations économiques/techniques abstraites.
3. Sélection du Texte à l'Écran : Sélectionnez $\le 3$ mots d'ancrage par temps pour l'accentuation à l'écran.
4. Allocation du Tempo & du Maintien : Marquez les points de synchronisation exacts ([SYNC]) et les durées de pause/maintien ([HOLD: Xs]).

---

6. Modèle de Sortie

Pour chaque scène vidéo, formatez la sortie comme suit :

### Scène [Numéro] : [Titre de la Scène]
**Horodatage Audio :** [MM:SS - MM:SS]
**Narration :** « [Segment de transcription exact] »

* **Description Visuelle :** (1 à 2 phrases sur la disposition et les éléments visuels)
* **Texte à l'Écran :** « [Texte exact] » | Position : [ex. Haut-Centre] | Couleur : [ex. Dracula Rouge]
* **Séquence d'Animation :**
  1. `[00:00.0 - Mot]` Dessiner [Élément A] sur la ligne de base.
  2. `[00:02.0 - Mot]` Fondu/glissement de [Élément B] dans [Élément A].
  3. `[00:03.5 - Mot]` L'étiquette apparaît avec un petit rebond.
* **Maintien Post-Animation :** [X,X secondes] (Maintien de l'image fixe pour assurer la compréhension avant la transition)
* **Transition Sortante :** [Cut / Panoramique sur la Ligne de Sol vers la Gauche / Fondu au Noir]

1. Moteur de Tracé & Métaphores : Rough.js

• Pourquoi : Vous ne pouvez pas compter sur des SVG statiques si vous voulez le rendu organique dessiné à la main de MinutePhysics. Rough.js est une bibliothèque légère canvas/SVG qui prend des formes géométriques, des lignes et des chemins et les rend avec une « rugosité », un « bombement » et des traits de crayon esquissés réglables.

• Amabilité pour LLM : Très élevée. Au lieu de coordonnées de spline complexes, le LLM appelle simplement :

  rc.line(x1, y1, x2, y2, { roughness: 1.5, stroke: '#F8F8F2', strokeWidth: 3 });
  rc.circle(x, y, diameter, { fill: '#50FA7B', fillWeight: 3, roughness: 1.2 });
  

2. Runtime d'Animation & Tempo : Remotion (React + TypeScript)

• Pourquoi :
  • Contrairement aux animations CSS/navigateur traditionnelles qui peuvent perdre des images, Remotion rend image par image (fps = 30 ou 60).
  • Dispose de hooks intégrés comme interpolate() et spring() pour les apparitions et les tracés linéaires.
  • Gestion native du timing audio via useCurrentFrame().
• Implémentation de l'Effet « Dessin Progressif » : Pour les traits SVG, un LLM anime strokeDashoffset de la longueur totale du chemin à 0.

3. Typographie : Google Fonts (Caveat ou Patrick Hand)

• Intégrez les polices directement via @remotion/google-fonts ou local @font-face.
• Définissez le style strictement à #F8F8F2 avec un maximum de 1 à 5 mots par légende.

4. Pipeline de Synchronisation Audio (Amont) : OpenAI Whisper (Horodatages au Niveau du Mot)

• Avant que le LLM n'anime, la voix off brute est transcrite avec des horodatages JSON au niveau du mot (par ex., via Whisper timestamp_granularities=["word"]).
• Le LLM reçoit la transcription avec les horodatages et les convertit en numéros d'image :

  Image Cible = Horodatage (secondes) × FPS