Typographie VYBE
En motion design, le texte est souvent l'acteur principal. Traitez-le comme une image : il a du poids, de l'échelle, un rythme et une caméra.
Polices fournies (OFL, dans vybe/assets/fonts/, copiées dans chaque projet)
| Famille | Caractère | Idéal pour |
|---|---|---|
| Inter (variable 100–900) | neutre, précis | minimalisme Apple, corporate, UI, sous-titres |
| Space Grotesk (300–700) | technique, décalé | scientifique, expérimental, tech |
| Fraunces (serif variable) | chaleureux, littéraire, contraste élevé | cinématographique, documentaire, éditorial |
| JetBrains Mono (100–800) | code, données | étiquettes, nombres, look terminal |
| Anton (400, condensé) | fort, affiche | typographie cinétique, accroches sociales |
| Orbitron (variable) | affichage sci-fi | titres cyberpunk (mots courts uniquement) |
Chaque famille nommée doit utiliser @font-face { src: url("assets/fonts/<fichier>.woff2") } dans le fichier qui l'utilise (lint HyperFrames). Pour une police de marque utilisateur : copiez le fichier dans assets/fonts/ et déclarez-la de la même manière ; vérifiez que sa licence autorise l'intégration.
Associations : Fraunces + Inter (cinématographique) · Inter + JetBrains Mono (produit/tech) · Space Grotesk + JetBrains Mono (science) · Anton + Space Grotesk (social/cinétique) · Orbitron (titres uniquement) + Space Grotesk (tout le reste).
Règles de lisibilité pour la vidéo (appliquées par les audits hyperframes check)
- Taille de lecture minimale : 2,6 % du petit côté →
2.7cqmin(28 px en 1080p). Corps 2.8–3.4cqmin ; titres 6–12cqmin ; mots vedettes 15–34cqmin. - Temps de maintien ≈ 0,3 s par mot + 0,5 s ; une ligne de clôture ≥ 2 s.
- ≤ 3,2 mots à l'écran par seconde sur une scène ; ≤ ~10 mots par ligne.
- Contraste WCAG AA (4,5:1 corps, 3:1 grand). Sur une image, ajoutez un voile ou une ombre.
- Pas de
<br>dans le corps du texte ; utilisezmax-width(ex.78cqw) et laissez le texte se répartir. Les titres d'affichage peuvent être coupés délibérément avec des<span>en bloc par ligne. - Approche : resserrez les grands affichages (−0.02 à −0.05em), espacez les étiquettes petites capitales (+0.2 à +0.5em). N'animez jamais
letter-spacing(ça saute) — étalez les glyphes avecx. - Zones de sécurité : la vidéo verticale garde le texte lisible en dehors des 12 % supérieurs, 22 % inférieurs et 14 % droits.
Techniques cinétiques
| Technique | Comment |
|---|---|
| Mots flous à nets | mots dans des spans inline-block, fromTo {opacity:0,y:30,filter:blur(14px)}, décalage 0.12–0.16 |
| Slam | un mot par temps, scale 2.4 → 1 avec back.out(1.6), champ de couleur qui bascule derrière |
| Masque montant | wrapper de ligne overflow:hidden, texte intérieur yPercent 110 → 0 |
| Dévoilement centre-extérieur | clipPath: inset(0 50% 0 50%) → inset(0) |
| Étalement de glyphes | décalages x par lettre vers le centre s'annulant à 0 |
| Machine à écrire | clipPath inset avec ease steps(n), ou ensembles d'opacité par caractère |
| Écho de contour | dupliquer le mot avec -webkit-text-stroke, remplissage transparent, traînée décalée |
| Texte comme caméra | mise à l'échelle/rotation de la pile de mots entière au-delà du cadre vers la scène suivante |
| Échange de mots | empiler deux mots dans une boîte fixe ; yPercent le vieux dehors et le nouveau dedans |
| Surbrillance | span .hl inline-block mis à l'échelle avec back.out ou une barre de marqueur scaleX 0→1 derrière |
| Comptage | tabular-nums + onUpdate écrivant Math.round(v) |
Sous-titres (synchronisés mot par mot)
vybe audio injecte <script type="application/json" id="vybe-captions"> des repères ({start, end, text, words:[{text,start,end}]}) et chaque modèle VYBE contient un constructeur de sous-titres qui crée un élément par repère et illumine chaque mot à son start transcrit. Style par marque :
- Position à l'intérieur de la zone de sécurité, au-dessus des graphiques du tiers inférieur, ne couvrant jamais le sujet.
- 3–6 mots par repère, max 2 lignes, 3–3.4cqmin, poids 600+, voile ou ombre.
- Mettez en surbrillance le mot actif (opacité 0.45 → 1, ou couleur d'accent via une classe).
- Social : majuscules, gras, échelle pop sur chaque repère ; cinématographique : casse de phrase, fondu subtil.
- Ne sous-titrez jamais avec des durées de mots estimées ; la durée au niveau de la ligne doit sembler être au niveau de la ligne.