Infographie Animée

Que fait Infographie Animée ?

Créez une infographie conçue — icônes, quelques chiffres clés, texte court et formes simples disposés avec une véritable hiérarchie visuelle — puis animez-la en séquence pour que chaque élément ait son moment. L'art est d'abord la composition, ensuite la chorégraphie : une mise en page statique qui se lit d'elle-même, révélée en cascade décalée qui guide l'œil exactement là où vous le souhaitez.

Quand l'utiliser

• Explicateurs à mise en page mixte : « X en 3 étapes », « comment ça marche », « en chiffres », une grille de cartes statistiques.
• Révélation séquentielle d'icône + statistique + libellé + connecteur dans une seule scène conçue.
• Animation de pictogrammes/icônes, compteurs de chiffres, connecteurs de flux entre les étapes.

Cette compétence gère l'infographie composée. Pour un graphique qui est le contenu (course de diagrammes à barres, courbes/aires animées, graphique basé sur un CSV), utilisez chart-animation — et composez son graphique comme un bloc dans une infographie ici plutôt que de le reconstruire.

La règle unique : concevoir d'abord le cadre statique

Une excellente infographie animée est une excellente infographie statique qui, par hasard, bouge. Disposez et équilibrez la composition complète — chaque icône, nombre et libellé à sa position finale — avant d'ajouter une seule image clé. L'animation ne contrôle alors que le moment où chaque élément déjà placé apparaît ; elle ne décide jamais de la mise en page. Cela évite l'échec le plus courant : des éléments qui volent vers des positions qui n'ont jamais été conçues, donnant l'impression que le cadre final est accidentel.

Limitez la portée : un message central, 3 à 5 points de données d'appui, en 30 à 90 secondes. Plus de cinq éléments en concurrence et la cascade devient chaotique.

Hiérarchie visuelle → ordre de révélation

L'ordre de révélation est la hiérarchie. L'œil suit l'apparition, alors animez les éléments par ordre d'importance, pas par ordre de mise en page. Mappez chaque élément à un niveau, puis révélez niveau par niveau.

Niveau	Élément	Révélation	Mouvement
1	Titre de section / message central	premier, seul	fondu + léger mouvement vers le haut
2	Icône (ancre chaque élément)	par élément, mène son groupe	Pop / échelle avec dépassement
3	Chiffre clé (compteur)	juste après son icône	Comptage, easing de sortie
4	Libellé / légende	se stabilise sous le chiffre	Fondu, pas de mouvement dramatique
5	Connecteur / ligne de flux	relie les éléments à mesure qu'ils se complètent	Dessin progressif (longueur de chemin)

Utilisez la taille, le poids et la couleur pour la hiérarchie statique ; utilisez le timing et le mouvement pour la couche animée. Un seul élément voyant à la fois — ne comptez jamais deux chiffres en même temps.

Décalage : la cascade

Révélez les éléments frères avec un délai fixe entre eux (un décalage) pour que le groupe soit perçu comme une séquence, pas comme un flash. Pilotez chaque élément à partir de l'image actuelle comme une fonction pure — jamais l'heure de l'horloge murale ou la boucle d'animation d'une bibliothèque — pour que les rendus soient déterministes.

import { useCurrentFrame, spring, useVideoConfig } from "remotion";

const STAGGER = 8; // images entre frères (~0.27s @30fps)

function Item({ index, children }) {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const local = frame - index * STAGGER;            // horloge propre à cet élément
  const enter = spring({ frame: local, fps, config: { damping: 14, mass: 0.6 } });
  return (
    <div style={{ opacity: enter, transform: `translateY(${(1 - enter) * 24}px)` }}>
      {children}
    </div>
  );
}

Un décalage de 6 à 10 images semble net ; au-dessus d'environ 15, il traîne. Gardez une seule courbe d'entrée pour tous les frères afin que la cascade soit perçue comme une confiance, pas comme du bruit.

Animer les icônes : le pop

Les icônes ancrent chaque élément, alors donnez-leur l'entrée la plus forte — un dépassement d'échelle (« pop ») qui se stabilise. Utilisez un ressort avec un faible amortissement pour le rebond ; jamais d'échelle linéaire (donne un aspect mécanique).

const pop = spring({ frame: local, fps, config: { damping: 10, stiffness: 180, mass: 0.5 } });
// pop dépasse 1 puis se stabilise → vivant
<g transform={`scale(${pop})`} style={{ transformOrigin: "center" }}>{icon}</g>

Pour les remplissages de pictogrammes (par exemple « 7 personnes sur 10 »), révélez les unités sur le même décalage et masquez l'unité partielle avec un masque plutôt que de la mettre à l'échelle.

Chiffres clés : compteurs qui se stabilisent

Interpolez le nombre sous-jacent, appliquez un easing, puis formatez au rendu. Deux impératifs : arrondir avant le formatage, et utiliser tabular-nums pour que la disposition ne vacille pas lorsque les chiffres changent. (Savoir-faire partagé avec chart-animation — voir sa section compteur pour les variantes devise/pourcentage.)

import { interpolate, Easing } from "remotion";

const raw = interpolate(frame - delay, [0, 30], [0, 1287], {
  extrapolateLeft: "clamp", extrapolateRight: "clamp",
  easing: Easing.out(Easing.cubic),   // « se stabiliser sur un nombre »
});
const label = new Intl.NumberFormat("en-US").format(Math.round(raw)); // "1,287"
// CSS: font-variant-numeric: tabular-nums; line-height: 1;

Un easing de sortie sur un nombre titre semble arriver ; un comptage linéaire donne l'impression d'un odomètre robotique. Maintenez chaque nombre environ 0,5 seconde avant que l'élément suivant ne commence.

Connecteurs et flux

Les connecteurs transforment une grille de cartes en un processus. Animez une ligne/flèche en dessinant son chemin progressivement, synchronisé pour atterrir juste au moment où l'élément vers lequel il pointe se termine — un mouvement qui dit « regardez maintenant ici ».

const pathRef = useRef();
const len = pathRef.current?.getTotalLength?.() ?? 0;
const draw = interpolate(frame - delay, [0, 18], [0, 1], { extrapolateRight: "clamp" });
<path ref={pathRef} d="M40,0 C40,30 40,30 40,60" fill="none" stroke="#444" strokeWidth={3}
  strokeDasharray={len} strokeDashoffset={len * (1 - draw)} />

Dessinez le connecteur entre les deux éléments qu'il relie, dans l'intervalle après l'apparition de la source et avant la cible — la ligne guide l'œil vers la révélation suivante.

Pacing des sections

Budgétisez le temps par élément, pas par seconde de polissage. Un spectateur ne peut suivre qu'une seule chose en mouvement à la fois.

Temps	Budget
Maintien du titre (le laisser s'installer)	0.8–1.2s
Par élément (pop icône → compteur → libellé)	1.2–2.0s
Dessin du connecteur	0.4–0.6s, chevauche l'élément suivant
Maintien final de la composition (capturable d'écran)	2–3s

Terminez sur l'infographie statique complète maintenue immobile pendant 2-3s — le résultat à retenir est le cadre assemblé, alors laissez-le se stabiliser sans mouvement concurrent.

Liste de vérification de la sortie

• Disposition statique conçue et équilibrée avant toute image clé ; le cadre final maintenu semble intentionnel.
• Un message central, 3 à 5 points de données, 30 à 90 secondes.
• L'ordre de révélation suit la hiérarchie (titre → icône → nombre → libellé → connecteur), pas l'ordre de mise en page.
• Les éléments frères cascadent avec un décalage cohérent de 6 à 10 images et une courbe d'entrée unique.
• Les icônes pop avec un dépassement de ressort ; les nombres comptent avec easing + tabular-nums ; un seul nombre s'anime à la fois.
• Les connecteurs se dessinent progressivement pour guider l'œil vers la révélation suivante.
• Chaque valeur est une fonction pure de useCurrentFrame() ; pas de minuteurs de bibliothèque.
• Le cadre final composé est maintenu ≥2s.

Livrer et vérifier (images fixes rendues → MP4)

Assistant packagé (scripts/) : disposez vos images fixes avec scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png, puis vérifiez l'encodage avec scripts/probe-mp4.sh out.mp4 [WxH] [fps]. Voir scripts/README.md.

Remotion est déterministe par image — chaque pop d'icône, valeur de compteur et dessin de connecteur est une fonction pure de useCurrentFrame(), vous pouvez donc rendre n'importe quelle image exacte sans tête de lecture. L'infographie contient des chiffres clés, donc l'inspection d'images fixes permet de détecter une mauvaise statistique ou un décalage hors écran avant de gaspiller un encodage.

Contrat de sortie :

• Un projet Remotion avec la scène enregistrée (<Composition> + zod schema + defaultProps), tout mouvement piloté par image (pas de minuteurs / Date.now() / Math.random()).
• Livrable = le fichier out/*.mp4 rendu (plus le projet, afin que l'utilisateur puisse re-rendre avec de nouvelles statistiques/icônes).
• Durée dépendante des données (N éléments × budget par élément) ? calculez-la dans calculateMetadata, pas à la main.

Boucle de vérification — rendu d'images fixes → inspection → encodage. Rendez d'abord des images uniques (peu coûteux, pas d'encodage vidéo), puis encodez uniquement une fois que la disposition et les nombres sont corrects.

# 1. Images fixes exactes — avec les accessoires LIVRÉS. Choisissez des images qui capturent chaque niveau :
npx remotion still Infographic out/f-title.png --frame=20  --props='{"items":[...]}'  # titre + premier pop
npx remotion still Infographic out/f-mid.png   --frame=90  --props='{"items":[...]}'  # cascade intermédiaire
npx remotion still Infographic out/f-end.png   --frame=149 --props='{"items":[...]}'  # maintien final composé (= durationInFrames - 1)

# 2. Inspectez chaque PNG — FIDÉLITÉ (chaque nombre clé exact, libellés/légendes corrects, icônes bon glyphe)
#    ET artefacts (débordement de texte, icône hors écran, zone de sécurité rognée, police manquante,
#    connecteur pointant vers le mauvais élément, élément à moitié révélé là où un niveau devrait être stabilisé).

# 3. Seulement après que les images fixes sont vérifiées, encodez :
npx remotion render Infographic out/infographic.mp4 --props='{"items":[...]}'

• Utilisez npx remotion compositions pour lire durationInFrames/fps ; le maintien final composé est l'image clé — vérifiez qu'elle semble intentionnelle, pas en milieu de cascade.
• Basé sur les données / par lot : vérifiez UN ensemble représentatif d'accessoires (statistiques + libellés) via des images fixes avant de rendre par lot toutes les variantes — détectez un bogue de compteur ou de disposition une fois, pas N fois.
• GIF de démonstration README gratuit : npx remotion render Infographic out/demo.gif --codec=gif.

Avant de terminer :

1. npx remotion still rend proprement au titre, à la cascade intermédiaire et au maintien final — aucune erreur, aucune police/icône manquante.
2. Chaque nombre clé est exact (arrondi, tabular-nums) et chaque élément est dans la zone de sécurité à chaque image.
3. Uniquement piloté par image — pas de Date.now() / Math.random() / minuteurs de bibliothèque (déterminisme garanti en CI).
4. Les accessoires livrés rendent correctement (pas seulement defaultProps) — bonnes statistiques, bonnes icônes, bons libellés.
5. MP4 complet encodé et lisible ; (optionnel) GIF rendu pour le README.

Fichiers de référence

• references/sequenced-infographic.md — une scène Remotion complète et exécutable : une infographie « comment ça marche » en 3 étapes avec pops d'icônes décalés, statistiques comptées avec easing, connecteurs dessinés, un plan de synchronisation maître et le modèle rendu-les-données (template × données). Inclut une variante SVG en ligne sans dépendance pour une utilisation non Remotion.