Remotion Expert - High-Performance Video Generation

🧭 Overview

Core Capabilities

• Programmatic Animation: Frame-perfect control via

  useCurrentFrame

  and

  interpolate

  .
• Dynamic Compositions: Parameterized videos that adapt to external data.
• Modern Stack: Fully optimized for React 19.3, Next.js 16.2, and Tailwind CSS 4.0.
• AI Orchestration: Integration with Remotion Skills for instruction-driven video editing.

🛠️ Table of Contents

1. Quick Start
2. Mandatory Rules & Anti-Patterns
3. Core Concepts
4. Advanced Patterns
5. The "Do Not" List
6. References

⚡ Quick Start

bun create video@latest my-video
cd my-video
bun start

Basic Composition Pattern

import { AbsoluteFill, interpolate, useCurrentFrame, useVideoConfig } from 'remotion';

export const MyVideo = () => {
  const frame = useCurrentFrame();
  const { fps, durationInFrames } = useVideoConfig();

  // Animate from 0 to 1 over the first second
  const opacity = interpolate(frame, [0, fps], [0, 1], {
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill style={{ 
      backgroundColor: 'white', 
      justifyContent: 'center', 
      alignItems: 'center' 
    }}>
      <h1 style={{ opacity, fontSize: 100 }}>Remotion 2026</h1>
    </AbsoluteFill>
  );
};

🛡️ Mandatory Rules & Anti-Patterns

1. NO CSS ANIMATIONS: Never use standard CSS

   @keyframes

   or

   transition

   . They are not deterministic and will fail during rendering. Use

   interpolate()

   or

   spring()

   .
2. Deterministic Logic: Ensure all calculations are derived from

   frame

   . Avoid

   Math.random()

   or

   Date.now()

   inside components unless seeded.
3. Zod Validation: Always use Zod for

   defaultProps

   to ensure type safety in parameterized videos.
4. Asset Preloading: Use

   staticFile()

   for local assets and ensure remote assets are reachable during render.

🧠 Core Concepts

1. Frame-Based Animation

const frame = useCurrentFrame();
const scale = interpolate(frame, [0, 20], [0, 1], { easing: Easing.bezier(0.25, 0.1, 0.25, 1) });

2. Composition Architecture

<Composition
  id="Main"
  component={MyComponent}
  durationInFrames={300}
  fps={60}
  width={1920}
  height={1080}
  defaultProps={{ title: 'Hello' }}
/>

🚀 Advanced Patterns

AI-Driven Video Modification (2026)

// Pattern: Instruction-driven prop updates
export const aiUpdateHandler = async (instruction: string, currentProps: Props) => {
  // Logic to map LLM output to Remotion props
  return updatedProps;
};

Dynamic Metadata Calculation

export const calculateMetadata = async ({ props }) => {
  const response = await fetch(`https://api.v2.com/video-data/${props.id}`);
  const data = await response.json();
  return {
    durationInFrames: data.duration * 60,
    props: { ...props, content: data.content }
  };
};

🚫 The "Do Not" List (Common Mistakes)

• DO NOT use

  setTimeout

  or

  setInterval

  . They do not sync with the renderer.
• DO NOT use

  npm

  for 2026 workflows; prefer

  bun

  for sub-second install and execution.
• DO NOT forget to use

  <Sequence>

  for delaying elements. Manual frame offsets are error-prone.
• DO NOT use Tailwind 3.x patterns; leverage Tailwind 4.0 native container queries for responsive video layouts.
• DO NOT use

  useState

  for animation progress. Animation state must always be derived from

  frame

  .
• DO NOT perform heavy computations inside the render loop without

  useMemo

  . Remember that the component renders every frame.
• DO NOT use external libraries that rely on

  window.requestAnimationFrame

  . They won't be captured by the Remotion renderer.
• DO NOT hardcode frame counts. Always use constants or relative calculations like

  2 * fps

  .

📚 References

• Animations & Timing - Precision interpolation and springs.
• Compositions & Props - Structuring complex video projects.
• Media & Assets - Handling Video, Audio, and Lottie.
• Sequencing & Series - Timeline orchestration.
• Next.js Integration - SSR and Server Actions for Video.