triptu/flowbar

Flowbar Launch Video

Remotion-Projekt unter flowbar-launch-video/ zur Erstellung eines ~28s langen Produkt-Launch-Videos für Social Media und Website-Einbettung.

Schnellbefehle

cd flowbar-launch-video

# Vorschau im Browser
npm run studio            # öffnet http://localhost:3000

# Rendern in hoher Qualität (Social Media)
npx remotion render FlowbarLaunchVideo out/flowbar-launch-hq.mp4 --codec h264 --crf 18

# Komprimieren für das Web (Faststart für Streaming)
ffmpeg -i out/flowbar-launch-hq.mp4 -c:v libx264 -crf 28 -preset slow -c:a aac -b:a 128k -movflags +faststart out/flowbar-launch-web.mp4 -y

Architektur

flowbar-launch-video/
├── public/                     # Statische Assets (Videos, Audio)
│   ├── nature-loop.mp4         # Ambient-Hintergrund (läuft global in Schleife)
│   ├── the-reveal.mp4          # Hero-Shot: Desktop → Fn → Flowbar erscheint (5,9s)
│   ├── product-tour.mp4        # Ein durchgehender Bildschirmmitschnitt (15,6s)
│   └── audio.mp3               # Hintergrundmusik
├── src/
│   ├── Root.tsx                # Kompositionsdefinition (fps, Dauer, Abmessungen)
│   ├── FlowbarLaunchVideo.tsx  # Hauptkomposition – schichtet Hintergrund, Audio, Szenen und Körnung
│   ├── theme.ts                # Farben (passend zur Website), Feder-Presets
│   ├── fonts.ts                # Instrument Serif + DM Sans (Google Fonts)
│   ├── scenes/
│   │   ├── ProblemScene.tsx    # AKT 1: Zwei rein textbasierte Problem-Karten
│   │   ├── RevealScene.tsx     # AKT 2: Hero-Shot mit „Meet Flowbar“-Einblendung
│   │   ├── FeatureTourScene.tsx# AKT 3: Durchgehende Produktdemo + wechselnde Label
│   │   └── ClosingScene.tsx    # AKT 4: Logo, Claim, URL
│   ├── components/
│   │   ├── AmbientBackground.tsx  # Naturschleife + Farbverlauf-Overlay + Filmkörnung
│   │   └── AnimatedText.tsx       # WordReveal, MaskReveal, ScaleReveal
│   └── transitions/
│       └── scaleBlur.tsx       # Benutzerdefinierter Übergang: Skalierung+Unschärfe (kein Einblenden!)
└── out/                        # Gerenderte Ausgaben

Videostruktur & Timing

Die Dauer wird in Root.tsx berechnet: (5 + 6 + 16 + 5) * 30fps - 45 (Übergänge) - 60 (Trimmen) = 855 Frames ≈ 28,5s

Akt	Szene	Dauer	Inhalt
1	ProblemScene	5s	Zwei Textkarten über Naturhintergrund. Wortweise Einblendungen.
2	RevealScene	6s	the-reveal.mp4 + „Meet Flowbar.“ unten + Claim
3	FeatureTourScene	16s	product-tour.mp4 durchgehend + 5 Label oben
4	ClosingScene	5s	Logo + Wortmarke + Beschreibung + URL

Übergänge zwischen den Akten verwenden scaleBlur() mit springTiming({ damping: 18, stiffness: 120 }).

Designsystem

Farben (aus theme.ts, abgestimmt auf flowbar.tushar.ai)

• Hintergrund: #0c0f0d
• Text: #ede9df
• Dezent: #9a9488
• Akzent: #c99b6d / #ddb88a

Feder-Presets (aus theme.ts)

• SPRINGS.smooth — { damping: 200 } — Texteinblendungen, dezente Auftritte
• SPRINGS.snappy — { damping: 20, stiffness: 200 } — UI-Elemente
• SPRINGS.heavy — { damping: 15, stiffness: 80, mass: 2 } — Heldenmomente, Logo
• SPRINGS.bouncy — { damping: 12 } — verspielte Akzente

Textkomponenten (aus AnimatedText.tsx)

• WordReveal — Wortweise Staffelung mit Clip-Path-Maske. Für wirkungsvolle Zeilen.
• MaskReveal — Einzeilige Clip-Path-Enthüllung. Für Label und Beschreibungen.
• ScaleReveal — Skalierung + Unschärfe zu Schärfe. Für Heldentexte („Meet Flowbar.“).

Ebenen (von unten nach oben)

1. Feste Farbe THEME.bg
2. AmbientBackground — nature-loop.mp4 + Farbverlauf-Overlay (Abdunklung: 0-1)
3. Szeneninhalt (TransitionSeries)
4. FilmGrain — 0,035 Deckkraft, wechselt pro Frame

Wichtige Erkenntnisse & Fallstricke

Motion Design

• Keine Einblendungen. Verwende scaleBlur-Übergang oder federbasierte Auftritte. Einblendungen wirken wie PowerPoint.
• Federn brauchen echte Physik. { damping: 200 } ist extrem überdämpft (keine sichtbare Feder). Nutze die Presets.
• Text: Masken-Enthüllungen > Einblenden+Schieben. clipPath: inset() mit translateY sieht zehnmal besser aus als Deckkraft+Verschiebung.
• Ausgänge sollten schnell sein. Auftritt mit Federphysik (12-18 Frames), Ausgang mit schneller linearer Bewegung (5-8 Frames).
• Letztes Label in einer Serie: Ausblendung überspringen. Übergib das isLast-Flag, um das letzte Label bis zum Szenenende zu halten.

Videoverarbeitung

• Verwende objectFit: "contain" (nicht "cover"), um den vollständigen Bildschirmmitschnitt inklusive Menüleiste zu zeigen. Fülle den Hintergrund mit THEME.bg.
• pauseWhenBuffering ist in dieser Remotion-Version nicht verfügbar – nicht verwenden.
• Die Szenendauer muss >= der Videodauer sein, sonst wird das Video abgeschnitten. Überprüfen mit ffprobe -v error -show_entries format=duration -of csv=p=0 datei.mp4.
• Wenn das Video kürzer als die Szene ist, friert der letzte Frame ein – das ist gewünschtes Verhalten.

Hintergrund

• Die Naturschleife läuft GLOBAL hinter allen Szenen (in FlowbarLaunchVideo.tsx, nicht pro Szene).
• Szenen sind transparent – sie liegen darüber.
• Die Schlussszene fügt eine eigene rgba(12,15,13,0.7)-Abdunklung hinzu, um den Hintergrund für die Lesbarkeit des Texts zurückzudrängen.
• Die Problem-Szene fügt rgba(12,15,13,0.35) Abdunklung hinzu.

Audio

• Datei: public/audio.mp3. Referenziert über staticFile("audio.mp3").
• Lautstärke: Einblendung über 1s (0→0,5), Ausblendung über die letzten 2s (0,5→0).
• Generieren mit Gemini oder Suno. Prompt: warmer minimaler Elektro, weiche analoge Pads, 88 bpm, ca. 35-40s, kein Gesang.

Rendern

• HQ: --crf 18 → ~14MB (Social Media)
• Web: Neu codieren mit ffmpeg -crf 28 -preset slow -movflags +faststart → ~3MB (Website-Einbettung, sofortiges Streaming)
• Immer zuerst HQ rendern, dann komprimieren – nicht zweimal rendern.

So fügst du eine neue Szene hinzu

1. Erstelle src/scenes/NeueSzene.tsx – exportiere eine React-Komponente mit AbsoluteFill
2. Lasse den Hintergrund transparent (der globale Naturhintergrund scheint durch)
3. Füge bei Bedarf ein Abdunklungs-Overlay hinzu, wenn der Text lesbar sein soll: <AbsoluteFill style={{ backgroundColor: "rgba(12,15,13,0.X)" }} />
4. Verwende WordReveal/MaskReveal/ScaleReveal für Texte, SPRINGS.* für Animationen
5. Füge die Szene in FlowbarLaunchVideo.tsx als TransitionSeries.Sequence mit scaleBlur()-Übergang hinzu
6. Aktualisiere die Dauerberechnung sowohl in FlowbarLaunchVideo.tsx als auch in Root.tsx

So nimmst du einen Clip neu auf

1. Verwende Screen Studio mit: minimalem Rand, Auto-Zoom 120%, glattem Cursor, dunklem Modus, 1920×1080 30fps
2. Nimm nur das Flowbar-Fenster auf (nicht den Desktop-Hintergrund – wir haben die Naturschleife)
3. Exportiere als hochwertiges MP4, lege es in public/ ab
4. Überprüfe die Dauer: ffprobe -v error -show_entries format=duration -of csv=p=0 public/clip.mp4
5. Aktualisiere durationInFrames der entsprechenden Szene (auf nächste ganze Sekunde × fps aufrunden)
6. Aktualisiere die Dauerberechnung in Root.tsx

So änderst du die Label der Feature-Tour

Bearbeite das LABELS-Array in FeatureTourScene.tsx:

const LABELS = [
  { text: "Schreibe in Markdown. Deine Dateien bleiben dein Eigentum.", startSec: 0 },
  { text: "Aufgaben aus jeder Notiz. Ein Ort zum Abhaken.", startSec: 3.5 },
  // ...
];

startSec ist relativ zum Beginn der Feature-Tour-Szene (nicht zum gesamten Video). Stimme sie auf den Inhalt von product-tour.mp4 ab.