remotion Documentation

See also Copy Chapter

• getCanvasSequenceReorderSelection()
• reorderNodes()

Packages Docs Docs Sdk Index (`packages/docs/docs/sdk/index.mdx`) Copy Section

image: /generated/articles-docs-sdk-index.png sidebar_label: Overview title: '@remotion/sdk' crumb: '@remotion/sdk' Copy Chapter

@remotion/sdk

Build a composition preview and layer list for a Remotion authoring interface. The package combines `` playback with registered sequence data, selection, and synchronized hover.

:::warning

Experimental API: This package is not stable. Its public API may change without a major version bump.

:::

Installation Copy Chapter

Install @remotion/player as well. Keep the Remotion packages on the same version.

Basic example Copy Chapter

Pass the same controller to <Canvas> and your layer list. showOutlines enables hover and selection on the composition.

/* Detailed source-code truncated for AI context efficiency. */

The timeline contains registered <Sequence> and other sequence tracks from the mounted composition. The Canvas does not edit source files or provide timeline controls; your interface owns those actions.

For a timeline reorder gesture, getCanvasSequenceReorderSelection() chooses the dragged sequence group. getCanvasSequenceReorderInsertionIndex() identifies valid drop positions. Persist the result with reorderNodes().

Selection identity Copy Chapter

The built-in getCanvasSequenceNodePathInfo() uses a source identity when available. Otherwise it falls back to a mounted sequence ID, which can change after a remount.

If your editor has the source code, register the source node of each sequence with setSequenceNodePaths(). For projects compiled with @remotion/browser-bundler, getCanvasSequenceSourceLocation() returns the file and position of each sequence's JSX element, which getNodes() maps to a node path. Alternatively, pass a custom resolveSequenceNodePathInfo to <Canvas> and use the same resolver for layer items. Return null for tracks that should not be selectable.

An outline requires a registered DOM element. A <Sequence layout="none"> has no outline of its own.

Editing Copy Chapter

The Canvas exposes the controls of each mounted element: its interactivity schema and current prop values. Use them to build an inspector, and write changes to the source with @remotion/codemods.

While a value is being dragged, controller.overrides previews it on the canvas immediately. Persist the final value when the gesture ends, then clear the override.

Pass onSequencePropsChange to <Canvas> to let users move elements by dragging their outlines or pressing the arrow keys. The Canvas previews the movement itself and reports the final style.translate values to the callback. With getSequencePropStatuses, it respects how the source is written: computed values cannot be moved and keyframed values receive a keyframe.

Keyframes Copy Chapter

Props animated with interpolate() are reported as keyframed by getNodeProps(). The package converts between the frame clock of the interpolation and the composition timeline, so a timeline can show and edit those keyframes like the Remotion Studio does.

getCanvasKeyframes() places the keyframes of a prop on the timeline. getCanvasKeyframeToggle() describes a keyframe button at the playhead and returns the change that adds or removes a keyframe there, while getCanvasPropValueAtFrame() reads the animated value for an inspector. startCanvasKeyframeDrag() moves keyframes with the pointer, previewing the result through controller.overrides. Every edit is a CanvasKeyframeChange whose operation you pass to updateNodeKeyframes().

Between two keyframes, getCanvasKeyframeEasingSegments() describes the segments a timeline can draw and select, and getCanvasKeyframeEasingChange() sets the easing of one, with canvasKeyframeEasingPresets for a picker. getCanvasKeyframeSettings() and getCanvasKeyframeSettingsChange() read and write the extrapolation, output mode and posterize of the interpolation. getCanvasKeyframeChangeOverride() turns any change into an override, so the canvas shows it before the source is updated.

APIs Copy Chapter

import {TableOfContents} from './table-of-contents';

License Copy Chapter

Remotion License

Packages Docs Docs Sfx Index (`packages/docs/docs/sfx/index.mdx`) Copy Section

image: /generated/articles-docs-sfx-index.png crumb: API title: '@remotion/sfx' Copy Chapter

@remotion/sfx

Sound effect URLs for general use.
Available as a package or from loading through a URL directly.
Normalized volume for the peak to be at -3dB.
All files can be used without attribution, but the attribution is available on the detail page of a sound.

import {TableOfContents} from './table-of-contents';

Exports Copy Chapter

License Copy Chapter

NPM package: MIT
See license of each sound effect by clicking on it.

Packages Docs Docs Shapes Index (`packages/docs/docs/shapes/index.mdx`) Copy Section

image: /generated/articles-docs-shapes-index.png title: "@remotion/shapes" crumb: "SVG component library" Copy Chapter

import {TableOfContents} from './table-of-contents';

A package providing utility functions for generate SVG shapes.

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs
defaultValue="npm"
values={[
{ label: 'npm', value: 'npm', },
{ label: 'pnpm', value: 'pnpm', },
{ label: 'yarn', value: 'yarn', },
]
}>

npm i @remotion/shapes

pnpm i @remotion/shapes

yarn add @remotion/shapes

Functions Copy Chapter

License Copy Chapter

MIT

Packages Docs Docs Starburst Index (`packages/docs/docs/starburst/index.mdx`) Copy Section

image: /generated/articles-docs-starburst-index.png id: starburst-api slug: /starburst/api title: '@remotion/starburst' crumb: API Copy Chapter

~~@remotion/starburst~~

:::info Deprecated
@remotion/starburst is deprecated and will no longer be published starting with Remotion 5.0. Migrate to starburst() from @remotion/effects/starburst. The <Starburst> component will not be moved to @remotion/effects.
:::

Starburst ray effect for Remotion videos.

import {TableOfContents} from './table-of-contents';

APIs Copy Chapter

License Copy Chapter

Remotion License

Packages Docs Docs Studio Protocol Index (`packages/docs/docs/studio-protocol/index.mdx`) Copy Section

image: /generated/articles-docs-studio-protocol-index.png title: 'Remotion Studio Protocol' crumb: '@remotion/studio-protocol' Copy Chapter

@remotion/studio-protocol

With this package, you can create payloads for passing content to Remotion Studio.

Capabilities Copy Chapter

Installing Remotion Elements Copy Section

Websites can provide Elements to a Studio either using drag-and-drop or using an installation dialog.

1 Create an Element payload with createElementPayload().
2 Put it on a drag event with setStudioDragData(), or send a signal to a Studio using installInStudio().

Adding an Element Library Copy Section

Using addElementLibraryToStudio() you can request to add an Element Library to the Studio.

Previewing Elements Copy Section

Using buildOpenInRemotionNewUrl(), you can open your Element in remotion.dev/new.

APIs Copy Chapter

import {TableOfContents} from './table-of-contents';

Security Copy Chapter

Learn about the confirmation and origin policy.

License Copy Chapter

Remotion License

See also Copy Chapter

• Integrating an Element Library with Studio

Packages Docs Docs Tailwind V4 Overview (`packages/docs/docs/tailwind-v4/overview.mdx`) Copy Section

image: /generated/articles-docs-tailwind-v4-overview.png id: overview sidebar_label: Overview title: '@remotion/tailwind-v4' Copy Chapter

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import {ExperimentalBadge} from '../../components/Experimental';
import {TableOfContents} from './TableOfContents';

This package provides utilities useful for integrating TailwindCSS v4 with Remotion, as documented on our TailwindCSS page.

Installation Copy Chapter

Install @remotion/tailwind-v4 as well as TailwindCSS dependencies.

Override the bundler config by using enableTailwind().

import {Config} from '@remotion/cli/config';
import {enableTailwind} from '@remotion/tailwind-v4';

Config.overrideBundlerConfig((currentConfiguration) => {
  return enableTailwind(currentConfiguration);
});

Then follow the remaining set up steps from the TailwindCSS page.

APIs Copy Chapter

Packages Docs Docs Tailwind Overview (`packages/docs/docs/tailwind/overview.mdx`) Copy Section

image: /generated/articles-docs-tailwind-overview.png id: tailwind sidebar_label: Overview title: '@remotion/tailwind' Copy Chapter

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import {ExperimentalBadge} from '../../components/Experimental';
import {TableOfContents} from './TableOfContents';

:::note
This is documentation for enabling Tailwind v3.
For the Tailwind v4 version of this site, see the Tailwind v4 documentation.
:::

This package provides utilities useful for integrating TailwindCSS with Remotion, as documented on our TailwindCSS page.

Installation Copy Chapter

Install @remotion/tailwind as well as TailwindCSS dependencies.

Override the bundler config by using enableTailwind().

import {Config} from '@remotion/cli/config';
import {enableTailwind} from '@remotion/tailwind';

Config.overrideBundlerConfig((currentConfiguration) => {
  return enableTailwind(currentConfiguration);
});

Then follow the remaining set up steps from the TailwindCSS page.

APIs Copy Chapter

Packages Docs Docs Timeline Index (`packages/docs/docs/timeline/index.mdx`) Copy Section

image: /generated/articles-docs-timeline-index.png title: Remotion Timeline Copy Chapter

import {TableOfContents} from './TableOfContents';

<Timeline>

A paid customizable timeline component that integrates seamlessly with Remotion Player.
It's perfect for builders who need a layer-based editing interface for their video editing app.

You can buy the timeline component on remotion.pro.

Key Features Copy Chapter

Interface:

• Multiple track support with drag-and-drop functionality (between and within tracks)
• Timeline item selection and manipulation
• Keyboard shortcuts for common actions
• CanvasComposition for rendering the timeline state in the Remotion Player
• Zoomable timeline and <ZoomSlider> component to control the zoom level

Customization:

• Theming with variables (Tailwind CSS V4 and V3)
• Extensible state management

License Copy Chapter

The source code of the Remotion Timeline is governed by the Remotion License and its own specific license.

• Remotion, as an underlying technology of the Remotion Timeline, is free to use for individuals and small companies. If you fall into this category, you can buy the Remotion Timeline as a one-time purchase. If you are a larger company, you must subscribe to the Company License. Read the Terms & Conditions.

• The Remotion Timeline License can be seen in the Remotion Store Page as well as accessible through the dedicated GitHub repository after purchase.

Packages Docs Docs Transitions Index (`packages/docs/docs/transitions/index.mdx`) Copy Section

image: /generated/articles-docs-transitions-index.png sidebar_label: Overview title: '@remotion/transitions' Copy Chapter

@remotion/transitions

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import {TableOfContents} from './table-of-contents';

This package provides the `` component for transitioning between two scenes as well as timing presets.

Installation Copy Chapter

API Copy Chapter

License Copy Chapter

Remotion License

See also Copy Chapter

• Transitions

Packages Docs Docs Vercel Index (`packages/docs/docs/vercel/index.mdx`) Copy Section

id: vercel-api slug: /vercel/api title: '@remotion/vercel' crumb: 'API' Copy Chapter

import {TableOfContents} from './table-of-contents';

@remotion/vercel

:::warning
Experimental package: We reserve the right to make breaking changes in order to correct bad design decisions until this notice is gone.
:::

Render Remotion videos on Vercel Sandbox.
This package requires @vercel/sandbox as a peer dependency.

APIs Copy Chapter

License Copy Chapter

Remotion License

Packages Docs Docs Video Matting Index (`packages/docs/docs/video-matting/index.mdx`) Copy Section

image: /generated/articles-docs-video-matting-index.png title: '@remotion/video-matting' crumb: 'Separate a video into layers' Copy Chapter

@remotion/video-matting

Separate a video into opaque base and transparent foreground layers, locally in the browser or Node.js using WebGPU.

import {TableOfContents} from './table-of-contents';

Installation Copy Chapter

Studio Copy Chapter

Remotion Studio offers Remove background for a selected video. It replaces the video's source with a transparent WebM. Duplicate the layer first if you want to keep the original alongside it.

For programmatic base and foreground outputs, see separateVideoLayers().

Model hosting Copy Chapter

We noticed that hosting the models on R2 leads to faster downloading than through Hugging Face directly.
We mirrored the models to remotion.media, keeping them byte-identical.
We also notified Hugging Face and they are investigating the issue. We may migrate back to the official hosting in the future.

APIs Copy Chapter

Requirements Copy Chapter

A GPU is needed for this.
Use canUseVideoMatting() to check whether your system can use video matting.

The browser must also be able to decode the input video and encode VP9 with alpha through WebCodecs.
separateVideoLayers() checks these media capabilities for the selected input.

License Copy Chapter

The package is MIT licensed.
Models retain the licenses listed under getAvailableModels().

Packages Docs Docs Videos Index (`packages/docs/docs/videos/index.mdx`) Copy Section

image: /generated/articles-docs-videos-index.png title: Embedding videos into Remotion sidebar_label: Adding a video crumb: 'How To' Copy Chapter

You can embed existing videos into Remotion by using the <Video> from @remotion/media component.

import React from 'react';
import {Video} from '@remotion/media';

export const MyComp: React.FC = () => {
  return <Video src="https://remotion.media/BigBuckBunny.mp4" />;
};

Using a local file Copy Chapter

Put a file into the public folder and reference it using staticFile().

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

export const MyComp: React.FC = () => {
  return <Video src={staticFile('video.mp4')} />;
};

Trimming Copy Chapter

By using the trimBefore prop, you can remove the first few seconds of the video.

In the example below, the first two seconds of the video are skipped (assuming a composition FPS of 30).

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

export const MyComp: React.FC = () => {
  return <Video src={staticFile('video.mp4')} trimBefore={60} />;
};

Use durationInFrames to select how many source frames should play.

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

export const MyComp: React.FC = () => {
  return <Video src={staticFile('video.mp4')} trimBefore={60} durationInFrames={60} />;
};

Delaying Copy Chapter

Use the from prop to delay the appearance of a video.
In the example below, the video will start playing at frame 60.

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

export const MyComp: React.FC = () => {
  return <Video from={60} src={staticFile('video.mp4')} />;
};

Size and Position Copy Chapter

You can size and position the video using CSS.
You'll find the properties width, height, position, left, top, right, bottom, margin, aspectRatio and objectFit useful.

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

export const MyComp: React.FC = () => {
  return (
    <Video
      src={staticFile('video.mp4')}
      style={{
        width: 640,
        height: 360,
        position: 'absolute',
        top: 100,
        left: 100,
      }}
    />
  );
};

Volume Copy Chapter

You can set the volume of the video using the volume prop.

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

export const MyComp: React.FC = () => {
  return <Video src={staticFile('video.mp4')} volume={0.5} />;
};

You can also mute a video using the muted prop.

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

export const MyComp: React.FC = () => {
  return <Video src={staticFile('video.mp4')} muted />;
};

See Using Audio for more ways you can control volume.

Speed Copy Chapter

You can use the playbackRate prop to change the speed of the video.

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

export const MyComp: React.FC = () => {
  return <Video src={staticFile('video.mp4')} playbackRate={2} />;
};

This only works if the speed is constant. See also: Changing the speed of a video over time.

Looping Copy Chapter

Use the loop prop to restart the video when it reaches the end.

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

export const MyComp: React.FC = () => {
  return <Video src={staticFile('video.mp4')} loop />;
};

To learn how looping interacts with trimBefore and durationInFrames, see Timing and trimming.

GIFs Copy Chapter

See: Using GIFs

See also Copy Chapter

• <Video> from @remotion/media
• Comparison of video tags
• Using Audio

Packages Docs Docs Web Renderer Index (`packages/docs/docs/web-renderer/index.mdx`) Copy Section

image: /generated/articles-docs-web-renderer-index.png sidebar_label: Overview title: '@remotion/web-renderer' crumb: API Copy Chapter

This package allows you to render videos and stills directly in the browser, without requiring server-side infrastructure.

The API is stable from .

Key differences from server-side rendering Copy Section

Unlike server-side rendering with @remotion/renderer, client-side rendering:

• Runs in the browser instead of Node.js
• Encodes with WebCodecs using Mediabunny instead of FFmpeg
• Limited to a subset of tags and CSS properties - see limitations
• No bundling step - takes components and video config directly

Installation Copy Chapter

API Copy Chapter

import {TableOfContents} from './TableOfContents';

See also Copy Chapter

• Client-side rendering overview
• How client-side rendering works
• Limitations
• Telemetry
• Server-side rendering

Packages Docs Docs Webcodecs Index (`packages/docs/docs/webcodecs/index.mdx`) Copy Section

image: /generated/articles-docs-webcodecs-index.png sidebar_label: Overview title: '@remotion/webcodecs' Copy Chapter

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import {TableOfContents, WebCodecsGuide} from './TableOfContents';

@remotion/webcodecs

:::warning
We are phasing out Remotion WebCodecs and are moving to Mediabunny!
:::

This package provides APIs for converting videos in the browser.
It leverages @remotion/media-parser to parse the video and audio data, and then uses the WebCodecs API to encode the video.

import {LicenseDisclaimer} from './LicenseDisclaimer';
import {UnstableDisclaimer} from './UnstableDisclaimer';

What can you do with this package? Copy Chapter

In browsers that implement WebCodecs, you can use this package to:

• Convert videos from one format to another (From .mp4, .webm, .mov, .mkv, .m3u8, .ts, .avi, .mp3, .flac, .wav, .m4a, .aac to .mp4, .webm, .wav)
• Rotate videos
• Efficiently extract frames from a video
• Extract audio from a video
• Manipulate the pixels of a video
• Fix videos that were recorded with MediaRecorder
• Soon: Compress, trim, crop videos

Is it fast? Copy Chapter

Unlike solutions which leverage WebAssembly, WebCodecs have full access to GPU acceleration.
You can expect vastly faster processing than with online converters or WebAssembly-based processing.

See a comparison here.

💼 License Disclaimer Copy Chapter

import {defineConfig} from 'vite';

export default defineConfig({
  optimizeDeps: {
    // turn off dependency optimization: https://github.com/vitejs/vite/issues/11672#issuecomment-1397855641
    exclude: ['@remotion/whisper-web'],
  },
  // required by SharedArrayBuffer
  server: {
    headers: {
      'Cross-Origin-Embedder-Policy': 'require-corp',
      'Cross-Origin-Opener-Policy': 'same-origin',
    },
  },
  // ...
});

import {transcribe, canUseWhisperWeb, resampleTo16Khz, downloadWhisperModel} from '@remotion/whisper-web';

const file = new File([], 'audio.wav');
const modelToUse = 'tiny.en';

const {supported, detailedReason} = await canUseWhisperWeb(modelToUse);
if (!supported) {
  throw new Error(`Whisper Web is not supported in this environment: ${detailedReason}`);
}

console.log('Downloading model...');
await downloadWhisperModel({
  model: modelToUse,
  onProgress: ({progress}) => console.log(`Downloading model (${Math.round(progress * 100)}%)...`),
});

console.log('Resampling audio...');
const channelWaveform = await resampleTo16Khz({
  file,
  onProgress: (p) => console.log(`Resampling audio (${Math.round(p * 100)}%)...`),
});

console.log('Transcribing...');
const {transcription} = await transcribe({
  channelWaveform,
  model: modelToUse,
  onProgress: (p) => console.log(`Transcribing (${Math.round(p * 100)}%)...`),
});

console.log(transcription.map((t) => t.text).join(' '));

import {clearStaleModels, downloadWhisperModel, resampleTo16Khz, toCaptions, transcribe} from '@remotion/whisper-webgpu';

export const transcribeFile = async (file: File) => {
  await clearStaleModels();
  await downloadWhisperModel({model: 'small.en'});

  const channelWaveform = await resampleTo16Khz({file});
  const transcription = await transcribe({
    channelWaveform,
    model: 'small.en',
    language: 'en',
  });

  const {captions} = toCaptions({whisperWebGpuOutput: transcription});
  return captions;
};

import {renderMediaOnLambda} from '@remotion/lambda/client';

const {bucketName, renderId} = await renderMediaOnLambda({
  region: 'us-east-1',
  functionName: 'remotion-render-bds9aab',
  composition: 'MyVideo',
  serveUrl: 'https://remotionlambda-qg35eyp1s1.s3.eu-central-1.amazonaws.com/sites/bf2jrbfkw',
  codec: 'h264',
  privacy: 'no-acl',
  outName: {
    key: 'my-output',
    bucketName: 'output-bucket',
  },
});

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Action": ["s3:PutObject"],
      "Resource": ["arn:aws:s3:::{bucketname}/*"],
      "Effect": "Allow"
    }
  ]
}

export type Item = {
	id: number;
	durationInFrames: number;
	from: number;
	height: number;
	left: number;
	top: number;
	width: number;
	color: string;
	isDragging: boolean;
};

/* Detailed source-code truncated for AI context efficiency. */

import React, {useMemo} from 'react';
import {Interactive} from 'remotion';
import type {Item} from './item';

export const Layer: React.FC<{
  item: Item;
}> = ({item}) => {
  const style: React.CSSProperties = useMemo(() => {
    return {
      backgroundColor: item.color,
      position: 'absolute',
      left: item.left,
      top: item.top,
      width: item.width,
      height: item.height,
    };
  }, [item.color, item.height, item.left, item.top, item.width]);

  return (
    <Interactive.Div
      from={item.from}
      durationInFrames={item.durationInFrames}
      style={style}
    />
  );
};

/* Detailed source-code truncated for AI context efficiency. */

import React from 'react';
import {SelectionOutline} from './SelectionOutline';
import type {Item} from './item';

const displaySelectedItemOnTop = (
  items: Item[],
  selectedItem: number | null,
): Item[] => {
  const selectedItems = items.filter((item) => item.id === selectedItem);
  const unselectedItems = items.filter((item) => item.id !== selectedItem);

  return [...unselectedItems, ...selectedItems];
};

export const SortedOutlines: React.FC<{
  items: Item[];
  selectedItem: number | null;
  changeItem: (itemId: number, updater: (item: Item) => Item) => void;
  setSelectedItem: React.Dispatch<React.SetStateAction<number | null>>;
}> = ({items, selectedItem, changeItem, setSelectedItem}) => {
  const itemsToDisplay = React.useMemo(
    () => displaySelectedItemOnTop(items, selectedItem),
    [items, selectedItem],
  );

  const isDragging = React.useMemo(
    () => items.some((item) => item.isDragging),
    [items],
  );

  return itemsToDisplay.map((item) => {
    return (
      <SelectionOutline
        key={item.id}
        changeItem={changeItem}
        item={item}
        setSelectedItem={setSelectedItem}
        selectedItem={selectedItem}
        isDragging={isDragging}
      />
    );
  });
};

import React, {useCallback} from 'react';
import {AbsoluteFill} from 'remotion';
import type {Item} from './item';
import {Layer} from './Layer';
import {SortedOutlines} from './SortedOutlines';

export type MainProps = {
  readonly items: Item[];
  readonly setSelectedItem: React.Dispatch<React.SetStateAction<number | null>>;
  readonly selectedItem: number | null;
  readonly changeItem: (itemId: number, updater: (item: Item) => Item) => void;
};

const outer: React.CSSProperties = {
  backgroundColor: '#eee',
};

const layerContainer: React.CSSProperties = {
  overflow: 'hidden',
};

export const Main: React.FC<MainProps> = ({
  items,
  setSelectedItem,
  selectedItem,
  changeItem,
}) => {
  const onPointerDown = useCallback(
    (e: React.PointerEvent) => {
      if (e.button !== 0) {
        return;
      }

      setSelectedItem(null);
    },
    [setSelectedItem],
  );

  return (
    <AbsoluteFill style={outer} onPointerDown={onPointerDown}>
      <AbsoluteFill style={layerContainer}>
        {items.map((item) => {
          return <Layer key={item.id} item={item} />;
        })}
      </AbsoluteFill>
      <SortedOutlines
        selectedItem={selectedItem}
        items={items}
        setSelectedItem={setSelectedItem}
        changeItem={changeItem}
      />
    </AbsoluteFill>
  );
};

/* Detailed source-code truncated for AI context efficiency. */

// @filename: item.ts
// ---cut---
// @include: item

// @filename: item.ts
// @include: item
// @filename: Layer.tsx
// ---cut---
// @include: Layer

// @filename: ResizeHandle.tsx
// @include: ResizeHandle
// @filename: item.ts
// @include: item
// @filename: SelectionOutline.tsx
// ---cut---
// @include: SelectionOutline

// @filename: item.ts
// @include: item
// @filename: ResizeHandle.tsx
// ---cut---
// @include: ResizeHandle

// @filename: item.ts
// @include: item
// @filename: ResizeHandle.tsx
// @include: ResizeHandle
// @filename: SelectionOutline.tsx
// @include: SelectionOutline
// @filename: SortedOutlines.tsx
// ---cut---
// @include: SortedOutlines

// @filename: item.ts
// @include: item
// @filename: ResizeHandle.tsx
// @include: ResizeHandle
// @filename: SelectionOutline.tsx
// @include: SelectionOutline
// @filename: SortedOutlines.tsx
// @include: SortedOutlines
// @filename: Layer.tsx
// @include: Layer
// @filename: Main.tsx
// ---cut---
// @include: Main

// @filename: item.ts
// @include: item
// @filename: ResizeHandle.tsx
// @include: ResizeHandle
// @filename: SelectionOutline.tsx
// @include: SelectionOutline
// @filename: SortedOutlines.tsx
// @include: SortedOutlines
// @filename: Layer.tsx
// @include: Layer
// @filename: Main.tsx
// @include: Main
// @filename: Demo.tsx
// ---cut---
// @include: Demo

bun run dev

To start recording, press <kbd>R</kbd> or click{' '}

const prefix = '<id-of-your-composition>';

bun copy.ts
bun sub.ts

import { springTiming } from "@remotion/transitions";

springTiming({ config: { damping: 200 } }).getDurationInFrames({ fps: 30 }); // 23