Amartileyton/autovideo

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 lui au lieu de faire apparaître des panneaux déconnectés dans le vide.

Saisie obligatoire

Avant de planifier ou de coder, suivez la porte d'entrée motion-graphics. Si elle est absente, demandez :

Quel format souhaitez-vous : un insert Instagram 4:3 demi-écran ou un Instagram 9:16 plein écran ? Et quel arrière-plan : lumière chaude, sombre épuré, grille claire ou grille sombre ?

Ne prenez pas silencieusement la valeur par défaut 9:16 ou 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, lueur, bloom, bords lumineux, ombres colorées, orbes dégradés, lavis de couleur radial, dégradés cyan-violet, vitromorphisme ou éclairage cyberpunk. Le mouvement de la caméra ne peut pas transformer une scène sobre en démon IA « vibe-codée ». Les accents de produit restent plats et sobres.

Porte de référence approuvée obligatoire

À compléter avant de planifier ou coder :

1. Inspectez les 3 à 5 derniers rendus approuvés pertinents pour le même projet, produit, format, placement ou mécanisme visuel.
2. Ouvrez les compositions sources et inspectez les images clés de la caméra, le timing, l'espacement, la typographie, les couleurs, la densité, les entrées, les sorties et les arrêts finaux.
3. Inspectez les clips réels ou les images représentatives ; les noms de fichiers seuls sont insuffisants.
4. Inventoriez les assets authentiques : logos, mascottes, captures d'écran, enregistrements, séquences et sorties antérieures.
5. Écrivez une courte carte des battements expliquant comment le clip poursuit le système approuvé.
6. S'il n'existe aucune référence de projet, utilisez le repli verrouillé : monde éditorial/physique blanc cassé chaud, encre foncée, neutres atténués, un accent de marque plat et sobre, ombres neutres et zéro effet décoratif.

Priorité des références : même vidéo → même produit/série → même format/cas d'utilisation → autres exemples de référentiel approuvés → repli verrouillé.

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

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

Idée centrale

Construisez un monde plus grand que la zone d'affichage. Ouvrez serré sur une action, maintenez pendant qu'elle se termine, révélez le contexte, voyagez jusqu'au 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 un espace vide.

Configuration de la caméra

Utilisez une timeline d'images clés 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, [/* x focal */], {
  easing: ease,
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});
const fy = interpolate(frame, KEY_T, [/* y focal */], {
  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`,
    }}
  >
    {/* Scène entière en coordonnées mondiales */}
  </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 de 2 à 2,5 fois la largeur de la zone d'affichage.
• Les touches adjacentes répétées créent des maintiens.
• Les mouvements de caméra prennent généralement 14 à 24 images.
• Terminez par deux touches presque identiques pour un maintien stable de 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 serré sur quelque chose qui est déjà en mouvement.
2. Maintenez pendant que l'action principale se termine.
3. Révélez son système plus large.
4. Voyagez jusqu'au contraste/à la récompense.
5. Éloignez-vous pendant que les objets de soutien se terminent en séquence décalée.
6. Stabilisez pour une coupe nette.

Règles :

• La caméra se déplace vers l'action suivante ; l'action se termine pendant le maintien.
• Une action principale par battement.
• Utilisez le micro-mouvement uniquement pour montrer l'état : frappe, tic, vérification, lecture, progression, mouvement du curseur.
• Préférez la transformation continue au remplacement de scène.
• Préférez le voyage fluide aux mouvements 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 génériques colorés, 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.

Portail de rejet de premier passage

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

1. Le format ou l'arrière-plan était-il non confirmé ?
2. Y a-t-il du néon, de la lueur, 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 sans 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. Les assets authentiques sont-ils absents alors qu'ils sont disponibles ?
7. Les éléments essentiels sont-ils illisibles au placement Instagram choisi ?
8. Le résultat ne correspond-il pas à l'espacement, à la densité, aux matériaux et au rythme de mouvement de la référence approuvée ?

Révisez en privé jusqu'à ce que le portail soit passé.

QA et livraison

1. Rendez les images fixes pour l'ouverture, chaque destination de la caméra, la transition, la récompense et l'arrêt final.
2. Comparez avec les références approuvées pour le cadrage, la densité, l'identité, la sobriété des matériaux et la finition.
3. Vérifiez que les assets authentiques restent lisibles.
4. Vérifiez le maintien → mouvement → maintien 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/lueur et les arrêts finaux faibles.
6. Livrez uniquement lorsque cela 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.