RemotionUI groups components by motion role (lanes), with tags for use-case filters inside dense lanes.

108 installable components grouped by motion role: Primitives (motion, text effects, and backgrounds); Data & media (captions, audio, charts, and live metrics); Paths & shapes (svg draw-on, logos, and cursors); Maps & device (map scenes and device mockups); Scenes (composed layouts, cards, and ui blocks); Transitions (transitionseries scene cuts); Compositions (full video templates). Use lane filters below or jump to any item from the sidebar.

Primitives

Motion, text effects, and backgrounds · 27 components

blur focus in

npx remotion-ui@latest add blur-focus-in

Install compositions as source you own

Frame registry

Three layers in your repo

Install compositions as source you own

Frame registry

Three layers in your repo

blur in

npx remotion-ui@latest add blur-in

Celebrate

Make the first second count

Hook viewers before they scroll

confetti burst

npx remotion-ui@latest add confetti-burst

Runtime dependencies

+18%

counter

npx remotion-ui@latest add counter

Background

Dynamic grid

Three layers in your repo

dynamic grid

npx remotion-ui@latest add dynamic-grid

Install compositions as source you own

Frame registry

Three layers in your repo

Install compositions as source you own

Frame registry

Three layers in your repo

fade in

npx remotion-ui@latest add fade-in

Browse components

Frame registry

Holds first, then fades away

fade out

npx remotion-ui@latest add fade-out

infinite marquee

npx remotion-ui@latest add infinite-marquee

light sweep text

npx remotion-ui@latest add light-sweep-text

Remotion team

The best motion is code you can read and change.

marker highlight

npx remotion-ui@latest add marker-highlight

masked slide reveal

npx remotion-ui@latest add masked-slide-reveal

matrix decode

npx remotion-ui@latest add matrix-decode

Ambient layer

Mesh gradient

Install compositions as source you own

mesh gradient bg

npx remotion-ui@latest add mesh-gradient-bg

perspective marquee

npx remotion-ui@latest add perspective-marquee

Rendering frame registry reel

progress bar

npx remotion-ui@latest add progress-bar

rgb glitch text

npx remotion-ui@latest add rgb-glitch-text

Three layers in your repo

Motion primitives you can edit

Scenes for hooks, charts, and captions

Three layers in your repo

Motion primitives you can edit

Scenes for hooks, charts, and captions

rotate in

npx remotion-ui@latest add rotate-in

Install compositions as source you own

Frame registry

Three layers in your repo

Install compositions as source you own

Frame registry

Three layers in your repo

scale in

npx remotion-ui@latest add scale-in

Install compositions as source you own

Frame registry

Drop scenes into TransitionSeries

Install compositions as source you own

Frame registry

Drop scenes into TransitionSeries

slide left

npx remotion-ui@latest add slide-left

Install compositions as source you own

Frame registry

Three layers in your repo

Install compositions as source you own

Frame registry

Three layers in your repo

slide up

npx remotion-ui@latest add slide-up

slot roll

npx remotion-ui@latest add slot-roll

Install compositions as source you own

Frame registry

Three layers in your repo

Install compositions as source you own

Frame registry

Three layers in your repo

spring in

npx remotion-ui@latest add spring-in

Install compositions as source you own

Frame registry

Motion primitives you can edit

Three layers in your repo

Scenes for hooks, charts, and captions

Drop scenes into TransitionSeries

stagger children

npx remotion-ui@latest add stagger-children

staggered fade up

npx remotion-ui@latest add staggered-fade-up

strikethrough replace

npx remotion-ui@latest add strikethrough-replace

tracking in

npx remotion-ui@latest add tracking-in

Three layers in your repo

typewriter

npx remotion-ui@latest add typewriter

Data & media

Captions, audio, charts, and live metrics · 10 components

Three layers in your repo

animated bar chart

npx remotion-ui@latest add animated-bar-chart

audio pulse

npx remotion-ui@latest add audio-pulse

audiogram bars

npx remotion-ui@latest add audiogram-bars

Ship faster with source

Name: RemotionUI
Author: RemotionUI

Edit every frame in your repo

audiogram scene

npx remotion-ui@latest add audiogram-scene

Clip the sharpest moment

caption highlight

npx remotion-ui@latest add caption-highlight

Clip the sharpest moment

caption scene

npx remotion-ui@latest add caption-scene

Clip the sharpest moment

karaoke captions

npx remotion-ui@latest add karaoke-captions

line chart draw

npx remotion-ui@latest add line-chart-draw

Channel momentum

metric ticker

npx remotion-ui@latest add metric-ticker

waveform line

npx remotion-ui@latest add waveform-line

Paths & shapes

SVG draw-on, logos, and cursors · 4 components

cursor path

npx remotion-ui@latest add cursor-path

logo reveal

npx remotion-ui@latest add logo-reveal

path draw

npx remotion-ui@latest add path-draw

Tutorial

Three layers in your repo

Follow the guided cursor

simulated cursor

npx remotion-ui@latest add simulated-cursor

Maps & device

Map scenes and device mockups · 5 components

device mockup zoom

npx remotion-ui@latest add device-mockup-zoom

map canvas

npx remotion-ui@latest add map-canvas

Zurich

New York

map flight

npx remotion-ui@latest add map-flight

map markers

npx remotion-ui@latest add map-markers

map route

npx remotion-ui@latest add map-route

Scenes

Composed layouts, cards, and UI blocks · 30 components

Frame registry

Install compositions as source you own

auto fit title

npx remotion-ui@latest add auto-fit-title

Supporting visuals

Proof shots behind narration

Drop in screen captures, process clips, or customer moments.

b roll stack

npx remotion-ui@latest add b-roll-stack

Tutorial

Point viewers to the action

Use coordinates to highlight a product region.

callout spotlight

npx remotion-ui@latest add callout-spotlight

This is the moment viewers remember.

caption bumper

npx remotion-ui@latest add caption-bumper

What can I help with?

Collaborate on writing and code

chat gpt

npx remotion-ui@latest add chat-gpt

Show the title card with a phosphor accent.

Rendering a centered title scene with rim light.

Preview

Ship the scene

Chat layout morphs into a live preview frame.

chat to preview

npx remotion-ui@latest add chat-to-preview

Claude♙Project Operations/Scatter Plot for User Engagement Metrics

☆Share⚙

TXT

SMBuild a scatter plot to visualize the relationship between page load time and user session duration.

</>

Scatter Plot for User Engagement Metrics

Open component

CopyRetry👍👎

Claude can make mistakes. Please double-check responses.

Reply to Claude...

Claude 3.5 Sonnet

🔗

←Scatter Plot for User Engagement Metrics

PreviewCode×

import React from 'react';
import { ScatterChart, Scatter, XAxis, YAxis,
  CartesianGrid, Tooltip } from 'recharts';
 
const data = [
  { pageLoadTime: 1.5, sessionDuration: 12 },
  { pageLoadTime: 2.3, sessionDuration: 8 },
  { pageLoadTime: 0.9, sessionDuration: 18 },
  { pageLoadTime: 3.1, sessionDuration: 6 },
  { pageLoadTime: 1.8, sessionDuration: 14 },
  { pageLoadTime: 2.7, sessionDuration: 9 },
];
 
export default function UserEngagementScatterPlot() {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <ScatterChart margin={{ top: 20, right: 20 }} />
    </ResponsiveContainer>
  );
}

Last edited 2 seconds agoCopy

claude chat

npx remotion-ui@latest add claude-chat

/agents to create subagents

/security-review for review agent

ctrl+b to background bashes

> Try "edit src/..."

claude code

npx remotion-ui@latest add claude-code

Install the scene

npx remotion-ui add code-accordion

Import in your composition

import { CodeAccordion } from "@/remotion/scenes/code-accordion";

Render with sections

<CodeAccordion sections={sections} activeIndex={1} />

code accordion

npx remotion-ui@latest add code-accordion

Diff

const x = 1;
return x;

const x = 2;
return x * 2;

code diff wipe

npx remotion-ui@latest add code-diff-wipe

01import { CalloutSpotlight } from "@/remotion/scenes/callout-spotlight";
02
03<CalloutSpotlight
04  title="Explain the action"
05  target={{ x: 520, y: 260, width: 420, height: 220 }}
06/>

code reveal

npx remotion-ui@latest add code-reveal

Alex Chen

@alexchen

Can you break down how you built that transition?

comment callout

npx remotion-ui@latest add comment-callout

data flow pipes

npx remotion-ui@latest add data-flow-pipes

Drop your clip

hero-take.mp4

drag drop flow

npx remotion-ui@latest add drag-drop-flow

Ready to ship?

Browse components

remotionui.dev/docs/components

end card

npx remotion-ui@latest add end-card

Three layers in your repo

feature list

npx remotion-ui@latest add feature-list

Creator insight

Make the first second count

Hook viewers before they scroll

hook card

npx remotion-ui@latest add hook-card

Mina Patel

Founder, Northstar Studio

lower third

npx remotion-ui@latest add lower-third

Launch dashboard

Frame the product in one glance.

media frame

npx remotion-ui@latest add media-frame

Dashboard overview

Frame the product in one glance.

media sequence

npx remotion-ui@latest add media-sequence

OpenCode

Ask anything...

BuildKimi K2.5Moonshot AI

tab agentsctrl+p commands

opencode

npx remotion-ui@latest add opencode

The best motion is code you can read and change.
— Remotion team

quote card

npx remotion-ui@latest add quote-card

Before / after workflow

Prototype

Final clip

split screen

npx remotion-ui@latest add split-screen

Runtime dependencies

stat card

npx remotion-ui@latest add stat-card

Keep the speaker readable

Reserve the lower frame for captions and platform UI.

talking head layout

npx remotion-ui@latest add talking-head-layout

Build output

$ pnpm registry:build
▸ resolving registry items…
✓ built 6 scene blocks
✓ emitted public registry JSON
done in 4.2s

terminal simulator

npx remotion-ui@latest add terminal-simulator

Story arc

Hook

Lead with the sharpest insight.

Proof

Show the chart and metrics.

CTA

Close with one clear next step.

timeline steps

npx remotion-ui@latest add timeline-steps

Frame registry

Install compositions as source you own

title card

npx remotion-ui@latest add title-card

New Chat

TemplatesResourcesEnterprisePricingSign Up

Contact FormImage EditorMini GameFinance Calculator

What do you want to create?

Start with a template

Get started instantly with a framework or integration of your choice.

Next.js

Build full-stack React apps

Supabase

Spin up Postgres with auth

Neon

Start with Serverless

Upstash

Serverless Redis and queues

npx remotion-ui@latest add v0

zoom pan frame

npx remotion-ui@latest add zoom-pan-frame

Transitions

TransitionSeries scene cuts · 12 components

Before cut

Editorial opener

Scene one holds the setup

blur reveal

npx remotion-ui@latest add blur-reveal

Before cut

Editorial opener

Scene one holds the setup

chromatic aberration wipe

npx remotion-ui@latest add chromatic-aberration-wipe

Before cut

Editorial opener

Scene one holds the setup

directional wipe

npx remotion-ui@latest add directional-wipe

Before cut

Editorial opener

Scene one holds the setup

frosted glass wipe

npx remotion-ui@latest add frosted-glass-wipe

Before cut

Editorial opener

Scene one holds the setup

grid pixelate wipe

npx remotion-ui@latest add grid-pixelate-wipe

Before cut

Editorial opener

Scene one holds the setup

spatial push

npx remotion-ui@latest add spatial-push

Before cut

Editorial opener

Scene one holds the setup

transition clock wipe

npx remotion-ui@latest add transition-clock-wipe

Before cut

Editorial opener

Scene one holds the setup

transition fade

npx remotion-ui@latest add transition-fade

Before cut

Editorial opener

Scene one holds the setup

transition light leak

npx remotion-ui@latest add transition-light-leak

Before cut

Editorial opener

Scene one holds the setup

transition slide

npx remotion-ui@latest add transition-slide

Before cut

Editorial opener

Scene one holds the setup

transition wipe

npx remotion-ui@latest add transition-wipe

Before cut

Editorial opener

Scene one holds the setup

zoom through

npx remotion-ui@latest add zoom-through

Compositions

Full video templates · 20 components

Generating

AI generation canvas

Live metrics from one prompt

ai generation canvas

npx remotion-ui@latest add ai-generation-canvas

bento pan

npx remotion-ui@latest add bento-pan

Browse the registry

remotionui.com/docs

browser flow

npx remotion-ui@latest add browser-flow

Make the first second count

Hook viewers before they scroll

creator reel

npx remotion-ui@latest add creator-reel

Dashboard waking up

dashboard populate

npx remotion-ui@latest add dashboard-populate

Quarterly reach by channel

Short-form climbed while long-form held attention

data story

npx remotion-ui@latest add data-story

Deploy

$ pnpm registry:build
▸ resolving registry items…
✓ built 6 scene blocks
✓ emitted public registry JSON
done in 4.2s

deploy reveal

npx remotion-ui@latest add deploy-reveal

Integrations orbit your brand

ecosystem orbit

npx remotion-ui@latest add ecosystem-orbit

Ship on every screen

Device layers spring into frame

hero device assemble

npx remotion-ui@latest add hero-device-assemble

RemotionUI

Production-ready motion for Remotion.

Install as source. Own every line.

hero loop

npx remotion-ui@latest add hero-loop

image expand

npx remotion-ui@latest add image-expand

Frame registry

Install compositions as source you own

intro

npx remotion-ui@latest add intro

Install. Edit. Render.

Source you own

landing code showcase

npx remotion-ui@latest add landing-code-showcase

Composition.tsx

01export const Clip = () => (
02  <TitleCard title="Live preview" />
03);

live code split

npx remotion-ui@latest add live-code-split

Podcast clip

Ship faster with source

Edit every frame in your repo

podcast clip

npx remotion-ui@latest add podcast-clip

pricing focus

npx remotion-ui@latest add pricing-focus

Frame registry

Install compositions as source you own

showcase

npx remotion-ui@latest add showcase

Frame registry

Install compositions as source you own

social clip

npx remotion-ui@latest add social-clip

tool menu slide

npx remotion-ui@latest add tool-menu-slide

Show the product path

One screen, one callout, one code beat

tutorial clip

npx remotion-ui@latest add tutorial-clip

How categorization works

Lanes describe how a component behaves on the timeline:

Lane	Install path	Examples
Primitives	`@/remotion/primitives/…`	`fade-in`, `typewriter`, `mesh-gradient-bg`
Data & media	`@/remotion/primitives/…` or scenes	`caption-highlight`, `animated-bar-chart`
Paths & shapes	`@/remotion/primitives/…`	`path-draw`, `logo-reveal`
Maps & device	scenes / primitives	`map-flight`, `device-mockup-zoom`
Scenes	`@/remotion/scenes/…`	`lower-third`, `claude-chat`, `code-reveal`
Transitions	`@/remotion/primitives/transition-*`	`transition-fade`, `blur-reveal`
Compositions	`@/compositions/…`	`social-clip`, `hero-loop`

Tags narrow a lane by use case — AI composers, code & terminal, creator layouts, captions, charts, and more. Use tag chips on this page when a lane is selected, or follow tag sub-groups in the sidebar.

Helpers (layout, springs, timing, use-stagger) install to @/remotion/lib/ and @/remotion/hooks/.

For task-first installs, see Recipes.

Components

Primitives

Data & media

Three layers in your repo

Ship faster with source

Channel momentum

Paths & shapes

Maps & device

Scenes

Frame registry

Proof shots behind narration

Ship the scene

Ready to ship?

Make the first second count

Keep the speaker readable

Story arc

Frame registry

What do you want to create?

Transitions

Compositions

Browse the registry

Make the first second count

Dashboard waking up

Quarterly reach by channel

Ship on every screen

Production-ready motion for Remotion.

Frame registry

Install. Edit. Render.

Composition.tsx

Ship faster with source

Frame registry

Frame registry

Show the product path

How categorization works

On this page

Three layers in your repo

Ship faster with source

Channel momentum

Frame registry

Proof shots behind narration

Ship the scene

Ready to ship?

Make the first second count

Keep the speaker readable

Story arc

Frame registry

What do you want to create?

Browse the registry

Make the first second count

Dashboard waking up

Quarterly reach by channel

Ship on every screen

Production-ready motion for Remotion.

Frame registry

Install. Edit. Render.

Composition.tsx

Ship faster with source

Frame registry

Frame registry

Show the product path