Components

You can render any React/HTML markup in Remotion.
You'll find it useful to use our pre-made components, which have timing primitives built in and show up in the Studio as layers and become interactive.

See the API reference for the full list of components, hooks and functions.

HTML Elements

<Interactive.Div>, <Interactive.Span>, <Interactive.Svg>, and so on work like regular HTML elements, but they make the layer show up in the Studio as a layer and interactive element.

Video and audio

<Video> and <Audio> can do the same as regular video tags in the browser - and more, such as pitch shifting and play more formats!

Images and graphics

• <CanvasImage> and <Img> allow you to show images.
• <AnimatedImage> plays animate GIFs, PNGs, AVIFs or WebPs, but only in Chrome.
• <Gif> also plays GIFs, in all browsers.

Grouping clips

• <Track> puts multiple clips on the row in the Studio timeline.
• <Series> plays multiple clips after each other. If you change the duration of one clip, others adjust.
• <TransitionSeries> is the same as <Series>, but allowing you to place transitions inbetween.

Animation and 3D

• <Lottie> plays Lottie animations, useful for displaying content from After Effects.
• <RemotionRiveCanvas> plays Rive content.
• <ThreeCanvas> enables you to render Three.js content.

Shapes and annotations

• @remotion/shapes has SVG shapes such as <Heart>, <Arrow> and <Star>.
• @remotion/rough-notation allows for animated, hand-drawn annotations such as highlights on text.
• <MacOSCursor> displays a macOS cursor that you can position and animate, for example in a product demo.

Effects

• <Solid> is a simple, generic component, useful for applying effects.
• <HtmlInCanvas> wraps any content and allows you to add an effect to it.
• <HtmlInCanvasMotionBlur> adds motion blur to its children.

Make your own

Use Interactive.withSchema() to make your own React components editable in the Studio and inherit timing primitives.