Launch Video — Liquid Glass Product Showcase
Produce cinematic product launch videos using the Liquid Glass aesthetic: dark void, 3D floating panels, particle effects, spring animations, and confident pacing.
Compounding Skills
| Skill | Role |
|---|---|
/remotion-best-practices | Composition structure, spring(), <Sequence>, render pipeline |
/content-creation | AI asset generation (Imagen 4.0, Veo 3.1) |
/arcan-glass | BroomVA brand tokens (AI Blue, dark-first palette) |
/google-veo | Cinematic B-roll generation prompts |
/blog-post | Distribution pipeline (publish to X, LinkedIn, Instagram) |
The Liquid Glass Aesthetic
Core Visual Principles
- Dark void background — Pure black (#000000) or near-black (#0A0A0A). No gradients on the base. Content floats in darkness.
- 3D perspective panels — Screenshots and UI renders tilted at 8-15° with
perspective(1200px). Never flat. Always floating. - Glass material — Panels have frosted edges, subtle reflection, rounded corners with glow, semi-transparent borders.
- Particle field — Small floating particles (2-4px, low opacity, slow drift) fill the void. Creates depth and life.
- Spring motion — All entrances/exits use Remotion
spring(). Never CSS transitions. Never linear. Organic, confident. - Confident pacing — 3-5 seconds per scene minimum. No rapid cuts. Let each visual breathe.
- Minimal typography — Sans-serif (Inter, SF Pro, or system), white on black, centered. Maximum 8 words per title card.
Color Palette
| Token | Value | Usage |
|---|---|---|
void | #000000 | Background |
panel-bg | rgba(20, 20, 25, 0.85) | Glass panel fill |
panel-border | rgba(255, 255, 255, 0.08) | Glass edge |
panel-glow | rgba(59, 130, 246, 0.15) | Edge glow (AI Blue) |
text-primary | #FFFFFF | Title text |
text-secondary | rgba(255, 255, 255, 0.6) | Subtitle, URL |
accent | #3B82F6 | AI Blue highlights |
success | #22C55E | Checkmarks, positive states |
particle | rgba(255, 255, 255, 0.15) | Background particles |
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',
};
Spring Configuration
import { spring, useCurrentFrame, useVideoConfig } from 'remotion';
// Standard entrance
const entrance = spring({
frame,
fps,
config: { damping: 15, stiffness: 80, mass: 0.8 },
});
// Subtle drift (for floating panels)
const drift = spring({
frame: frame - delay,
fps,
config: { damping: 200, stiffness: 10, mass: 2 },
durationInFrames: 120,
});
Scene Types
1. Title Card
Duration: 3-4 seconds Content: Product name or tagline, centered, white on black Animation: Fade in with subtle scale spring (0.95 → 1.0) Example: "Build your ideas with Gemini"
2. Prompt / Input Scene
Duration: 4-6 seconds
Content: Chat input or terminal prompt, angled 3D panel
Animation: Panel springs in from below, text typewriter effect
Technique: <Img> of screenshot with 3D CSS transform, typewriter via frame-based string slice
3. Split Panel Scene
Duration: 4-5 seconds
Content: Two UI panels side by side (e.g., prompt + code output)
Animation: Panels spring in from opposite sides, particles between them
Technique: Two <Img> components with opposing rotateY transforms
4. Product Demo Scene
Duration: 5-8 seconds
Content: Full product UI as floating glass panel
Animation: Slow drift rotation (subtle rotateY oscillation), cinematic zoom
Technique: <Img> or <OffthreadVideo> with animated scale and rotateY
5. Detail Zoom Scene
Duration: 3-4 seconds
Content: Zoom into a specific UI element or feature
Animation: Spring scale from full view to cropped detail
Technique: Animated scale + translate on the panel image
6. CTA / Brand Card
Duration: 3-4 seconds Content: Logo + URL or install command Animation: Fade in, hold, fade out Technique: Centered text, brand icon, subtle glow
7. AI Cinematic Frame (Imagen 4.0)
Duration: 3-5 seconds
Content: AI-generated hero render or concept art inside a GlassPanel
Animation: Spring entrance, slow drift rotation, subtle zoom
Technique: Generate via Imagen 4.0, place in public/, use <Img src={staticFile('render.png')} /> inside GlassPanel with 3D transform
When to use: Abstract concepts, architectural diagrams, mood visuals — anything that benefits from AI-generated imagery over screenshots
<GlassPanel rotateY={-10} rotateX={6} delay={5}>
<Img src={staticFile('imagen-hero-render.png')} style={{ width: '100%' }} />
</GlassPanel>
8. AI Video B-Roll (Veo 3.1)
Duration: 4-8 seconds
Content: Cinematic AI-generated video clip as transition or atmosphere
Animation: Plays behind or inside a GlassPanel, with optional overlay text
Technique: Generate via Veo 3.1, preprocess with ffmpeg -movflags +faststart, use <OffthreadVideo> in Remotion
// Full-bleed cinematic B-roll (between scenes)
<OffthreadVideo
src={staticFile('veo-broll-corridor.mp4')}
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
/>
// B-roll inside a glass panel
<GlassPanel rotateY={-5} rotateX={3}>
<OffthreadVideo
src={staticFile('veo-product-demo.mp4')}
style={{ width: '100%', borderRadius: 12 }}
/>
</GlassPanel>
Veo 3.1 prompt pattern for B-roll:
[Camera movement], [Subject/environment], [Action/motion], [Lighting + mood].
Dark background, [accent color] glow. Cinematic, professional. [Aspect ratio].
When to use: Transitions between scene groups, atmospheric intros/outros, cinematic product demos where motion adds value over a static screenshot.
Preprocessing (required for <OffthreadVideo> + parseMedia()):
ffmpeg -i veo-clip.mp4 -c:v libx264 -crf 18 -movflags +faststart -r 30 processed.mp4
Hybrid Composition Pattern
The most polished videos combine all three asset types:
Title Card (text)
→ Imagen frame in GlassPanel (concept art)
→ Veo B-roll transition (cinematic 4s)
→ Screenshot in GlassPanel (product demo)
→ Remotion-animated data (pipeline nodes, file trees)
→ Veo B-roll outro (atmosphere)
→ CTA card (text)
Rule: Remotion controls timing, transitions, and text. AI assets provide visual richness. Never let AI control pacing — that's Remotion's job.
Production Pipeline
1. STORYBOARD → Define scenes with types (1-8), durations, and content
2. ASSETS → Generate/capture all visual assets
a. Screenshots — product UI via agent-browser or manual capture
b. Imagen 4.0 — hero renders, concept art, abstract visuals
→ ai.models.generateImages({ model: 'imagen-4.0-fast-generate-001', prompt: '...' })
→ Save to public/ directory
c. Veo 3.1 — cinematic B-roll clips (4-8s each)
→ ai.models.generateVideos({ model: 'veo-3.1-fast-generate-preview', prompt: '...' })
→ Preprocess: ffmpeg -i clip.mp4 -c:v libx264 -movflags +faststart -r 30 processed.mp4
→ Save to public/ directory
3. COMPOSE → Build Remotion composition
- <Sequence> with premountFor for preloading
- <Img> + staticFile() for images (never <img>)
- <OffthreadVideo> + staticFile() for Veo clips (never <video>)
- GlassPanel + spring() for 3D transforms and entrances
- ParticleField as background layer
- Subtitle component for text overlays
4. RENDER → npx remotion render src/Root.tsx CompositionId out/video.mp4
5. POST-PROCESS → Add audio if separate
- ffmpeg -i video.mp4 -i audio.mp3 -c:v copy -c:a aac final.mp4
6. REVIEW → /creative-review scores output against style brief (target: ≥75)
7. DISTRIBUTE → Push to platforms via /blog-post publish pipeline
Remotion Project Structure
launch-video/
├── src/
│ ├── Root.tsx # registerRoot
│ ├── Composition.tsx # Main composition with <Sequence> scenes
│ ├── scenes/
│ │ ├── TitleCard.tsx # Scene type 1
│ │ ├── PromptScene.tsx # Scene type 2
│ │ ├── SplitPanel.tsx # Scene type 3
│ │ ├── ProductDemo.tsx # Scene type 4
│ │ ├── DetailZoom.tsx # Scene type 5
│ │ └── CTACard.tsx # Scene type 6
│ ├── components/
│ │ ├── GlassPanel.tsx # 3D perspective panel with glass material
│ │ ├── ParticleField.tsx # Background particle system
│ │ ├── TypewriterText.tsx # Frame-based typewriter animation
│ │ └── SpringFade.tsx # Reusable spring fade wrapper
│ └── styles/
│ └── tokens.ts # Liquid Glass color/spacing tokens
├── public/ # staticFile() assets (screenshots, renders)
├── package.json
└── remotion.config.ts
Particle Field Component (Reference)
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 Component (Reference)
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>
);
Quality Checklist
- Background is pure black or near-black (no gradients)
- All panels use 3D perspective transform (never flat screenshots)
- Spring animations on all entrances (no CSS transitions)
- Particle field present in background
- Each scene holds 3-5 seconds minimum (no rapid cuts)
- Typography: sans-serif, white, centered, ≤8 words per title card
- Glass material: border glow, shadow, rounded corners, semi-transparent
- Audio present (ambient electronic or narration)
- Total duration 20-45 seconds
-
-movflags +faststarton final render