Remotion Product Demo Videos
Build production-quality product demo videos in the Apple-keynote style using Remotion.
Quick Start
Project: ~/Projects/tails-video/
Template: src/templates/GlassPhoneDemo.tsx
cd ~/Projects/tails-video
npx remotion render src/index.ts GlassPhoneDemo out/demo.mp4 \
--codec=h264 --crf=18
Custom content via --props:
npx remotion render src/index.ts GlassPhoneDemo out/custom.mp4 \
--props='{"scenes":[{"type":"hero","durationInSeconds":3}],"brand":{"name":"YourBrand"}}'
Template: GlassPhoneDemo
Schema (Zod)
{
scenes: Array<{
type: 'hero' | 'voice' | 'typing' | 'cards' | 'detail' | 'dropdown' | 'endCard',
title?: string,
subtitle?: string,
text?: string, // typing scenes
cards?: Array<{ name, category, detail?, emoji? }>, // cards scene
items?: Array<{ name, price? }>, // detail scene
options?: Array<{ label, sublabel?, icon? }>, // dropdown scene
durationInSeconds: number // default 3
}>,
accentColor: string, // default '#3B82F6'
bgStyle: 'light' | 'warm' | 'cool',
deviceAngle: number, // default 8 (degrees of Y rotation)
brand?: { name: string, tagline?: string }
}
Scene Types
| Type |
Visual |
Key Props |
| hero |
Phone with "Tap to type" + action buttons |
— |
| voice |
Mic icon + continuous ripple rings |
— |
| typing |
Character-by-character text with cursor |
text |
| cards |
Staggered card list (restaurant-style) |
cards[], title |
| detail |
Filter pills + item grid with prices |
items[], title, subtitle |
| dropdown |
Glassmorphic option picker |
options[], text |
| endCard |
Phone fades, brand appears centered |
— (uses top-level brand) |
Recommended Scene Flow
A typical demo follows: hero → voice → typing → results → detail → typing → dropdown → endCard
Duration guide: hero 3s, voice 2s, typing 3s per command, cards/detail 4s, dropdown 3s, endCard 2s.
Visual Style Rules
Read references/apple-aesthetic.md for the full style guide.
Key rules:
- Background: Soft 3D spheres with radial gradients, specular highlights, and cast shadows
- Phone: iPhone-style with metal bezel gradient, Dynamic Island, side buttons, home indicator, glass reflection overlay, grounding shadow
- Colors: Monochrome whites/grays + single configurable accent color
- Motion: Everything via
useCurrentFrame() + spring({damping: 200}). Zero CSS animations.
Animation Patterns
Read references/animation-patterns.md for spring configs, timing formulas, and easing patterns.
Key patterns:
- Entrance:
spring({ frame: sceneFrame, fps, config: { damping: 200 } }) → opacity + translateY
- Stagger: delay each item by
i * 6 frames
- Float:
Math.sin(globalFrame / 45) * 12 for gentle drift
- Typing:
Math.floor((sceneFrame - delay) * 0.55) chars revealed
- Ripple: Continuous via modulo:
(frame + ring * offset) % cycleDuration
- Cross-fade: Overlap scenes with
-transitionFrames to 0 fade-in, dur - transitionFrames to dur fade-out
Improvement Backlog
Current status: good, not perfect. Known gaps:
- Three.js background spheres — CSS radial-gradient spheres cap at ~7/10. Real
@remotion/three with proper lighting = 9/10
- Real imagery — colored placeholder blocks → Unsplash/Pexels food photos via
<Img> component
- Variable typing speed — faster on common words, slight pauses on spaces
- Screen glow — subtle ambient light bleeding from phone screen edges
- Constants-first pattern — extract all magic numbers to named constants at file top (Remotion official recommendation)
Creating New Templates
When building a new product demo template:
- Analyze reference video frame-by-frame (extract at 1s intervals)
- Identify visual components: background, device, content, transitions
- Define Zod schema with scene types and configurable props
- Build components bottom-up: background → device frame → scenes → transitions
- Test at each step — render individual frames before full video
- QA with vision model — extract frames, rate quality, iterate
Follow Remotion rules strictly: read skills/remotion-best-practices/ rule files.
1---2name: remotion-product-demos3description: Create Apple-keynote-quality product demo videos with Remotion. Covers glass phone mockups, floating 3D spheres, typing animations, card UIs, ripple effects, and smooth scene transitions. Use when asked to create product demos, app showcase videos, UI walkthrough animations, or "glass phone" style content. Triggers on "product demo video", "app demo", "glass phone", "keynote-style video", "phone mockup animation", "GlassPhoneDemo".4---56# Remotion Product Demo Videos78Build production-quality product demo videos in the Apple-keynote style using Remotion.910## Quick Start1112Project: `~/Projects/tails-video/`13Template: `src/templates/GlassPhoneDemo.tsx`1415```bash16cd ~/Projects/tails-video17npx remotion render src/index.ts GlassPhoneDemo out/demo.mp4 \18 --codec=h264 --crf=1819```2021Custom content via `--props`:22```bash23npx remotion render src/index.ts GlassPhoneDemo out/custom.mp4 \24 --props='{"scenes":[{"type":"hero","durationInSeconds":3}],"brand":{"name":"YourBrand"}}'25```2627## Template: GlassPhoneDemo2829### Schema (Zod)3031```typescript32{33 scenes: Array<{34 type: 'hero' | 'voice' | 'typing' | 'cards' | 'detail' | 'dropdown' | 'endCard',35 title?: string,36 subtitle?: string,37 text?: string, // typing scenes38 cards?: Array<{ name, category, detail?, emoji? }>, // cards scene39 items?: Array<{ name, price? }>, // detail scene40 options?: Array<{ label, sublabel?, icon? }>, // dropdown scene41 durationInSeconds: number // default 342 }>,43 accentColor: string, // default '#3B82F6'44 bgStyle: 'light' | 'warm' | 'cool',45 deviceAngle: number, // default 8 (degrees of Y rotation)46 brand?: { name: string, tagline?: string }47}48```4950### Scene Types5152| Type | Visual | Key Props |53|------|--------|-----------|54| hero | Phone with "Tap to type" + action buttons | — |55| voice | Mic icon + continuous ripple rings | — |56| typing | Character-by-character text with cursor | `text` |57| cards | Staggered card list (restaurant-style) | `cards[]`, `title` |58| detail | Filter pills + item grid with prices | `items[]`, `title`, `subtitle` |59| dropdown | Glassmorphic option picker | `options[]`, `text` |60| endCard | Phone fades, brand appears centered | — (uses top-level `brand`) |6162### Recommended Scene Flow6364A typical demo follows: **hero → voice → typing → results → detail → typing → dropdown → endCard**6566Duration guide: hero 3s, voice 2s, typing 3s per command, cards/detail 4s, dropdown 3s, endCard 2s.6768## Visual Style Rules6970Read [references/apple-aesthetic.md](references/apple-aesthetic.md) for the full style guide.7172Key rules:73- **Background:** Soft 3D spheres with radial gradients, specular highlights, and cast shadows74- **Phone:** iPhone-style with metal bezel gradient, Dynamic Island, side buttons, home indicator, glass reflection overlay, grounding shadow75- **Colors:** Monochrome whites/grays + single configurable accent color76- **Motion:** Everything via `useCurrentFrame()` + `spring({damping: 200})`. Zero CSS animations.7778## Animation Patterns7980Read [references/animation-patterns.md](references/animation-patterns.md) for spring configs, timing formulas, and easing patterns.8182Key patterns:83- **Entrance:** `spring({ frame: sceneFrame, fps, config: { damping: 200 } })` → opacity + translateY84- **Stagger:** delay each item by `i * 6` frames85- **Float:** `Math.sin(globalFrame / 45) * 12` for gentle drift86- **Typing:** `Math.floor((sceneFrame - delay) * 0.55)` chars revealed87- **Ripple:** Continuous via modulo: `(frame + ring * offset) % cycleDuration`88- **Cross-fade:** Overlap scenes with `-transitionFrames` to `0` fade-in, `dur - transitionFrames` to `dur` fade-out8990## Improvement Backlog9192Current status: **good, not perfect**. Known gaps:93941. **Three.js background spheres** — CSS radial-gradient spheres cap at ~7/10. Real `@remotion/three` with proper lighting = 9/10952. **Real imagery** — colored placeholder blocks → Unsplash/Pexels food photos via `<Img>` component963. **Variable typing speed** — faster on common words, slight pauses on spaces974. **Screen glow** — subtle ambient light bleeding from phone screen edges985. **Constants-first pattern** — extract all magic numbers to named constants at file top (Remotion official recommendation)99100## Creating New Templates101102When building a new product demo template:1031041. **Analyze reference video** frame-by-frame (extract at 1s intervals)1052. **Identify visual components:** background, device, content, transitions1063. **Define Zod schema** with scene types and configurable props1074. **Build components bottom-up:** background → device frame → scenes → transitions1085. **Test at each step** — render individual frames before full video1096. **QA with vision model** — extract frames, rate quality, iterate110111Follow Remotion rules strictly: read `skills/remotion-best-practices/` rule files.
unisone