| name | gaia-video-animations |
| description | Create high-quality Remotion video animations for GAIA product commercials. Use when building, modifying, or creating new scenes for the GAIA promotional video (apps/video), creating Apple-style motion design commercials in Remotion, or when working on any video animation in the GAIA monorepo. Covers scene architecture, animation patterns, typography, transitions, sound design, and aesthetic rules derived from 72 production conversations. Also use when the user asks to create a new video, add scenes, fix animation timing, or improve visual quality of Remotion compositions. |
GAIA Video Animations
Production-grade Remotion animation skill for GAIA product videos. Every rule below was learned from real feedback over 72 creative direction sessions.
Quick Reference
Core Principles (Non-Negotiable)
- It's a VIDEO, not a UI — everything 2x larger than web. Hero text 150-200px. Cards fill the screen.
- Use REAL components from the GAIA codebase — never recreate. Import actual components with dummy data.
- Fast-paced — no scene dwells. Cut durations 20-40% shorter than instinct says. Short scenes: 50-100 frames. Long scenes: max 255 frames.
- Flat design — no outlines, no borders, no drop shadows, no glows (except subtle radial blooms on CTA scenes).
- No italic text. Ever. No serif. No emojis — use
gaia-icons (@theexperiencecompany/gaia-icons/solid-rounded).
- Snap, don't bounce — text entrances use
damping: 200 (instant snap). Only cards/icons get bouncy springs.
- Seamless transitions — scenes overlap via TransitionSeries. No dead air between scenes.
Constants (Always Centralized)
Never hardcode colors, fonts, or spring configs. Use constants.ts:
export const COLORS = {
bg: "#111111", bgLight: "#111111", secondaryBg: "#1a1a1a",
surface: "#27272a", primary: "#00bbff", white: "#ffffff",
textDark: "#ffffff", zinc400: "#a1a1aa", zinc500: "#71717a",
zinc600: "#a1a1aa", zinc700: "#3f3f46", zinc800: "#27272a", zinc900: "#18181b",
} as const;
export const FONTS = {
display: '"Aeonik", "Helvetica Neue", Helvetica, sans-serif',
body: '"Inter", system-ui, sans-serif',
mono: '"Anonymous Pro", "Cascadia Code", monospace',
} as const;
export const TRANSITIONS = { fast: 8, normal: 12, slow: 15, reveal: 20 } as const;
export const SPRINGS = {
smooth: { damping: 200 },
snappy: { damping: 20, stiffness: 200 },
natural: { damping: 18, stiffness: 120 },
bouncy: { damping: 8, stiffness: 180 },
cinematic: { damping: 22, stiffness: 80 },
} as const;
Sound Design
export const SFX = {
whoosh: "https://remotion.media/whoosh.wav",
whip: "https://remotion.media/whip.wav",
uiSwitch: "https://remotion.media/switch.wav",
mouseClick: "https://remotion.media/mouse-click.wav",
} as const;
Rules: whip for word slams, whoosh for transitions, uiSwitch for cards. Never play click sounds where nothing is clicked.
Common Pitfalls
- Too small — if not readable on 4K TV from a couch, bigger
- Elastic text — never bouncy springs on text.
damping: 200 only
- Emojis — use
gaia-icons with style={{ color: X }} (not color prop)
- Broken assets — always
staticFile("images/..."). Verify file exists
- Wrapper containers — no boxes around fullscreen content. Direct on
AbsoluteFill
- Grid/dot backgrounds — never
- Scene too long — 50-100f for text, 100-180f for UI, max 255f
- Italic/serif — never
- Borders on cards — flat only, no
border property
- Dark SVG on dark bg —
filter: invert(1)
- Duration mismatch — Root.tsx
durationInFrames = sum(scenes) - sum(transitions). Recalculate after every change.
- Fade between word beats — use instant hard cuts (
if (frame >= exitFrame) return null), not fades