Was macht Launch Video — Liquid Glass Product Showcase?
Erstelle kinoreife Produkt-Launch-Videos mit dem Liquid Glass Look: dunkle Leere, 3D-schwebende Panels, Partikeleffekte, Federanimationen und souveränes Timing.
Zusammenspielende Skills
| Skill | Rolle |
|---|---|
/remotion-best-practices | Kompositionsstruktur, spring(), <Sequence>, Render-Pipeline |
/content-creation | KI-Asset-Generierung (Imagen 4.0, Veo 3.1) |
/arcan-glass | BroomVA-Marken-Tokens (AI Blue, dunkle Farbpalette) |
/google-veo | Prompts für kinoreife B-Roll-Generierung |
/blog-post | Distributions-Pipeline (Veröffentlichung auf X, LinkedIn, Instagram) |
Der Liquid Glass Look
Zentrale visuelle Prinzipien
- Dunkler Hintergrund — Reines Schwarz (#000000) oder nahezu Schwarz (#0A0A0A). Keine Verläufe im Hintergrund. Inhalte schweben im Dunkeln.
- 3D-Perspektiv-Panels — Screenshots und UI-Renderings um 8-15° geneigt mit
perspective(1200px). Nie flach. Immer schwebend. - Glasmaterial — Panels haben matte Kanten, dezente Reflexionen, abgerundete Ecken mit Glow und halbtransparente Ränder.
- Partikelfeld — Kleine schwebende Partikel (2-4px, geringe Deckkraft, langsames Driften) füllen die Leere. Erzeugt Tiefe und Lebendigkeit.
- Federanimation — Alle Ein- und Ausgänge verwenden Remotion
spring(). Nie CSS-Transitions. Nie linear. Organisch, souverän. - Souveränes Timing — Mindestens 3-5 Sekunden pro Szene. Keine schnellen Schnitte. Jedes Bild wirken lassen.
- Minimale Typografie — Serifenlose Schrift (Inter, SF Pro oder System), weiß auf schwarz, zentriert. Maximal 8 Wörter pro Titelkarte.
Farbpalette
| Token | Wert | Verwendung |
|---|---|---|
void | #000000 | Hintergrund |
panel-bg | rgba(20, 20, 25, 0.85) | Glas-Panel-Füllung |
panel-border | rgba(255, 255, 255, 0.08) | Glaskante |
panel-glow | rgba(59, 130, 246, 0.15) | Rand-Glow (AI Blue) |
text-primary | #FFFFFF | Titeltext |
text-secondary | rgba(255, 255, 255, 0.6) | Untertitel, URL |
accent | #3B82F6 | AI-Blaue Hervorhebungen |
success | #22C55E | Häkchen, positive Zustände |
particle | rgba(255, 255, 255, 0.15) | Hintergrundpartikel |
3D-Panel CSS (Remotion)
const panelStyle: React.CSSProperties = {
perspective: '1200px',
transform: `rotateY(-8deg) rotateX(5deg)`,
borderRadius: 16,
border: '1px solid rgba(255, 255, 255, 0.08)',
boxShadow: `
0 25px 50px rgba(0, 0, 0, 0.6),
0 0 30px rgba(59, 130, 246, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.05)
`,
background: 'rgba(20, 20, 25, 0.85)',
backdropFilter: 'blur(20px)',
overflow: 'hidden',
};
Federkonfiguration
import { spring, useCurrentFrame, useVideoConfig } from 'remotion';
// Standard-Eingang
const entrance = spring({
frame,
fps,
config: { damping: 15, stiffness: 80, mass: 0.8 },
});
// Subtiles Driften (für schwebende Panels)
const drift = spring({
frame: frame - delay,
fps,
config: { damping: 200, stiffness: 10, mass: 2 },
durationInFrames: 120,
});
Szenentypen
1. Titelkarte
Dauer: 3-4 Sekunden Inhalt: Produktname oder Slogan, zentriert, weiß auf schwarz Animation: Einblenden mit dezenter Feder-Skalierung (0,95 → 1,0) Beispiel: "Build your ideas with Gemini"
2. Prompt-/Eingabeszene
Dauer: 4-6 Sekunden
Inhalt: Chat-Eingabe oder Terminal-Prompt, geneigtes 3D-Panel
Animation: Panel federt von unten ein, Text als Schreibmaschineneffekt
Technik: <Img> des Screenshots mit 3D-CSS-Transformation, Schreibmaschine durch frame-basiertes String-Slicing
3. Geteilte Panel-Szene
Dauer: 4-5 Sekunden
Inhalt: Zwei UI-Panels nebeneinander (z. B. Prompt + Code-Ausgabe)
Animation: Panels federn von gegenüberliegenden Seiten ein, Partikel dazwischen
Technik: Zwei <Img>-Komponenten mit entgegengesetzten rotateY-Transformationen
4. Produkt-Demo-Szene
Dauer: 5-8 Sekunden
Inhalt: Vollständiges Produkt-UI als schwebendes Glas-Panel
Animation: Langsame Drift-Rotation (dezente rotateY-Oszillation), filmischer Zoom
Technik: <Img> oder <OffthreadVideo> mit animiertem scale und rotateY
5. Detail-Zoom-Szene
Dauer: 3-4 Sekunden
Inhalt: Zoom auf ein bestimmtes UI-Element oder Feature
Animation: Feder-Skalierung von voller Ansicht zum beschnittenen Detail
Technik: Animiertes scale + translate auf dem Panel-Bild
6. CTA-/Markenkarte
Dauer: 3-4 Sekunden Inhalt: Logo + URL oder Installationsbefehl Animation: Einblenden, halten, ausblenden Technik: Zentrierter Text, Markenicon, dezenter Glow
7. KI-filmischer Frame (Imagen 4.0)
Dauer: 3-5 Sekunden
Inhalt: KI-generiertes Hero-Render oder Konzeptkunst in einem GlassPanel
Animation: Feder-Eingang, langsame Drift-Rotation, dezenter Zoom
Technik: Generieren via Imagen 4.0, ablegen in public/, verwenden mit <Img src={staticFile('render.png')} /> in GlassPanel mit 3D-Transformation
Wann verwenden: Abstrakte Konzepte, Architekturdiagramme, Stimmungsbilder – alles, das von KI-generierten Bildern statt Screenshots profitiert
<GlassPanel rotateY={-10} rotateX={6} delay={5}>
<Img src={staticFile('imagen-hero-render.png')} style={{ width: '100%' }} />
</GlassPanel>
8. KI-Video-B-Roll (Veo 3.1)
Dauer: 4-8 Sekunden
Inhalt: Kinoreifer KI-generierter Videoclip als Übergang oder Atmosphäre
Animation: Läuft hinter oder in einem GlassPanel, optional mit überlagertem Text
Technik: Generieren via Veo 3.1, Vorverarbeitung mit ffmpeg -movflags +faststart, Verwenden von <OffthreadVideo> in Remotion
// Vollflächige filmische B-Roll (zwischen Szenen)
<OffthreadVideo
src={staticFile('veo-broll-corridor.mp4')}
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
/>
// B-Roll in einem Glas-Panel
<GlassPanel rotateY={-5} rotateX={3}>
<OffthreadVideo
src={staticFile('veo-product-demo.mp4')}
style={{ width: '100%', borderRadius: 12 }}
/>
</GlassPanel>
Veo 3.1-Prompt-Muster für B-Roll:
[Kamerabewegung], [Subjekt/Umgebung], [Aktion/Bewegung], [Licht + Stimmung].
Dunkler Hintergrund, [Akzentfarbe]-Glow. Kinoreif, professionell. [Seitenverhältnis].
Wann verwenden: Übergänge zwischen Szenengruppen, atmosphärische Intros/Outros, filmische Produkt-Demos, bei denen Bewegung Mehrwert gegenüber einem statischen Screenshot bietet.
Vorverarbeitung (erforderlich für <OffthreadVideo> + parseMedia()):
ffmpeg -i veo-clip.mp4 -c:v libx264 -crf 18 -movflags +faststart -r 30 processed.mp4
Hybrides Kompositionsmuster
Die ausgefeiltesten Videos kombinieren alle drei Asset-Typen:
Titelkarte (Text)
→ Imagen-Frame in GlassPanel (Konzeptkunst)
→ Veo-B-Roll-Übergang (filmisch, 4s)
→ Screenshot in GlassPanel (Produkt-Demo)
→ Remotion-animierte Daten (Pipeline-Knoten, Dateibäume)
→ Veo-B-Roll-Outro (Atmosphäre)
→ CTA-Karte (Text)
Regel: Remotion steuert Timing, Übergänge und Text. KI-Assets liefern visuellen Reichtum. Gib der KI nie die Kontrolle über das Tempo – das ist Remotions Aufgabe.
Produktions-Pipeline
1. STORYBOARD → Szenen mit Typen (1-8), Dauer und Inhalt definieren
2. ASSETS → Alle visuellen Assets generieren/erfassen
a. Screenshots – Produkt-UI via agent-browser oder manuelle Erfassung
b. Imagen 4.0 – Hero-Renders, Konzeptkunst, abstrakte Visuals
→ ai.models.generateImages({ model: 'imagen-4.0-fast-generate-001', prompt: '...' })
→ Speichern im public/-Verzeichnis
c. Veo 3.1 – Filmische B-Roll-Clips (4-8s pro Stück)
→ ai.models.generateVideos({ model: 'veo-3.1-fast-generate-preview', prompt: '...' })
→ Vorverarbeitung: ffmpeg -i clip.mp4 -c:v libx264 -movflags +faststart -r 30 processed.mp4
→ Speichern im public/-Verzeichnis
3. KOMPONIEREN → Remotion-Komposition erstellen
- <Sequence> mit premountFor für Vorladen
- <Img> + staticFile() für Bilder (nie <img>)
- <OffthreadVideo> + staticFile() für Veo-Clips (nie <video>)
- GlassPanel + spring() für 3D-Transformationen und Eingänge
- ParticleField als Hintergrundebene
- Subtitle-Komponente für Textüberlagerungen
4. RENDERN → npx remotion render src/Root.tsx CompositionId out/video.mp4
5. NACHBEARBEITUNG → Audio separat hinzufügen
- ffmpeg -i video.mp4 -i audio.mp3 -c:v copy -c:a aac final.mp4
6. PRÜFUNG → /creative-review bewertet Ausgabe gegen Style-Brief (Ziel: ≥75)
7. VERTEILEN → Auf Plattformen pushen via /blog-post Veröffentlichungs-Pipeline
Remotion-Projektstruktur
launch-video/
├── src/
│ ├── Root.tsx # registerRoot
│ ├── Composition.tsx # Hauptkomposition mit <Sequence>-Szenen
│ ├── scenes/
│ │ ├── TitleCard.tsx # Szenentyp 1
│ │ ├── PromptScene.tsx # Szenentyp 2
│ │ ├── SplitPanel.tsx # Szenentyp 3
│ │ ├── ProductDemo.tsx # Szenentyp 4
│ │ ├── DetailZoom.tsx # Szenentyp 5
│ │ └── CTACard.tsx # Szenentyp 6
│ ├── components/
│ │ ├── GlassPanel.tsx # 3D-Perspektiv-Panel mit Glasmaterial
│ │ ├── ParticleField.tsx # Hintergrund-Partikelsystem
│ │ ├── TypewriterText.tsx # Frame-basierte Schreibmaschinen-Animation
│ │ └── SpringFade.tsx # Wiederverwendbarer Feder-Einblende-Wrapper
│ └── styles/
│ └── tokens.ts # Liquid Glass Farb-/Abstands-Tokens
├── public/ # staticFile()-Assets (Screenshots, Renders)
├── package.json
└── remotion.config.ts
ParticleField-Komponente (Referenz)
const ParticleField: React.FC<{ count?: number }> = ({ count = 40 }) => {
const frame = useCurrentFrame();
const particles = useMemo(() =>
Array.from({ length: count }, (_, i) => ({
x: (i * 37 + 13) % 100,
y: (i * 53 + 7) % 100,
size: 2 + (i % 3),
speed: 0.1 + (i % 5) * 0.05,
opacity: 0.05 + (i % 4) * 0.04,
})), [count]);
return (
<AbsoluteFill>
{particles.map((p, i) => (
<div key={i} style={{
position: 'absolute',
left: `${p.x}%`,
top: `${(p.y + frame * p.speed) % 110}%`,
width: p.size,
height: p.size,
borderRadius: '50%',
background: `rgba(255, 255, 255, ${p.opacity})`,
}} />
))}
</AbsoluteFill>
);
};
GlassPanel-Komponente (Referenz)
const GlassPanel: React.FC<{
children: React.ReactNode;
rotateY?: number;
rotateX?: number;
scale?: number;
}> = ({ children, rotateY = -8, rotateX = 5, scale = 1 }) => (
<div style={{
transform: `perspective(1200px) rotateY(${rotateY}deg) rotateX(${rotateX}deg) scale(${scale})`,
borderRadius: 16,
border: '1px solid rgba(255, 255, 255, 0.08)',
boxShadow: '0 25px 50px rgba(0,0,0,0.6), 0 0 30px rgba(59,130,246,0.1), inset 0 1px 0 rgba(255,255,255,0.05)',
background: 'rgba(20, 20, 25, 0.85)',
overflow: 'hidden',
transition: 'none',
}}>
{children}
</div>
);
Qualitäts-Checkliste
- Hintergrund ist reines Schwarz oder nahezu Schwarz (keine Verläufe)
- Alle Panels verwenden 3D-Perspektiv-Transformation (nie flache Screenshots)
- Federanimationen an allen Eingängen (keine CSS-Transitions)
- Partikelfeld im Hintergrund vorhanden
- Jede Szene hält mindestens 3-5 Sekunden (keine schnellen Schnitte)
- Typografie: serifenlos, weiß, zentriert, ≤8 Wörter pro Titelkarte
- Glasmaterial: Rand-Glow, Schatten, abgerundete Ecken, halbtransparent
- Audio vorhanden (ambient elektronisch oder Sprecher)
- Gesamtdauer 20-45 Sekunden
-
-movflags +faststartbeim finalen Render