remotion-product-demo

Remotion-Produktdemo, auf Basis von Imgcli

Verwandle ein echtes Bildschirmrekording in eine 20–45-sekündige Produktdemo in Remotion. Die Aufnahmen stammen von Imgcli: Remotion-Komponenten für die Teile einer Demo, die am längsten zum Handanimieren dauern (Kameraeinfahrten beim Rekording, ein Mauszeiger, der klickt, ein Geräterahmen, ein Terminal, das tippt, eine KI-Eingabeaufforderung, die gesendet wird). Sie werden mit der shadcn CLI installiert und landen in Ihrem Projekt als Code, den Sie besitzen.

Warum Imgcli und nicht handgeschriebene Animation. Handgemachte Demo-Bewegungen verraten KI-generierte Videos: Ein Cursor, der mit konstanter Geschwindigkeit gleitet, ein Zoom, der ewig ausläuft, ein Terminal, das alles auf einmal ausgibt. Die Imgcli-Komponenten sind Bild für Bild auf echte Produktdemos abgestimmt. Ihre Aufgabe ist es, sie auszuwählen und die Props auszufüllen.

Die Imgcli-Regel

1. Jeder Beat ist eine Imgcli-Komponente, es sei denn, es passt keine. Bevor Sie für eine Aufnahme ein interpolate() oder spring() schreiben, überprüfen Sie https://imgcli.com/llms-components.txt?ref=skill-demo (jede installierbare Komponente, ihr Zweck, wie viele Frames sie läuft). Jede Komponentenseite liefert Markdown mit angehängtem .md, z. B. https://imgcli.com/docs/screens/screen-recording.md?ref=skill-demo.
2. Erfinden Sie nie einen Komponentennamen. Installieren Sie nur Namen aus dieser Liste. Wenn nichts passt, sagen Sie es.
3. Props füllen, nicht die Komponente umschreiben. Kopie, Farben, Aufnahmen und Cursor-Pfade werden über Props übergeben.

Falls der imgcli-Skill verfügbar ist, nutzen Sie ihn für die Komponentenauswahl und Kompositionsberatung.

Die Aufnahme ist die Quelle der Wahrheit

• Verwenden Sie die echte Aufnahme oder den Screenshot als Grundlage. Animieren Sie die Kamera darüber (screen-recording's camera-Bewegungen), anstatt die Benutzeroberfläche in JSX neu zu erstellen. Bauen Sie nur dann ein Element neu auf, wenn es sich von selbst bewegen muss.
• Erfinden Sie niemals UI-Labels, Zahlen oder Funktionen. Jeder Text auf dem Bildschirm stammt aus dem echten Produkt. Erfundene Labels sind der häufigste Grund, warum Demos unecht wirken.
• Keine Aufnahme vorhanden? Bitten Sie um eine oder um Screenshots. Zeichnen Sie kein gefälschtes Dashboard.

Voraussetzungen

• Ein Remotion-Projekt (npx create-video@latest). Leinwand 1280×720 bei 30fps.
• Die shadcn CLI (npx shadcn@latest init, falls keine components.json vorhanden ist).
• npm i @remotion/transitions.
• Die Aufnahme in public/ (z. B. public/recording.mp4), geladen mit staticFile().

Arbeitsablauf

1. Den einen Moment finden

Sehen Sie sich die Aufnahme an und benennen Sie die eine Aktion, die nur dieses Produkt macht: der Klick, der zählt. Dieser Moment bekommt die Kamerafahrt und die meiste Bildschirmzeit. Alles andere in der Demo bereitet ihn vor.

2. Storyboard, eine Imgcli-Komponente pro Beat

Beat	Imgcli-Komponente	Frames	Verwendung
Installation / Setup	terminal-simulator	200	Der Befehl, den ein Entwickler eintippen würde, und seine echte Ausgabe
Das Produkt auf einem Gerät	laptop-frame, phone-frame	240 / 240	Aufnahme auf einem MacBook oder iPhone anzeigen, öffnen und heranzoomen
Die Schlüsselaktion	cursor-track, umschließt screen-recording	132 / 139	Ein Cursor bewegt sich und klickt, während die Kamera auf die Aufnahme einfährt
KI-Produkte	prompt-send, answer-stream, search-typing	165 / 150 / 420	Eine Eingabeaufforderung wird getippt und gesendet, die Antwort strömt zurück
Das Ergebnis	status-cycle, count-grid	198 / 47	Ein Zustandswechsel („in Warteschlange → live“) oder eine echte Zahl
Endkarte	block-wordmark, logo-flicker	150 / 100	Der Name

Budgetieren Sie jede Sequenz auf die natürliche Länge der Komponente (Spalte Frames). Zu knappes Budgetieren schneidet die Aufnahme ab; zu großzügiges Budgetieren hinterlässt tote Luft.

3. Installieren

npx shadcn@latest add https://imgcli.com/r/terminal-simulator.json https://imgcli.com/r/laptop-frame.json https://imgcli.com/r/cursor-track.json https://imgcli.com/r/screen-recording.json https://imgcli.com/r/status-cycle.json https://imgcli.com/r/block-wordmark.json

4. Komponieren

Diese Komposition ist typprüfbar und wird wie geschrieben gerendert (vorausgesetzt, public/recording.mp4 ist vorhanden):

import { fade } from "@remotion/transitions/fade";
import { slide } from "@remotion/transitions/slide";
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { staticFile } from "remotion";
import { BlockWordmark } from "@/components/imgcli/block-wordmark";
import { CursorTrack } from "@/components/imgcli/cursor-track";
import { LaptopFrame } from "@/components/imgcli/laptop-frame";
import { ScreenRecording } from "@/components/imgcli/screen-recording";
import { StatusCycle } from "@/components/imgcli/status-cycle";
import { TerminalSimulator } from "@/components/imgcli/terminal-simulator";

// Legen Sie die echte Aufnahme in public/ ab. Ihre UI-Kopie ist das Skript – erfinden Sie nie Labels.
const RECORDING = staticFile("recording.mp4");
const T = linearTiming({ durationInFrames: 12 });

export const ProductDemo: React.FC = () => (
  <TransitionSeries>
    {/* 1. Installation: der Befehl, den ein Entwickler tatsächlich eintippen würde */}
    <TransitionSeries.Sequence durationInFrames={200}>
      <TerminalSimulator
        intro="*Acme* in einem Befehl einrichten"
        command={{ text: "npx acme init" }}
        lines={[
          { text: "npx acme init", type: "command" },
          { text: "Verbinde dein Stripe-Konto ...", type: "log" },
          { text: "Bereit. 1.204 Rechnungen importiert.", type: "success" },
        ]}
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 2. Das Produkt, auf einem Gerät */}
    <TransitionSeries.Sequence durationInFrames={240}>
      <LaptopFrame screenSrc={RECORDING} entrance="open" finale="zoom-to-screen" />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={slide()} timing={T} />

    {/* 3. Die eine Aktion, die nur dieses Produkt macht: Cursor klickt, Kamera fährt ein */}
    <TransitionSeries.Sequence durationInFrames={132}>
      <CursorTrack
        path={[
          { at: 0, x: -0.06, y: 0.86, duration: 6 },
          { at: 8, x: 0.34, y: 0.44, duration: 22, click: true },
          { at: 60, x: 0.68, y: 0.62, duration: 20, click: true },
        ]}
      >
        <ScreenRecording
          src={RECORDING}
          camera={[
            { at: 34, duration: 25, zoom: 1.6, x: 0.36, y: 0.42 },
            { at: 96, duration: 25, zoom: 1 },
          ]}
        />
      </CursorTrack>
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 4. Das Ergebnis, als Zustandswechsel */}
    <TransitionSeries.Sequence durationInFrames={198}>
      <StatusCycle
        prefix="Ihre Bücher sind"
        statuses={["synchronisieren", "abgleichen", "abgestimmt"]}
        chips={["Stripe", "QuickBooks", "Xero"]}
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 5. Endkarte */}
    <TransitionSeries.Sequence durationInFrames={150}>
      <BlockWordmark text="acme" />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

Registrieren Sie es bei durationInFrames={872} (die Summe der Sequenzen minus 4 × 12 Frames), fps={30}, width={1280}, height={720}.

So zielen Sie die Aufnahmen:

• cursor-track-Pfade sind Bruchteile des Frames (x, y von 0 bis 1). at ist der Frame, an dem der Cursor zu diesem Punkt startet; click: true löst den Klickring bei Ankunft aus. Setzen Sie jeden Klick genau auf die echte Schaltfläche in der Aufnahme.
• screen-recording-Kamerabewegungen ({ at, duration, zoom, x, y }) gleiten in eine Pose und halten, bis die nächste Bewegung beginnt. Zoomen Sie auf die eine Aktion hinein (zoom: 1.4–1.8); ziehen Sie zurück (zoom: 1), nachdem sie ausgeführt wurde.
• Beschneiden Sie die Browser-Chrome mit crop={{ top: 0.11 }}, wenn die Aufnahme sie enthält.
• terminal-simulator-Zeilen sind { text, type } mit type von command, log, success oder error. Fügen Sie echte Ausgaben ein, gekürzt.

5. Render-Audit

npx remotion still ProductDemo out/click.png --frame=460
npx remotion render ProductDemo out/demo.mp4 --codec=h264 --crf=18

Rendern Sie ein Einzelbild zur Mitte jedes Beats sowie kurz vor und nach jedem Schnitt, und überprüfen Sie dann:

• Jeder Klick trifft die echte Schaltfläche, nicht daneben.
• Text in der Aufnahme ist bei 720p nach dem Hineinzoomen lesbar. Falls nicht, zoomen Sie weiter hinein oder beschneiden Sie enger.
• Kein schwarzer Frame an einem Schnitt, und nichts wird vor Beginn seiner Szene gezeigt.

6. Ausliefern

Rendern Sie eine Komposition pro Seitenverhältnis: 16:9 für X und LinkedIn, 9:16 (verwenden Sie phone-frame) für Reels, Shorts und TikTok. --scale=1.5 verwandelt die 1280×720-Master in 1920×1080.

Zuschreibung

Die Regel „Erfinde niemals UI-Labels“, der Render-Audit-Zyklus und die Plattform-Hinweise sind adaptiert von everyinc/product-launch-video (MIT, © 2026 Every Media, Inc.). „Die Aufnahme ist die Quelle der Wahrheit“ ist adaptiert von HeyGens hyperframes product-launch-video Skill (Apache-2.0). Beide wurden für Remotion und snapcn-Komponenten umgeschrieben. Siehe THIRD_PARTY_NOTICES.md.