SonuSV7719/cinematic-camera

Caméra Cinématographique

À utiliser avec remotion-best-practices et motion-graphics. Construisez un monde connecté et déplacez une caméra partagée à travers celui-ci plutôt que de faire apparaître des panneaux déconnectés dans le vide.

Admission obligatoire

Avant de planifier ou de coder, suivez la porte d'admission motion-graphics. Si elle est manquante, demandez :

Quel format souhaitez-vous : insertion Instagram 4:3 demi-écran ou Instagram 9:16 plein écran ? Et quel fond : lumière chaude, sombre propre, grille lumineuse, ou grille sombre ?

Ne choisissez pas silencieusement le 9:16 ou le sombre. Si l'utilisateur délègue le choix, utilisez la lumière chaude.

Interdiction visuelle absolue

Cette compétence n'introduit jamais de néon, glow, bloom, bords lumineux, ombres colorées, orbes dégradés, lavis de couleur radial, dégradés cyan-violet, glassmorphisme, ou éclairage cyberpunk. Le mouvement de la caméra ne peut pas transformer une scène sobre en démonstration IA « vibe-codée ». Les accents produits restent plats et sobres.

Porte de référence approuvée obligatoire

À terminer avant de planifier ou de coder :

1. Inspectez les 3 à 5 derniers rendus approuvés pertinents pour le même projet, produit, rapport d'aspect, emplacement ou mécanisme visuel.
2. Ouvrez les compositions sources et inspectez les keyframes de la caméra, le timing, l'espacement, la typographie, les couleurs, la densité, les entrées, les sorties et les pauses finales.
3. Inspectez les clips réels ou les images représentatives ; les seuls noms de fichiers ne suffisent pas.
4. Inventoriez les actifs authentiques : logos, mascottes, captures d'écran, enregistrements, séquences, et résultats antérieurs.
5. Écrivez un court « beat map » expliquant comment le clip continue le système approuvé.
6. S'il n'existe aucune référence de projet, utilisez le repli verrouillé : monde physique/éditorial blanc cassé chaud, encre foncée, neutres atténués, un seul accent de marque plat et sobre, ombres neutres, et aucun effet décoratif.

Priorité des références : même vidéo → même produit/série → même rapport d'aspect/cas d'usage → autres exemples approuvés du dépôt → repli verrouillé.

Galerie canonique : https://github.com/Liamrjohnston/remotion-motion-graphics-skill

Le travail approuvé récent est la base de référence, pas une inspiration facultative. N'inventez pas une nouvelle esthétique pour la nouveauté.

Idée centrale

Construisez un monde plus grand que la fenêtre d'affichage. Ouvrez en gros plan sur une action, maintenez pendant qu'elle se termine, révélez le contexte, voyagez vers le contraste/la récompense, puis stabilisez.

Les panneaux peuvent exister, mais ils doivent partager un monde et une relation spatiale significative. Évitez les cartes déconnectées apparaissant indépendamment dans l'espace vide.

Montage de la caméra

Utilisez une seule timeline de keyframes partagée pour le point focal et le zoom :

const ease = Easing.inOut(Easing.cubic);
const KEY_T = [0, 46, 62, 78, 96, 132, 174, TOTAL_FRAMES];

const fx = interpolate(frame, KEY_T, [/* focal x */], {
  easing: ease,
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});
const fy = interpolate(frame, KEY_T, [/* focal y */], {
  easing: ease,
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});
const z = interpolate(frame, KEY_T, [/* zoom */], {
  easing: ease,
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});

<AbsoluteFill style={{backgroundColor: BG}}>
  <div
    style={{
      position: 'absolute',
      transform: `translate(${VIEW_W / 2 - fx}px, ${VIEW_H / 2 - fy}px) scale(${z})`,
      transformOrigin: `${fx}px ${fy}px`,
    }}
  >
    {/* Toute la scène en coordonnées monde */}
  </div>
</AbsoluteFill>

• Les dimensions proviennent du format confirmé, jamais d'une valeur par défaut cachée.
• La largeur du monde est généralement 2 à 2,5 fois la largeur de la fenêtre.
• Les keyframes adjacentes répétées créent des pauses.
• Les mouvements de la caméra durent généralement 14 à 24 images.
• Terminez par deux keyframes presque identiques pour une pause stable dans l'éditeur.
• La caméra, le curseur, les effets et les objets connectés restent dans un seul système de coordonnées.

Chorégraphie

1. Ouvrez en gros plan sur quelque chose déjà en mouvement.
2. Maintenez pendant que l'action principale se termine.
3. Révélez son système plus large.
4. Voyagez vers le contraste/la récompense.
5. Éloignez-vous pendant que les objets de support terminent en séquence décalée.
6. Stabilisez-vous pour une coupe nette.

Règles :

• La caméra se déplace vers l'action suivante ; l'action se termine pendant la pause.
• Une seule action principale par temps fort (beat).
• Utilisez le micro-mouvement uniquement pour montrer l'état : frappe, tic-tac, vérification, lecture, progression, mouvement du curseur.
• Préférez la transformation continue au remplacement de scène.
• Préférez un voyage fluide aux fouets frénétiques.
• Le mouvement explique la causalité ; il ne compense jamais un concept faible.

Authenticité et texte

• Utilisez de vrais logos, séquences, captures d'écran, enregistrements, UI et données vérifiées lorsqu'ils sont disponibles.
• Ne remplacez jamais par des carrés colorés génériques, des marques factices, une UI inventée ou des métriques factices.
• Les noms de produits, noms de fichiers, compteurs, commandes, progression et texte UI réel sont autorisés.
• Ne répétez pas les phrases narrées et n'ajoutez pas de badges explicatifs parce qu'une image semble vide.

Porte de rejet en première passe

Ne montrez pas un rendu tant que chaque réponse n'est pas « non » :

1. Le format ou le fond était-il non confirmé ?
2. Y a-t-il du néon, du glow, un éclairage coloré, un lavis dégradé, un panneau de verre ou un traitement IA « vibe-codé » ?
3. La scène est-elle un ensemble de cartes génériques déconnectées dans le vide ?
4. Le sombre est-il utilisé sans que l'utilisateur ne l'ait choisi ou qu'une référence approuvée ne l'exige ?
5. Le mouvement de la caméra décore-t-il au lieu de guider la causalité ?
6. Des actifs authentiques sont-ils manquants alors qu'ils sont disponibles ?
7. Des éléments essentiels sont-ils illisibles à l'emplacement Instagram choisi ?
8. Le résultat ne correspond-il pas à l'espacement, la densité, les matériaux et le rythme de mouvement de la référence approuvée ?

Révisez en privé jusqu'à ce que la porte soit passée.

QA et livraison

1. Rendez des images fixes pour l'ouverture, chaque destination de la caméra, la transition, la récompense et la pause finale.
2. Comparez à côté des références approuvées pour le cadrage, la densité, l'identité, la sobriété des matériaux et le polissage.
3. Vérifiez que les actifs authentiques restent lisibles.
4. Vérifiez la séquence pause → déplacement → pause et qu'aucune action n'est cachée pendant le voyage.
5. Inspectez le MP4 complet pour les voyages vides, les recadrages, les images mortes, le remplissage générique, le néon/glow et les pauses finales faibles.
6. Livrez uniquement lorsque le résultat ressemble au même système visuel approuvé.

Contraintes techniques

• Pilotez le mouvement avec useCurrentFrame(), spring() et interpolate() ; pas d'animation CSS.
• Les plages d'entrée de interpolate() doivent être strictement croissantes.
• Gardez les mondes modérés ; les grandes couches floues/ombrées sont coûteuses et violent généralement les règles visuelles.
• Utilisez des chiffres tabulaires pour les données qui défilent.