Nicholai 75168f7678 init: agent event bus + state

structure:
  state/CURRENT.md — 2-4 line session state (rewritten each session)
  events/ — json event bus (pull-based, optional context)
  persistent/ — important decisions (one doc per decision)
  emit — helper script for emitting events

2026-01-24 03:27:11 -07:00

1.6 KiB

Raw Blame History

name

description

metadata

assets

Importing images, videos, audio, and fonts into Remotion

tags
assets, staticFile, images, fonts, public

Importing assets in Remotion

The public folder

Place assets in the public/ folder at your project root.

Using staticFile()

You MUST use staticFile() to reference files from the public/ folder:

import {Img, staticFile} from 'remotion';

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

The function returns an encoded URL that works correctly when deploying to subdirectories.

Using with components

Images:

import {Img, staticFile} from 'remotion';

<Img src={staticFile('photo.png')} />;

Videos:

import {Video} from '@remotion/media';
import {staticFile} from 'remotion';

<Video src={staticFile('clip.mp4')} />;

Audio:

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

<Audio src={staticFile('music.mp3')} />;

Fonts:

import {staticFile} from 'remotion';

const fontFamily = new FontFace('MyFont', `url(${staticFile('font.woff2')})`);
await fontFamily.load();
document.fonts.add(fontFamily);

Remote URLs

Remote URLs can be used directly without staticFile():

<Img src="https://example.com/image.png" />
<Video src="https://remotion.media/video.mp4" />

Important notes

Remotion components (<Img>, <Video>, <Audio>) ensure assets are fully loaded before rendering
Special characters in filenames (#, ?, &) are automatically encoded

1.6 KiB Raw Blame History