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.
- Place assets in the
/publicdirectory of your project. - Reference assets using the
staticFileAPI:
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()orinterpolate()functions for smooth motion. - Forbidden: Do not use
setTimeout,setInterval, or CSS keyframe animations.
Finalizing and Shipping
Once the project logic is defined:
- Verify Decodability: Ensure any remote video or audio sources are decodable by the browser environment.
- Organization: Use
<Folder>tags in yourRoot.tsxif launching a suite of related video assets (e.g., different aspect ratios for Social Media). - Default Props: Provide a complete
defaultPropsobject to serve as a schema for the Agent Board to understand which variables are editable.