composition-de-cadre

Composition de cadre

Mettez en scène le cadre et déplacez la caméra : systèmes de grilles, zones de sécurité, hiérarchie focale, espace négatif, superposition en parallaxe et comment la mise en page guide l'œil dans le temps. Produit des notes de composition, une structure de couches (arrière-plan/milieu/premier plan) et des plans de mouvement de caméra concrets avec des chiffres.

Quand l'utiliser

• Définir la mise en page d'un cadre, son point focal et son espace négatif.
• Planifier les directions d'entrée/sortie des éléments et leurs trajectoires de mouvement.
• Concevoir les mouvements de caméra push/pull, pan, follow et parallaxe.
• Adapter une composition entre les formats 16:9, 9:16 et 1:1 avec des zones de sécurité.

Arbre de décision

Que mettez-vous en scène ?
├─ La mise en page d'un plan statique
│   └─ définir une grille → placer UN point focal sur un point fort des tiers
│      → classer la hiérarchie (taille>contraste>couleur>position) → réserver un espace négatif
├─ Là où les éléments entrent / sortent
│   └─ suivre le sens de lecture ; bord le plus proche ; ease-out à l'entrée, ease-in à la sortie
│      (nouveau contenu → depuis la droite/en bas ; retour/annulation → inverser)
├─ Une impression de profondeur / un mouvement de caméra
│   └─ diviser en couches arrière-plan/milieu/premier plan (les trois couches de mouvement)
│      → UN mouvement de caméra par temps (push | pan | follow | parallaxe), ease-in-out
└─ Une seule composition entre les formats (16:9 / 9:16 / 1:1)
    └─ maîtriser en 16:9, point focal dans la bande centrale → RECONFIGURER (ne pas recadrer) pour 9:16
       → garder le contenu critique à l'intérieur des marges de sécurité des titres

Référence croisée — appliquez les cadres communs. Cette compétence est la moitié spatiale de animation-principles. Appliquez-les explicitement :

• Règle du 1/3 (animation-principles) a deux formes et cette compétence utilise les deux spatialement : (a) Les tiers de composition — placer le point focal sur un point fort de la règle des tiers (33%/67%) ; (b) Distance — aucun élément ne parcourt plus d'environ 1/3 du cadre sans une image-clé intermédiaire ou un changement d'échelle/opacité, afin que les entrées restent lisibles.
• Trois couches de mouvement (animation-principles : Primaire / Secondaire / Ambiance) correspondent directement à la profondeur : premier plan = Primaire (le mouvement que l'œil suit), milieu = Secondaire (le sujet + réactions de soutien), arrière-plan = Ambiance (vie lente et à faible contraste). La vitesse du parallaxe s'adapte à ce rôle.
• Réglez les Trois Piliers (Intention émotionnelle / Récit visuel / Art du mouvement) et la Personnalité du Mouvement choisie (motion-art-direction) avant de numéroter un mouvement de caméra — Premium veut des push lents et longs, Énergique veut des whip-pans.

Flux de travail principal

1. Établir une grille

Une grille donne un alignement et un rythme. Par défaut, utilisez une grille à 12 colonnes pour le web/landscape video (elle se divise en moitiés, tiers, quarts, sixièmes) avec des gouttières et des marges extérieures. Pour un cadre de 1920 px de large : marge extérieure 80-120 px, 12 colonnes, gouttière 24-32 px.

contenu_largeur = largeur_cadre - 2 * marge
largeur_colonne = (contenu_largeur - (colonnes - 1) * gouttière) / colonnes

Exemple (1920 de large, marge 100, gouttière 24, 12 colonnes) : contenu 1720, colonne = (1720 - 11*24)/12 = 121,3 px.

Une grille de ligne de base (rythme vertical) de 8 px est l'unité d'espacement standard ; dimensionnez et espacez tout en multiples de 8 (8/16/24/32/48/64) pour une cohésion visuelle.

2. Placer le point focal

Utilisez la règle des tiers : divisez le cadre en une grille 3x3 ; placez le sujet principal sur une ligne de tiers ou à une intersection (les « points forts »), pas au centre absolu — sauf si la pièce utilise délibérément la symétrie pour la stabilité/formalité. Les intersections se situent approximativement à 33%/67% horizontalement et verticalement.

Construisez la hiérarchie visuelle dans cet ordre de priorité pour diriger l'œil : taille > contraste > couleur > position. L'élément le plus grand et le plus contrasté attire l'attention en premier. Établissez exactement un point focal principal par plan ; les éléments secondaires soutiennent, jamais ne rivalisent.

3. Utiliser l'espace négatif comme rythme

Ne remplissez pas le cadre. Un espace négatif généreux autour du point focal lui donne une apparence premium et confiante, et donne de l'espace au mouvement pour respirer. L'espace blanc est un élément de composition actif, pas un résidu.

4. Superposer la scène (arrière-plan / milieu / premier plan) pour la profondeur et le parallaxe

Divisez la composition en couches de profondeur : arrière-plan (le plus lent, contraste le plus faible, souvent désaturé/flou), milieu (le sujet), premier plan (le plus rapide, peut devenir flou en traversant). Parallaxe = déplacer les couches à différentes vitesses pour simuler la profondeur.

Ces couches de profondeur SONT les trois couches de mouvement de animation-principles projetées sur l'axe Z — le rôle de chaque couche dicte sa vitesse, son contraste et le mouvement qu'elle mérite :

Profondeur	Couche de mouvement	Vitesse de parallaxe	Contraste / focus	Ce qui vit ici
Arrière-plan	Ambiance	0,1–0,3x	faible, souvent désaturé/flou	ciel, dégradé, texture, décor
Milieu	Secondaire	0,5–0,7x	moyen ; soutient le sujet	environnement du sujet, éléments de soutien
Premier plan	Primaire	1,0–1,5x	net sur le sujet ; les accessoires du premier plan deviennent flous en traversant	le sujet héros + accessoires les plus proches

Le premier plan peut dépasser 1,0 pour donner l'impression d'être très proche. Le mouvement Primaire est celui que l'œil suit ; ne donnez jamais à deux couches un mouvement primaire concurrent.

5. Langage de la caméra (fonctionne en 2D et 3D)

• Push / pull — zoomer vers ou s'éloigner du sujet (dolly). Crée de l'intimité ou révèle le contexte. 800-2000 ms, ease-in-out.
• Pan / tilt / move — translater le cadre à travers la scène. Révèle l'espace, suit l'action.
• Follow — garder un sujet en mouvement cadré (souvent légèrement décentré, en avance sur le mouvement).
• Parallaxe — mouvement en couches qui vend la profondeur.

Un plan, une intention. Ne combinez pas push + pan + rotation simultanément — les mouvements combinés sont perçus comme chaotiques. Choisissez le seul mouvement qui sert le temps. Essentiels de timing intégrés : les mouvements de caméra utilisent ease-in-out (cubic-bezier(0.65, 0, 0.35, 1)) ; jamais linear sauf pour les boucles continues ; plus lent est plus cinématographique.

6. La direction d'entrée/sortie porte du sens

Le mouvement qui suit le sens de lecture (gauche à droite, haut en bas dans les locales LTR) semble naturel et fluide ; l'inverser crée de la tension ou signale un « retour/annulation ». Faites correspondre la direction à l'intention :

• Nouveau contenu arrivant -> entrez par la droite / par le bas.
• Fermer / revenir en arrière -> sortir à droite ou en bas, ou inverser l'entrée.
• Creuser plus profondément -> agrandir / pousser vers l'intérieur.

Les éléments doivent généralement entrer et sortir par le bord le plus proche du cadre avec un léger dépassement à l'entrée (ease-out) et une accélération à la sortie (ease-in).

7. Zones de sécurité et adaptation multi-format

Gardez tout le contenu critique (texte, logos, visages, CTA) à l'intérieur d'une marge de sécurité des titres afin que rien ne soit coupé ou caché derrière l'interface de la plateforme.

Format	Utilisation	Marge de sécurité des titres	Notes
16:9	YouTube, héros web	~5% tous les côtés	la sécurité des titres de diffusion était historiquement 10%
9:16	Reels, TikTok, Stories	haut ~12-14%, bas ~18-20%, côtés ~6%	l'interface de la plateforme mange le haut et le bas
1:1	publications de flux	~6-8% tous les côtés	symétrique
4:5	flux (plus haut)	~6% côtés, ~8% haut/bas	maximise l'espace réel du flux

Concevez le point focal suffisamment centré pour qu'il survive à tous les recadrages, puis laissez les éléments secondaires se reconfigurer par format. Pour 16:9 -> 9:16, réorganisez les arrangements horizontaux verticalement plutôt que de simplement recadrer les côtés.

Exemples travaillés

BON — héros produit, 16:9 → 9:16

Brief : héros de lancement d'application, personnalité Premium, doit fonctionner comme héros web et comme Reel.

• Grille : 1920×1080, marge 100, gouttière 24, 12 colonnes. La maquette du téléphone couvre les colonnes 7–11 (colonne de puissance droite).
• Point focal : écran du téléphone à l'intersection des tiers droits (1280, 360) — pas centré. Un point focal ; le titre (colonnes 1–5) est secondaire, contraste plus faible.
• Profondeur (trois couches de mouvement) : arrière-plan = dérive de dégradé doux, 0,2x, Ambiance. milieu = maquette du téléphone, 0,6x, scène Secondaire. premier plan = une pastille d'interface utilisateur floue dérivant, 1,2x + 3 px de flou, se lit comme un indice de profondeur Primaire.
• Caméra : un seul push-in, échelle 1,0→1,10 sur 1600 ms ease-in-out, origine sur l'écran du téléphone — correspond à Premium (lent, sans dépassement). Pas de pan ajouté.
• Adaptation 9:16 : reconfiguration — le titre se déplace au-dessus du téléphone, le téléphone remonté vers le milieu-haut pour dégager la zone CTA/navigation inférieure de 19%, texte +20%. Le point focal survit au recadrage car il a commencé dans la bande centrale.

Pourquoi cela fonctionne : un point focal, rôles de profondeur attribués, un mouvement de caméra, reconfiguration tenant compte des zones de sécurité au lieu d'un recadrage aveugle.

ANTI-PATRON — le plan « tout centré, tout bouge »

• Maquette du téléphone en plein centre, titre centré au-dessus, logo centré en dessous → trois éléments se battant sur le même axe, pas de hiérarchie, pas de point fort.
• Les trois couches glissent vers la gauche à la même vitesse 1,0x → pas de parallaxe, pas de profondeur, se lit comme « tout le modèle a bougé » (viole la Règle du 1/3 / distance : un glissement pleine largeur sans image-clé intermédiaire).
• La caméra fait push + pan + une légère rotation en même temps → chaotique, pas une seule intention.
• 9:16 fait en recadrant les côtés du 16:9 → titre et logo coupés, téléphone trop bas derrière la barre de navigation.

Correction : choisir un point focal de puissance, attribuer à chaque couche un rôle de profondeur + une vitesse de parallaxe distincte, un seul mouvement de caméra, et reconfigurer pour le format vertical au lieu de recadrer.

Erreurs courantes

Symptôme	Pourquoi	Correction
Le cadre semble plat / « le modèle a bougé »	toutes les couches bougent à une seule vitesse ; pas de rôles de profondeur	attribuer aux couches arrière-plan/milieu/premier plan les rôles Ambiance/Secondaire/Primaire + parallaxe 0,2/0,6/1,2x
L'œil ne sait pas où regarder	2+ éléments de taille/contraste égaux, tous centrés	un point focal sur un point fort des tiers ; classer taille>contraste>couleur>position
Le mouvement de la caméra semble chaotique	push + pan + rotation combinés	un mouvement par temps ; choisir celui qui sert l'intention
Contenu coupé sur les téléphones	conçu pour 16:9, recadré à 9:16	reconfigurer verticalement ; garder le contenu critique dans les marges de sécurité des titres (haut 13% / bas 19% en 9:16)
L'entrée se lit comme un « glissement », pas un « événement »	élément parcourt >1/3 du cadre en un seul mouvement ininterrompu	briser avec une image-clé intermédiaire ou associer le déplacement à l'échelle/opacité (Règle du 1/3, distance)
A l'air bon marché / à l'étroit	cadre rempli bord à bord	réserver un espace négatif autour du point focal ; c'est un élément actif
Le mouvement combat l'histoire	nombres choisis avant l'intention	régler les Trois Piliers + la Personnalité du Mouvement d'abord, puis numéroter le mouvement

Livrable — un plan de composition

Un bon plan de composition est transmis à une compétence d'implémentation (gsap-web, remotion-video, after-effects) et contient :

• Spécification du cadre : format(s), résolution, fps, grille (colonnes / marge / gouttière), unité de base.
• Point focal : coordonnées (px ou %) sur un point fort des tiers + le classement hiérarchique de chaque élément.
• Carte des couches : chaque élément assigné arrière-plan/milieu/premier plan → Ambiance/Secondaire/Primaire, avec vitesse de parallaxe.
• Entrée/sortie : par élément — bord, direction, famille d'easing, et si le déplacement dépasse 1/3 (et comment il est brisé).
• Mouvement de caméra : le seul mouvement, sa propriété + valeurs de→à, durée, easing, transform-origin.
• Zones de sécurité : marges de sécurité des titres par format cible + le plan de reconfiguration pour le vertical.
• Références croisées : quelle Personnalité du Mouvement et quelles décisions des Piliers dictent le timing.

Avant de terminer — liste de contrôle

• Exactement un point focal principal, sur un point fort des tiers (ou symétrie délibérée).
• Hiérarchie classée (taille > contraste > couleur > position) ; les secondaires ne rivalisent pas.
• Espace négatif réservé autour du point focal.
• Chaque élément assigné à une couche de profondeur (arrière-plan/milieu/premier plan = Ambiance/Secondaire/Primaire) avec une vitesse de parallaxe.
• Un seul mouvement de caméra, pas empilé ; avec easing (pas linéaire sauf boucle) ; 800-2000 ms pour les mouvements héros.
• Entrées/sorties utilisent le bord le plus proche, suivent le sens de lecture, ease-out à l'entrée / ease-in à la sortie.
• Aucun élément ne parcourt >1/3 du cadre sans une image-clé intermédiaire ou un changement d'échelle/opacité.
• Contenu critique à l'intérieur des marges de sécurité des titres pour chaque format cible ; le vertical est reconfiguré, pas recadré.
• Personnalité du Mouvement + Trois Piliers réglés avant que tout nombre ne soit choisi.

Référence rapide

Besoin	Défaut
Grille	12 colonnes, ligne de base 8px, espacement multiples de 8
Placement du point focal	point fort de la règle des tiers, pas en plein centre
Ordre de hiérarchie	taille > contraste > couleur > position
Couches de profondeur	arrière-plan / milieu / premier plan, parallaxe 0,2x / 0,6x / 1,2x
Caméra	un mouvement à la fois, ease-in-out, 800-2000 ms
Entrée / sortie	suivre le sens de lecture ; ease-out à l'entrée, ease-in à la sortie
Sécurité 9:16	haut 12%, bas 18 %, côtés 6%

Fichiers de référence

• references/camera-and-grids.md — mathématiques de grille avec nombres travaillés, tableaux complets de pourcentages de zones de sécurité par format, code de superposition de parallaxe (CSS scroll + JS pointer + Three.js), et recettes de mouvement de caméra nommées (push-in, whip-pan, orbit, dolly-zoom) avec valeurs d'images-clés.