remotion-dev/skills

If the server is already started, it will print the URL. If you use `--no-open`, open the exact printed URL in the in-app browser and verify that Studio loads. Once a composition exists, verify that its video preview loads. If you cannot op

You can visit a specific composition by navigating to `/[composition-id]`, for example `http://localhost:3000/MapAnimation`.

<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">

All captions must be processed in JSON. The captions must use the [`Caption`](https://www.remotion.dev/docs/captions/caption.md) type which is the following:

<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">

This guide explains how to display captions in Remotion, assuming you already have captions in the [`Caption`](https://www.remotion.dev/docs/captions/caption.md) format.

First, the [`@remotion/captions`](https://www.remotion.dev/docs/captions.md) package needs to be installed.

Use the [Basic Captions](https://www.remotion.dev/elements/captions/basic-captions) element to display captions.

Alternatives are available at [Remotion Captions Elements](https://www.remotion.dev/elements/captions), but use Basic Captions unless there are more precise specifications.

Fetch its source code from https://www.remotion.dev/elements/captions/basic-captions.md and copy the `basic-captions.tsx` file into the project unchanged.

const fetchCaptions = useCallback(async () => {     try {       const response = await fetch(staticFile("subtitles.srt"));

try {       const response = await fetch(staticFile("subtitles.srt"));       const text = await response.text();

const response = await fetch(staticFile("subtitles.srt"));

Remote URLs are also supported - you can `fetch()` a remote file via URL instead of using `staticFile()`.

To transcribe audio to generate captions in Remotion, use the [`transcribe()`](https://www.remotion.dev/docs/whisper-webgpu/transcribe.md) function from the [`@remotion/whisper-webgpu`](https://www.remotion.dev/docs/whisper-webgpu.md) packa

`small.en` is the recommended default for English.   For other languages, use a multilingual model such as `small` and pass the `language` option to `transcribe()` - automatic language detection is not supported.   See [`getAvailableModels(

See [`getAvailableModels()`](https://www.remotion.dev/docs/whisper-webgpu/get-available-models.md) for all models.

In the browser, use [`resampleTo16Khz()`](https://www.remotion.dev/docs/whisper-webgpu/resample-to-16khz.md) to get the waveform from a `File` instead of using Mediabunny:

<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">

Tailwind must be installed and enabled first in a Remotion project - see https://www.remotion.dev/docs/tailwind.

[Credential-related source omitted]

https://www.remotion.dev/docs/use-video-config.md

https://www.remotion.dev/docs/sequence.md

https://www.remotion.dev/docs/lambda/rendermediaonlambda.md

<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">

Nested markup and computed children are currently read-only. `text-content` is a deprecated alias for the `string` field type. See [`InteractivitySchema`](https://www.remotion.dev/docs/interactivity-schema) for all options.

See [`InteractivitySchema`](https://www.remotion.dev/docs/interactivity-schema) for all options.

Launch day   </Interactive.Div>   <Img name="Avatar" src="https://remotion.media/image.jpeg" />

</Interactive.Div>   <Img name="Avatar" src="https://remotion.media/image.jpeg" />   <Video name="Background" src="https://remotion.media/video.mp4" />

<Img name="Avatar" src="https://remotion.media/image.jpeg" />

<Video name="Background" src="https://remotion.media/video.mp4" />

To make a custom userland component interactive, use: [Make a component interactive](https://www.remotion.dev/docs/studio/make-component-interactive.md)

[Make a component interactive](https://www.remotion.dev/docs/studio/make-component-interactive.md)

<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">

- [License](https://www.remotion.dev/docs/license.md)

- [License FAQ](https://www.remotion.dev/docs/license/faq.md)

- [Terms and Conditions](https://www.remotion.dev/docs/terms.md)

You can buy a license on [remotion.pro](https://www.remotion.pro/license).

<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">

<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">

Create a MapTiler key at https://cloud.maptiler.com/account/keys/.

[Credential-related source omitted]

Create a billing-enabled Google Map Tiles API key by following https://developers.google.com/maps/documentation/tile/get-api-key. Enable the **Map Tiles API** and

https://developers.google.com/maps/documentation/tile/get-api-key. Enable the **Map Tiles API** and restrict the key to that API. Ensure its application restriction permits local headless Remotion requests.

Executable file

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

const CESIUM_VER = '1.143'; const CDN = `https://cesium.com/downloads/cesiumjs/releases/${CESIUM_VER}/Build/Cesium/`; const R = 6371;

const CDN = `https://cesium.com/downloads/cesiumjs/releases/${CESIUM_VER}/Build/Cesium/`;

if (mode === 'landscape' && !MAPTILER_KEY) { 				throw new Error( 					'Set REMOTION_MAPTILER_KEY. Create a key at https://cloud.maptiler.com/account/keys/',

throw new Error( 					'Set REMOTION_MAPTILER_KEY. Create a key at https://cloud.maptiler.com/account/keys/', 				);

'Set REMOTION_MAPTILER_KEY. Create a key at https://cloud.maptiler.com/account/keys/',

[Credential-related source omitted]

[Credential-related source omitted]

throw new Error( 					'Set REMOTION_GOOGLE_MAPS_API_KEY. Create a Map Tiles API key at https://developers.google.com/maps/documentation/tile/get-api-key', 				);

[Credential-related source omitted]

[Credential-related source omitted]

viewer.imageryLayers.addImageryProvider( 					new C.UrlTemplateImageryProvider({ 						url: `https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=${MAPTILER_KEY}`,

new C.UrlTemplateImageryProvider({ 						url: `https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=${MAPTILER_KEY}`, 						maximumLevel: 20,

[Credential-related source omitted]

[Credential-related source omitted]

); 				viewer.terrainProvider = await C.CesiumTerrainProvider.fromUrl( 					`https://api.maptiler.com/tiles/terrain-quantized-mesh-v2/?key=${MAPTILER_KEY}`,

viewer.terrainProvider = await C.CesiumTerrainProvider.fromUrl( 					`https://api.maptiler.com/tiles/terrain-quantized-mesh-v2/?key=${MAPTILER_KEY}`, 					{requestVertexNormals: true},

[Credential-related source omitted]

[Credential-related source omitted]

viewer.creditDisplay.addStaticCredit( 					new C.Credit( 						'<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a>',

new C.Credit( 						'<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a>', 						true,

'<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a>',

viewer.scene.globe.show = false; 				const tileset = await C.Cesium3DTileset.fromUrl( 					`https://tile.googleapis.com/v1/3dtiles/root.json?key=${GOOGLE_MAPS_API_KEY}`,

const tileset = await C.Cesium3DTileset.fromUrl( 					`https://tile.googleapis.com/v1/3dtiles/root.json?key=${GOOGLE_MAPS_API_KEY}`, 					{

[Credential-related source omitted]

[Credential-related source omitted]

Executable file

Executable file

- https://cloud.maptiler.com/account/keys/

- https://docs.maptiler.com/cesium/

- https://docs.maptiler.com/schema-raster/terrain-3d/

[Credential-related source omitted]

- https://developers.google.com/maps/documentation/tile/get-api-key

- https://developers.google.com/maps/documentation/tile/3d-tiles

- https://developers.google.com/maps/documentation/tile/policies

viewer.scene.globe.show = false; const tileset = await Cesium.Cesium3DTileset.fromUrl(   `https://tile.googleapis.com/v1/3dtiles/root.json?key=${GOOGLE_KEY}`,

const tileset = await Cesium.Cesium3DTileset.fromUrl(   `https://tile.googleapis.com/v1/3dtiles/root.json?key=${GOOGLE_KEY}`,   {showCreditsOnScreen: true, maximumScreenSpaceError: 4},

[Credential-related source omitted]

[Credential-related source omitted]

Executable file

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

URL.createObjectURL( 				new Blob( 					[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`],

new Blob( 					[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`], 					{type: 'text/javascript'},

[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`],

const mapInstance = new maplibregl.Map({ 			container: containerRef.current, 			style: 'https://demotiles.maplibre.org/style.json',

container: containerRef.current, 			style: 'https://demotiles.maplibre.org/style.json', 			center: zurich,

style: 'https://demotiles.maplibre.org/style.json',

URL.createObjectURL( 				new Blob( 					[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`],

new Blob( 					[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`], 					{type: 'text/javascript'},

[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`],

const mapInstance = new maplibregl.Map({ 			container: containerRef.current, 			style: 'https://demotiles.maplibre.org/style.json',

container: containerRef.current, 			style: 'https://demotiles.maplibre.org/style.json', 			center: zurich,

style: 'https://demotiles.maplibre.org/style.json',

style: 'https://demotiles.maplibre.org/style.json'

Use `jumpTo` only for a static shot, or a fixed map plate for any pan/zoom. Gate with [`delayRender`](https://www.remotion.dev/docs/delay-render.md) until `map.once('idle')`.

Gate with [`delayRender`](https://www.remotion.dev/docs/delay-render.md) until `map.once('idle')`.

Render labels as positioned [`<Interactive.Div>`](https://www.remotion.dev/docs/interactive.md) elements.

[Credential-related source omitted]

Executable file

Executable file

map.addSource(SOURCE_ID, { 			type: 'vector', 			url: `https://api.maptiler.com/tiles/v3/tiles.json?key=${apiKey}`,

type: 'vector', 			url: `https://api.maptiler.com/tiles/v3/tiles.json?key=${apiKey}`, 		});

url: `https://api.maptiler.com/tiles/v3/tiles.json?key=${apiKey}`,

[Credential-related source omitted]

Executable file

[Credential-related source omitted]

Executable file

Executable file

[Credential-related source omitted]

Executable file

style={{ width: 100, height: 100 }}       />       <Video src="https://remotion.media/video.mp4" />

/>       <Video src="https://remotion.media/video.mp4" />       <AnimatedImage src={staticFile('nyancat.gif')} />

<Video src="https://remotion.media/video.mp4" />

<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">

Use `useWindowedAudioData()` (https://www.remotion.dev/docs/use-windowed-audio-data) to load audio data:

Use `visualizeAudio()` (https://www.remotion.dev/docs/visualize-audio) to get frequency data for bar charts:

Use `visualizeAudioWaveform()` (https://www.remotion.dev/docs/media-utils/visualize-audio-waveform) with `createSmoothSvgPath()` (https://www.remotion.dev/docs/media-utils/create-smooth-svg-path) for oscilloscope-style displays:

Use `getWaveformPortion()` (https://www.remotion.dev/docs/get-waveform-portion) when you need simplified volume data instead of frequency spectrum:

<Audio src="https://remotion.media/audio.mp3" />

width={1920}   height={1080}   defaultProps={{ videoSrc: "https://remotion.media/video.mp4" }}

height={1080}   defaultProps={{ videoSrc: "https://remotion.media/video.mp4" }}   calculateMetadata={calculateMetadata}

defaultProps={{ videoSrc: "https://remotion.media/video.mp4" }}

abortSignal, }) => {   const response = await fetch(props.dataUrl, { signal: abortSignal });

}) => {   const response = await fetch(props.dataUrl, { signal: abortSignal });   const data = await response.json();

const response = await fetch(props.dataUrl, { signal: abortSignal });

Prefer [`colorCorrection()`](https://www.remotion.dev/docs/effects/color-correction) when combining adjustments.

Use [`levels()`](https://www.remotion.dev/docs/effects/levels) to set input black

Use [`curves()`](https://www.remotion.dev/docs/effects/curves) for an S-curve or

A LUT (lookup table) maps input RGB colors to output colors. Use [`lut()`](https://www.remotion.dev/docs/effects/lut) to apply a 3D `.cube` LUT.

[`lut()`](https://www.remotion.dev/docs/effects/lut) to apply a 3D `.cube` LUT.

- [Color correction documentation](https://www.remotion.dev/docs/color-correction)

<>   <Video src="https://remotion.media/video.mp4" />

<Video src="https://remotion.media/video.mp4" />

Docs: https://www.remotion.dev/docs/effects

Custom effect docs: https://www.remotion.dev/docs/create-effect

<Video   src="https://remotion.media/video.mp4"

src="https://remotion.media/video.mp4"

<Video   src="https://remotion.media/video.mp4"

src="https://remotion.media/video.mp4"

<Video src="https://remotion.media/video.mp4" />

<AnimatedImage   src="https://example.com/animation.gif"

src="https://example.com/animation.gif"

For a fully working minimal example, see https://github.com/remotion-dev/remotion/blob/main/packages/docs/components/demos/HtmlInCanvasDocsDemoWebGL.tsx.

useEffect(() => {     fetch("https://assets4.lottiefiles.com/packages/lf20_zyquagfl.json")

fetch("https://assets4.lottiefiles.com/packages/lf20_zyquagfl.json")

If HTML-in-canvas is unavailable, see the [motion blur guide](https://www.remotion.dev/docs/motion-blur) for other options. See the [`<HtmlInCanvasMotionBlur>` reference](https://www.remotion.dev/docs/motion-blur/html-in-canvas-motion-blur)

<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">

Create a MapTiler key at https://cloud.maptiler.com/account/keys/.

[Credential-related source omitted]

Create a billing-enabled Google Map Tiles API key by following https://developers.google.com/maps/documentation/tile/get-api-key. Enable the **Map Tiles API** and

https://developers.google.com/maps/documentation/tile/get-api-key. Enable the **Map Tiles API** and restrict the key to that API. Ensure its application restriction permits local headless Remotion requests.

Executable file

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

const CESIUM_VER = '1.143'; const CDN = `https://cesium.com/downloads/cesiumjs/releases/${CESIUM_VER}/Build/Cesium/`; const R = 6371;

const CDN = `https://cesium.com/downloads/cesiumjs/releases/${CESIUM_VER}/Build/Cesium/`;

if (mode === 'landscape' && !MAPTILER_KEY) { 				throw new Error( 					'Set REMOTION_MAPTILER_KEY. Create a key at https://cloud.maptiler.com/account/keys/',

throw new Error( 					'Set REMOTION_MAPTILER_KEY. Create a key at https://cloud.maptiler.com/account/keys/', 				);

'Set REMOTION_MAPTILER_KEY. Create a key at https://cloud.maptiler.com/account/keys/',

[Credential-related source omitted]

[Credential-related source omitted]

throw new Error( 					'Set REMOTION_GOOGLE_MAPS_API_KEY. Create a Map Tiles API key at https://developers.google.com/maps/documentation/tile/get-api-key', 				);

[Credential-related source omitted]

[Credential-related source omitted]

viewer.imageryLayers.addImageryProvider( 					new C.UrlTemplateImageryProvider({ 						url: `https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=${MAPTILER_KEY}`,

new C.UrlTemplateImageryProvider({ 						url: `https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=${MAPTILER_KEY}`, 						maximumLevel: 20,

[Credential-related source omitted]

[Credential-related source omitted]

); 				viewer.terrainProvider = await C.CesiumTerrainProvider.fromUrl( 					`https://api.maptiler.com/tiles/terrain-quantized-mesh-v2/?key=${MAPTILER_KEY}`,

viewer.terrainProvider = await C.CesiumTerrainProvider.fromUrl( 					`https://api.maptiler.com/tiles/terrain-quantized-mesh-v2/?key=${MAPTILER_KEY}`, 					{requestVertexNormals: true},

[Credential-related source omitted]

[Credential-related source omitted]

viewer.creditDisplay.addStaticCredit( 					new C.Credit( 						'<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a>',

new C.Credit( 						'<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a>', 						true,

'<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a>',

viewer.scene.globe.show = false; 				const tileset = await C.Cesium3DTileset.fromUrl( 					`https://tile.googleapis.com/v1/3dtiles/root.json?key=${GOOGLE_MAPS_API_KEY}`,

const tileset = await C.Cesium3DTileset.fromUrl( 					`https://tile.googleapis.com/v1/3dtiles/root.json?key=${GOOGLE_MAPS_API_KEY}`, 					{

[Credential-related source omitted]

[Credential-related source omitted]

Executable file

Executable file

- https://cloud.maptiler.com/account/keys/

- https://docs.maptiler.com/cesium/

- https://docs.maptiler.com/schema-raster/terrain-3d/

[Credential-related source omitted]

- https://developers.google.com/maps/documentation/tile/get-api-key

- https://developers.google.com/maps/documentation/tile/3d-tiles

- https://developers.google.com/maps/documentation/tile/policies

viewer.scene.globe.show = false; const tileset = await Cesium.Cesium3DTileset.fromUrl(   `https://tile.googleapis.com/v1/3dtiles/root.json?key=${GOOGLE_KEY}`,

const tileset = await Cesium.Cesium3DTileset.fromUrl(   `https://tile.googleapis.com/v1/3dtiles/root.json?key=${GOOGLE_KEY}`,   {showCreditsOnScreen: true, maximumScreenSpaceError: 4},

[Credential-related source omitted]

[Credential-related source omitted]

Executable file

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

URL.createObjectURL( 				new Blob( 					[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`],

new Blob( 					[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`], 					{type: 'text/javascript'},

[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`],

const mapInstance = new maplibregl.Map({ 			container: containerRef.current, 			style: 'https://demotiles.maplibre.org/style.json',

container: containerRef.current, 			style: 'https://demotiles.maplibre.org/style.json', 			center: zurich,

style: 'https://demotiles.maplibre.org/style.json',

URL.createObjectURL( 				new Blob( 					[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`],

new Blob( 					[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`], 					{type: 'text/javascript'},

[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`],

const mapInstance = new maplibregl.Map({ 			container: containerRef.current, 			style: 'https://demotiles.maplibre.org/style.json',

container: containerRef.current, 			style: 'https://demotiles.maplibre.org/style.json', 			center: zurich,

style: 'https://demotiles.maplibre.org/style.json',

style: 'https://demotiles.maplibre.org/style.json'

Use `jumpTo` only for a static shot, or a fixed map plate for any pan/zoom. Gate with [`delayRender`](https://www.remotion.dev/docs/delay-render.md) until `map.once('idle')`.

Gate with [`delayRender`](https://www.remotion.dev/docs/delay-render.md) until `map.once('idle')`.

Render labels as positioned [`<Interactive.Div>`](https://www.remotion.dev/docs/interactive.md) elements.

[Credential-related source omitted]

Executable file

Executable file

map.addSource(SOURCE_ID, { 			type: 'vector', 			url: `https://api.maptiler.com/tiles/v3/tiles.json?key=${apiKey}`,

type: 'vector', 			url: `https://api.maptiler.com/tiles/v3/tiles.json?key=${apiKey}`, 		});

url: `https://api.maptiler.com/tiles/v3/tiles.json?key=${apiKey}`,

[Credential-related source omitted]

Executable file

[Credential-related source omitted]

Executable file

Executable file

[Credential-related source omitted]

Executable file

<Audio src={"https://remotion.media/whoosh.wav"} />;

- `https://remotion.media/whoosh.wav`

- `https://remotion.media/whip.wav`

- `https://remotion.media/page-turn.wav`

- `https://remotion.media/switch.wav`

- `https://remotion.media/mouse-click.wav`

- `https://remotion.media/shutter-modern.wav`

- `https://remotion.media/shutter-old.wav`

- `https://remotion.media/ding.wav`

- `https://remotion.media/bruh.wav`

- `https://remotion.media/vine-boom.wav`

- `https://remotion.media/windows-xp-error.wav`

- `https://remotion.media/fah.wav`

- `https://remotion.media/spongebob-fail.wav`

- `https://remotion.media/omg-hell-nah.wav`

- `https://remotion.media/price-is-right-fail.wav`

- `https://remotion.media/romance-meme.wav`

- `https://remotion.media/bone-crack.wav`

- `https://remotion.media/anime-wow.wav`

- `https://remotion.media/yippee.wav`

- `https://remotion.media/loading-lag.wav`

- `https://remotion.media/wilhelm-scream.wav`

- `https://remotion.media/mac-quack.wav`

- `https://remotion.media/skedaddle.wav`

- `https://remotion.media/snapchat-notification.wav`

- `https://remotion.media/nelly-ahh.wav`

- `https://remotion.media/sanctuary-guardian-what.wav`

- `https://remotion.media/minecraft-hurt.wav`

- `https://remotion.media/oh-my-god-vine.wav`

- `https://remotion.media/illuminati-confirmed.wav`

- `https://remotion.media/dramatic-boomer.wav`

- `https://remotion.media/triggered.wav`

- `https://remotion.media/record-scratch.wav`

For more sound effects, search the internet. A good resource is https://github.com/kapishdima/soundcn/tree/main/assets.

Docs: https://www.remotion.dev/docs/text-highlights

See [Timing and trimming](https://www.remotion.dev/docs/timing) for more details.

[Credential-related source omitted]

const response = await fetch(

`https://api.elevenlabs.io/v1/text-to-speech/${voiceId}`,

[Credential-related source omitted]

Mediabunny is a multimedia library for dealing with audio and video in the browser. Here is a compact overview of its capabilities: https://mediabunny.dev/llms.txt

Here is a compact overview of its capabilities: https://mediabunny.dev/llms.txt

<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">

const duration = await getAudioDuration("https://remotion.media/audio.mp3");

const dimensions = await getVideoDimensions("https://remotion.media/video.mp4");

const duration = await getVideoDuration("https://remotion.media/video.mp4");

Full list of options: https://www.remotion.dev/docs/cli/render.md

Full list of options: https://www.remotion.dev/docs/cli/still.md

See https://www.remotion.dev/docs/cli/render.md#--frames for more options.

<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">

See https://www.remotion.dev/docs/vue.md for how to use Remotion with Vue.

See https://www.remotion.dev/docs/angular.md for how to use Remotion with Angular.

See https://www.remotion.dev/docs/svelte.md for how to use Remotion with Svelte.

<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">

- Next.js: https://github.com/remotion-dev/template-next-app-dir-tailwind. Uses Lambda as default rendering choice.

- Vercel Sandbox rendering: https://github.com/remotion-dev/template-vercel. Uses Vercel as default rendering choice.

- React Router 7: https://github.com/remotion-dev/template-react-router. Uses Lambda as default rendering choice.

- Express.js render server: `packages/template-render-server`: https://github.com/remotion-dev/template-render-server. Uses Node.js as default rendering choice.

For an existing app, see https://www.remotion.dev/docs/brownfield-installation.md.

If metadata is dynamic, sync the Player props manually or reuse the composition's `calculateMetadata()` logic. Link https://www.remotion.dev/docs/dynamic-metadata.md#with-the-player.

Link https://www.remotion.dev/docs/dynamic-metadata.md#with-the-player.

Full API for the Player: https://www.remotion.dev/docs/player/player.md.

See https://www.remotion.dev/docs/compare-ssr.md for the tradeoffs between server-side rendering options.

- SSR overview: https://www.remotion.dev/docs/ssr.md

- Renderer package: https://www.remotion.dev/docs/renderer.md

- Node SSR: https://www.remotion.dev/docs/ssr-node.md

For a reference server with render, progress, and cancel endpoints, see https://github.com/remotion-dev/template-render-server.

- Overview: https://www.remotion.dev/docs/lambda.md

- API: https://www.remotion.dev/docs/lambda/api.md

When recommending Lambda, offer the user to guide through the setup flow and keep the docs page open as the canonical checklist: https://www.remotion.dev/docs/lambda/setup.md.

[Credential-related source omitted]

See https://www.remotion.dev/docs/vercel-sandbox.md for more info.

See https://www.remotion.dev/docs/ssr.md#render-using-github-actions for how to render on GitHub Actions.

See https://www.remotion.dev/docs/azure-container-apps.md if rendering on Azure Container Apps is requested.

See https://www.remotion.dev/docs/cloudflare-containers.md if rendering on Cloudflare Containers is requested.

<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">

The [Remotion releases](https://github.com/remotion-dev/remotion/releases) contain the changelog and may be useful for summarizing relevant changes after the upgrade.

<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">

All captions must be processed in JSON. The captions must use the [`Caption`](https://www.remotion.dev/docs/captions/caption.md) type which is the following:

<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">

This guide explains how to display captions in Remotion, assuming you already have captions in the [`Caption`](https://www.remotion.dev/docs/captions/caption.md) format.

First, the [`@remotion/captions`](https://www.remotion.dev/docs/captions.md) package needs to be installed.

Use the [Basic Captions](https://www.remotion.dev/elements/captions/basic-captions) element to display captions.

Alternatives are available at [Remotion Captions Elements](https://www.remotion.dev/elements/captions), but use Basic Captions unless there are more precise specifications.

Fetch its source code from https://www.remotion.dev/elements/captions/basic-captions.md and copy the `basic-captions.tsx` file into the project unchanged.

const fetchCaptions = useCallback(async () => {     try {       const response = await fetch(staticFile("subtitles.srt"));

try {       const response = await fetch(staticFile("subtitles.srt"));       const text = await response.text();

const response = await fetch(staticFile("subtitles.srt"));

Remote URLs are also supported - you can `fetch()` a remote file via URL instead of using `staticFile()`.

To transcribe audio to generate captions in Remotion, use the [`transcribe()`](https://www.remotion.dev/docs/whisper-webgpu/transcribe.md) function from the [`@remotion/whisper-webgpu`](https://www.remotion.dev/docs/whisper-webgpu.md) packa

`small.en` is the recommended default for English.   For other languages, use a multilingual model such as `small` and pass the `language` option to `transcribe()` - automatic language detection is not supported.   See [`getAvailableModels(

See [`getAvailableModels()`](https://www.remotion.dev/docs/whisper-webgpu/get-available-models.md) for all models.

In the browser, use [`resampleTo16Khz()`](https://www.remotion.dev/docs/whisper-webgpu/resample-to-16khz.md) to get the waveform from a `File` instead of using Mediabunny:

<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">

Tailwind must be installed and enabled first in a Remotion project - see https://www.remotion.dev/docs/tailwind.

[Credential-related source omitted]

https://www.remotion.dev/docs/use-video-config.md

https://www.remotion.dev/docs/sequence.md

https://www.remotion.dev/docs/lambda/rendermediaonlambda.md

<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">

Nested markup and computed children are currently read-only. `text-content` is a deprecated alias for the `string` field type. See [`InteractivitySchema`](https://www.remotion.dev/docs/interactivity-schema) for all options.

See [`InteractivitySchema`](https://www.remotion.dev/docs/interactivity-schema) for all options.

Launch day   </Interactive.Div>   <Img name="Avatar" src="https://remotion.media/image.jpeg" />

</Interactive.Div>   <Img name="Avatar" src="https://remotion.media/image.jpeg" />   <Video name="Background" src="https://remotion.media/video.mp4" />

<Img name="Avatar" src="https://remotion.media/image.jpeg" />

<Video name="Background" src="https://remotion.media/video.mp4" />

To make a custom userland component interactive, use: [Make a component interactive](https://www.remotion.dev/docs/studio/make-component-interactive.md)

[Make a component interactive](https://www.remotion.dev/docs/studio/make-component-interactive.md)

<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">

- [License](https://www.remotion.dev/docs/license.md)

- [License FAQ](https://www.remotion.dev/docs/license/faq.md)

- [Terms and Conditions](https://www.remotion.dev/docs/terms.md)

You can buy a license on [remotion.pro](https://www.remotion.pro/license).

<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">

<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">

Create a MapTiler key at https://cloud.maptiler.com/account/keys/.

[Credential-related source omitted]

Create a billing-enabled Google Map Tiles API key by following https://developers.google.com/maps/documentation/tile/get-api-key. Enable the **Map Tiles API** and

https://developers.google.com/maps/documentation/tile/get-api-key. Enable the **Map Tiles API** and restrict the key to that API. Ensure its application restriction permits local headless Remotion requests.

Executable file

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

const CESIUM_VER = '1.143'; const CDN = `https://cesium.com/downloads/cesiumjs/releases/${CESIUM_VER}/Build/Cesium/`; const R = 6371;

const CDN = `https://cesium.com/downloads/cesiumjs/releases/${CESIUM_VER}/Build/Cesium/`;

if (mode === 'landscape' && !MAPTILER_KEY) { 				throw new Error( 					'Set REMOTION_MAPTILER_KEY. Create a key at https://cloud.maptiler.com/account/keys/',

throw new Error( 					'Set REMOTION_MAPTILER_KEY. Create a key at https://cloud.maptiler.com/account/keys/', 				);

'Set REMOTION_MAPTILER_KEY. Create a key at https://cloud.maptiler.com/account/keys/',

[Credential-related source omitted]

[Credential-related source omitted]

throw new Error( 					'Set REMOTION_GOOGLE_MAPS_API_KEY. Create a Map Tiles API key at https://developers.google.com/maps/documentation/tile/get-api-key', 				);

[Credential-related source omitted]

[Credential-related source omitted]

viewer.imageryLayers.addImageryProvider( 					new C.UrlTemplateImageryProvider({ 						url: `https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=${MAPTILER_KEY}`,

new C.UrlTemplateImageryProvider({ 						url: `https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=${MAPTILER_KEY}`, 						maximumLevel: 20,

[Credential-related source omitted]

[Credential-related source omitted]

); 				viewer.terrainProvider = await C.CesiumTerrainProvider.fromUrl( 					`https://api.maptiler.com/tiles/terrain-quantized-mesh-v2/?key=${MAPTILER_KEY}`,

viewer.terrainProvider = await C.CesiumTerrainProvider.fromUrl( 					`https://api.maptiler.com/tiles/terrain-quantized-mesh-v2/?key=${MAPTILER_KEY}`, 					{requestVertexNormals: true},

[Credential-related source omitted]

[Credential-related source omitted]

viewer.creditDisplay.addStaticCredit( 					new C.Credit( 						'<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a>',

new C.Credit( 						'<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a>', 						true,

'<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a>',

viewer.scene.globe.show = false; 				const tileset = await C.Cesium3DTileset.fromUrl( 					`https://tile.googleapis.com/v1/3dtiles/root.json?key=${GOOGLE_MAPS_API_KEY}`,

const tileset = await C.Cesium3DTileset.fromUrl( 					`https://tile.googleapis.com/v1/3dtiles/root.json?key=${GOOGLE_MAPS_API_KEY}`, 					{

[Credential-related source omitted]

[Credential-related source omitted]

Executable file

Executable file

- https://cloud.maptiler.com/account/keys/

- https://docs.maptiler.com/cesium/

- https://docs.maptiler.com/schema-raster/terrain-3d/

[Credential-related source omitted]

- https://developers.google.com/maps/documentation/tile/get-api-key

- https://developers.google.com/maps/documentation/tile/3d-tiles

- https://developers.google.com/maps/documentation/tile/policies

viewer.scene.globe.show = false; const tileset = await Cesium.Cesium3DTileset.fromUrl(   `https://tile.googleapis.com/v1/3dtiles/root.json?key=${GOOGLE_KEY}`,

const tileset = await Cesium.Cesium3DTileset.fromUrl(   `https://tile.googleapis.com/v1/3dtiles/root.json?key=${GOOGLE_KEY}`,   {showCreditsOnScreen: true, maximumScreenSpaceError: 4},

[Credential-related source omitted]

[Credential-related source omitted]

Executable file

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

URL.createObjectURL( 				new Blob( 					[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`],

new Blob( 					[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`], 					{type: 'text/javascript'},

[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`],

const mapInstance = new maplibregl.Map({ 			container: containerRef.current, 			style: 'https://demotiles.maplibre.org/style.json',

container: containerRef.current, 			style: 'https://demotiles.maplibre.org/style.json', 			center: zurich,

style: 'https://demotiles.maplibre.org/style.json',

URL.createObjectURL( 				new Blob( 					[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`],

new Blob( 					[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`], 					{type: 'text/javascript'},

[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`],

const mapInstance = new maplibregl.Map({ 			container: containerRef.current, 			style: 'https://demotiles.maplibre.org/style.json',

container: containerRef.current, 			style: 'https://demotiles.maplibre.org/style.json', 			center: zurich,

style: 'https://demotiles.maplibre.org/style.json',

style: 'https://demotiles.maplibre.org/style.json'

Use `jumpTo` only for a static shot, or a fixed map plate for any pan/zoom. Gate with [`delayRender`](https://www.remotion.dev/docs/delay-render.md) until `map.once('idle')`.

Gate with [`delayRender`](https://www.remotion.dev/docs/delay-render.md) until `map.once('idle')`.

Render labels as positioned [`<Interactive.Div>`](https://www.remotion.dev/docs/interactive.md) elements.

[Credential-related source omitted]

Executable file

Executable file

map.addSource(SOURCE_ID, { 			type: 'vector', 			url: `https://api.maptiler.com/tiles/v3/tiles.json?key=${apiKey}`,

type: 'vector', 			url: `https://api.maptiler.com/tiles/v3/tiles.json?key=${apiKey}`, 		});

url: `https://api.maptiler.com/tiles/v3/tiles.json?key=${apiKey}`,

[Credential-related source omitted]

Executable file

[Credential-related source omitted]

Executable file

Executable file

[Credential-related source omitted]

Executable file

style={{ width: 100, height: 100 }}       />       <Video src="https://remotion.media/video.mp4" />

/>       <Video src="https://remotion.media/video.mp4" />       <AnimatedImage src={staticFile('nyancat.gif')} />

<Video src="https://remotion.media/video.mp4" />

<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">

Use `useWindowedAudioData()` (https://www.remotion.dev/docs/use-windowed-audio-data) to load audio data:

Use `visualizeAudio()` (https://www.remotion.dev/docs/visualize-audio) to get frequency data for bar charts:

Use `visualizeAudioWaveform()` (https://www.remotion.dev/docs/media-utils/visualize-audio-waveform) with `createSmoothSvgPath()` (https://www.remotion.dev/docs/media-utils/create-smooth-svg-path) for oscilloscope-style displays:

Use `getWaveformPortion()` (https://www.remotion.dev/docs/get-waveform-portion) when you need simplified volume data instead of frequency spectrum:

<Audio src="https://remotion.media/audio.mp3" />

width={1920}   height={1080}   defaultProps={{ videoSrc: "https://remotion.media/video.mp4" }}

height={1080}   defaultProps={{ videoSrc: "https://remotion.media/video.mp4" }}   calculateMetadata={calculateMetadata}

defaultProps={{ videoSrc: "https://remotion.media/video.mp4" }}

abortSignal, }) => {   const response = await fetch(props.dataUrl, { signal: abortSignal });

}) => {   const response = await fetch(props.dataUrl, { signal: abortSignal });   const data = await response.json();

const response = await fetch(props.dataUrl, { signal: abortSignal });

Prefer [`colorCorrection()`](https://www.remotion.dev/docs/effects/color-correction) when combining adjustments.

Use [`levels()`](https://www.remotion.dev/docs/effects/levels) to set input black

Use [`curves()`](https://www.remotion.dev/docs/effects/curves) for an S-curve or

A LUT (lookup table) maps input RGB colors to output colors. Use [`lut()`](https://www.remotion.dev/docs/effects/lut) to apply a 3D `.cube` LUT.

[`lut()`](https://www.remotion.dev/docs/effects/lut) to apply a 3D `.cube` LUT.

- [Color correction documentation](https://www.remotion.dev/docs/color-correction)

<>   <Video src="https://remotion.media/video.mp4" />

<Video src="https://remotion.media/video.mp4" />

Docs: https://www.remotion.dev/docs/effects

Custom effect docs: https://www.remotion.dev/docs/create-effect

<Video   src="https://remotion.media/video.mp4"

src="https://remotion.media/video.mp4"

<Video   src="https://remotion.media/video.mp4"

src="https://remotion.media/video.mp4"

<Video src="https://remotion.media/video.mp4" />

<AnimatedImage   src="https://example.com/animation.gif"

src="https://example.com/animation.gif"

For a fully working minimal example, see https://github.com/remotion-dev/remotion/blob/main/packages/docs/components/demos/HtmlInCanvasDocsDemoWebGL.tsx.

useEffect(() => {     fetch("https://assets4.lottiefiles.com/packages/lf20_zyquagfl.json")

fetch("https://assets4.lottiefiles.com/packages/lf20_zyquagfl.json")

If HTML-in-canvas is unavailable, see the [motion blur guide](https://www.remotion.dev/docs/motion-blur) for other options. See the [`<HtmlInCanvasMotionBlur>` reference](https://www.remotion.dev/docs/motion-blur/html-in-canvas-motion-blur)

<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">

Create a MapTiler key at https://cloud.maptiler.com/account/keys/.

[Credential-related source omitted]

Create a billing-enabled Google Map Tiles API key by following https://developers.google.com/maps/documentation/tile/get-api-key. Enable the **Map Tiles API** and

https://developers.google.com/maps/documentation/tile/get-api-key. Enable the **Map Tiles API** and restrict the key to that API. Ensure its application restriction permits local headless Remotion requests.

Executable file

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

const CESIUM_VER = '1.143'; const CDN = `https://cesium.com/downloads/cesiumjs/releases/${CESIUM_VER}/Build/Cesium/`; const R = 6371;

const CDN = `https://cesium.com/downloads/cesiumjs/releases/${CESIUM_VER}/Build/Cesium/`;

if (mode === 'landscape' && !MAPTILER_KEY) { 				throw new Error( 					'Set REMOTION_MAPTILER_KEY. Create a key at https://cloud.maptiler.com/account/keys/',

throw new Error( 					'Set REMOTION_MAPTILER_KEY. Create a key at https://cloud.maptiler.com/account/keys/', 				);

'Set REMOTION_MAPTILER_KEY. Create a key at https://cloud.maptiler.com/account/keys/',

[Credential-related source omitted]

[Credential-related source omitted]

throw new Error( 					'Set REMOTION_GOOGLE_MAPS_API_KEY. Create a Map Tiles API key at https://developers.google.com/maps/documentation/tile/get-api-key', 				);

[Credential-related source omitted]

[Credential-related source omitted]

viewer.imageryLayers.addImageryProvider( 					new C.UrlTemplateImageryProvider({ 						url: `https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=${MAPTILER_KEY}`,

new C.UrlTemplateImageryProvider({ 						url: `https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=${MAPTILER_KEY}`, 						maximumLevel: 20,

[Credential-related source omitted]

[Credential-related source omitted]

); 				viewer.terrainProvider = await C.CesiumTerrainProvider.fromUrl( 					`https://api.maptiler.com/tiles/terrain-quantized-mesh-v2/?key=${MAPTILER_KEY}`,

viewer.terrainProvider = await C.CesiumTerrainProvider.fromUrl( 					`https://api.maptiler.com/tiles/terrain-quantized-mesh-v2/?key=${MAPTILER_KEY}`, 					{requestVertexNormals: true},

[Credential-related source omitted]

[Credential-related source omitted]

viewer.creditDisplay.addStaticCredit( 					new C.Credit( 						'<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a>',

new C.Credit( 						'<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a>', 						true,

'<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a>',

viewer.scene.globe.show = false; 				const tileset = await C.Cesium3DTileset.fromUrl( 					`https://tile.googleapis.com/v1/3dtiles/root.json?key=${GOOGLE_MAPS_API_KEY}`,

const tileset = await C.Cesium3DTileset.fromUrl( 					`https://tile.googleapis.com/v1/3dtiles/root.json?key=${GOOGLE_MAPS_API_KEY}`, 					{

[Credential-related source omitted]

[Credential-related source omitted]

Executable file

Executable file

- https://cloud.maptiler.com/account/keys/

- https://docs.maptiler.com/cesium/

- https://docs.maptiler.com/schema-raster/terrain-3d/

[Credential-related source omitted]

- https://developers.google.com/maps/documentation/tile/get-api-key

- https://developers.google.com/maps/documentation/tile/3d-tiles

- https://developers.google.com/maps/documentation/tile/policies

viewer.scene.globe.show = false; const tileset = await Cesium.Cesium3DTileset.fromUrl(   `https://tile.googleapis.com/v1/3dtiles/root.json?key=${GOOGLE_KEY}`,

const tileset = await Cesium.Cesium3DTileset.fromUrl(   `https://tile.googleapis.com/v1/3dtiles/root.json?key=${GOOGLE_KEY}`,   {showCreditsOnScreen: true, maximumScreenSpaceError: 4},

[Credential-related source omitted]

[Credential-related source omitted]

Executable file

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

URL.createObjectURL( 				new Blob( 					[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`],

new Blob( 					[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`], 					{type: 'text/javascript'},

[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`],

const mapInstance = new maplibregl.Map({ 			container: containerRef.current, 			style: 'https://demotiles.maplibre.org/style.json',

container: containerRef.current, 			style: 'https://demotiles.maplibre.org/style.json', 			center: zurich,

style: 'https://demotiles.maplibre.org/style.json',

URL.createObjectURL( 				new Blob( 					[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`],

new Blob( 					[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`], 					{type: 'text/javascript'},

[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`],

const mapInstance = new maplibregl.Map({ 			container: containerRef.current, 			style: 'https://demotiles.maplibre.org/style.json',

container: containerRef.current, 			style: 'https://demotiles.maplibre.org/style.json', 			center: zurich,

style: 'https://demotiles.maplibre.org/style.json',

style: 'https://demotiles.maplibre.org/style.json'

Use `jumpTo` only for a static shot, or a fixed map plate for any pan/zoom. Gate with [`delayRender`](https://www.remotion.dev/docs/delay-render.md) until `map.once('idle')`.

Gate with [`delayRender`](https://www.remotion.dev/docs/delay-render.md) until `map.once('idle')`.

Render labels as positioned [`<Interactive.Div>`](https://www.remotion.dev/docs/interactive.md) elements.

[Credential-related source omitted]

Executable file

Executable file

map.addSource(SOURCE_ID, { 			type: 'vector', 			url: `https://api.maptiler.com/tiles/v3/tiles.json?key=${apiKey}`,

type: 'vector', 			url: `https://api.maptiler.com/tiles/v3/tiles.json?key=${apiKey}`, 		});

url: `https://api.maptiler.com/tiles/v3/tiles.json?key=${apiKey}`,

[Credential-related source omitted]

Executable file

[Credential-related source omitted]

Executable file

Executable file

[Credential-related source omitted]

Executable file

<Audio src={"https://remotion.media/whoosh.wav"} />;

- `https://remotion.media/whoosh.wav`

- `https://remotion.media/whip.wav`

- `https://remotion.media/page-turn.wav`

- `https://remotion.media/switch.wav`

- `https://remotion.media/mouse-click.wav`

- `https://remotion.media/shutter-modern.wav`

- `https://remotion.media/shutter-old.wav`

- `https://remotion.media/ding.wav`

- `https://remotion.media/bruh.wav`

- `https://remotion.media/vine-boom.wav`

- `https://remotion.media/windows-xp-error.wav`

- `https://remotion.media/fah.wav`

- `https://remotion.media/spongebob-fail.wav`

- `https://remotion.media/omg-hell-nah.wav`

- `https://remotion.media/price-is-right-fail.wav`

- `https://remotion.media/romance-meme.wav`

- `https://remotion.media/bone-crack.wav`

- `https://remotion.media/anime-wow.wav`

- `https://remotion.media/yippee.wav`

- `https://remotion.media/loading-lag.wav`

- `https://remotion.media/wilhelm-scream.wav`

- `https://remotion.media/mac-quack.wav`

- `https://remotion.media/skedaddle.wav`

- `https://remotion.media/snapchat-notification.wav`

- `https://remotion.media/nelly-ahh.wav`

- `https://remotion.media/sanctuary-guardian-what.wav`

- `https://remotion.media/minecraft-hurt.wav`

- `https://remotion.media/oh-my-god-vine.wav`

- `https://remotion.media/illuminati-confirmed.wav`

- `https://remotion.media/dramatic-boomer.wav`

- `https://remotion.media/triggered.wav`

- `https://remotion.media/record-scratch.wav`

For more sound effects, search the internet. A good resource is https://github.com/kapishdima/soundcn/tree/main/assets.

Docs: https://www.remotion.dev/docs/text-highlights

See [Timing and trimming](https://www.remotion.dev/docs/timing) for more details.

[Credential-related source omitted]

const response = await fetch(

`https://api.elevenlabs.io/v1/text-to-speech/${voiceId}`,

[Credential-related source omitted]

Mediabunny is a multimedia library for dealing with audio and video in the browser. Here is a compact overview of its capabilities: https://mediabunny.dev/llms.txt

Here is a compact overview of its capabilities: https://mediabunny.dev/llms.txt

<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">

const duration = await getAudioDuration("https://remotion.media/audio.mp3");

const dimensions = await getVideoDimensions("https://remotion.media/video.mp4");

const duration = await getVideoDuration("https://remotion.media/video.mp4");

Full list of options: https://www.remotion.dev/docs/cli/render.md

Full list of options: https://www.remotion.dev/docs/cli/still.md

See https://www.remotion.dev/docs/cli/render.md#--frames for more options.

<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">

See https://www.remotion.dev/docs/vue.md for how to use Remotion with Vue.

See https://www.remotion.dev/docs/angular.md for how to use Remotion with Angular.

See https://www.remotion.dev/docs/svelte.md for how to use Remotion with Svelte.

<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">

- Next.js: https://github.com/remotion-dev/template-next-app-dir-tailwind. Uses Lambda as default rendering choice.

- Vercel Sandbox rendering: https://github.com/remotion-dev/template-vercel. Uses Vercel as default rendering choice.

- React Router 7: https://github.com/remotion-dev/template-react-router. Uses Lambda as default rendering choice.

- Express.js render server: `packages/template-render-server`: https://github.com/remotion-dev/template-render-server. Uses Node.js as default rendering choice.

For an existing app, see https://www.remotion.dev/docs/brownfield-installation.md.

If metadata is dynamic, sync the Player props manually or reuse the composition's `calculateMetadata()` logic. Link https://www.remotion.dev/docs/dynamic-metadata.md#with-the-player.

Link https://www.remotion.dev/docs/dynamic-metadata.md#with-the-player.

Full API for the Player: https://www.remotion.dev/docs/player/player.md.

See https://www.remotion.dev/docs/compare-ssr.md for the tradeoffs between server-side rendering options.

- SSR overview: https://www.remotion.dev/docs/ssr.md

- Renderer package: https://www.remotion.dev/docs/renderer.md

- Node SSR: https://www.remotion.dev/docs/ssr-node.md

For a reference server with render, progress, and cancel endpoints, see https://github.com/remotion-dev/template-render-server.

- Overview: https://www.remotion.dev/docs/lambda.md

- API: https://www.remotion.dev/docs/lambda/api.md

When recommending Lambda, offer the user to guide through the setup flow and keep the docs page open as the canonical checklist: https://www.remotion.dev/docs/lambda/setup.md.

[Credential-related source omitted]

See https://www.remotion.dev/docs/vercel-sandbox.md for more info.

See https://www.remotion.dev/docs/ssr.md#render-using-github-actions for how to render on GitHub Actions.

See https://www.remotion.dev/docs/azure-container-apps.md if rendering on Azure Container Apps is requested.

See https://www.remotion.dev/docs/cloudflare-containers.md if rendering on Cloudflare Containers is requested.

<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">

The [Remotion releases](https://github.com/remotion-dev/remotion/releases) contain the changelog and may be useful for summarizing relevant changes after the upgrade.

<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">