Remotion Launch-Video, erstellt mit Imgcli

Verwandle eine Launch-Kurzbeschreibung in einen 15–30s Launch-Film in Remotion. Jede Szene ist eine Imgcli-Komponente: handgetunte, an gerenderten Einzelbildern gemessene Remotion-Szenen, die mit der shadcn-CLI installiert werden und in Ihrem Projekt als Code landen, den Sie besitzen.

Warum Imgcli, nicht handgeschriebene Animation. Ein Agent, der von Null animiert, fällt immer auf dasselbe Erscheinungsbild zurück: zentrierter Text auf einem Farbverlauf, alles blendet ein, am Ende ein Logo. Imgcli-Szenen sind Frame für Frame an echten Launch-Filmen gebaut, sodass die Bewegung bereits das Timing, die Typografie und die Kamera hat, die einen Launch teuer aussehen lassen. Ihre Aufgabe ist es, die Szenen auszuwählen und die Props zu füllen, nicht Bewegungen zu erfinden.

Die Imgcli-Regel

Jeder Beat ist eine Imgcli-Komponente, wenn keine passt. Bevor Sie für eine Einstellung interpolate() oder spring() schreiben, prüfen Sie den Katalog: https://imgcli.com/llms-components.txt?ref=skill-launch listet jede installierbare Komponente mit ihrem Zweck und ihrer Lauflänge in Frames auf. Jede Komponentenseite gibt Markdown aus, wenn Sie .md anhängen, z.B. https://imgcli.com/docs/scenes/announce-title.md?ref=skill-launch.
Erfinden Sie niemals einen Komponentennamen. Installieren Sie nur Namen aus dieser Liste. Wenn nichts zu einem Beat passt, sagen Sie das und tragen Sie den Beat mit Typografie (text-reveal), anstatt einen Namen zu raten.
Füllen Sie Props, schreiben Sie die Komponente nicht um. Ändern Sie Text, Farben und Bilder über Props. Das Bearbeiten der Bewegung innerhalb einer installierten Imgcli-Datei zerstört das Timing, das an gerenderten Einzelbildern ausgerichtet wurde.

Wenn das imgcli-Skill verfügbar ist, verwenden Sie es für Komposition und Render-Prüfungen.

Voraussetzungen

Ein Remotion-Projekt (npx create-video@latest). Leinwand: 1280×720 bei 30fps, die Größe, für die jede Imgcli-Szene ausgelegt ist.
Die shadcn-CLI. Wenn das Projekt keine components.json hat, führen Sie npx shadcn@latest init aus.
@remotion/transitions für Übergänge zwischen Szenen: npm i @remotion/transitions.
Der Launch-Text: Produktname, Überschrift, Slogan, die eine Zahl, die Sie belegen können, und echte Screenshots oder eine Bildschirmaufnahme.

Workflow

1. Eingaben sammeln

Holen Sie diese ein, bevor Sie etwas schreiben:

Die Kurzbeschreibung: Launch-Beitrag, Landingpage oder Einseiter. Extrahieren Sie die Überschrift, den Slogan, das eine differenzierende Merkmal, die Belegzahl und den Tonfall.
Marke: Logo (SVG-Pfad oder PNG), Primärfarbe, Schriftart. Imgcli-Szenen nehmen diese als Props (titleColor, logoSrc, symbolPath, fontFamily, theme).
Echte Produktaufnahmen: Screenshots oder eine 30–60s Aufnahme. Spiegeln Sie die echte UI-Beschriftung. Erfinden Sie niemals Labels, Funktionen oder Zahlen; das ist der schnellste Weg, einen Launch fake wirken zu lassen.

2. Storyboard vor jeglichem Code

Schreiben Sie zuerst die Einstellungsliste und ordnen Sie jeden Beat einer Imgcli-Komponente zu:

Beat	Zeit	Imgcli-Komponente	Frames	Was sie trägt
Haken	0–3s	`type-morph` oder `text-reveal`	94 / 90	Das Problem des Zuschauers, verwandelt in das Versprechen
Name	3–9s	`announce-title`	170	Augenbraue, Produktname, Slogan, Marke
Produkt	9–15s	`hero-launch`, `laptop-frame`, `phone-frame`	170 / 240 / 240	Echte Screens, auf einem Gerät
Beleg	15–17s	`count-grid`, `follower-rush`	47 / 300	Eine echte Zahl
Abschluss	17–20s	`wordmark-cut`, `block-wordmark`, `logo-flicker`, `logo-assemble`	66 / 150 / 100 / 108	Der Name, und sonst nichts

Regeln, die Nachrenderings vermeiden:

Führen Sie mit dem Problem des Zuschauers, nicht mit dem Produktnamen.
Zeigen Sie das Produkt innerhalb von 3 Sekunden nach dem Namen.
Geben Sie dem einen Moment, den nur Ihr Produkt liefern kann, die meiste Bildschirmzeit. Verteilen Sie die Laufzeit nicht gleichmäßig über Funktionen.
Budgetieren Sie jede Sequenz auf die natürliche Länge der Komponente (die Spalte Frames, auch in llms-components.txt). Unterbudgetierung schneidet die Animation mitten in der Einstellung ab; Überbudgetierung hinterlässt tote Luft.
Brennen Sie den Text ein. Die meisten Social-Views sind stummgeschaltet.

3. Szenen installieren

npx shadcn@latest add https://imgcli.com/r/type-morph.json https://imgcli.com/r/announce-title.json https://imgcli.com/r/hero-launch.json https://imgcli.com/r/count-grid.json https://imgcli.com/r/wordmark-cut.json

Jede landet unter components/imgcli/<name>.tsx, und ihre Abhängigkeiten werden mitinstalliert.

4. Komponieren

Ein TransitionSeries, eine Sequenz pro Beat, kurze Überblendungen dazwischen. Diese Komposition typgeprüft und rendert wie geschrieben, mit vier Screenshots in public/:

import { fade } from "@remotion/transitions/fade";
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { staticFile } from "remotion";
import { AnnounceTitle } from "@/components/imgcli/announce-title";
import { CountGrid } from "@/components/imgcli/count-grid";
import { HeroLaunch } from "@/components/imgcli/hero-launch";
import { TypeMorph } from "@/components/imgcli/type-morph";
import { WordmarkCut } from "@/components/imgcli/wordmark-cut";

// 1280×720 @ 30fps. Jede Sequenz ist auf die natürliche Länge der Komponente budgetiert.
const T = linearTiming({ durationInFrames: 12 });
// Echte Produktscreenshots in public/. Ohne sie fallen Szenen auf Snapcn-Beispielbilder zurück.
const shots = ["shot-1.jpg", "shot-2.jpg", "shot-3.jpg", "shot-4.jpg"].map((f) => staticFile(f));

export const LaunchVideo: React.FC = () => (
  <TransitionSeries>
    {/* 1. Haken: das Problem des Zuschauers, verwandelt in das Versprechen */}
    <TransitionSeries.Sequence durationInFrames={94}>
      <TypeMorph
        lead="Ihr Launch-Video "
        emphasis="braucht eine Woche."
        morphTo="braucht einen Prompt."
        finally_="einen Prompt."
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 2. Produkt nennen */}
    <TransitionSeries.Sequence durationInFrames={170}>
      <AnnounceTitle
        eyebrow="Wir stellen vor"
        title="Acme 2.0"
        tagline="Abrechnung, die sich selbst abstimmt."
        symbolPath="" // Ihr Markenzeichen als SVG-Pfad in einer 0 0 100 100 Box; "" zeigt keins
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 3. Produkt zeigen: zwei echte Aufnahmen (Bild, Video oder ein CSS-Verlauf als Platzhalter) */}
    <TransitionSeries.Sequence durationInFrames={170}>
      <HeroLaunch
        heading="Jede Rechnung, abgeglichen."
        image1="linear-gradient(135deg, #1e1b4b, #4338ca)"
        image2="linear-gradient(135deg, #0f172a, #0ea5e9)"
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 4. Beleg: eine echte Zahl */}
    <TransitionSeries.Sequence durationInFrames={60}>
      <CountGrid from="5" to="500" noun="Teams" cards={shots} />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 5. Abschluss mit dem Namen */}
    <TransitionSeries.Sequence durationInFrames={66}>
      <WordmarkCut word="acme." />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

Registrieren Sie es mit durationInFrames={512} (der Summe der Sequenzen minus 4 × 12 Frames Überlappung), fps={30}, width={1280}, height={720}.

Ersetzen Sie die Verläufe durch echte Screenshots oder Clips: image1={staticFile("shot-1.png")} mit der Datei in public/.

5. Render-Audit-Schleife

Rendern Sie Einzelbilder vor dem vollständigen Video:

# Ein Bild pro Beat: der Mittelpunkt jeder Sequenz, und kurz vor und nach jedem Schnitt
npx remotion still LaunchVideo out/beat-1.png --frame=47
npx remotion render LaunchVideo out/launch.mp4 --codec=h264 --crf=18

Fügen Sie die Standbilder zu einem Kontaktbogen zusammen und sehen Sie ihn an, bevor Sie das Ganze rendern:

ffmpeg -y -pattern_type glob -i "out/beat-*.png" -vf "scale=480:-1,tile=5x1" out/contact.png

Prüfen Sie jedes Bild:

Kein Text abgeschnitten, kein schwarzer Frame an einem Schnitt, nichts vor seinem Szenenstart sichtbar.
Jeder angezeigte String ist echter Text aus der Kurzbeschreibung.
Das Produkt erscheint innerhalb von 3 Sekunden nach seinem Namen.

6. Review

Nach zwei oder drei eigenen Durchgängen rendern Sie etwa 20 Bilder (Höhepunkte und beide Seiten jedes Schnitts) und überprüfen sie als vier Kritiker oder als vier parallele Unter-Agenten, wenn Ihre Umgebung dies unterstützt:

Design/Layout: Fehlausrichtung, Beschnitt, Proportion.
Lesbarkeit: Bei 720p auf einem Telefon lesbar, Kontrast, Tippfehler.
Tempo: Verdient jeder Beat seine Zeit; ist der Abschluss stark?
Marke: Stimmen Farben, Schriftarten und UI mit dem echten Produkt überein?

Führen Sie ihre Korrekturlisten in einem Überarbeitungsplan zusammen, bevor Sie das nächste Rendern durchführen.

7. Plattformgerecht ausliefern

Fragen Sie, wohin das Video geht, bevor Sie rendern. Erstellen Sie eine Komposition pro Seitenverhältnis, anstatt nachträglich zu beschneiden.

Plattform	Seitenverhältnis	Größe
X / LinkedIn-Feed	16:9	1920×1080 (oder das 1280×720-Master rendern)
X vertikal, Reels, Shorts, TikTok	9:16	1080×1920
LinkedIn / Instagram-Feed	1:1 oder 4:5	1080×1080 / 1080×1350

npx remotion render LaunchVideo out/launch-1080.mp4 --scale=1.5 skaliert das 1280×720-Master auf 1920×1080 hoch, ohne eine Szene neu auszulegen.

Hart erarbeitete Lektionen

Erfinden Sie niemals Produkt-UI-Labels. Screenshoten Sie die echte App und spiegeln Sie ihre Beschriftung.
Eine Überschrift und ein CTA auf der Endkarte. Verwenden Sie den echten Slogan der Landingpage.
Verankern Sie den Haken in etwas, das Zuschauer ohne Erklärung erkennen. Wenn er einen Satz zur Erklärung braucht, ist der Haken zu abstrakt.
Vorher/Nachher-Beats gleichzeitig. Lassen Sie das „Vorher“ etwa eine Sekunde lang stehen, dann schneiden Sie zum „Nachher“.
Kleben Sie Imgcli-Szenen nicht mit eigenen Überblendungen innerhalb der Szenen zusammen. Übergänge gehören zum TransitionSeries; szeneneigene Ausblendungen verdoppeln die Überblendung.
Ihre eigenen Ergänzungen bleiben zurückhaltend: Satzfall, keine dekorative Buchstabenabstände, kein Glühen oder Verlaufstext. Imgcli-Szenen, die ein Glühen tragen (announce-title), behalten es; das ist der Effekt, nicht die Dekoration.

Zuschreibung

Die Workflow-Struktur (Eingaben → Storyboard → Bauen → Render-Audit → Mehrfachkritik → Plattformtabelle) und mehrere der hart erarbeiteten Lektionen sind adaptiert von everyinc/product-launch-video (MIT, © 2026 Every Media, Inc.). Die Kontaktbogen-Prüfung und die Regel „Durchsuche den Katalog, bevor du ein Aussehen entwirfst“ sind adaptiert von HeyGens hyperframes product-launch-video Skill (Apache-2.0). Beide wurden für Remotion und Snapcn-Komponenten umgeschrieben; alle Snapcn-spezifischen Inhalte sind Eigentum von Snapcn.

remotion-launch-video

Was ist remotion-launch-video?

In Ihrer bevorzugten KI fragen

Dokumentation