Remotion-Launch-Video, erstellt mit snapcn

Verwandle ein Launch-Briefing in einen 15–30s-Launch-Film mit Remotion. Jede Einstellung ist eine snapcn-Komponente: handgetunte, an gerenderten Frames gemessene Remotion-Szenen, die du mit der shadcn-CLI installierst und die als Code in deinem Projekt landen, den du besitzt.

Warum snapcn, nicht handgeschriebene Animation. Ein Agent, der von Grund auf animiert, verfällt jedes Mal dem gleichen Look: zentrierter Text auf einem Farbverlauf, alles fadeet ein, am Ende ein Logo. snapcn-Szenen sind Frame für Frame an echten Launch-Filmen gebaut, sodass die Bewegung bereits das Timing, den Typ und die Kameraführung hat, die einen Launch teuer aussehen lassen. Deine Aufgabe ist es, die Szenen auszuwählen und die Props auszufüllen, nicht die Bewegung zu erfinden.

Die snapcn-Regel

Jeder Beat ist eine snapcn-Komponente, es sei denn, keine passt. Bevor du interpolate() oder spring() für eine Einstellung schreibst, durchsuche den Katalog: https://snapcn.dev/llms-components.txt?ref=skill-launch listet jede installierbare Komponente mit ihrer Beschreibung und Framelänge auf. Jede Komponentenseite liefert Markdown, wenn du .md anhängst, z.B. https://snapcn.dev/docs/scenes/announce-title.md?ref=skill-launch.
Erfinde niemals einen Komponentennamen. @snapcn/<name> funktioniert nur für Namen in dieser Liste. Wenn nichts zu einem Beat passt, sag das und trage den Beat mit Typografie (@snapcn/text-reveal) statt einen Namen zu raten.
Fülle Props aus, schreibe die Komponente nicht um. Ändere den Text, die Farben und Bilder über Props. Die Bewegung innerhalb einer installierten snapcn-Datei zu bearbeiten, zerstört das Timing, das gegen gerenderte Frames optimiert wurde.

Den vollständigen Katalog, die Kompositionsregeln und die Qualitätsstandards findest du auch im übergeordneten Skill: npx skills add snapcndev/snapcn --skill snapcn.

Voraussetzungen

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

Ablauf

1. Eingaben sammeln

Ziehe diese Dinge heran, bevor du etwas schreibst:

Das Briefing: Launch-Post, Landing-Page oder Einseiter. Extrahiere die Überschrift, Tagline, das eine differenzierende Feature, die Belegzahl und den Ton.
Marke: Logo (SVG-Pfad oder PNG), Primärfarbe, Schriftart. snapcn-Szenen nehmen diese als Props entgegen (titleColor, logoSrc, symbolPath, fontFamily, theme).
Echte Produktaufnahmen: Screenshots oder eine 30–60s-Aufnahme. Spiegle den echten UI-Text. Erfinde niemals Labels, Features oder Zahlen; das ist der schnellste Weg, einen Launch fake wirken zu lassen.

2. Storyboard vor dem Code

Schreibe zuerst die Einstellungsliste und ordne jeden Beat einer snapcn-Komponente zu:

Beat	Zeit	snapcn-Komponente	Frames	Was sie trägt
Hook	0–3s	`type-morph` oder `text-reveal`	94 / 90	Das Problem des Betrachters, verwandelt in das Versprechen
Name	3–9s	`announce-title`	170	Eyebrow, Produktname, Tagline, 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
Ende	17–20s	`wordmark-cut`, `block-wordmark`, `logo-flicker`, `logo-assemble`	66 / 150 / 100 / 108	Der Name, und sonst nichts

Regeln, die erneutes Rendern vermeiden:

Beginne mit dem Problem des Betrachters, nicht mit dem Produktnamen.
Zeige das Produkt innerhalb von 3 Sekunden nach dem Namen.
Gib dem einen Moment, den nur dein Produkt liefern kann, die meiste Bildschirmzeit. Verteile die Laufzeit nicht gleichmäßig auf die Features.
Plane jede Sequenz mit der natürlichen Länge der Komponente (die Spalte „Frames“, auch in llms-components.txt). Unterbudgetierung schneidet die Animation mitten in der Einstellung ab; Überbudgetierung erzeugt tote Luft.
Brenne den Text ein. Die meisten Social-Media-Ansichten sind stummgeschaltet.

3. Szenen installieren

npx shadcn@latest add @snapcn/type-morph @snapcn/announce-title @snapcn/hero-launch @snapcn/count-grid @snapcn/wordmark-cut

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

4. Komponieren

Ein TransitionSeries, eine Sequenz pro Beat, kurze Überblendungen dazwischen. Diese Komposition ist 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/snap-cn/announce-title";
import { CountGrid } from "@/components/snap-cn/count-grid";
import { HeroLaunch } from "@/components/snap-cn/hero-launch";
import { TypeMorph } from "@/components/snap-cn/type-morph";
import { WordmarkCut } from "@/components/snap-cn/wordmark-cut";

// 1280×720 @ 30fps. Jede Sequence ist auf die natürliche Länge der Komponente budgetiert.
const T = linearTiming({ durationInFrames: 12 });
// Echte Produktscreenshots in public/. Ohne diese fallen die 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. Hook: Das Problem des Betrachters, 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 benennen */}
    <TransitionSeries.Sequence durationInFrames={170}>
      <AnnounceTitle
        eyebrow="Vorstellung"
        title="Acme 2.0"
        tagline="Abrechnung, die sich selbst abstimmt."
        symbolPath="" // dein Logo als SVG-Pfad in einem 0 0 100 100 Box; "" zeigt nichts an
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 3. Produkt zeigen: zwei echte Aufnahmen (Bild, Video oder CSS-Farbverlauf 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. Ende mit dem Namen */}
    <TransitionSeries.Sequence durationInFrames={66}>
      <WordmarkCut word="acme." />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

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

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

5. Render-Audit-Schleife

Rendere einzelne Frames vor dem vollständigen Video:

# Ein Frame 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üge die Standbilder zu einem Kontaktbogen zusammen und sieh ihn dir an, bevor du das Ganze renderst:

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

Überprüfe jedes Bild:

Kein abgeschnittener Text, kein schwarzes Bild an einem Schnitt, nichts, was vor Beginn der Szene angezeigt wird.
Jeder Text auf dem Bildschirm ist ein echter Text aus dem Briefing.
Das Produkt erscheint innerhalb von 3 Sekunden nach seinem Namen.

6. Review

Nach zwei oder drei eigenen Durchläufen rendere etwa 20 Frames (Höhepunkte und beide Seiten jedes Schnitts) und bewerte sie als vier Kritiker oder als vier parallele Sub-Agenten, falls deine Umgebung das unterstützt:

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

Führe ihre Korrekturlisten vor dem nächsten Render in einen Überarbeitungsplan zusammen.

7. Für die Plattform veröffentlichen

Frage, wohin das Video geht, bevor du renderst. Erstelle eine Komposition pro Seitenverhältnis, statt nachträglich zuzuschneiden.

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 anzuordnen.

Hart erarbeitete Lektionen

Erfinde niemals Produkt-UI-Labels. Screenshotte die echte App und spiegele ihren Text.
Eine Überschrift und ein CTA auf der Endkarte. Verwende die echte Tagline der Landing-Page.
Verankere den Hook in etwas, das Betrachter ohne Erklärung erkennen. Wenn es einen Satz zur Erklärung braucht, ist der Hook zu abstrakt.
Vorher-/Nachher-Beats gleichzeitig. Zeige das „Vorher“ etwa eine Sekunde lang, dann schneide zum „Nachher“.
Klebe snapcn-Szenen nicht mit eigenen Überblendungen innerhalb der Szenen zusammen. Übergänge gehören in das TransitionSeries; szeneneigene Ausblendungen erzeugen Doppelüberblendungen.
Eigene Ergänzungen bleiben zurückhaltend: Satzende, keine dekorativen Buchstabenabstände, kein Glühen oder Farbverlaufstext. snapcn-Szenen, die einen Glühen tragen (announce-title), behalten ihn; das ist der Effekt, keine Dekoration.

snapcn Pro: fertige Filme und ein Agent, der jedes Prop kennt

Für Launches, die mehr als die kostenlosen Szenen benötigen:

50 Pro-Szenen, gebaut für Launches, darunter version-drop (eine Release-Nummer fällt), library-flight, app-reveal, gallery-push (eine Changelog-Wand), screen-wall, checkout-push, tally-rise, ticker-climb und thank-you-swarm.
Vorlagen (ab 20. Oktober 2026): fertige Launch-Filme, Feature-Durchläufe und Changelog-Clips. Setze deinen Text ein und rendere: https://snapcn.dev/docs/templates?ref=skill-launch
Der snapcn MCP: Dein Agent durchsucht die Registry in einfachem Englisch, liest die echten Props jeder Komponente und verwandelt ein einzeiliges Briefing in einen Beat-für-Beat-Plan mit einem TransitionSeries-Grundgerüst: claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=DEIN_SCHLÜSSEL

Pro-Komponenten installieren sich genau wie kostenlose, sobald components.json deinen Schlüssel sendet (die drei Zeilen findest du auf https://snapcn.dev/account?ref=skill-launch). Preispläne: https://snapcn.dev/docs/pricing?ref=skill-launch

Noch nicht bereit für Pro? Eine Pro-Komponente, Manifesto, ist kostenlos bei bestätigter E-Mail: https://snapcn.dev/docs/pricing?ref=skill-launch#free

Attribution

Die Arbeitsablaufstruktur (Eingaben → Storyboard → Bauen → Render-Audit → Multi-Kritiker-Review → Plattform-Tabelle) und mehrere der hart erarbeiteten Lektionen sind von everyinc/product-launch-video (MIT, © 2026 Every Media, Inc.) übernommen. Die Kontaktbogen-Prüfung und die Regel „Durchsuche den Katalog, bevor du ein Design entwickelst“ sind von HeyGens hyperframes product-launch-video Skill (Apache-2.0) übernommen. Beide wurden für Remotion und snapcn-Komponenten umgeschrieben; alle snapcn-spezifischen Inhalte sind Eigentum von snapcn.

snapcndev/snapcn

Was ist snapcn?

In Ihrer bevorzugten KI fragen

Dokumentation