# Template HyperFrames : typographie cinétique 4:5

Tiré le 29/09/2026 du reel agence v2 (`inocom-os-2/chantiers/reel-agence-ad-winneuse/hyperframes-v2/`),
page du Motion Deck : https://tools.inocom.io/motion/styles/typo-cinetique.html

Rendu avec ses valeurs par défaut, il redonne ce reel à l'image près (SSIM moyen 0,9996 sur 450 images).

## Rendre

```
cd "03 - Ressources/Skills/creation-motion-design/templates-hf"
python3 rendre_template.py typo-cinetique vars.json film.mp4 --voix voix.wav
python3 rendre_template.py typo-cinetique - film.mp4          # valeurs par défaut, muet
```

Passe toujours par `rendre_template.py` : `hyperframes render` lit la durée dans le HTML avant le
script, la variable `duree` seule ne change pas la longueur du MP4.

## Les variables (vars.json)

| id | type | défaut | rôle |
|---|---|---|---|
| `plans` | texte JSON | vide = les 12 plans du reel v2 | la suite des plans, voir plus bas |
| `duree` | nombre | 15 | durée totale ; les plans se la partagent au prorata de leur poids `d` |
| `encre`, `accent`, `second`, `clair` | couleur | #0F2B46, #E8893A, #1A61A4, #FDFDF8 | les quatre fonds ; chaque fond fixe la couleur du texte, du mot en relief et du trait |
| `rouge` | couleur | #FF5A52 | le point REC |
| `marque` | texte | INOCOM | le nom en haut à gauche |
| `habillage` | booléen | true | coins, REC, timecode, compteur d'images, barre |
| `graine` | nombre | 20260928 | tirage des particules (déterministe) |

Un plan : `{"f": <figure>, "t": [textes], "fond": "encre|accent|second|clair", "d": <poids>, "entree": "r|l|t|b|iris"}`.
Pour caler sur une voix, donne à `d` la durée en secondes du passage et à `duree` leur somme.

| figure | textes, dans l'ordre | ornement | options |
|---|---|---|---|
| `etoile` | ligne, mot clé | étoile qui tourne, anneau | |
| `balayage` | petit mot, mot géant | trait souligné | |
| `orbite` | ligne, mot encadré, ligne | 14 points en orbite, crochets | |
| `trois-lignes` | ligne, ligne, mot clé | trait | `point: true` |
| `chute` | surtitre mono, mot (lettres qui tombent) | éclats | ponctuation finale en relief |
| `anneau` | surtitre mono, mot | anneau de graduations qui se remplit | `graduations` (30) |
| `cercle-texte` | ligne, mot, texte du cercle | texte qui tourne en cercle | |
| `grille` | surtitre, petit mot, mot géant, mot clé | grille de points en vague | |
| `jours` | surtitre, mot, mot | rangée de cases qui s'allument | `etiquettes` (LUN à DIM) |
| `pluie` | petit mot, mot géant | pluie de particules | `point: true` |
| `crochets` | ligne, mot encadré | crochets qui se referment | |
| `etincelle` | petit mot, mot, ligne | étoile, étincelles, trait | |

Un texte trop long se réduit seul pour tenir dans 1040 px (960 px entre crochets).
Polices embarquées dans `fonts/` : Archivo, Unbounded, JetBrains Mono (aucune police bannie).
Contrôles avant de livrer : `npx -y hyperframes@0.8.73 lint`, puis une planche du MP4 regardée.