Audio & Asset Orchestration

Asset Management with `staticFile()`

In Agent Board, all local assets (images, audio, video) should be stored in the public/ directory. To ensure these assets resolve correctly across different environments—especially when deploying to subdirectories—you must use the staticFile() utility.

import { Img, staticFile } from 'remotion';

export const Logo = () => {
  return <Img src={staticFile('branding/logo.png')} />;
};

Supported Media Components

Remotion provides specialized components that handle asset loading states automatically. This ensures the renderer waits for the file to be fully buffered before capturing a frame.

<Img />: For .png, .jpg, .svg, and .webp.
<Video />: From @remotion/media.
<Audio />: From @remotion/media.

Audio Orchestration

The <Audio> component is the primary interface for sound design. It supports layering, trimming, and frame-accurate volume control.

Basic Implementation

import { Audio } from "@remotion/media";
import { staticFile } from "remotion";

<Audio src={staticFile("background-track.mp3")} />

Trimming and Offsetting

Audio can be trimmed to play a specific segment of the source file using trimBefore and trimAfter (measured in frames). To delay the start of the audio within the timeline, wrap it in a <Sequence>.

import { Sequence, useVideoConfig } from "remotion";
import { Audio } from "@remotion/media";

export const Soundscape = () => {
  const { fps } = useVideoConfig();

  return (
    <Sequence from={fps * 2}> {/* Start at 2 seconds */}
      <Audio
        src={staticFile("voiceover.mp3")}
        trimBefore={fps * 1} // Skip first second of file
        trimAfter={fps * 5}  // Stop at 5 seconds into file
      />
    </Sequence>
  );
};

Dynamic Volume and Pitch

Volume can be controlled statically or dynamically using a callback function. The callback receives the current frame relative to the start of the audio.

<Audio
  src={staticFile("music.mp3")}
  volume={(f) => interpolate(f, [0, 30], [0, 1], { extrapolateRight: 'clamp' })}
/>

Sequencing and Timing

Orchestration is handled via the <Sequence> component. Sequences define a "local" time context for their children, allowing you to build modular components that don't need to know their absolute position in the master timeline.

Layout vs. Timing

By default, <Sequence> wraps content in a div. If you are orchestrating 3D content or specialized layouts, use the layout prop:

layout="absolute-fill" (Default): Positions the sequence absolutely.
layout="none": Recommended for <ThreeCanvas> or when managing custom CSS layouts.

Typography and Font Loading

To prevent layout shifts and "Flash of Unstyled Text" (FOUT) during rendering, fonts must be registered and preloaded.

Google Fonts

Use the @remotion/google-fonts package for type-safe font integration. These functions automatically hook into the Remotion lifecycle to block rendering until the font is available.

import { loadFont } from "@remotion/google-fonts/Inter";

const { fontFamily } = loadFont();

export const TextOverlay = () => {
  return <div style={{ fontFamily }}>Dynamic Title</div>;
};

Local Fonts

For brand-specific local fonts, use the standard FontFace API combined with staticFile().

const myFont = new FontFace(
  'BrandFont',
  `url(${staticFile('fonts/brand-bold.woff2')})`
);

Dynamic Metadata Calculation

When assets (like videos or audio files) have variable lengths, use calculateMetadata to adjust the composition duration dynamically before the render starts.

import { Composition } from 'remotion';
import { getMediaMetadata } from '@remotion/media-utils';

<Composition
  id="DynamicTrack"
  component={MyComp}
  fps={30}
  width={1920}
  height={1080}
  calculateMetadata={async ({ props }) => {
    const metadata = await getMediaMetadata(props.videoSrc);
    return {
      durationInFrames: Math.ceil(metadata.durationInSeconds * 30),
    };
  }}
/>