AmanVarshney01/tcut

tcut × Remotion — Launch-Videos mit echten Terminalaufnahmen

tcut erzeugt pixelgenaue Terminal-Clips; Remotion komponiert sie in React mit Federn, Typografie und Layout. Zusammen: ein vollständig bewegungsgestaltetes Launch-Video, in dem die Terminalaufnahmen echt, reproduzierbar und erneut renderbar sind.

Installiere zuerst beide Skills: npx skills add AmanVarshney01/tcut remotion-dev/skills.

Pipeline

1. Nimm die Footage mit tcut auf (siehe den Skill tcut). Für Clips, die für Remotion bestimmt sind:

   • fps: 30, um zur Remotion-Komposition zu passen; margin: 0, borderRadius: 0 und lass React die Karte zeichnen (abgerundete Ecken, Schatten). Behalte windowBar: "colorful" — die Ampeln wirken wie "ein echtes Terminal"
   • Für eine 1920×1080-Komposition nimm mit --font-size 30 auf (≈1480 px breit für 80 Spalten), damit Clips nie hochskaliert werden
   • maxPause: "1s" hält Clips knapp; füge keys: true nur hinzu, wenn das Publikum Tastatureingaben sehen muss
   • Gib MP4 (H.264) aus — Remotions <OffthreadVideo> liest es frame-genau
   • Füge t.chapter("name") vor jedem Schritt ein: Kapitel landen im MP4 und ffprobe -show_chapters -print_format json clip.mp4 gibt genaue Zeitstempel, die du zur Synchronisation von Overlays verwenden kannst (z. B. die Skriptzeile hervorheben, die gerade ausgeführt wird — der stärkste "Code → Video"-Effekt)
   • Rendere einen Cast in mehreren Themes neu — tcut render hero.cast --theme nord -o themes/nord.mp4 — und tausche <OffthreadVideo src> pro Frame aus: gleiche Timeline, Theme wechselt live

2. Remotion-Grundgerüst: bun create video (wähle leer), oder füge remotion, @remotion/cli, react, react-dom zu einem Projekt mit einem registerRoot hinzu.

3. Komponieren: Kopiere die tcut-MP4s in public/ und rahme sie ein:

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>
  );
};

Ordne Szenen mit <Sequence from={...} durationInFrames={...}> an; passe die Szenenlängen an die tatsächliche Dauer jedes Clips an (ffprobe -show_entries format=duration). Trimme mit startFrom/endAt (Frames).

Clips, die mit einem integrierten margin aufgenommen wurden, können beschnitten werden, indem das Video um videoW / (videoW - 2 * margin) skaliert wird, innerhalb einer Karte mit overflow: hidden.

4. Rendern: bunx remotion render <CompositionId> out/promo.mp4 --crf 15 --image-format png für ein hochwertiges Master (PNG-Zwischenbilder, nahezu verlustfreies H.264). Passe das fps der Komposition an die tcut-Clips an, um Resampling zu vermeiden; überprüfe das Layout zuerst mit bunx remotion still <Id> still.png --frame N für einen Frame pro Szene.

5. Auch als Webseite ausliefern (optional): Dieselbe Komposition läuft live im Browser mit @remotion/player — <Player component={Promo} durationInFrames fps compositionWidth={1920} compositionHeight={1080} controls autoPlay loop initiallyMuted acknowledgeRemotionLicense style={{ width: "100%" }} />. <OffthreadVideo> fällt im Player automatisch auf <Video> zurück. Halte Clip-URLs hinter einem Helfer (staticFile(ASSET_BASE + path)), sodass das Projekt und die Website auf verschiedene Ordner verweisen können, kopiere die Clips in das public/ der Website und lade dieselbe Schriftart (z. B. @fontsource-variable/jetbrains-mono). Titel werden zu echtem DOM-Text und das gesamte Video ist durchsuchbar; tcut.amanv.dev/promo ist ein Beispiel.

Designhinweise für einen professionellen Look

• Terminal-Clips sind klarer Text: skaliere sie niemals über 100%; skaliere sie leicht herunter (~85–95%) innerhalb einer gerahmten Karte
• Flacher, einfarbiger Hintergrund in der Palette des Terminal-Themes (z. B. #0b0b12, Vordergrund #e8e8f2); lasse die Fensterkarten die Tiefe durch Schatten tragen. Vermeide Verläufe, Glüheffekte und Punktgitter — sie konkurrieren mit dem klaren Terminaltext
• Titelkarte: monospace-Schreibmaschinen-Headline (stringweise nach Frame aufteilen) wirkt "terminal-nativ"
• Endkarte: Der Installationsbefehl in einem Kopieren-Einfügen-Block schlägt ein Logo
• Eine Idee pro Szene, eine große Mono-Headline plus die eine tcut-API-Zeile, die sie umsetzt; Schneide in dem Moment, in dem etwas im Clip erscheint. Eine Feature-Tour kann ~70 s laufen; ein Social-Media-Schnitt sollte unter 30 s bleiben

Warum diese Kombination

Die Terminalaufnahmen sind ein Build-Artefakt, kein Screenshot: Ändere das tcut-Skript oder -Theme, führe es erneut aus, und das Promo-Video wird mit bunx remotion render neu gerendert — eine vollständig reproduzierbare Launch-Video-Pipeline in TypeScript von Anfang bis Ende.