DOCSEARCHbyAlgolia
Submit Docs

Remotion

website·Indexed 38 days ago

https://www.remotion.dev/

A framework for creating videos programmatically using React.js. It provides a set of APIs and components like <AbsoluteFill>, <AnimatedImage>, and <AnimatedEmoji>, along with tools for animating properties using interpolate and spring functions. The documentation covers version migrations from v2.0 through v5.0, integration with Angular, and extensive AI capabilities including LLM system prompts and plugins for Cursor, GitHub Copilot, and Claude Code.

Tokens
473.1K
Snippets
1.9K
Records
3.2K
Agent score
95%

What's inside Remotion

  1. Overview of @remotion/cloudrun

    @remotion/cloudrun allows you to render Remotion videos on Google Cloud Platform (GCP) Cloud Run. It is currently in Alpha status. The architecture consists of a Cloud Run service (containing rendering libraries/binaries), a Cloud Storage bucket (storing projects, renders, and metadata), a CLI for control, and a Node.js API for programmatic access.

    Rendering workflow:

    1. A Cloud Run service and Cloud Storage bucket are created in GCP.
    2. The Remotion project is deployed to the Cloud Storage bucket as a website.
    3. The Cloud Run service is invoked to open the project.
    4. The service renders the video or still and uploads the final file to Cloud Storage for download.

  2. Overview of @remotion/bundler

    @remotion/bundler is a package that provides the bundle() function. This function takes a Remotion project and bundles it using Webpack, which is a prerequisite for using server-side rendering functions such as getCompositions() and renderMedia().

  3. Overview of @remotion/three

    @remotion/three is a package used to integrate React Three Fiber (R3F) with Remotion. It provides specialized components and hooks to allow 3D scenes to be driven by Remotion's timeline and frame system, moving animations out of the standard R3F useFrame() hook and directly into the markup.

  4. Overview of @remotion/media-parser stable API types

    The @remotion/media-parser package provides a set of stable TypeScript types for media parsing. Note that this package is being phased out in favor of Mediabunny. Key types include:

    • Codecs/Containers: MediaParserAudioCodec, MediaParserVideoCodec, MediaParserContainer.
    • Tracks: MediaParserTrack, MediaParserVideoTrack, MediaParserAudioTrack, MediaParserOtherTrack.
    • Samples/Frames: MediaParserAudioSample, MediaParserVideoSample, MediaParserKeyframe.
    • Color/Metadata: MediaParserAdvancedColor, MediaParserMatrixCoefficients, MediaParserPrimaries, MediaParserTransferCharacteristics, MediaParserMetadataEntry.
    • Other: MediaParserDimensions, MediaParserLocation, MediaParserLogLevel, ParseMediaSrc, SeekResolution.

  5. Overview of Remotion Lambda Custom Layers

    Remotion Lambda functions include Chrome and base fonts by default. Custom layers are used in advanced scenarios such as using a specific Chrome version or replacing default fonts and emojis. Note that AWS Lambda layers have a cumulative extracted size limit of 250MB; adding new files requires removing others to stay under this limit. For simple font additions, using Web fonts is recommended instead of custom layers.

  6. Overview of Remotion Studio Interactivity

    Studio interactivity allows developers to perform visual edits in the Remotion Studio UI that are automatically written back to the codebase. This includes manipulating sequences, effects, keyframes, and easing segments. Edits can be undone using ⌘/Ctrl + Z and redone using ⌘/Ctrl + Y.

  7. Overview of Remotion AI coding agent plugins

    Remotion provides a set of plugins for various AI coding agents. These plugins incorporate Remotion Agent Skills to assist developers in creating and editing Remotion projects directly within their AI-powered development environments.

  8. Overview of Remotion WebMCP capabilities

    Remotion Studio (v4.0.518+) exposes WebMCP tools that enable AI agents to steer the Studio. Capabilities include inspecting selected items, navigating compositions, reading error overlays, retrieving composition HTML and element geometry, controlling playback (play, pause, seek, zoom), managing guides, installing npm packages, transcribing assets, and managing the Studio server state. To use these, start Remotion Studio and open it in a browser with an AI agent that supports WebMCP (e.g., ChatGPT Codex).

  9. Overview of @remotion/lambda

    @remotion/lambda allows you to render Remotion videos on AWS Lambda, providing a highly scalable and cost-effective rendering solution where you only pay during the rendering process. The architecture consists of a Lambda function (using a Chromium layer hosted by Remotion) and an S3 bucket to store projects, render metadata, and the final video files. You can manage this infrastructure via the Remotion CLI or the Node.js API.

  10. Overview of Remotion Server-Side Rendering (SSR) options

    Remotion's rendering engine is built with Node.js, allowing videos to be rendered in the cloud. Depending on the infrastructure and requirements, several options are available:

    • AWS Lambda: The fastest way to render in the cloud using @remotion/lambda.
    • Vercel Sandbox: The easiest setup, particularly for Vercel users.
    • Node.js/Bun APIs: Programmatic control over rendering using Remotion's core APIs.
    • GitHub Actions: Rendering via CI/CD workflows.
    • Docker: Containerized rendering for various environments.
    • Cloud Platforms: Deployment options include Azure Container Apps, Cloudflare Containers, and GCP Cloud Run (Alpha).

  11. Add repeating wavy bands with waves()

    The waves() effect from the @remotion/effects package adds repeating wavy bands to canvas-based components such as <Video>, <HtmlInCanvas>, and <Solid>. The colors of the waves are composited over the source component. This effect requires a WebGL2 backend.
    import {waves} from '@remotion/effects/waves';
import {AbsoluteFill, Solid, useCurrentFrame} from 'remotion';

export const MyComp: React.FC = () => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill>
      <Solid
        width={1280}
        height={720}
        effects={[
          waves({
            colors: ['#dff4ff', '#7cc6ff'],
            direction: 'horizontal',
            thickness: 40,
            gap: 0,
            angle: 0,
            offset: frame * 2,
            amplitude: 24,
            wavelength: 160,
            phase: frame * 2,
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

  12. Define controls for Remotion Studio using InteractivitySchema

    An InteractivitySchema defines the controls that appear in the Remotion Studio timeline. It is used with Interactive.withSchema() for component props and createEffect() for effect parameters. Note that this is not a Zod schema; Zod schemas are used for <Composition> props.
    import {Interactive, type InteractivitySchema} from 'remotion';

export const titleCardSchema = {
  ...Interactive.baseSchema,
  ...Interactive.transformSchema,
  tint: {
    type: 'color',
    default: '#ffffff',
    description: 'Tint',
  },
} as const satisfies InteractivitySchema;