` directly, without an additional layout wrapper.
###
3 Outline rendering
Create a React component that renders an outline when an item isselected or hovered.
```tsx twoslash title="SelectionOutline.tsx"
// @filename: ResizeHandle.tsx
// @include: ResizeHandle
// @filename: item.ts
// @include: item
// @filename: SelectionOutline.tsx
// ---cut---
// @include: SelectionOutline
```
```tsx twoslash title="ResizeHandle.tsx"
// @filename: item.ts
// @include: item
// @filename: ResizeHandle.tsx
// ---cut---
// @include: ResizeHandle
```
**Z-indexing**: These elements will later in this tutorial be rendered on top of all layers so that they are able to accept mouse events.
Clicking on one of these elements will select the underlying item.
**Scaling**: The [`
`](/docs/player/player) has a CSS `scale` transform applied to it.
Since we consume the coordinates of the pointer events, we need to divide them by [`useCurrentScale()`](/docs/use-current-scale) to get the correct position.
The thickness of the borders will also be affected by the scale, so we need to divide them by the scale too.
**Pointer event handling**: On any `pointerdown` event, we call `e.stopPropagation()` prevent the event from bubbling up.
Later, we will treat any event that bubbles up as an click on an empty space and deselect the item.
We also don't do any action if `e.button !== 0`. This prevents a bug where the item moves after a right click.
We add `userSelect: 'none'` to disable the native selection and drag behavior of the browser.
We also add `touchAction: 'none'` to disable scrolling the page on mobile while dragging.
We keep track if the item is being dragged by using the `isDragging` property and disable the hover effect while an item is being dragged.
###
4 Sorting outlines
Let's create a component that renders all outlines.
The item which gets rendered as last element [will be on top of all other items](/docs/layers).
The item that is selected should be rendered on top of all other items because it is the item that is responsive to mouse events.
We render the selected outlines last. This ensures that the resize handles are always on top.
This logic only applies to the outlines, not the actual layers.
```tsx twoslash title="SortedOutlines.tsx"
// @filename: item.ts
// @include: item
// @filename: ResizeHandle.tsx
// @include: ResizeHandle
// @filename: SelectionOutline.tsx
// @include: SelectionOutline
// @filename: SortedOutlines.tsx
// ---cut---
// @include: SortedOutlines
```
###
5 Putting it together
Next, we create a main component that renders the items and the outlines.
```tsx twoslash title="Main.tsx"
// @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
```
**Z-indexing:** We render the layers first and then the outlines. This means the outlines get rendered on top the items.
**Overflow behavior**: Note that we apply a different `overflow` behavior to the layers and the outlines.
We hide the overflow of the layers, but show the overflow of the outlines.
This is a UI behavior that is similar to Figma frames.
**Click handling**: We also listen to `pointerdown` events on the canvas.
Any event that was not stopped using `e.stopPropagation()` before will be treated as a click on an empty space and results in deselecting the item.
###
6 Rendering the Player
We can now render the Main component that we created in the Remotion Player.
```tsx twoslash title="Demo.tsx"
// @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
```
We omit the [`controls`](/docs/player/player#controls) prop to disable the built-in controls.
You can add [custom controls outside the Player](/docs/player/custom-controls).
We add the [`overflowVisible`](/docs/player/player#overflowvisible) prop to make the outlines visible if they go outside the canvas.
Remember that we've hidden the overflow of the layers itself because it would also not be visible in the final video.
We've now implemented thoughtful drag and drop interactions!
## See also
- [Source code for this demo](https://github.com/remotion-dev/remotion/blob/main/packages/docs/docs/player/drag-and-drop/Demo.tsx)
- [Custom controls](/docs/player/custom-controls)
- [`useCurrentScale()`](/docs/use-current-scale)
- [`
`](/docs/player/player)
---
### Packages Docs Docs Recorder Record Index (`packages/docs/docs/recorder/record/index.mdx`)
---
image: /generated/articles-docs-recorder-record-index.png
title: Record using the interface
sidebar_label: Using the interface
crumb: Recorder
---
import {RecordingButton} from '../../../components/recorder/RecordButton';
The Recorder ships with its own recording interface.
From it, you can record a clip and add it as a scene to your project.
If you haven't done so, start the Remotion Recorder:
```tsx
bun run dev
```
A Vite app will listen on [`http://localhost:4000`](http://localhost:4000).
Open this URL in the browser.
Give the page access to the webcam and microphone.
## Select the composition
Recordings need to be stored in a subfolder of `public` named after the composition ID.
For example, if you want to record for the composition `my-video`, recordings will be stored under `public/my-video`.
In the top right corner, use the dropdown to "Create a new folder".
Use the ID of the composition you want to record for as the folder name.
The folder will be created and your subsequent recordings will be saved in this folder.
## Select sources
In the top left panel, select your webcam and microphone.
In the top right panel, optionally select the screen you want to record.
You can record more sources, but out of the box, the Remotion Recorder does not do anything with them.
## Before starting
Say "Test One Two Three" and ensure the volume meter is not going into the red zone.
Make sure you are centered in the video. You can enable the crop target overlay to see how the video will crop when miniaturized.
Prefer making short recordings. You're less likely to make a mistake and it's easy to stitch them together.
There is no countdown โ The recording will start immediately.
However, the Recorder will later automatically trim away the silence in the beginning.
Take a deep breath and think of what you are about to say and show.
You're ready to record!
## Start the recording
To start recording, press R or click{' '}
in the top left corner.
Once you are done with the scene, click
.
## Selecting a take
After you have recorded a scene and you are happy with your take, click "Use this take".
The server will then do the following:
- Convert the videos from WebM to MP4
- Put them into your project under `public/[composition-id]`.
- Caption the files with Whisper.cpp
## Discard a take
If you have taken a recording that you don't want to use, click "Discard and retake" to clear the existing recording from memory.
## record.remotion.dev
You can also use the hosted version of the recoding interface at [record.remotion.dev](https://record.remotion.dev).
It will not allow you to select a save destination, but instead download the recordings to your `Downloads` folder.
They will have names like `webcam171234567890.mp4` and `display171234567890.mp4`.
To copy the recordings to your Remotion project, first open `copy.ts` in your code editor. Set the `prefix` at the top of your file to the ID of the composition that you gave when you first created a new video.
```ts title="copy.ts"
const prefix = '
';
```
Then run the `copy.ts` script whenever you want to save a take and immediately generate captions:
```bash
bun copy.ts
bun sub.ts
```
If you want to not use a take, just make another recording. The `copy.ts` script will only take the recordings with the latest timestamp.
---
### Packages Docs Docs Transitions Presentations Index (`packages/docs/docs/transitions/presentations/index.mdx`)
---
image: /generated/articles-docs-transitions-presentations-index.png
title: Presentations
crumb: "@remotion/transitions"
---
A **presentation** together with a timing forms a transition.
Remotion provides certain presentations out of the box, but you can also [create your own](/docs/transitions/presentations/custom).
## Table of contents
import { Presentations } from "../../../components/TableOfContents/transitions/presentations";
---
### Packages Docs Docs Transitions Timings Index (`packages/docs/docs/transitions/timings/index.mdx`)
---
image: /generated/articles-docs-transitions-timings-index.png
title: Timings
crumb: "@remotion/transitions"
---
A **timing** together with a presentation forms a transition.
Remotion provides certain timings out of the box, but you can also [create your own](/docs/transitions/timings/custom).
## Available timings
import { Timings } from "../../../components/TableOfContents/transitions/timings";
## Getting the duration of a timing
You can get the duration of a transition by calling `getDurationInFrames()` on the timing:
```tsx twoslash title="Assuming a framerate of 30fps"
import { springTiming } from "@remotion/transitions";
springTiming({ config: { damping: 200 } }).getDurationInFrames({ fps: 30 }); // 23
```
---
### Packages Docs Elements Audio Mirrored Spectrum Index (`packages/docs/elements/audio/mirrored-spectrum/index.mdx`)
---
title: Mirrored Spectrum
description: Suitable for both music and speech visualization.
image: https://remotion.media/elements/audio-mirrored-spectrum-preview.png
---
import {ElementPage} from '@site/src/components/Elements/ElementPage';
import {getElementDefinition} from '@site/src/components/Elements/element-utils';
# Mirrored Spectrum
---
### Packages Docs Elements Audio Oscilloscope Index (`packages/docs/elements/audio/oscilloscope/index.mdx`)
---
title: Oscilloscope
description: Suitable for visualizing speech.
image: https://remotion.media/elements/audio-oscilloscope-preview.png
---
import {ElementPage} from '@site/src/components/Elements/ElementPage';
import {getElementDefinition} from '@site/src/components/Elements/element-utils';
# Oscilloscope
---
### Packages Docs Elements Audio Waveform Progress Index (`packages/docs/elements/audio/waveform-progress/index.mdx`)
---
title: Voice Note
description: A static audio waveform with playback progress.
image: https://remotion.media/elements/audio-waveform-progress-preview.png
---
import {ElementPage} from '@site/src/components/Elements/ElementPage';
import {getElementDefinition} from '@site/src/components/Elements/element-utils';
# Voice Note
---
### Packages Docs Elements Backgrounds Liquid Contours Index (`packages/docs/elements/backgrounds/liquid-contours/index.mdx`)
---
title: Liquid Contours
description: A flowing two-color background made from animated liquid contour bands.
image: https://remotion.media/elements/backgrounds-liquid-contours-preview.png
---
import {ElementPage} from '@site/src/components/Elements/ElementPage';
import {getElementDefinition} from '@site/src/components/Elements/element-utils';
# Liquid Contours
---
### Packages Docs Elements Backgrounds Moving Waves Index (`packages/docs/elements/backgrounds/moving-waves/index.mdx`)
---
title: Moving Waves
description: A seamless wave background that flows upward.
image: https://remotion.media/elements/backgrounds-moving-waves-preview.png
---
import {ElementPage} from '@site/src/components/Elements/ElementPage';
import {getElementDefinition} from '@site/src/components/Elements/element-utils';
# Moving Waves
---
### Packages Docs Elements Backgrounds Moving Zigzags Index (`packages/docs/elements/backgrounds/moving-zigzags/index.mdx`)
---
title: Moving Zigzags
description: A seamless zigzag background that flows upward.
image: https://remotion.media/elements/backgrounds-moving-zigzags-preview.png
---
import {ElementPage} from '@site/src/components/Elements/ElementPage';
import {getElementDefinition} from '@site/src/components/Elements/element-utils';
# Moving Zigzags
---
### Packages Docs Elements Backgrounds Notebook Paper Index (`packages/docs/elements/backgrounds/notebook-paper/index.mdx`)
---
title: Notebook Paper
description: A white paper background with subtle blue gridlines.
image: https://remotion.media/elements/backgrounds-notebook-paper-preview.png
---
import {ElementPage} from '@site/src/components/Elements/ElementPage';
import {getElementDefinition} from '@site/src/components/Elements/element-utils';
# Notebook Paper
---
### Packages Docs Elements Backgrounds Paper Texture Index (`packages/docs/elements/backgrounds/paper-texture/index.mdx`)
---
title: Paper Texture
description: A white animated paper texture background.
image: https://remotion.media/elements/backgrounds-paper-texture-preview.png
---
import {ElementPage} from '@site/src/components/Elements/ElementPage';
import {getElementDefinition} from '@site/src/components/Elements/element-utils';
# Paper Texture
---
### Packages Docs Elements Backgrounds Rotating Starburst Index (`packages/docs/elements/backgrounds/rotating-starburst/index.mdx`)
---
title: Rotating Starburst
description: A Solid background with a slowly rotating starburst effect.
image: https://remotion.media/elements/backgrounds-rotating-starburst-preview.png
---
import {ElementPage} from '@site/src/components/Elements/ElementPage';
import {getElementDefinition} from '@site/src/components/Elements/element-utils';
# Rotating Starburst
---
### Packages Docs Elements Captions Basic Captions Index (`packages/docs/elements/captions/basic-captions/index.mdx`)
---
title: Basic Captions
sidebar_label: Basic
description: Simple synchronized captions with white text on a translucent gray background.
image: https://remotion.media/elements/captions-basic-captions-preview.png
---
import {ElementPage} from '@site/src/components/Elements/ElementPage';
import {getElementDefinition} from '@site/src/components/Elements/element-utils';
# Basic Captions
---
### Packages Docs Elements Captions Moving Pill Captions Index (`packages/docs/elements/captions/moving-pill-captions/index.mdx`)
---
title: Moving Pill Captions
sidebar_label: Moving Pill
description: Synchronized captions with a pill that moves between spoken words.
image: https://remotion.media/elements/captions-moving-pill-captions-preview.png
---
import {ElementPage} from '@site/src/components/Elements/ElementPage';
import {getElementDefinition} from '@site/src/components/Elements/element-utils';
# Moving Pill Captions
---
### Packages Docs Elements Captions Popping Word Captions Index (`packages/docs/elements/captions/popping-word-captions/index.mdx`)
---
title: Popping Word Captions
sidebar_label: Popping Word
description: Synchronized captions that pop each spoken word into focus.
image: https://remotion.media/elements/captions-popping-word-captions-preview.png
---
import {ElementPage} from '@site/src/components/Elements/ElementPage';
import {getElementDefinition} from '@site/src/components/Elements/element-utils';
# Popping Word Captions
---
### Packages Docs Elements Captions Rounded Captions Index (`packages/docs/elements/captions/rounded-captions/index.mdx`)
---
title: Rounded Captions
sidebar_label: Rounded
description: Multi-line captions in a SVG text box with roundings in all corners
image: https://remotion.media/elements/captions-rounded-captions-preview-694426c4-721c-484f-8a33-79f21d54da5d.png
---
import {ElementPage} from '@site/src/components/Elements/ElementPage';
import {getElementDefinition} from '@site/src/components/Elements/element-utils';
# Rounded Captions
Based on the [`@remotion/rounded-text-box` demo](/docs/rounded-text-box/create-rounded-text-box).
---
### Packages Docs Elements Captions Word Highlight Captions Index (`packages/docs/elements/captions/word-highlight-captions/index.mdx`)
---
title: Word Highlight Captions
sidebar_label: Word Highlight
description: Synchronized captions that highlight each spoken word.
image: https://remotion.media/elements/captions-word-highlight-captions-preview.png
---
import {ElementPage} from '@site/src/components/Elements/ElementPage';
import {getElementDefinition} from '@site/src/components/Elements/element-utils';
# Word Highlight Captions
---
### Packages Docs Elements Commerce Peel Index (`packages/docs/elements/commerce/peel/index.mdx`)
---
title: Peel
description: Peels any content away with a curled paper edge.
image: https://remotion.media/elements/commerce-peel-preview-57fbe8da-01d3-405c-82f9-84707b1ce6fa.png
---
import {ElementPage} from '@site/src/components/Elements/ElementPage';
import {getElementDefinition} from '@site/src/components/Elements/element-utils';
# Peel
---
### Packages Docs Elements Commerce Product Collection Index (`packages/docs/elements/commerce/product-collection/index.mdx`)
---
title: Rotating Cards
description: Three cards which each take center once.
image: https://remotion.media/elements/commerce-product-collection-preview.png
---
import {ElementPage} from '@site/src/components/Elements/ElementPage';
import {getElementDefinition} from '@site/src/components/Elements/element-utils';
# Rotating Cards
---
### Packages Docs Elements Commerce Product Discount Callout Index (`packages/docs/elements/commerce/product-discount-callout/index.mdx`)
---
title: Wiggling Callout
description: An attention-grabbing speech bubble.
image: https://remotion.media/elements/commerce-product-discount-callout-preview.png
---
import {ElementPage} from '@site/src/components/Elements/ElementPage';
import {getElementDefinition} from '@site/src/components/Elements/element-utils';
# Wiggling Callout
---
### Packages Docs Elements Commerce Shine Index (`packages/docs/elements/commerce/shine/index.mdx`)
---
title: Shine
description: Adds a diagonal shine sweep to any content.
image: https://remotion.media/elements/commerce-shine-preview.png
---
import {ElementPage} from '@site/src/components/Elements/ElementPage';
import {getElementDefinition} from '@site/src/components/Elements/element-utils';
# Shine
---
### Packages Docs Elements Commerce Tear Index (`packages/docs/elements/commerce/tear/index.mdx`)
---
title: Tear apart
description: A tear effect that can be applied to any content.
image: https://remotion.media/elements/commerce-tear-preview.png
---
import {ElementPage} from '@site/src/components/Elements/ElementPage';
import {getElementDefinition} from '@site/src/components/Elements/element-utils';
# Tear apart
---
### Packages Docs Elements Data Horizontal Bar Chart Index (`packages/docs/elements/data/horizontal-bar-chart/index.mdx`)
---
title: Horizontal Bar Chart
description: A bold bar chart card with three directly labeled data points.
image: https://remotion.media/elements/data-horizontal-bar-chart-preview.png
---
import {ElementPage} from '@site/src/components/Elements/ElementPage';
import {getElementDefinition} from '@site/src/components/Elements/element-utils';
# Horizontal Bar Chart
---
### Packages Docs Elements Data Line Chart Index (`packages/docs/elements/data/line-chart/index.mdx`)
---
title: Line Chart
description: A bold animated line chart with a directly labeled trend.
image: https://remotion.media/elements/data-line-chart-preview.png
---
import {ElementPage} from '@site/src/components/Elements/ElementPage';
import {getElementDefinition} from '@site/src/components/Elements/element-utils';
# Line Chart
---
### Packages Docs Elements Data Number Counter Index (`packages/docs/elements/data/number-counter/index.mdx`)
---
title: Number Counter
description: A simple animated counter that counts up from a start value to an end value.
image: https://remotion.media/elements/data-number-counter-preview.png
---
import {ElementPage} from '@site/src/components/Elements/ElementPage';
import {getElementDefinition} from '@site/src/components/Elements/element-utils';
# Number Counter
---
### Packages Docs Elements Data Pie Chart Index (`packages/docs/elements/data/pie-chart/index.mdx`)
---
title: Pie Chart
description: A bold animated pie chart with four directly labeled data points.
image: https://remotion.media/elements/data-pie-chart-preview.png
---
import {ElementPage} from '@site/src/components/Elements/ElementPage';
import {getElementDefinition} from '@site/src/components/Elements/element-utils';
# Pie Chart
---
### Packages Docs Elements Data Vertical Bar Chart Index (`packages/docs/elements/data/vertical-bar-chart/index.mdx`)
---
title: Vertical Bar Chart
description: A bold vertical bar chart with three directly labeled data points.
image: https://remotion.media/elements/data-vertical-bar-chart-preview.png
---
import {ElementPage} from '@site/src/components/Elements/ElementPage';
import {getElementDefinition} from '@site/src/components/Elements/element-utils';
# Vertical Bar Chart
---
--- METRICS ---
- Files Extracted: 101
- Estimated Token Budget: ~45730 tokens
- Canonical Reference: https://codewiki.google/github.com/remotion-dev/remotion
Video tools for the agent era.
## Video Creation
- **Make videos agentically**: Turn your idea into a video using your coding agent.
- **Make videos interactively**: Edit and animate using drag and drop.
- **Make videos programmatically**: Connect to data, and manage complexity with code.
React Code is the source of truth. Switch your workflow at any point.
## Video Automation
- **Design systems**: Create a library of animated assets for your organization.
- **Batch rendering**: Render millions of videos on your own infrastructure.
- **Applications**: Publish a simple tool or a complex video editor.
## Get started
If you already have Node.JS installed, type
```console
npx create-video@latest
```
to get started. Otherwise, read the [installation page](https://www.remotion.dev/docs/) in the documentation.
## Discover Remotion
Remotion is extensively documented over more than 1000 pages.
- Get Started
- [Installation](https://remotion.dev/docs)
- [Agent Skills](https://www.remotion.dev/docs/ai/skills)
- [Prompts](https://www.remotion.dev/prompts)
- [Templates](https://remotion.dev/templates)
- Components
- [Elements](https://remotion.dev/elements)
- [Effects](https://remotion.dev/effects)
- [Shapes](https://remotion.dev/docs/shapes)
- [Transitions](https://remotion.dev/transitions)
- [Sound Effects](https://remotion.dev/docs/sfx)
- [Captions](https://remotion.dev/docs/captions)
- [Fonts](https://remotion.dev/docs/fonts)
- Rendering
- [Node.js APIs](https://www.remotion.dev/docs/ssr)
- [Lambda](https://www.remotion.dev/docs/lambda)
- [Vercel](https://www.remotion.dev/docs/vercel-sandbox)
- [Client-side rendering](https://www.remotion.dev/docs/client-side-rendering/)
- [Comparison of options](https://remotion.dev/docs/compare-ssr)
- Making apps
- [Player](https://remotion.dev/docs/player)
- [Editor Starter](https://remotion.dev/editor-starter)
- [Mediabunny](https://remotion.dev/docs/mediabunny)
- Community
- [Discord](https://remotion.dev/discord)
- [Experts](https://remotion.dev/experts)
- [Resources](https://remotion.dev/resources)
- [Contributing](https://remotion.dev/contributing)
- Follow us on [X](https://x.com/remotion), [YouTube](https://youtube.com/@remotion_dev), [Instagram](https://instagram.com/remotion), [LinkedIn](https://linkedin.com/company/remotion)
- Commercial
- [License](https://remotion.dev/license)
- [Store](https://remotion.pro/store)
- [About Remotion](https://remotion.dev/about)
- [Showcase](https://remotion.dev/showcase)
- Help
- [Support](https://remotion.dev/support)
- [Discord](https://remotion.dev/discord)
- [Search](https://remotion.dev/search)
- [Ask AI](https://remotion.dev/ai)
- [GitHub Issues](https://github.com/remotion-dev/remotion/issues)
## Documentation
Documentation: [**remotion.dev/docs**](https://www.remotion.dev/docs)
API Reference: [**remotion.dev/api**](https://www.remotion.dev/api)
## License
Be aware of that Remotion has a special license and requires obtaining a company license in some cases. Read the [LICENSE](LICENSE.md) page for more information.
## Contributing
Please read [CONTRIBUTING.md](CONTRIBUTING.md) to learn about contributing to this project.
---
### Packages Docs README (`packages/docs/README.md`)
# @remotion/docs
## Usage
This is an internal package and has no documentation.
---
### Packages Docs Docs Getting Started (`packages/docs/docs/getting-started.mdx`)
---
image: /generated/articles-docs-getting-started.png
id: getting-started
title: Creating a new project
sidebar_label: Installation
slug: /
crumb: "Let's begin!"
---
import {CreateWithChatGPTButton} from '../components/CreateWithChatGPTButton';
## Using ChatGPT
If you have the [ChatGPT desktop app](https://chatgpt.com/download/), it can create a complete Remotion project that you can edit, run, and render locally using the [Remotion plugin](/docs/ai/codex-plugin).