Motion & Video Studio

Critical Remotion Rules (ALWAYS FOLLOW)

• ALL Remotion animations MUST use useCurrentFrame() — no CSS transitions/animations
• Tailwind transition-* / animate-* classes FORBIDDEN in Remotion
• Use <Img> from remotion, NOT native <img> — prevents blank frames
• 3D: Use <ThreeCanvas> from @remotion/three, NOT <Canvas> from R3F
• 3D: useFrame() from R3F FORBIDDEN — use useCurrentFrame() only
• Always premountFor on <Sequence> components
• Write timings as seconds * fps, not raw frame numbers

Tool Selection

Need	Best Tool	Load Reference
React UI enter/exit/hover/layout	Framer Motion	framer-motion.md
Complex timelines, scroll-pinning	GSAP	gsap-patterns.md
CSS hover/scroll on any site	CSS + Intersection Observer	css-animations.md
3D scenes in React	React Three Fiber	threejs-r3f.md
Embed animation in React UI	Remotion Player	remotion-ui-player.md
Export MP4/WebM video	Remotion	See Remotion references below

Decision Tree

What does the user need?
├── Animate UI in React/Next.js?
│   ├── Simple: hover, tap, enter/exit → Framer Motion
│   ├── Complex timeline, scroll-trigger → GSAP
│   ├── 3D scene, particles → React Three Fiber
│   └── Complex sequenced animation (also exportable) → Remotion Player
├── Animate on plain HTML/CSS site?
│   └── CSS keyframes + Intersection Observer
├── Embed animated component in React app?
│   ├── Auto-play hero/banner → Remotion Player (autoPlay, loop)
│   ├── Scroll-driven animation → Remotion Player (seekTo on scroll)
│   ├── Interactive animation → Remotion Player (PlayerRef controls)
│   └── Lottie replacement → Remotion Player (loop, small canvas)
└── Create a video file (MP4)?
    ├── Core animation/timing → remotion-core.md
    ├── Charts / data viz → remotion-charts-dataviz.md
    ├── Scene transitions / effects → remotion-transitions-effects.md
    └── Captions / audio / voiceover → remotion-captions-audio.md

Install Commands

# Framer Motion
npm install framer-motion

# GSAP (ScrollTrigger included)
npm install gsap

# React Three Fiber (3D)
npm install three @react-three/fiber @react-three/drei

# Remotion — new project
npm create video@latest

# Remotion — add to existing React app
npm install remotion @remotion/player @remotion/cli

# Remotion extras (add as needed)
npx remotion add @remotion/transitions    # Scene transitions
npx remotion add @remotion/light-leaks    # Light leak effects
npx remotion add @remotion/paths          # SVG path animation
npx remotion add @remotion/captions       # TikTok-style captions
npx remotion add @remotion/media-utils    # Audio visualization
npx remotion add @remotion/google-fonts   # Type-safe fonts
npx remotion add @remotion/three          # 3D with Three.js
npx remotion add @remotion/lottie         # Lottie animations
npx remotion add @remotion/zod-types      # Zod color picker for Studio

Remotion References (load on demand)

• remotion-core.md — Critical rules, Composition, interpolate, spring, Easing, Sequence, Series, premounting, images, fonts, Lottie
• remotion-ui-player.md — Player embed in React app, responsive sizing, interactive props, scroll-driven, programmatic control, dual-use (UI + export)
• remotion-charts-dataviz.md — Bar chart, pie chart, line chart, bar race, counter animation, path following
• remotion-transitions-effects.md — TransitionSeries (fade/slide/wipe/flip), light leaks, overlays, SVG path animation
• remotion-captions-audio.md — TikTok captions, word highlighting, audio spectrum/waveform, bass-reactive, ElevenLabs voiceover

Web Animation References

• framer-motion.md — motion components, variants, gestures, AnimatePresence, page transitions, layout animations
• gsap-patterns.md — timelines, ScrollTrigger, text split, pinning, stagger
• css-animations.md — keyframes, transitions, Intersection Observer, scroll-driven animations
• threejs-r3f.md — Canvas, meshes, lights, useFrame, shaders, physics

Key @remotion/* Packages

Package	Purpose
remotion	Core: Composition, Sequence, Series, interpolate, spring
@remotion/player	Embed animated compositions as React UI components
@remotion/cli	CLI: render, studio, still, bundle
@remotion/transitions	TransitionSeries: fade, slide, wipe, flip, clockWipe
@remotion/light-leaks	WebGL light leak overlay effects
@remotion/paths	SVG path animation: evolvePath, getPointAtLength
@remotion/captions	TikTok-style word-by-word captions
@remotion/media-utils	Audio visualization, waveform, audio duration
@remotion/google-fonts	Type-safe Google Font loading
@remotion/fonts	Local font loading
@remotion/three	ThreeCanvas for 3D content
@remotion/lottie	Lottie animation embedding
@remotion/gif	GIF rendering
@remotion/zod-types	Zod types for Studio UI (color picker)

Popular Community Libraries

Library	Purpose
remotion-subtitles	16+ animated caption styles (Bounce, Neon, Glitch, Fire...)
remotion-animated	Simplified animation syntax
react-syntax-highlighter	Code syntax highlighting for code videos
split-type	Text splitting for per-character GSAP animation

Source: remotion-dev/skills (official), remotion-dev/github-unwrapped, reactvideoeditor/remotion-templates, av/remotion-bits