Titre cinétique de six secondes

Kinetic Title Drop

Un film de six secondes, 1920×1080, uniquement typographique, en trois temps :

1. Un premier mot énorme ouvre le cadre avec une barre oblique capillaire le traversant, puis se stabilise en haut à gauche.
2. Un deuxième mot apparaît en contour et se remplit avec la couleur d'accent.
3. Une ligne de conclusion arrive en fouettant depuis la droite avec un flou de mouvement, et une barre d'accent balaie en dessous. Un badge et un pied de page apparaissent en fondu, tout reste immobile, puis sort proprement.

Le template est une composition HyperFrames. Vous remplissez un brief, un script l'écrit dans le template, et HyperFrames vérifie et rend le MP4 localement. Le texte est mesuré dans la police réelle et dimensionné pour remplir le cadre, de sorte que les mots courts et longs atterrissent dans le même espace.

Ce dont vous avez besoin

• Node.js 22 ou plus récent et FFmpeg dans le PATH.
• HyperFrames s'exécute via npx, épinglé à la version avec laquelle ce template a été testé : npx --yes [email protected].
• Le premier rendu télécharge un Chrome sans tête. Si render indique que Chrome est manquant, exécutez une fois npx --yes [email protected] browser ensure.
• Accès réseau à cdn.jsdelivr.net, qui sert GSAP au template. Voir Dépannage si ce site est bloqué.

Le dossier de cette compétence est <skill> ci-dessous : le dossier dans lequel se trouve ce SKILL.md.

Étapes

1. Obtenez le texte

Demandez tout ce que vous ne pouvez pas déduire. Chaque champ a une limite ; le script rejette les valeurs qui la dépassent.

Champ	Ce que c'est	Limite	Exemple correct
line1	Premier mot. S'ouvre énorme, puis se place en haut à gauche.	10	Ship
line2	Deuxième mot. Apparaît en contour, se remplit avec l'accent.	6	it
line3	La conclusion. La plus grande ligne, avec la barre en dessous.	12	today.
chip	Petit badge, en haut à droite. Version, date ou statut.	24	v2.0 · Out now
metaLeft	Pied de page, à gauche. De quoi il s'agit, en quelques mots.	60	Release notes · 14 fixes
metaRight	Pied de page, à droite. Généralement une URL ou un pseudo.	40	relay.example/changelog

Conseils de rédaction :

• Les lignes 1 et 2 partagent la rangée du haut, donc ensemble elles doivent se lire comme le début d'une phrase (« Ship / it », « Notes / that », « Meet / the »). La ligne 3 la termine.
• Tout est en majuscules. Les mots seuls se lisent le mieux ; la ligne 3 peut contenir deux mots courts.
• Gardez line1 + line2 sous environ 12 caractères, sinon la rangée du haut devient petite à côté de la conclusion.
• Le pied de page reste affiché environ 2 secondes, donc gardez-le scannable.

2. Choisissez les couleurs

Trois couleurs hexadécimales : ground (fond), ink (texte) et accent (contour, remplissage, barre, badge). Utilisez les couleurs de la marque si vous les avez. Sinon, partez d'un préréglage :

Préréglage	ground	ink	accent
Ember	#0f1013	#f5f4ef	#ff5b2e
Fieldnote	#f1ede4	#18201c	#2f6b4f
Cobalt	#0b1020	#eef1ff	#5b7cff
Paper	#fbfaf7	#111111	#e8462b
Lime	#101410	#f2f5ee	#b6f23a

ink doit avoir un fort contraste avec ground ; accent doit avoir au moins 3:1 contre ground, car la ligne 2 est dessinée avec cette couleur. check mesure les deux et vous indique si l'un échoue.

3. Créez le projet et appliquez le brief

cp -r <skill>/template ./title-drop
cd title-drop

Écrivez brief.json dans le projet avec les champs des étapes 1 et 2 :

{
  "line1": "Ship",
  "line2": "it",
  "line3": "today.",
  "chip": "v2.0 · Out now",
  "metaLeft": "Release notes · 14 fixes · 3 new features",
  "metaRight": "relay.example/changelog",
  "ground": "#0f1013",
  "ink": "#f5f4ef",
  "accent": "#ff5b2e"
}

Ensuite, écrivez-le dans le template :

node <skill>/scripts/apply-brief.mjs . brief.json

Il vérifie chaque valeur par rapport aux variables déclarées du template (type, longueur, format de couleur) et liste chaque problème d'un coup si quelque chose cloche. Corrigez le brief et relancez-le. Vous pouvez omettre des champs pour conserver la valeur actuelle.

Deux briefs terminés se trouvent dans <skill>/examples/.

4. Vérifiez

npx --yes [email protected] check --json

check lint le fichier, le lit dans un navigateur, mesure la disposition au fil du temps et teste le contraste. "ok": true sans aucune constatation signifie qu'il est prêt. Corrigez toute constatation avant de rendre. Celles que le texte peut provoquer :

• contrast_aa_failure : une paire de couleurs est trop proche. Utilisez la suggestedColor donnée, ou choisissez une teinte plus foncée ou plus claire.
• text_box_overflow, clipped_text ou content_overlap : une valeur est plus longue que ce que le template attend, généralement un pied de page ou un badge qui empiète sur son voisin. Raccourcissez-la.

Ne modifiez pas la structure du template pour faire taire une constatation. Corrigez plutôt le brief.

5. Regardez avant de rendre

npx --yes [email protected] snapshot --at 0.3,1.6,3.6,5.2 -o snapshots

Cela écrit des images PNG dans snapshots/. Ouvrez-les et vérifiez le cadre d'ouverture, l'atterrissage du deuxième mot et le cadre final maintenu. Recherchez des mots qui entrent en collision avec le badge, un pied de page qui empiète sur la barre, ou un accent qui disparaît sur le fond.

6. Rendu

npx --yes [email protected] render --quality delivery -o renders/title-drop.mp4

Le package.json du projet contient les mêmes commandes que npm run check et npm run render. Utilisez --quality draft pour un test rapide, et --fps 60 pour un résultat plus fluide sur les réseaux sociaux.

7. Remettez le résultat

Donnez à la personne le chemin vers renders/title-drop.mp4 et une image fixe de l'étape 5. Dites-lui quels champs modifier pour une autre version : elle n'a qu'à éditer brief.json et réexécuter les étapes 3 à 6.

Carte temporelle

Temps (s)	Ce qui se passe
0.00	line1 est déjà à l'écran, grand et centré, comme une vignette
0.00–0.42	Une barre oblique capillaire d'accent le traverse, puis disparaît
0.80–1.35	line1 se déplace en haut à gauche
1.35–1.77	line2 apparaît en contour
1.90–2.06	line2 se remplit avec l'accent
2.05–2.55	line3 arrive en fouettant depuis la droite
2.60–3.05	La barre d'accent balaie en dessous de line3
3.10–3.50	Le badge, le pied de page et les marques de coin apparaissent en fondu
3.50–5.45	Maintien
5.45–5.80	Tout sort vers le haut avec un court flou

Plusieurs versions à la fois

Pour rendre plusieurs variantes (une par langue, produit ou date), écrivez un tableau JSON de briefs et rendez-les en une seule fois. Chaque objet est un brief complet ou partiel, fusionné avec les valeurs déjà appliquées :

npx --yes [email protected] render --batch variants.json --quality delivery -o "renders/{index}.mp4"

--batch définit les variables par rendu, donc vous n'avez pas besoin de apply-brief pour chacun. Le chemin de sortie nécessite un espace réservé tel que {index} ou un champ comme {line3}, sinon les fichiers s'écrasent les uns les autres. Exécutez d'abord check sur un brief représentatif, et regardez le texte le plus long dans un instantané.

Dépannage

• Le rendu se bloque, puis affiche une image statique, ou signale sub_timeline_script_failure. GSAP n'a pas été chargé. Si votre réseau bloque cdn.jsdelivr.net, exécutez npm i [email protected] dans le projet, copiez node_modules/gsap/dist/gsap.min.js dans assets/vendor/, et pointez le <script src> dans index.html vers assets/vendor/gsap.min.js.
• Les mots semblent être dans la mauvaise police. Le template utilise League Gothic et JetBrains Mono, que HyperFrames fournit. Si vous changez de police, utilisez une autre famille fournie (npx hyperframes docs compositions les liste) ou ajoutez un @font-face, sinon check échoue.
• Les couleurs n'ont pas changé. Exécutez apply-brief de l'étape 3 à nouveau et vérifiez qu'il a imprimé Applied N values. Modifier les couleurs :root du CSS n'a aucun effet ; les variables l'emportent.
• Vous voulez une durée différente ? Gardez-la à 6 s. Les temps sont chronométrés pour atterrir dans cette fenêtre ; étirer la durée racine ne fait qu'allonger le maintien.

Fichiers

• template/ : le projet HyperFrames (index.html, hyperframes.json, package.json).
• scripts/apply-brief.mjs : valide un brief et l'écrit dans le template. Aucune dépendance.
• examples/relay-v2/ et examples/fieldnote-beta/ : briefs terminés. Les aperçus sur Lookbk sont rendus à partir de ceux-ci.
• NOTICE.md : logiciels tiers utilisés par cette compétence.