Typographie cinétique
Lorsque des mots apparaissent à l'écran dans une vidéo, les premiers mouvements qui viennent à l'esprit sont le fondu, le glissement et l'apparition. Ils sont corrects, mais ils sont la valeur par défaut, pas un choix. Cette compétence place toute la gamme devant vous, environ 80 techniques réparties en 18 familles, afin que le choix soit réel.
Elle rappelle ; elle ne dirige pas. Elle n'ajoute ni étapes, ni pages, ni approbations à la tâche que vous avez été chargé d'effectuer.
La liberté créative d'abord
Tout ici est une valeur par défaut ou une suggestion, jamais une règle. Lorsqu'un moment exige autre chose, dérogez à la valeur par défaut et expliquez pourquoi en une phrase (dans votre plan, un commentaire de code ou votre réponse). Les techniques qui ne figurent pas au menu sont également autorisées. Le menu existe pour élargir vos options, pas pour vous enfermer.
Choisissez à chaque instant, selon le sens
Lisez les mots avant de décider comment ils bougent. Demandez-vous ce que fait la ligne, puis choisissez la technique dont le sens correspond :
| Les mots... | Optez pour |
|---|---|
| divisent, cassent ou séparent quelque chose | slice, shatter |
| résolvent un problème ou révèlent un secret | scramble |
| atterrissent avec force, ou comptent à rebours | stomp |
| définissent ou écrivent un terme pour la première fois | stroke-write-on, marker-highlight |
| montrent un nombre qui change | odometer |
| décrivent quelque chose qui disparaît | disintegrate, smoke-dissolve |
| suivent un graphique ou une équation | text-on-a-path, sine-wave-type |
La colonne « À utiliser lorsque » dans le menu est écrite précisément pour cette question.
Degré de variété
- Mode enseignement (valeur par défaut pour les leçons et les vidéos explicatives, et chaque fois que la demande ne le précise pas) : un style de maison pour chaque ligne ordinaire, choisi parmi les techniques étiquetées calme, plus quelques accents réservés aux moments importants : un terme clé, la réponse, un avertissement. Les techniques étiquetées enseigner font de bons accents. Peu d'accents font plus d'effet que beaucoup.
- Libre cours lorsque l'utilisateur le demande (« soyez créatif », « à fond », « surprenez-moi ») : tout ce qui est au menu est ouvert, toujours choisi selon le sens. La liberté ne signifie pas en utiliser beaucoup. Une seule technique audacieuse et bien choisie peut en battre dix.
- Si la vidéo n'est clairement pas une leçon (clip musical, bande-annonce) et qu'aucun mode n'est nommé, choisissez ce qui convient et indiquez votre choix.
Finitions et vérifications
- Flou de mouvement sur les déplacements rapides. L'animation par ordinateur est parfaitement nette, donc les caractères rapides peuvent sembler saccadés. Un peu de flou dans la direction du mouvement donne un aspect filmé. Remotion dispose d'outils de flou de mouvement (
@remotion/motion-blur) ; installez-le exactement à la version de Remotion du projet, de la même manière que les packages sous « Construction avec Remotion » (npm i -E @remotion/motion-blur@<version>). Utilisez-le comme une touche finale sur les mouvements rapides ; sur les dérives lentes, il donne simplement l'impression d'être flou. - Les scripts liés brisent les effets au niveau des lettres. En arabe, persan et autres scripts où la forme d'une lettre dépend de ses voisines, diviser un mot en lettres (cascade, brouillage, anagramme, apparition aléatoire, retournement 3D) casse les formes des lettres. Animer des mots ou des lignes entières à la place.
- Vérifiez que la police contient vos accents. Pour les textes latins accentués (afrikaans, etc.), assurez-vous que la police contient les lettres dont vous avez besoin (ê, ë, ô, ï...) avant de les animer.
Utilisation du menu
Ouvrez references/menu.md (dans le dossier de cette compétence) avant de choisir. Il répertorie chaque technique, regroupée par familles, avec :
- son nom et son identifiant (la clé dans
KT_COMPONENTS) - un aspect en une ligne et une indication À utiliser lorsque
- des étiquettes : calme (un bon style de maison), enseigner (un bon accent pédagogique), sortie (se termine par la disparition des mots, donc adapté à la fin d'une ligne ou d'une scène), ✚ nouveau
- comment c'est construit :
component(prêt à l'emploi) ouexample(une scène commentée à adapter, chemin donné)
Parcourez les titres des familles, puis lisez les lignes des familles qui correspondent au moment.
references/catalogue.md est une lecture de fond : la recherche derrière le menu, avec les sources, l'histoire et la difficulté de construction de chaque technique. Ouvrez-le uniquement lorsque vous voulez approfondir.
Construction avec Remotion
- Copiez le dossier
remotion/de cette compétence dans le projet soussrc/kinetic-type/. - Assurez-vous que le projet dispose de
remotion,@remotion/google-fontset@remotion/layout-utils, tous exactement à la version Remotion du projet (Remotion attend tous ses packages à une seule version). Par exemple, sur 4.0.536 :npm i -E @remotion/[email protected](-Eenregistre la version exacte au lieu de^4.0.536). - Recherchez un composant par son identifiant de menu et affichez-le dans un
<Sequence>:
import { Sequence } from "remotion";
import { KT_COMPONENTS } from "./kinetic-type";
const House = KT_COMPONENTS["tracking-in"];
const Accent = KT_COMPONENTS["slice"];
export const Intro: React.FC = () => (
<>
<Sequence durationInFrames={75}>
<House text="Every whole can be shared" />
</Sequence>
<Sequence from={75} durationInFrames={60}>
<Accent text="Split it in half" keyWord="half" />
</Sequence>
</>
);
- Props (
KTProps) :text(obligatoire),keyWord(bénéficie du traitement d'accent),fontFamily(par défaut Poppins),color,accent,fontSize(par défaut s'adapte à la largeur du cadre). - Chaque composant commence à l'image 0 de son
<Sequence>et se stabilise en environ une seconde, donc la durée de la Séquence détermine la durée d'affichage des mots. Deux types se comportent différemment : les techniques de sortie se terminent par la disparition des mots à la dernière image de la Séquence, et celles rythmées par le son (famille 15) répartissent les mots sur toute la Séquence, donc sa longueur définit leur rythme. - Pour les techniques
example, ouvrez le fichier nommé dans le menu et adaptez la scène. - Autres outils vidéo : le menu et la méthode de choix s'appliquent toujours ; les composants prêts à l'emploi sont spécifiques à Remotion.
Les voir, ou diriger une vidéo entière
- Galerie : chaque technique avec un aperçu en direct, sur https://dricosnyman.github.io/kinetic-type-skills/
- Une vidéo entière, ou une direction ligne par ligne : lorsque le travail consiste en une vidéo entière en typographie cinétique réalisée à partir d'un script, ou que l'utilisateur souhaite planifier, réviser et approuver la typographie de chaque ligne avant que quoi que ce soit ne soit construit, utilisez la compétence
kinetic-type-director. Elle exécute le processus complet et s'appuie sur cette compétence : elle rédige un script de typographie, l'affiche sur une page que l'utilisateur peut modifier, puis construit la version approuvée avec ces composants.