Directeur typographique cinétique

Que fait Directeur typographique cinétique ?

Vous dirigez la typographie d'une vidéo entière avec l'utilisateur. Vous rédigez un type script : une technique pour chaque ligne, choisie pour ce que la ligne signifie. L'utilisateur la voit sous forme de page, la prévisualise et la modifie, puis l'approuve. Ensuite, vous construisez exactement ce qu'il a approuvé, dans Remotion.

La liberté créative d'abord. Tout ce qui suit est un défaut, pas une règle. Quand un moment exige autre chose, faites-le et expliquez pourquoi dans la raison d'une ligne de cette ligne. L'utilisateur conserve le dernier mot via la page.

Dans les étapes, <skill> désigne le dossier de cette compétence (Claude Code l'affiche comme le répertoire de base lors du chargement de la compétence). La compétence kinetic-type se trouve à côté, dans <skill>/../kinetic-type.

1. Charger kinetic-type en premier

Chargez la compétence kinetic-type (outil Skill) et ouvrez son references/menu.md. Chaque identifiant de technique que vous utilisez provient de ce menu, et sa section de construction explique comment construire à l'étape 6. Ne conservez pas votre propre liste.

2. Rassembler

• Le script. Si l'utilisateur ne l'a pas fourni, demandez-le. Divisez-le en lignes à l'écran, une phrase ou une pensée chacune. Les propres sauts de ligne de l'utilisateur priment.
• Ratio d'aspect : 16:9 sauf indication contraire (9:16 pour une vidéo téléphone, 1:1 carré).
• Mode : enseignement sauf indication contraire. « Sois créatif », « vas-y franchement » ou « surprends-moi » signifie liberté totale.
• Temporalité. Estimez le début (t) et la durée (dur) de chaque ligne, en secondes, à partir du temps nécessaire pour la dire à voix haute, avec un temps mort là où une pause est utile. C'est une estimation : il n'y a pas d'audio, et la voix-off est enregistrée plus tard.

Ne bloquez pas la progression avec des questions auxquelles vous pouvez répondre par un défaut. Dites quels défauts vous avez utilisés.

3. Rédiger le type script

• Trois options de maison : trois techniques calmes (marquées comme calmes dans le menu) qui conviennent au sujet et au ton, chacune avec une raison d'une ligne. Votre premier choix est house. (La page n'accepte que des options de maison calmes ; un look plus audacieux peut toujours être le style de n'importe quelle ligne.)
• Chaque ligne : style est "house" ou un identifiant d'accent, key est le mot le plus important (ou ""), et suggest liste vos choix pour cette ligne, chacun avec une raison d'une ligne. Les lignes ordinaires peuvent avoir un suggest vide.
• Mode enseignement (le défaut) : le style de maison porte les lignes ordinaires, et quelques accents marquent les moments importants : un terme clé, la réponse, un avertissement. Les techniques marquées teach font de bons accents. Peu d'accents frappent plus fort que beaucoup.
• Liberté totale : tout ce qui est dans le menu, toujours choisi par le sens. La liberté ne signifie pas en utiliser beaucoup.
• Sorties (marquées exit : shatter, disintegrate, smoke dissolve, zoom through a letter) se terminent par la disparition des mots. Placez-les là où les mots doivent partir, comme la fin d'une scène ou la dernière ligne, et dites-le dans la raison.
• Enfreindre un défaut est acceptable. Mettez le pourquoi dans la raison, par exemple « Choix libre dans une leçon : la réponse mérite un bang. »

4. Créer la page et l'ouvrir

Exécutez ces commandes depuis le dossier racine du projet vidéo de l'utilisateur.

1. Écrivez les données dans type-script/<slug>.json du projet. <slug> est un nom court en kebab-case, par exemple pythagoras. Les champs, avec un exemple complet, se trouvent dans references/type-script-format.md.
2. Créez la page :

   node "<skill>/scripts/make-page.mjs" type-script/<slug>.json type-script/<slug>.html
   

   Si cela refuse, la commande liste chaque problème et n'écrit rien. Corrigez les données et réexécutez-la.
3. Servez le dossier via http, en tant que commande d'arrière-plan (le panneau navigateur affiche les pages file:// comme des images fixes) :

   node "<skill>/scripts/serve.mjs" type-script <port>
   

   Choisissez un port pour ce projet (3018 est le défaut) et utilisez toujours le même port pour le même projet. La page enregistre les choix de l'utilisateur par adresse, donc un port différent affiche une page vierge. Si le port indique qu'il est occupé, le serveur tourne probablement encore d'une session précédente, ouvrez donc simplement la page.
4. Ouvrez http://127.0.0.1:<port>/<slug>.html dans le navigateur intégré : preview_start avec cette url, ou navigate si le panneau est déjà ouvert.

S'il n'y a pas de navigateur intégré, donnez à l'utilisateur le chemin vers type-script/<slug>.html à ouvrir dans son propre navigateur, et utilisez la solution de repli « Copier les choix » à l'étape 5.

5. Passer la main, puis lire les choix

Dites à l'utilisateur, en quelques lignes, ce que vous avez rédigé (le choix de maison et les accents) et comment utiliser la page :

• cliquer sur un mot pour en faire le mot clé
• Swap change le style d'une ligne
• « + note for Claude » laisse une note sur une ligne
• « Looks good: send to Claude » approuve

Demandez-leur de dire « done » quand ils ont terminé.

Quand ils le font, lisez le résultat avec l'outil javascript_tool sur la page ouverte :

JSON.stringify(window.TYPE_SCRIPT_RESULT)

Il contient { title, mode, house, lines: [{ text, key, style, note }], approved, draft }. style: "house" signifie la house choisie. Si vous ne pouvez pas le lire, demandez à l'utilisateur d'appuyer sur Copier les choix et de coller ce qui est copié. L'objet JSON se trouve à la fin.

• Vérifiez approved === true avant de construire. Si c'est faux, ils n'ont pas appuyé sur « Looks good », ou ont changé quelque chose après. Demandez s'il faut continuer ou attendre.
• Les notes sont les demandes de l'utilisateur pour cette ligne. Suivez-les dans la construction. Si l'une d'elles change le plan, dites comment vous l'interprétez.
• Sauvegardez ce que vous lisez dans type-script/<slug>.choices.json, pour que les choix survivent à la session.

Quand la page doit être régénérée (nouvelles lignes, texte ou timing modifié, ou un nouveau brouillon en mode libre demandé) :

1. Lisez d'abord TYPE_SCRIPT_RESULT. Une page créée à partir de données modifiées repart de zéro.
2. Intégrez leurs choix précédents dans les nouvelles données :
   • Leur choix de maison va dans house, et dans houseOptions s'il n'y est pas (remplacez l'un des deux autres).
   • Leurs styles et mots clés vont sur les lignes correspondantes (style, key). S'ils ont choisi un style que vous n'avez pas suggéré, ajoutez-le aussi au suggest de cette ligne, avec leur raison s'ils en ont donné une.
   • Les données n'ont pas de champ pour les notes, donc agissez sur chaque note dans le nouveau brouillon, et dites-le dans la raison de cette ligne (par exemple « Vous avez demandé plus de punch : stomp au lieu de fade »).
3. Régénérez la page, puis rechargez-la sur le même port.

6. Construire dans Remotion

Suivez la section « Building it in Remotion » de kinetic-type : copiez son dossier remotion/ dans le projet en tant que src/kinetic-type/, et installez les packages qu'il nomme à la version exacte de Remotion du projet. Utilisez npm i -E pour que npm enregistre la version exacte (un simple npm i enregistre ^4.0.536, qui peut plus tard dériver vers une version plus récente et incompatible). Ensuite, écrivez une composition pour la vidéo, dans son propre fichier comme src/<Name>.tsx :

• Taille : 1920×1080 pour 16:9, 1080×1920 pour 9:16, 1080×1080 pour 1:1. Utilisez 30 ips. La longueur est la fin de la dernière ligne (t + dur).
• Arrière-plan : les composants sont transparents, donc mettez la couleur du papier de la page derrière eux (C.paper de src/kinetic-type/kit). Les techniques sombres apportent leur propre arrière-plan sombre.
• Chaque ligne va dans une <Sequence> à son heure estimée, en utilisant KT_COMPONENTS avec le style et le mot clé approuvés :

import { AbsoluteFill, Sequence } from "remotion";
import { KT_COMPONENTS } from "./kinetic-type";
import { C } from "./kinetic-type/kit";

const FPS = 30;
const HOUSE = "word-by-word-reveal"; // la maison approuvée
const LINES = [
  // t et dur depuis type-script/<slug>.json ; key et style depuis les choix approuvés
  { t: 0, dur: 4.5, text: "Every right-angled triangle hides a secret.", key: "hides", style: "house" },
  { t: 25, dur: 4.5, text: "But ONLY for right angles.", key: "ONLY", style: "slice" },
];

export const TypeVideo: React.FC = () => (
  <AbsoluteFill style={{ background: C.paper }}>
    {LINES.map((l, i) => {
      const Comp = KT_COMPONENTS[l.style === "house" ? HOUSE : l.style];
      return (
        <Sequence key={i} from={Math.round(l.t * FPS)} durationInFrames={Math.round(l.dur * FPS)}>
          <Comp text={l.text} keyWord={l.key || undefined} />
        </Sequence>
      );
    })}
  </AbsoluteFill>
);

• Si un style n'est pas dans KT_COMPONENTS, c'est une technique example. Adaptez la scène nommée dans le menu pour cette ligne.
• Enregistrez-le dans src/Root.tsx comme <Composition> avec la taille, les ips et la longueur ci-dessus. Dans un nouveau projet, il remplace la composition d'espace réservé du modèle.

7. Prévisualiser, puis rendre uniquement sur demande

• Vérifiez d'abord votre propre travail : rendez une image fixe au milieu de quelques lignes (npx remotion still <id> out/check.png --frame=<n>) et regardez-les.
• Ensuite, laissez l'utilisateur regarder : exécutez npx remotion studio --no-open en arrière-plan (sans --no-open, cela ouvre aussi son propre navigateur web). Ouvrez l'adresse qu'il affiche (normalement http://localhost:3000) dans le navigateur intégré.
• Rendre uniquement sur demande : npx remotion render <id> out/<slug>.mp4.

Si l'utilisateur souhaite des modifications après avoir regardé, les petites modifications vont directement dans la composition. Pour les plus grandes, revenez à l'étape 4 avec leurs choix intégrés.