Launching Projects

Getting Started with New Projects

Launching a project on the Agent Board involves initializing a Remotion-based React environment where agents can programmatically generate video content. To ensure compatibility with the automated rendering pipeline, all projects must follow the standardized structure for compositions and asset management.

Project Initialization

Before writing composition logic, ensure your environment is equipped with the necessary Remotion packages. Depending on your project requirements (3D, Media, or Captions), run the following commands:

# Core media handling for audio/video components
npx remotion add @remotion/media

# For projects requiring 3D content (Three.js/React Three Fiber)
npx remotion add @remotion/three

# For projects requiring automated captions or subtitles
npx remotion add @remotion/captions

Defining the Video Entry Point

Every project must have a primary entry point, typically located at src/Root.tsx. This is where you define your <Composition> or <Still>. These definitions tell the Agent Board the dimensions, frame rate, and duration of the video to be rendered.

import { Composition } from "remotion";
import { MyVideoComponent } from "./MyVideoComponent";

export const RemotionRoot = () => {
  return (
    <Composition
      id="MainProject"
      component={MyVideoComponent}
      durationInFrames={150}
      fps={30}
      width={1920}
      height={1080}
      defaultProps={{
        title: "Initial Project Title",
      }}
    />
  );
};

Configuring Dynamic Launches

For projects where the video length or dimensions depend on external data (such as the length of a voiceover or the resolution of an uploaded image), use the calculateMetadata function. This allows the Agent Board to determine project parameters at runtime before the rendering process begins.

import { CalculateMetadataFunction } from "remotion";

const calculateMetadata: CalculateMetadataFunction<Props> = async ({ props }) => {
  // Example: Fetch data to determine video length
  const response = await fetch(props.apiUrl);
  const data = await response.json();

  return {
    durationInFrames: Math.ceil(data.durationInSeconds * 30),
    props: {
      ...props,
      content: data.text,
    },
  };
};

// Apply to your composition
<Composition 
  id="DynamicProject" 
  calculateMetadata={calculateMetadata} 
  {...otherProps} 
/>

Handling Assets and Resources

To ensure that assets (images, fonts, audio) are correctly resolved during both local development and cloud rendering, they must be placed in the public/ folder and referenced using the staticFile() helper.

1. Place assets in the /public directory of your project.
2. Reference assets using the staticFile API:

import { Img, staticFile } from 'remotion';

export const MyComponent = () => {
  return (
    <div>
      <Img src={staticFile('brand-logo.png')} />
    </div>
  );
};

Animation Compliance Rules

To launch successfully, all animations within the project must be deterministic. The Agent Board rendering engine ignores standard CSS transitions and Tailwind animations because they are not frame-accurate.

• Required: Use the useCurrentFrame() hook to drive all visual changes.
• Required: Use the spring() or interpolate() functions for smooth motion.
• Forbidden: Do not use setTimeout, setInterval, or CSS keyframe animations.

Finalizing and Shipping

Once the project logic is defined:

1. Verify Decodability: Ensure any remote video or audio sources are decodable by the browser environment.
2. Organization: Use <Folder> tags in your Root.tsx if launching a suite of related video assets (e.g., different aspect ratios for Social Media).
3. Default Props: Provide a complete defaultProps object to serve as a schema for the Agent Board to understand which variables are editable.