remotion-product-demos

Remotion Produkt-Demo-Videos

Erstelle hochwertige Produkt-Demo-Videos im Apple-Keynote-Stil mit Remotion.

Schnellstart

Projekt: ~/Projects/tails-video/ Vorlage: src/templates/GlassPhoneDemo.tsx

cd ~/Projects/tails-video
npx remotion render src/index.ts GlassPhoneDemo out/demo.mp4 \
  --codec=h264 --crf=18

Benutzerdefinierte Inhalte über --props:

npx remotion render src/index.ts GlassPhoneDemo out/custom.mp4 \
  --props='{"scenes":[{"type":"hero","durationInSeconds":3}],"brand":{"name":"YourBrand"}}'

Vorlage: GlassPhoneDemo

Schema (Zod)

{
  scenes: Array<{
    type: 'hero' | 'voice' | 'typing' | 'cards' | 'detail' | 'dropdown' | 'endCard',
    title?: string,
    subtitle?: string,
    text?: string,           // Tipp-Szenen
    cards?: Array<{ name, category, detail?, emoji? }>,  // Karten-Szene
    items?: Array<{ name, price? }>,                      // Detail-Szene
    options?: Array<{ label, sublabel?, icon? }>,          // Dropdown-Szene
    durationInSeconds: number  // Standard 3
  }>,
  accentColor: string,       // Standard '#3B82F6'
  bgStyle: 'light' | 'warm' | 'cool',
  deviceAngle: number,       // Standard 8 (Grad der Y-Rotation)
  brand?: { name: string, tagline?: string }
}

Szenentypen

Typ	Visuelles	Wichtige Props
hero	Telefon mit "Tippen zum Tippen" + Aktionsschaltflächen	—
voice	Mikrofon-Symbol + kontinuierliche Ripple-Ringe	—
typing	Zeichenweiser Text mit Cursor	text
cards	Gestaffelte Kartenliste (Restaurant-Stil)	cards[], title
detail	Filter-Pillen + Artikelraster mit Preisen	items[], title, subtitle
dropdown	Glasartiger Optionsauswähler	options[], text
endCard	Telefon blendet aus, Marke erscheint zentriert	— (verwendet brand auf oberster Ebene)

Empfohlener Szenenablauf

Eine typische Demo folgt: hero → voice → typing → results → detail → typing → dropdown → endCard

Dauer-Richtlinie: hero 3s, voice 2s, typing 3s pro Befehl, cards/detail 4s, dropdown 3s, endCard 2s.

Stilrichtlinien für die Optik

Lies references/apple-aesthetic.md für den vollständigen Style-Guide.

Wichtige Regeln:

• Hintergrund: Weiche 3D-Kugeln mit radialen Farbverläufen, spiegelnden Highlights und Schlagschatten
• Telefon: iPhone-Stil mit Metallrand-Farbverlauf, Dynamic Island, Seitentasten, Home-Indikator, Glasreflexions-Overlay, Bodenschatten
• Farben: Monochrome Weiß-/Grautöne + einzelne konfigurierbare Akzentfarbe
• Bewegung: Alles über useCurrentFrame() + spring({damping: 200}). Null CSS-Animationen.

Animationsmuster

Lies references/animation-patterns.md für Spring-Konfigurationen, Timing-Formeln und Easing-Muster.

Wichtige Muster:

• Eingang: spring({ frame: sceneFrame, fps, config: { damping: 200 } }) → opacity + translateY
• Staffelung: jedes Element um i * 6 Frames verzögern
• Schweben: Math.sin(globalFrame / 45) * 12 für sanftes Treiben
• Tippen: Math.floor((sceneFrame - delay) * 0.55) Zeichen werden angezeigt
• Ripple: Kontinuierlich via Modulo: (frame + ring * offset) % cycleDuration
• Überblendung: Szenen überlappen mit -transitionFrames bis 0 Einblendung, dur - transitionFrames bis dur Ausblendung

Verbesserungs-Rückstand

Aktueller Status: gut, nicht perfekt. Bekannte Lücken:

1. Three.js-Hintergrundkugeln — CSS-Radialverlauf-Kugeln erreichen maximal ~7/10. Echtes @remotion/three mit korrekter Beleuchtung = 9/10
2. Echte Bilder — farbige Platzhalterblöcke → Unsplash/Pexels-Food-Fotos über <Img>-Komponente
3. Variable Tippgeschwindigkeit — schneller bei häufigen Wörtern, kurze Pausen bei Leerzeichen
4. Bildschirm-Leuchten — subtiles Umgebungslicht, das von den Telefonbildschirmrändern ausstrahlt
5. Constants-first-Muster — alle magischen Zahlen in benannte Konstanten am Dateianfang auslagern (Remotion-offizielle Empfehlung)

Erstellen neuer Vorlagen

Beim Erstellen einer neuen Produkt-Demo-Vorlage:

1. Referenzvideo Bild für Bild analysieren (in 1-Sekunden-Intervallen extrahieren)
2. Visuelle Komponenten identifizieren: Hintergrund, Gerät, Inhalt, Übergänge
3. Zod-Schema definieren mit Szenentypen und konfigurierbaren Props
4. Komponenten von unten nach oben erstellen: Hintergrund → Geräterahmen → Szenen → Übergänge
5. Bei jedem Schritt testen — einzelne Frames vor dem vollständigen Video rendern
6. QA mit einem Vision-Modell — Frames extrahieren, Qualität bewerten, iterieren

Befolge die Remotion-Regeln strikt: lies die Regeldateien unter skills/remotion-best-practices/.