Remotion (PrismerCloud)

Remotion

Créez et maintenez des projets Remotion tout en préservant les modifications de l'utilisateur. Si un fichier a changé de manière inattendue, traitez-le comme intentionnel sauf si l'utilisateur confirme le contraire.

Workflow

1. Inspectez package.json, le fichier de verrouillage, les compositions existantes, le diff actuel, et npx remotion versions. Réutilisez le gestionnaire de paquets et la structure du projet ; conservez tous les paquets remotion / @remotion/* sur une version exacte.
2. Confirmez la sortie demandée : modification de composition/source, aperçu Studio, média rendu, un Player intégré, ou un service de rendu.
3. Implémentez des visuels déterministes, basés sur l'image clé et gardez les entrées de rendu sérialisables.
4. Prévisualisez dans Studio. Rendez seulement lorsque l'utilisateur demande un fichier média.
5. Vérifiez le média rendu avec ffprobe et inspectez les images représentatives.
6. Signalez les fichiers modifiés, les preuves de prévisualisation/rendu, et le récépissé de livraison. Dans Prismer, un chemin de sandbox non sécurisé n'est pas un résultat livré.

Contrat d'artefact et de livraison Prismer

Lorsque l'utilisateur demande un média rendu, écrivez le fichier final sous $PRISMER_ARTIFACTS_DIR (le <artifacts_dir> du dispatch). Placez les échafaudages de projet, les images, les sondes et autres fichiers intermédiaires sous $PRISMER_SCRATCH_DIR ou dans l'arborescence du projet existant. Livrez ensuite chaque fichier final demandé exactement une fois :

cloud deliver "$PRISMER_ARTIFACTS_DIR/launch-video.mp4"

Écrire ou rendre un fichier ne l'attache pas. Un récépissé réussi de cloud deliver est l'oracle de livraison. Ne livrez pas d'images de prévisualisation, d'audio temporaire ou de doublons de codage, sauf si l'utilisateur les a demandés. Si aucun répertoire d'artefact de dispatch n'existe, conservez le résultat dans le chemin de sortie du projet approuvé par l'utilisateur et signalez que la livraison n'était pas disponible plutôt que d'inventer un récépissé.

Création de projet et compositions

N'échafaudez pas sur un projet non vide. Lorsqu'aucun projet approprié n'existe, confirmez que Node.js et Git sont disponibles, puis exécutez :

npx create-video@latest --yes --blank --no-tailwind my-video
cd my-video
npm install

Utilisez un nom de répertoire significatif. Ajoutez Tailwind uniquement lorsque l'utilisateur le demande ou que le projet l'utilise déjà. Inspectez le manifeste, la configuration et le CSS global générés avant de continuer : les versions du générateur peuvent encore émettre des dépendances et des importations Tailwind lorsque --no-tailwind a été demandé. Supprimez-les uniquement lorsque le projet ne les utilise pas, et maintenez les versions des paquets Remotion alignées.

Dans les images sandbox Prismer, utilisez un cache npm inscriptible et limité à la commande pour chaque commande qui peut installer ou invoquer un paquet manquant, y compris l'échafaudage, npm ci, remotion add, les sondes et les rendus :

npm_config_cache="${PRISMER_SCRATCH_DIR:-/tmp}/npm-cache" npm ci

Ne modifiez pas la configuration npm globale de l'utilisateur pour contourner une incompatibilité de propriété du sandbox.

Conservez les métadonnées de composition statiques en ligne :

<Composition
  id="LaunchVideo"
  component={LaunchVideo}
  durationInFrames={300}
  fps={30}
  width={1920}
  height={1080}
  defaultProps={{title: 'Launch day'}}
/>

Utilisez calculateMetadata() uniquement lorsque la durée, les dimensions ou les props dépendent réellement d'entrées, de données distantes ou d'une inspection multimédia. Conservez defaultProps en ligne afin que Studio puisse enregistrer les modifications de props dans le code. Pour les vidéos multi-scènes, utilisez des limites de <Sequence> nommées et dérivez tout le timing d'un seul plan tenant compte du fps.

Animation basée sur l'image clé

Conduisez l'animation rendue à partir de useCurrentFrame(), interpolate(), de ressorts ou d'easing. N'utilisez pas de transitions CSS, d'animations CSS, de minuteries temps réel ou d'utilitaires d'animation Tailwind ; ils ne produisent pas de rendus déterministes.

import {
  AbsoluteFill,
  Easing,
  Interactive,
  interpolate,
  useCurrentFrame,
  useVideoConfig,
} from 'remotion';

export const Hero = () => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();

  return (
    <AbsoluteFill style={{justifyContent: 'center', alignItems: 'center'}}>
      <Interactive.Div
        name="Hero title"
        style={{
          opacity: interpolate(frame, [0, fps], [0, 1], {
            extrapolateLeft: 'clamp',
            extrapolateRight: 'clamp',
            easing: Easing.bezier(0.16, 1, 0.3, 1),
          }),
          scale: interpolate(frame, [0, fps], [0.9, 1], {
            extrapolateLeft: 'clamp',
            extrapolateRight: 'clamp',
            easing: Easing.spring({damping: 200}),
            output: 'perceptual-scale',
          }),
          fontSize: 88,
        }}
      >
        Launch day
      </Interactive.Div>
    </AbsoluteFill>
  );
};

Préférez les propriétés CSS individuelles scale, translate et rotate à une chaîne transform composée. Limitez les deux extrémités des animations finies sauf si l'extrapolation est intentionnelle.

Balisage éditable dans Studio

Utilisez Interactive.* pour les éléments HTML et SVG qui doivent être sélectionnables, déplaçables, redimensionnables, rotatifs, stylisés ou keyframés dans Studio. <Img> est déjà interactif.

• Donnez à chaque élément interactif un nom court, codé en dur et descriptif.
• Placez le texte unique directement à l'intérieur de l'élément.
• Conservez les objets de style, les plages interpolate(), les sorties, l'easing et l'extrapolation en ligne lorsque la réécriture dans Studio est importante.
• Déstructurez uniquement les valeurs prises en charge telles que fps, width, height et durationInFrames de useVideoConfig().
• Évitez les constantes de style extraites, la propagation d'objets, les tableaux d'effets calculés et les variables arbitraires à l'intérieur des plages de keyframes modifiables.

Pour les composants personnalisés, consultez l'API actuelle make-component-interactive dans la documentation officielle de Remotion avant de l'implémenter.

Ressources, médias et timing

Placez les ressources locales dans public/ et référencez-les avec staticFile() :

import {Audio, Video} from '@remotion/media';
import {AnimatedImage, CanvasImage, staticFile} from 'remotion';

export const MediaLayer = () => (
  <>
    <Video src={staticFile('clip.mp4')} />
    <Audio src={staticFile('music.mp3')} />
    <CanvasImage src={staticFile('logo.png')} />
    <AnimatedImage src={staticFile('sticker.gif')} />
  </>
);

Utilisez @remotion/gif lorsque le chemin de l'image animée basé sur Chrome n'est pas approprié. Installez les paquets de l'écosystème avec npx remotion add <package> afin que les versions des paquets Remotion restent alignées.

Privilégiez les médias locaux ou adressés par contenu pour des rendus reproductibles dans le sandbox. N'incorporez pas de cookies, de jetons d'accès, d'URL signées ou d'identifiants de carte dans le code source ou les props de composition. Pour les ressources asynchrones, les polices, les sous-titres et les tuiles de carte, associez delayRender() / continueRender() avec cancelRender() en cas d'échec afin qu'une dépendance manquante échoue explicitement au lieu de bloquer jusqu'à l'expiration du délai.

Utilisez from, durationInFrames et trimBefore sur les composants pris en charge. Enveloppez les composants non pris en charge dans <Sequence> :

<Sequence name="Product demo" from={2 * fps} durationInFrames={6 * fps}>
  <Video src={staticFile('demo.mp4')} trimBefore={1 * fps} />
</Sequence>

Faites correspondre la durée du média au segment utilisable prévu. Conservez le timing des scènes dans un seul plan afin que les transitions ne se chevauchent pas accidentellement et ne laissent pas d'images vides.

Pour les effets, utilisez la technique la moins complexe qui produit le plan :

1. HTML, SVG et CSS.
2. Un effet Remotion sur l'élément ou un wrapper HtmlInCanvas.
3. Un effet personnalisé ou un shader uniquement lorsque les deux premières ne peuvent pas le produire.

Gardez les tableaux d'effets stables. Rendez des éléments séparés au lieu de modifier conditionnellement la forme d'un tableau d'effets.

Sous-titres et inspection multimédia

Normalisez les sous-titres au format Caption[] de Remotion et conservez les horodatages d'ingestion en millisecondes :

import type {Caption} from '@remotion/captions';

const caption: Caption = {
  text: 'Hello',
  startMs: 0,
  endMs: 800,
  timestampMs: null,
  confidence: null,
};

Convertissez les millisecondes en images uniquement à la limite de la composition en utilisant le fps de la composition. Préservez le timing des mots lorsqu'il est disponible, regroupez les sous-titres en pages lisibles, animez à partir de l'horloge d'images et vérifiez le retour à la ligne et les zones de sécurité aux dimensions de sortie réelles.

Utilisez l'analyseur @remotion/captions actuel pour SRT plutôt que d'écrire un analyseur d'horodatage. Avant d'implémenter des sous-titres, confirmez les API actuelles pour parse-srt, createTikTokStyleCaptions et le fournisseur de transcription choisi.

Pour la visualisation audio, utilisez @remotion/media-utils avec des données audio fenêtrées par image ; ne pilotez jamais de barres ou de formes d'onde à partir d'un analyseur en temps réel. Pour les graphiques et l'animation de texte, calculez d'abord la géométrie finale et révélez-la avec un masquage basé sur l'image, une opacité ou des transformations afin que les barres, les étiquettes et la disposition des glyphes restent stables.

Utilisez Mediabunny pour la durée côté navigateur, les dimensions, le rognage, le recadrage, les métadonnées et la gestion des conteneurs. Lisez https://mediabunny.dev/llms.txt avant d'utiliser des API inconnues. Maintenez les versions de mediabunny et de @mediabunny/* compatibles avec la version Remotion du projet.

Cartes

Choisissez une technique pour le plan :

Technique	À utiliser lorsque
Raster préparé	Une imagerie statique/satellitaire déterministe avec des superpositions animées est suffisante.
Mapbox	Des styles soignés, un rendu globe ou des bâtiments 3D sont nécessaires.
MapLibre	Un runtime vectoriel open source sans clé API Mapbox est préféré.
MapTiler	Des styles hébergés ou des annotations géographiques correspondent au projet.
CesiumJS	Un terrain, une 3D à l'échelle du globe ou un mouvement de caméra de vol est nécessaire.

Ne validez jamais d'identifiants de carte. Confirmez les licences et les attributions pour l'imagerie, les tuiles et les styles. Avant la capture d'image, attendez les tuiles, l'imagerie, les polices et l'initialisation de la caméra. Pilotez le mouvement de la caméra à partir de l'horloge d'images Remotion, conservez les entrées géographiques locales ou adressées par contenu lorsque la répétabilité est importante, et vérifiez Chromium/WebGL sans tête dans l'environnement de rendu réel.

Studio, rendu et vérification

Démarrez Studio sans ouvrir de navigateur externe :

npx remotion studio --no-open

Utilisez l'URL imprimée. Ouvrez une composition directement à /<composition-id>, par exemple http://localhost:3000/LaunchVideo.

Indicateurs Studio utiles :

Argument	Objectif
--log=<level>	Définir error, warn, info ou verbose.
--port=<number>	Demander un port spécifique.
--force-new	Démarrer une autre instance pour le même projet et le même port.

Pour une vérification rapide et déterministe de la mise en page, effectuez le rendu d'une image :

npx remotion still LaunchVideo out.png --scale=0.25 --frame=30

À 30 fps, l'image 30 correspond à une seconde. Ignorez cette étape lorsqu'un test visuel existant fournit déjà des preuves suffisantes.

Avant le rendu, vérifiez que la CLI voit la composition prévue :

npx remotion versions
npx remotion compositions

Laissez Remotion gérer son navigateur compatible par défaut. Une image Prismer peut également contenir un navigateur Playwright, mais sa présence n'est pas une garantie de compatibilité : le binaire Chrome complet peut échouer sous la politique crashpad du sandbox, tandis qu'un Headless Shell plus récent peut réussir un rendu d'image fixe mais échouer un rendu multi-image. Passez --browser-executable uniquement pour un exécutable appartenant à l'image et apparié en version qui a réussi un test de rendu d'image adjacente. Ne parcourez jamais tout le système de fichiers à la recherche d'un navigateur et ne traitez jamais un lancement réussi comme une preuve de compatibilité.

Effectuez le rendu uniquement lorsque l'utilisateur demande un fichier média :

npx remotion render LaunchVideo out.mp4 --codec=h264
npx remotion still LaunchVideo out.png --frame=0

Le sandbox Prismer fournit Node et FFmpeg, et Remotion gère un navigateur compatible dans le cache du projet. Préférez la vidéo H.264 avec audio AAC en MP4 pour une lecture large, sauf si la transparence ou une sortie sans perte est requise. Maintenez la substitution du cache npm inscriptible limitée à chaque commande :

npm_config_cache=/tmp/npm-cache npx remotion render LaunchVideo out.mp4 --codec=h264

Pour le contenu CJK, chargez et attendez explicitement une police épinglée ; ne vous fiez pas uniquement à la présence d'une famille de polices de secours système. Inspectez les images codées adjacentes ainsi que les images fixes isolées : un moteur de rendu sans tête peut produire une image fixe correcte tandis qu'une police de secours peut scintiller ou perdre des glyphes lors d'un rendu complet.

Considérez l'inspection multimédia comme l'oracle de livraison :

ffprobe -v error \
  -show_entries format=duration:stream=codec_name,width,height \
  -of compact out.mp4

Confirmez la durée, les dimensions, les codecs et le flux audio attendu. Inspectez les images représentatives, y compris plusieurs images adjacentes dans les sections animées ou riches en texte, ou lisez le résultat lorsque c'est possible. Une seule commande de rendu réussie n'est pas une preuve de livraison. Si les images fixes isolées sont correctes mais que le rendu encodé a des images partielles ou scintillantes, utilisez l'API programmatique renderStill() avec une URL de service groupée et une instance de navigateur pour émettre la séquence d'images vérifiée, puis assemblez-la avec FFmpeg du sandbox. Ne bouclez pas la CLI et ne regroupez pas à nouveau une fois par image ; signalez la solution de repli et sondez à nouveau le fichier assemblé.

Players, éditeurs et services de rendu

Utilisez le <Player> de Remotion pour un aperçu React interactif. Maintenez la composition utilisable à la fois par le Player et les chemins de rendu ; ne bifurquez pas la logique visuelle.

Choisissez l'architecture de rendu en fonction de la charge de travail :

• Rendu navigateur/client pour un travail limité et local à l'utilisateur.
• Un worker Node et une file d'attente pour un serveur contrôlé.
• Remotion Lambda pour le rendu élastique natif AWS.
• L'intégration officielle actuelle Vercel ou Cloudflare lorsqu'elle correspond à la plateforme d'hébergement et à la version installée de Remotion.

Un rendu non trivial doit être asynchrone : renvoyez un ID de tâche, exposez la progression et l'échec, stockez la sortie de manière durable et rendez les tentatives idempotentes.

Pour les éditeurs, modélisez explicitement les props de composition et l'état de la timeline. Maintenez les entrées de rendu sérialisables et versionnées, validez les props non fiables, limitez l'accès aux ressources distantes et séparez l'état d'aperçu de l'état durable du projet.

La surface de rendu de Remotion est React. Pour les hôtes Vue, Angular ou Svelte, utilisez l'intégration officielle actuelle et maintenez la limite de composition React explicite plutôt que de vous fier à un starter mémorisé.

Documentation actuelle et mises à niveau

Préférez la documentation officielle actuelle aux API mémorisées. Ajoutez .md à une URL de documentation Remotion pour récupérer le Markdown, par exemple :

https://www.remotion.dev/docs/sequence.md

La recherche de la documentation Remotion peut …

[documentation tronquée pour la traduction]