Kinetic Typography

Que fait Kinetic Typography ?

Le texte en mouvement a un travail avant tout autre : il doit être lisible. L'échec le plus courant dans le type animé n'est pas la laideur, c'est le texte qui défile avant que le spectateur ait fini le premier mot, ou un texte qui s'anime tellement que l'œil poursuit le mouvement au lieu de lire les mots. C'est la couche artisanale. Elle décide combien de temps chaque ligne reste, comment elle entre et sort, et ce qui a le droit de bouger - et remet un budget de trames concret à remotion-compose, qui écrit le React/TypeScript qui le rend réellement.

La règle directrice : animer pour servir la lecture, jamais pour la décorer. Le mouvement gagne sa place seulement quand il dirige l'œil, établit une hiérarchie ou marque un battement. Tout ce qui suit applique cela.

Travaillez sur un seul exemple tout au long : une carte titre 16:9 indiquant "Ship video in one prompt" (5 mots), à 30 ips, avec une piste de légende animée en tiers inférieur en dessous.

Workflow

Exécutez-les dans l'ordre. Ne choisissez pas une animation d'entrée avant d'avoir le budget de maintien - le budget vous dit si vous avez même de la place pour animer.

Étape 1 - Calculez d'abord le budget de temps de lecture par mot

Le texte doit rester à l'écran assez longtemps pour être lu à un rythme détendu, plus le temps que son entrée et sa sortie consomment. Budgétisez le temps de maintien avant de toucher à l'animation.

• La vitesse de lecture de base pour la vidéo à l'écran est plus lente que pour l'impression : supposez ~3,5 mots/seconde lus confortablement (≈ 200 mpm). La convention de sous-titrage est similaire - ne descendez jamais en dessous d'environ 0,3 s de maintien lisible par mot.
• Maintien minimum à l'écran = mots ÷ 3,5 secondes, avec un plancher de 0,8 s pour toute ligne (même un seul mot a besoin d'un temps pour être enregistré) et une taxe de +0,3 s pour les termes inconnus, les nombres ou les noms que l'œil ne peut pas anticiper.
• Le temps d'entrée et de sortie est supplémentaire - il ne compte pas comme temps de lecture, car le texte n'est pas entièrement lisible en milieu de transition. Créneau total = entrée + maintien + sortie.

Exécutez type_budget.js (ci-dessous) pour transformer une ligne de texte en un budget de trames. Pour la carte titre, il retourne un maintien d'environ 43 trames ; c'est le nombre que vous remettez à remotion-compose comme fenêtre lisible de la Sequence, avec l'entrée et la sortie ajoutées par-dessus.

Étape 2 - Choisissez le timing d'entrée/sortie pour correspondre au cut, pas à une valeur par défaut

Les entrées et sorties sont une ponctuation, pas la phrase. Gardez-les courtes et laissez le maintien faire le travail.

• Entrée : 8 à 15 trames (0,25 à 0,5 s) à 30 ips. Assez rapide pour être vif, assez lent pour être lu comme délibéré. Une carte titre peut prendre le côté long ; une piste de légende rapide prend le côté court.
• Sortie : égale ou plus courte que l'entrée. Les sorties ne doivent jamais s'attarder - une fois lues, le texte doit s'effacer. 6 à 12 trames.
• Faites correspondre la sortie à ce qui suit. Cut dur vers la scène suivante → sortie du texte sur le cut (pas de fondu, laissez le cut le faire). Cross-dissolve → fondez le texte pendant le dissolve. N'animez jamais une sortie élaborée dans un cut dur ; cela combat le montage. C'est la couture où motion-design-principles (le cut et l'easing) et ce skill se rencontrent - prenez la courbe d'easing de là, appliquez-la au texte ici.
• Décalez les révélations multi-éléments, ne les animez pas à l'unisson. Un titre + sous-titre se lit mieux avec le sous-titre entrant 4 à 8 trames après que le titre se soit posé, pour que l'œil soit guidé de haut en bas.

Étape 3 - Choisissez UNE technique d'entrée par ligne et animez une propriété

Plus il y a de propriétés qui bougent en même temps, plus le texte est difficile à lire en milieu de transition. Par défaut, animez une seule propriété ; combinez-en deux seulement avec intention (par ex. opacité + une petite translation).

• Fondu (opacité 0→1) - le plus sûr, toujours lisible, le bon défaut pour les pistes de légendes et les lignes de corps.
• Montée / glissement (petite translation, 20-60 px, associée à un fondu) - ajoute de la direction et de la vie ; le cheval de bataille pour les cartes titres. Gardez la distance petite - les grands glissements font que l'œil suit le parcours au lieu de lire.
• Révélation mot par mot - chaque mot s'estompe/monte en séquence avec son propre petit décalage. Utilisez-le pour les lignes d'emphase et les pièces de style lyrique, pas pour les légendes denses (la lecture devient saccadée). Budgétisez la révélation de toute la ligne pour qu'elle se termine bien à l'intérieur du maintien.
• Échelle / pop (spring de 0,85→1) - énergique, bon pour un seul mot héros ou un appel de nombre. Ne scalez jamais une phrase entière ; la restructuration est illisible.
• Révélation par masque / wipe - premium, directionnelle, excellente pour un seul titre. Plus coûteuse à construire ; réservez-la pour le titre qui compte.

Quoi que vous choisissiez, la propriété s'anime ; le texte lui-même ne se restructure jamais en milieu d'animation. Animez opacity et transform (translate/scale/clip) - jamais font-size, width ou letter-spacing d'une manière qui relit les glyphes, car l'animation pilotée par la disposition est saccadée et illisible.

Étape 4 - Animez le poids et la taille comme des transitions, pas du bruit

Le poids et la taille sont la façon dont la police exprime l'emphase en mouvement - mais ce sont des transitions entre états maintenus, pas des oscillations continues.

• Transition de poids : un mot peut passer d'un poids plus léger à un poids plus lourd pour poser une emphase (par ex. 400→700 sur 8 trames en se posant). Utilisez un axe de poids de variable-font réel ou deux styles de la famille ; ne simulez jamais le gras en scalant.
• Transition de taille : un nombre ou un mot-clé peut augmenter une fois pour revendiquer la hiérarchie, puis maintenir. Scale-and-hold, pas scale-and-pulse. Une pulsation en boucle sur du texte se lit comme un rendu cassé, pas une emphase.
• Ce sont des accents. Au maximum un accent de poids/taille par ligne, sur le seul mot le plus important. Si tout souligne, rien ne souligne.

Étape 5 - Établissez la hiérarchie du type en mouvement (ordre, taille, poids, timing)

La hiérarchie en mouvement est construite à partir de quatre signaux ; utilisez-les ensemble pour que l'œil sache où regarder et dans quel ordre.

1. Ordre d'entrée - la première chose à animer est lue en premier. Commencez par le titre, suivez avec le sous-titre, terminez par le CTA.
2. Contraste de taille - gardez un ratio clair (titre ≥ 1,6× sous-titre). Le mouvement ne sauve pas une hiérarchie statique faible.
3. Contraste de poids - plus lourd = plus important. Deux poids maximum à l'écran en même temps.
4. Timing - la ligne la plus importante reçoit le maintien le plus long et, si quelque chose, l'entrée avec le plus de présence. La moins importante (un tiers inférieur persistant, un filigrane) ne s'anime pas après sa seule entrée.

Remplissez le template motion-type-spec (ci-dessous) avec le budget par ligne, la technique et le rôle hiérarchique. Cette spécification remplie est la transmission à remotion-compose.

Étape 6 - Décidez où NE PAS animer

Le mouvement senior est la retenue. Avant de finaliser, supprimez l'animation de tout ce qui figure dans la liste "NE PAS" ci-dessous. Une carte titre avec une montée bien budgétisée se lit mieux qu'une carte où chaque mot fait quelque chose.

Barre de qualité

Une spécification de type en mouvement terminée est A+ seulement quand tout tient :

• Chaque ligne passe le budget de temps de lecture - maintien ≥ max(0,8 s, mots ÷ 3,5 + taxe de terme), calculé par type_budget.js, avec l'entrée/sortie ajoutées par-dessus, jamais soustraites de celui-ci.
• Chaque ligne anime une propriété (deux seulement avec intention explicite), et aucune ligne ne restructure ses glyphes en milieu d'animation - uniquement opacity/transform.
• Les entrées sont de 8 à 15 trames, les sorties ≤ entrée, et la sortie est adaptée au montage suivant (cut vs. dissolve), pas par défaut.
• La hiérarchie se lit dans l'ordre : ordre d'entrée, ratio de taille (≥1,6×), et poids pointent tous vers la même ligne la plus importante.
• Au maximum un accent de poids/taille par ligne, et rien ne boucle ou pulse.
• La spécification nomme les numéros de trames (début d'entrée, début de maintien, fin de maintien, sortie) pour que remotion-compose puisse écrire des Sequences sans deviner.

NE PAS

• Ne pas livrer de texte qui tient plus court que le budget de lecture - l'échec le plus courant du type cinétique. S'il n'y a pas de place pour tenir, coupez des mots, pas le temps de maintien.
• Ne pas animer font-size, width, letter-spacing ou quoi que ce soit qui relit les glyphes ; la pagaille de disposition est illisible. Scalez via transform à la place.
• Ne pas animer plus d'une ou deux propriétés par ligne, et jamais mot par mot une légende dense - la lecture devient saccadée.
• Ne pas boucler, pulser, rebondir à plusieurs reprises ou maintenir le texte en mouvement continu ; un mouvement qui ne s'arrête pas ne peut pas être lu.
• Ne pas animer chaque élément. Les tiers inférieurs, les filigranes, les étiquettes persistantes et le texte juridique reçoivent une entrée puis restent immobiles. N'animez pas le texte de corps/légende avec des entrées élaborées - le fondu est correct.
• Ne pas décider la courbe d'easing sous-jacente ou le cut de scène ici - c'est motion-design-principles. Ne pas écrire le composant Remotion ici - remettez la spécification remplie à remotion-compose.
• Ne pas inventer le texte. Animez les mots que l'utilisateur vous a donnés ; si une ligne est trop longue pour tenir, demandez-lui de la raccourcir.

Skills frères - transmettez, n'absorbez pas

Ce skill possède le timing du texte et la lecture. Les décisions adjacentes appartiennent aux frères ; tirez d'eux, ne refaites pas leur travail ici.

• motion-design-principles - le cut, le rythme du mouvement non textuel, et la courbe d'easing (la forme d'accélération). Prenez la courbe de là-bas et appliquez-la au texte ici.
• video-storyboard - quelles scènes et plans existent, et dans quel ordre. Obtenez d'abord la liste des scènes ; ce skill ne chronomètre que le texte dans une scène.
• motion-color-and-light - la couleur, le contraste et la lisibilité du type par rapport à son arrière-plan. Si le texte est difficile à lire à cause de la couleur, c'est un travail pour ce skill, pas un changement de timing ici.
• product-demo-director - le récit global et la liste des battements d'une démo produit. Il décide ce que les cartes titres disent et quand elles arrivent ; ce skill chronomètre comment chacune s'anime.
• sound-and-music-sync - faire atterrir les révélations de texte sur un battement ou un temps fort. Donnez-lui les numéros de trames holdStart@ / d'entrée pour qu'une révélation puisse être alignée sur la piste.
• social-video-formatter - redimensionner et recadrer la piste de légende pour une plateforme (9:16 TikTok, 1:1 feed, zones de sécurité). Écrivez le timing une fois ici ; laissez ce skill le réorganiser par plateforme.

Calculateur

Script Node.js autonome. Enregistrez-le comme type_budget.js et exécutez-le avec node type_budget.js. Aucune dépendance. Modifiez le tableau lines avec votre texte réel ; il retourne le budget de trames pour chaque ligne à votre ips.

// Budget de lecture du type cinétique. Modifiez lines + fps, puis : node type_budget.js
const fps = 30
const WORDS_PER_SEC = 3.5   // lecture confortable à l'écran (~200 mpm)
const FLOOR_SEC = 0.8       // maintien minimum pour toute ligne, même un mot
const TERM_TAX_SEC = 0.3    // par ligne contenant un nombre/nom/terme de jargon
const ENTRANCE_FRAMES = 12  // entrée de 0,4 s
const EXIT_FRAMES = 9       // sortie <= entrée

const lines = [
  { text: 'Ship video in one prompt', hasUnfamiliarTerm: false }, // carte titre
  { text: 'Rendered headless in 4K',  hasUnfamiliarTerm: true  }, // légende : '4K'
  { text: 'Go',                       hasUnfamiliarTerm: false }, // mot héros
]

const sec2frames = (s) => Math.ceil(s * fps)

function budget(line) {
  const words = line.text.trim().split(/\s+/).length
  const raw = words / WORDS_PER_SEC + (line.hasUnfamiliarTerm ? TERM_TAX_SEC : 0)
  const holdSec = Math.max(FLOOR_SEC, raw)
  const holdFrames = sec2frames(holdSec)
  const totalFrames = ENTRANCE_FRAMES + holdFrames + EXIT_FRAMES
  return { words, holdSec, holdFrames, totalFrames }
}

let cursor = 0
for (const line of lines) {
  const b = budget(line)
  const enterIn = cursor
  const holdStart = enterIn + ENTRANCE_FRAMES
  const holdEnd = holdStart + b.holdFrames
  const exitOut = holdEnd + EXIT_FRAMES
  console.log(`"${line.text}" (${b.words}w)`)
  console.log(`  maintien :   ${b.holdSec.toFixed(2)}s = ${b.holdFrames} trames`)
  console.log(`  créneau total: ${b.totalFrames} trames (entrée ${ENTRANCE_FRAMES} + maintien ${b.holdFrames} + sortie ${EXIT_FRAMES})`)
  console.log(`  Sequence :    enter@${enterIn}  holdStart@${holdStart}  holdEnd@${holdEnd}  exitOut@${exitOut}`)
  cursor = exitOut
}
console.log(` Longueur totale de la piste : ${cursor} trames (${(cursor / fps).toFixed(2)}s)`)

Exemple de sortie travaillé

"Ship video in one prompt" (5w)
  maintien :   1.43s = 43 trames
  créneau total : 64 trames (entrée 12 + maintien 43 + sortie 9)
  Sequence :   enter@0  holdStart@12  holdEnd@55  exitOut@64
"Rendered headless in 4K" (4w)
  maintien :   1.44s = 44 trames
  créneau total : 65 trames (entrée 12 + maintien 44 + sortie 9)
  Sequence :   enter@64  holdStart@76  holdEnd@120  exitOut@129
"Go" (1w)
  maintien :   0.80s = 24 trames
  créneau total : 45 trames (entrée 12 + maintien 24 + sortie 9)
  Sequence :   enter@129  holdStart@141  holdEnd@165  exitOut@174
Longueur totale de la piste : 174 trames (5.80s)

Lisez-le : le titre de 5 mots a besoin de 43 trames de temps maintenu et entièrement lisible - et cela en plus de l'entrée de 12 trames et de la sortie de 9 trames, donc son créneau réel est de 64 trames. La légende de 4 mots semble plus courte mais porte un nombre (4K), donc la taxe de terme pousse son maintien à 44 trames - légèrement plus long que le titre malgré moins de mots. Le mot unique Go atteint le plancher de 0,8 s : même un mot a un temps. Ces numéros de trames enter@ / holdStart@ / holdEnd@ / exitOut@ se glissent directement dans remotion-compose comme limites <Sequence from={…} durationInFrames={…}> - pas besoin de deviner combien de temps le texte doit rester.

Template : motion-type-spec

Remplissez-le et transmettez-le à remotion-compose. Un bloc par ligne de texte.

MOTION TYPE SPEC. [À REMPLIR : nom de la composition].  fps : [À REMPLIR]  canvas : [À REMPLIR : 1920x1080 / 1080x1920]

LIGNE 1
  Texte (textuellement) : [À REMPLIR]
  Rôle hiérarchique :    [À REMPLIR : titre / sous-titre / légende / tiers inférieur / CTA / mot héros]
  Taille :               [À REMPLIR]px        Poids : [À REMPLIR : 400 / 700 / axe variable]
  Budget de lecture :    [À REMPLIR]w -> maintien [À REMPLIR]s = [À REMPLIR] trames   (depuis type_budget.js)
  Entrée :               [À REMPLIR : fade / montée+fade / mot par mot / pop / wipe]  sur [À REMPLIR : 8-15] trames
  Sortie :               [À REMPLIR : fade / cut-on-edit]  sur [À REMPLIR : <=entrée] trames
  Propriété animée :     [À REMPLIR : opacity / opacity+translateY / scale]   (PAS de font-size/width)
  Accent (max un) :      [À REMPLIR : aucun / poids 400->700 sur mot "X" / scale-up sur "X"]
  Numéros de trames :    enter@[À REMPLIR]