einundzwanzig-verein/videos/.opencode/skills/remotion-best-practices/rules/assets.md

name, description, metadata

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