Remotion Composer

Production-quality video composition with AnimStats-level animations. Supports data visualization, spring physics, easing presets, and cinematic transitions.

Quick Start

Install enhanced packages

cd orchestkit-demos && npm install

Add composition for a skill

./scripts/add-composition.sh explore

Render

npx remotion render ExploreDemo out/ExploreDemo.mp4

Package Library (v2.1)

Core Animation

{ "@remotion/shapes": "^4.0.0", // Geometric primitives (pie, rect, triangle) "@remotion/paths": "^4.0.0", // SVG path animations (evolvePath) "@remotion/noise": "^4.0.0", // Procedural noise (noise2D, noise3D) "@remotion/transitions": "^4.0.0", // Scene transitions (fade, slide, wipe) "@remotion/motion-blur": "^4.0.0", // Motion trails and blur "@remotion/gif": "^4.0.0", // GIF synchronization "@remotion/animated-emoji": "^4.0.0", // Lottie emojis "@remotion/layout-utils": "^4.0.0" // Text fitting and layout }

Advanced Capabilities

{ "@remotion/three": "^4.0.0", // Three.js 3D graphics "@remotion/lottie": "^4.0.0", // After Effects animations "@remotion/rive": "^4.0.0", // Rive interactive animations "@remotion/captions": "^4.0.0", // Subtitles and captions "@remotion/player": "^4.0.0", // Embeddable player "@remotion/renderer": "^4.0.0", // Server-side rendering "@remotion/media-utils": "^4.0.0" // Audio/video metadata }

3D & Animation Runtimes

{ "three": "^0.175.0", // Three.js core "@react-three/fiber": "^9.1.0", // React Three Fiber "@react-three/drei": "^10.3.0", // Three.js helpers "@lottiefiles/react-lottie-player": "^3.5.4", // Lottie player "@rive-app/react-canvas": "^4.21.0" // Rive runtime }

Animation Presets

Easing Reference

Preset Use Case Feel

bounce

Success celebrations Playful

elastic

Attention grab Energetic

back

Entry animations Anticipation

snappy

Quick UI Overshoot

spring

Default Natural

Spring Configs

Name damping stiffness Use

Bouncy 10-12 100-120 Playful enters

Snappy 15-20 150-200 Quick UI

Smooth 80 200 Subtle moves

Heavy 15 50 Large elements

Data Visualization Components

StatCounter (Enhanced)

<StatCounter value={168} label="Skills" color="#8b5cf6" easing="bounce" // bounce, elastic, back, snappy, spring digitMorph // Individual digit animation gradientColors={["#8b5cf6", "#22c55e"]} // Animated gradient celebrateOnComplete // Particle burst size="lg" // sm, md, lg />

ProgressRing

<ProgressRing progress={85} color="#22c55e" size={120} delay={15} showLabel easing="spring" />

BarChart

<BarChart data={[ { label: "Skills", value: 168, color: "#8b5cf6" }, { label: "Agents", value: 35, color: "#22c55e" }, ]} staggerDelay={5} showValues />

LineChart

<LineChart points={[10, 25, 18, 42, 35, 60]} color="#8b5cf6" showDots showArea />

Text Animations

AnimatedText Types

// 9 animation types available: <AnimatedText text="Hello" animation="spring" /> // Scale bounce <AnimatedText text="Hello" animation="fade" /> // Simple fade <AnimatedText text="Hello" animation="slide" /> // Directional slide <AnimatedText text="Hello" animation="blur" /> // Blur reveal (NEW) <AnimatedText text="Hello" animation="wave" /> // Char-by-char bounce (NEW) <AnimatedText text="Hello" animation="gradient" /> // Gradient sweep (NEW) <AnimatedText text="Hello" animation="split" /> // Chars from random (NEW) <AnimatedText text="Hello" animation="reveal" /> // Clip reveal (NEW) <AnimatedText text="Hello" animation="typewriter" /> // Typing effect

GradientText

<GradientText text="OrchestKit" colors={["#8b5cf6", "#22c55e"]} animateGradient // Moving gradient />

Transitions

SceneTransition Types

// 8 transition types: <SceneTransition type="fade" /> // Simple opacity <SceneTransition type="wipe" /> // Horizontal wipe <SceneTransition type="zoom" /> // Scale in/out <SceneTransition type="slide" /> // Directional slide (NEW) <SceneTransition type="flip" /> // 3D card flip (NEW) <SceneTransition type="circle" /> // Circular reveal (NEW) <SceneTransition type="blinds" /> // Venetian blinds (NEW) <SceneTransition type="pixelate" /> // Pixelation (NEW)

Content Transitions

<SlideTransition direction="up" startFrame={0} exitFrame={60}> <Content /> </SlideTransition>

<ScaleTransition startFrame={0} scaleFrom={0.8}> <Content /> </ScaleTransition>

<RevealTransition type="circle" startFrame={0}> <Content /> </RevealTransition>

3D Components (CSS-based)

FloatingLogo

<FloatingLogo text="OrchestKit" color="#8b5cf6" secondaryColor="#22c55e" rotationSpeed={0.02} />

ParticleSphere

<ParticleSphere particleCount={200} radius={200} color="#8b5cf6" rotationSpeed={0.01} />

WireframeBox

<WireframeBox size={200} color="#8b5cf6" lineWidth={2} />

OrbitingRings

<OrbitingRings ringCount={3} baseRadius={100} color="#8b5cf6" />

Captions & Subtitles

TikTokCaption (word bounce)

<TikTokCaption words={["Build", "faster", "with", "AI"]} startFrame={0} wordsPerSecond={3} activeColor="#8b5cf6" />

KaraokeCaption (fill reveal)

<KaraokeCaption text="OrchestKit makes development faster" startFrame={0} durationFrames={90} />

TypingCaption (typewriter)

<TypingCaption text="/plugin install ork" startFrame={0} charsPerSecond={20} cursorColor="#8b5cf6" />

HighlightCaption

<HighlightCaption text="24 commands and 176 skills" startFrame={0} endFrame={90} highlightColor="#8b5cf6" />

Background Effects

ParticleBackground

<ParticleBackground particleCount={50} particleColor="#8b5cf6" speed={0.5} opacity={0.6} />

MeshGradient

<MeshGradient colors={["#8b5cf6", "#06b6d4", "#22c55e", "#f59e0b"]} speed={1} opacity={0.3} />

GlowOrbs

<GlowOrbs orbs={[ { color: "#8b5cf6", x: 20, y: 30, size: 40 }, { color: "#06b6d4", x: 80, y: 70, size: 35 }, ]} animated />

Layer Stack

┌─────────────────────────────────────────┐ │ Layer 6: Vignette + ScanLines │ ├─────────────────────────────────────────┤ │ Layer 5: CTA Overlay (bottom) │ ├─────────────────────────────────────────┤ │ Layer 4: Watermark (top-right) │ ├─────────────────────────────────────────┤ │ Layer 3: Progress Bar (bottom) │ ├─────────────────────────────────────────┤ │ Layer 2: Content (Terminal/Manim) │ ├─────────────────────────────────────────┤ │ Layer 1: Background Effects │ │ - ParticleBackground │ │ - MeshGradient │ │ - GlowOrbs │ ├─────────────────────────────────────────┤ │ Layer 0: Base Color (#0a0a0f) │ └─────────────────────────────────────────┘

Formats

Format Resolution FPS Use Case

Horizontal 1920x1080 30 YouTube, Twitter

Vertical 1080x1920 30 TikTok, Reels, Shorts

Square 1080x1080 30 Instagram, LinkedIn

4K 3840x2160 60 High-quality exports

Color Mapping

Skills have associated colors:

• explore: #8b5cf6 (purple)

• verify: #22c55e (green)

• commit: #06b6d4 (cyan)

• brainstorming: #f59e0b (amber)

• review-pr: #f97316 (orange)

• remember: #ec4899 (pink)

References

Core

• references/audio-layer.md

• Audio setup and volume curves

• references/composition-patterns.md

• Composition templates

• references/cinematic-scenes.md

• 6-scene narrative structure

• references/folder-organization.md

• Root.tsx folder structure and naming conventions

Animation

• references/animation-presets.md

• Easing and spring configs

• references/data-viz-patterns.md

• Chart and counter patterns

• references/effects-library.md

• Background and transition effects

Advanced

• references/3d-graphics.md

• Three.js 3D scenes and camera animations

• references/lottie-animations.md

• After Effects Lottie integration

• references/captions-subtitles.md

• Subtitle generation and styling

• references/showcase-templates.md

• Production patterns from Remotion showcase

Related Skills

• terminal-demo-generator : VHS/asciinema recordings that feed into compositions

• manim-visualizer : Animated diagrams as overlay assets

• demo-producer : Full pipeline orchestration

• video-pacing : Timing and rhythm patterns for compositions

• music-sfx-selection : Audio selection for the audio layer