tcut × Remotion — vidéos de lancement avec séquences terminal r…

tcut × Remotion — vidéos de lancement avec séquences terminal réelles

tcut produit des clips terminaux précis au pixel près ; Remotion les compose en React avec des animations spring, de la typographie et une mise en page. Ensemble : une vidéo de lancement entièrement motion-design où les séquences terminal sont réelles, reproductibles et re-rendues.

Installez d'abord les deux compétences : npx skills add AmanVarshney01/tcut remotion-dev/skills.

Pipeline

1. Enregistrez les séquences avec tcut (voir la compétence tcut). Pour les clips destinés à Remotion :

   • fps: 30 pour correspondre à la composition Remotion ; margin: 0, borderRadius: 0 et laissez React dessiner la carte (coins arrondis, ombre). Gardez windowBar: "colorful" — les feux tricolores évoquent "un vrai terminal"
   • Pour une composition 1920×1080, enregistrez avec --font-size 30 (≈1480 px de large pour 80 colonnes) afin que les clips ne soient jamais agrandis
   • maxPause: "1s" garde les clips serrés ; ajoutez keys: true seulement si le public a besoin de voir les frappes
   • Sortie MP4 (H.264) — le composant <OffthreadVideo> de Remotion le lit image par image avec précision
   • Ajoutez t.chapter("nom") avant chaque étape : les chapitres sont intégrés au MP4 et ffprobe -show_chapters -print_format json clip.mp4 fournit les horodatages exacts pour synchroniser les superpositions (par exemple, mettre en évidence la ligne de script en cours d'exécution — le plan "code → vidéo" le plus percutant)
   • Re-rendez un même cast dans plusieurs thèmes — tcut render hero.cast --theme nord -o themes/nord.mp4 — et échangez la source <OffthreadVideo src> par image : même timeline, le thème change en direct

2. Scaffoldez Remotion : bun create video (choisissez blank), ou ajoutez remotion, @remotion/cli, react, react-dom à un projet avec un registerRoot.

3. Composez : copiez les MP4 tcut dans public/, puis encadrez-les :

import { AbsoluteFill, OffthreadVideo, staticFile, spring, useCurrentFrame, useVideoConfig } from "remotion";

const Clip: React.FC<{ src: string; caption: string }> = ({ src, caption }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const enter = spring({ frame, fps, config: { damping: 200 } });
  return (
    <AbsoluteFill style={{ background: "#11111b", justifyContent: "center", alignItems: "center" }}>
      <div style={{ transform: `scale(${0.92 + 0.08 * enter})`, borderRadius: 16, overflow: "hidden", boxShadow: "0 30px 80px rgba(0,0,0,.6)" }}>
        <OffthreadVideo src={staticFile(src)} style={{ width: 1060 }} muted />
      </div>
      <h2 style={{ color: "#cdd6f4", fontFamily: "ui-monospace, monospace", fontSize: 38, marginTop: 26, opacity: enter }}>{caption}</h2>
    </AbsoluteFill>
  );
};

Enchaînez les scènes avec <Sequence from={...} durationInFrames={...}> ; synchronisez la durée des scènes avec la durée réelle de chaque clip (ffprobe -show_entries format=duration). Rognez avec startFrom/endAt (en images).

Les clips enregistrés avec une marge intégrée peuvent être recadrés en redimensionnant la vidéo par videoW / (videoW - 2 * margin) à l'intérieur d'une carte overflow: hidden.

4. Rendu : bunx remotion render <CompositionId> out/promo.mp4 --crf 15 --image-format png pour un master de haute qualité (intermédiaires PNG, H.264 quasi sans perte). Faites correspondre le fps de la composition à celui des clips tcut pour éviter le rééchantillonnage ; vérifiez d'abord la mise en page avec bunx remotion still <Id> still.png --frame N pour une image par scène.

5. Diffusez-la aussi en page web (optionnel) : la même composition s'exécute en direct dans le navigateur avec @remotion/player — <Player component={Promo} durationInFrames fps compositionWidth={1920} compositionHeight={1080} controls autoPlay loop initiallyMuted acknowledgeRemotionLicense style={{ width: "100%" }} />. <OffthreadVideo> passe automatiquement à <Video> dans le Player. Gardez les URL des clips derrière un seul helper (staticFile(ASSET_BASE + path)) pour que le projet et le site puissent pointer vers différents dossiers, copiez les clips dans le public/ du site, et chargez la même police (ex. @fontsource-variable/jetbrains-mono). Les titres deviennent du vrai texte DOM et toute la vidéo est défilable ; tcut.amanv.dev/promo est un exemple.

Notes de design pour un rendu professionnel

• Les clips terminaux affichent un texte net : ne jamais passer à l'échelle au-dessus de 100 % ; réduisez légèrement (~85–95 %) à l'intérieur d'une carte encadrée
• Arrière-plan uni et solide dans la palette du thème du terminal (ex. #0b0b12, fg #e8e8f2) ; laissez les cartes fenêtre apporter la profondeur via l'ombre. Évitez les dégradés, les lueurs et les grilles de points — ils nuisent à la netteté du texte du terminal
• Carte titre : titre monospace tapé (découpez la chaîne image par image) donne un aspect "natif terminal"
• Carte de fin : la commande d'installation dans un bloc aspect "copier-coller" bat un logo
• Une idée par scène, un grand titre monospace plus la ligne d'API tcut qui fait le nécessaire ; coupez au moment où quelque chose apparaît dans le clip. Une visite des fonctionnalités peut durer ~70 s ; une vidéo sociale doit rester sous 30 s

Pourquoi cette combinaison

Les séquences terminal sont un artefact de build, pas une capture d'écran : modifiez le script tcut ou le thème, relancez, et la promo se re-rend avec bunx remotion render — un pipeline de vidéo de lancement entièrement reproductible en TypeScript de bout en bout.