All components
Browse and install Remotion compositions, scenes, and primitives.
RemotionUI groups components by motion role (lanes), with tags for use-case filters inside dense lanes.
210 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); 3D (webgl scenes rendered with @remotion/three); Shaders (full-frame gpu fields evaluated per pixel); 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 · 51 components
Animated Noise Grain
npx remotion-ui@latest add animated-noise-grain
Aurora Background
npx remotion-ui@latest add aurora-bg
Blur Focus In
npx remotion-ui@latest add blur-focus-in
Blur In
npx remotion-ui@latest add blur-in
Caustics Background
npx remotion-ui@latest add caustics-bg
Confetti Burst
npx remotion-ui@latest add confetti-burst
Counter
npx remotion-ui@latest add counter
Depth of Field Blur
npx remotion-ui@latest add depth-of-field-blur
Dynamic Grid
npx remotion-ui@latest add dynamic-grid
Fade In
npx remotion-ui@latest add fade-in
Fade Out
npx remotion-ui@latest add fade-out
Glow Pulse
npx remotion-ui@latest add glow-pulse
Handwriting Text
npx remotion-ui@latest add handwriting-text
Infinite Marquee
npx remotion-ui@latest add infinite-marquee
Light Rays
npx remotion-ui@latest add light-rays
Light Sweep Text
npx remotion-ui@latest add light-sweep-text
Liquid Text Morph
npx remotion-ui@latest add liquid-text-morph
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
Mesh Gradient Background
npx remotion-ui@latest add mesh-gradient-bg
Motion Trail
npx remotion-ui@latest add motion-trail
Neon Flicker Text
npx remotion-ui@latest add neon-flicker-text
Orbit Motion
npx remotion-ui@latest add orbit-motion
Parallax Layers
npx remotion-ui@latest add parallax-layers
Particle Field
npx remotion-ui@latest add particle-field
Perspective Marquee
npx remotion-ui@latest add perspective-marquee
Progress Bar
npx remotion-ui@latest add progress-bar
RGB Glitch Text
npx remotion-ui@latest add rgb-glitch-text
Rotate In
npx remotion-ui@latest add rotate-in
Scale In
npx remotion-ui@latest add scale-in
Scanline CRT
npx remotion-ui@latest add scanline-crt
Scramble Text
npx remotion-ui@latest add scramble-text
Shake Emphasis
npx remotion-ui@latest add shake-emphasis
Skew In
npx remotion-ui@latest add skew-in
Slide Left
npx remotion-ui@latest add slide-left
Slide Up
npx remotion-ui@latest add slide-up
Slot Roll
npx remotion-ui@latest add slot-roll
Split Text Chars
npx remotion-ui@latest add split-text-chars
Spring In
npx remotion-ui@latest add spring-in
Squash Stretch
npx remotion-ui@latest add squash-stretch
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
Stroke to Fill Text
npx remotion-ui@latest add stroke-to-fill-text
Text Mask Video
npx remotion-ui@latest add text-mask-video
Topographic Lines Background
npx remotion-ui@latest add topographic-lines-bg
Tracking In
npx remotion-ui@latest add tracking-in
Typewriter
npx remotion-ui@latest add typewriter
Variable Font Morph
npx remotion-ui@latest add variable-font-morph
Wave Text
npx remotion-ui@latest add wave-text
Data & media
Captions, audio, charts, and live metrics · 38 components
Animated Bar Chart
npx remotion-ui@latest add animated-bar-chart
Audio Pulse
npx remotion-ui@latest add audio-pulse
Audio Reactive Scale
npx remotion-ui@latest add audio-reactive-scale
Audio Scrubber
npx remotion-ui@latest add audio-scrubber
Audiogram Bars
npx remotion-ui@latest add audiogram-bars
Audiogram Scene
npx remotion-ui@latest add audiogram-scene
Bar Chart Race
npx remotion-ui@latest add bar-chart-race
Beat Pulse Grid
npx remotion-ui@latest add beat-pulse-grid
Bubble Chart Pack
npx remotion-ui@latest add bubble-chart-pack
Candlestick Chart
npx remotion-ui@latest add candlestick-chart
Caption Emoji Beat
npx remotion-ui@latest add caption-emoji-beat
Caption Highlight
npx remotion-ui@latest add caption-highlight
Caption Scene
npx remotion-ui@latest add caption-scene
Comparison Bars
npx remotion-ui@latest add comparison-bars
Donut Chart
npx remotion-ui@latest add donut-chart
Funnel Chart
npx remotion-ui@latest add funnel-chart
Gantt Timeline
npx remotion-ui@latest add gantt-timeline
Gauge Dial
npx remotion-ui@latest add gauge-dial
Heatmap Grid
npx remotion-ui@latest add heatmap-grid
Karaoke Captions
npx remotion-ui@latest add karaoke-captions
Line Chart Draw
npx remotion-ui@latest add line-chart-draw
Metric Ticker
npx remotion-ui@latest add metric-ticker
Pie Slice Reveal
npx remotion-ui@latest add pie-slice-reveal
Radar Chart
npx remotion-ui@latest add radar-chart
Scatter Plot Pop
npx remotion-ui@latest add scatter-plot-pop
Sparkline Row
npx remotion-ui@latest add sparkline-row
Speaker Label Captions
npx remotion-ui@latest add speaker-label-captions
SRT Caption Track
npx remotion-ui@latest add srt-caption-track
Stacked Area Chart
npx remotion-ui@latest add stacked-area-chart
Subtitle Translate
npx remotion-ui@latest add subtitle-translate
Transcript Scroll
npx remotion-ui@latest add transcript-scroll
Treemap Blocks
npx remotion-ui@latest add treemap-blocks
Voice Note Bubble
npx remotion-ui@latest add voice-note-bubble
VU Meter
npx remotion-ui@latest add vu-meter
Waterfall Chart
npx remotion-ui@latest add waterfall-chart
Waveform Bars Radial
npx remotion-ui@latest add waveform-bars-radial
Waveform Line
npx remotion-ui@latest add waveform-line
Word Pop Captions
npx remotion-ui@latest add word-pop-captions
Paths & shapes
SVG draw-on, logos, and cursors · 11 components
Arrow Annotate
npx remotion-ui@latest add arrow-annotate
Badge Stamp
npx remotion-ui@latest add badge-stamp
Blob Morph
npx remotion-ui@latest add blob-morph
Connector Lines
npx remotion-ui@latest add connector-lines
Cursor Path
npx remotion-ui@latest add cursor-path
Dashed Path Travel
npx remotion-ui@latest add dashed-path-travel
Logo Reveal
npx remotion-ui@latest add logo-reveal
Path Draw
npx remotion-ui@latest add path-draw
Shape Morph
npx remotion-ui@latest add shape-morph
Simulated Cursor
npx remotion-ui@latest add simulated-cursor
SVG Mask Reveal
npx remotion-ui@latest add svg-mask-reveal
Maps & device
Map scenes and device mockups · 8 components
Device Mockup Zoom
npx remotion-ui@latest add device-mockup-zoom
Globe Arc
npx remotion-ui@latest add globe-arc
Map Canvas
npx remotion-ui@latest add map-canvas
Map Flight
npx remotion-ui@latest add map-flight
Map Heat Overlay
npx remotion-ui@latest add map-heat-overlay
Map Markers
npx remotion-ui@latest add map-markers
Map Route
npx remotion-ui@latest add map-route
Multi Device Lineup
npx remotion-ui@latest add multi-device-lineup
3D
WebGL scenes rendered with @remotion/three · 5 components
Card Stack 3d
Newnpx remotion-ui@latest add card-stack-3d
Device Mockup 3D
Newnpx remotion-ui@latest add device-mockup-3d
Globe Points 3d
Newnpx remotion-ui@latest add globe-points-3d
Product Turntable 3d
Newnpx remotion-ui@latest add product-turntable-3d
Text Extrude 3d
Newnpx remotion-ui@latest add text-extrude-3d
Shaders
Full-frame GPU fields evaluated per pixel · 5 components
Dither Field Background
npx remotion-ui@latest add dither-field-bg
Grain Gradient Background
npx remotion-ui@latest add grain-gradient-bg
Light Tunnel Background
npx remotion-ui@latest add light-tunnel-bg
Text Reveal Shader
npx remotion-ui@latest add text-reveal-shader
Warp Bands Background
npx remotion-ui@latest add warp-bands-bg
Scenes
Composed layouts, cards, and UI blocks · 53 components
Auto Fit Title
npx remotion-ui@latest add auto-fit-title
B Roll Stack
npx remotion-ui@latest add b-roll-stack
Calendar Month Fill
npx remotion-ui@latest add calendar-month-fill
Callout Spotlight
npx remotion-ui@latest add callout-spotlight
Caption Bumper
npx remotion-ui@latest add caption-bumper
Changelog Entry
npx remotion-ui@latest add changelog-entry
ChatGPT
npx remotion-ui@latest add chat-gpt
Chat to Preview
npx remotion-ui@latest add chat-to-preview
Claude Chat
npx remotion-ui@latest add claude-chat
Claude Code
npx remotion-ui@latest add claude-code
Code Accordion
npx remotion-ui@latest add code-accordion
Code Diff Wipe
npx remotion-ui@latest add code-diff-wipe
Code Reveal
npx remotion-ui@latest add code-reveal
Comment Callout
npx remotion-ui@latest add comment-callout
Commit Graph
npx remotion-ui@latest add commit-graph
Comparison Table
npx remotion-ui@latest add comparison-table
Countdown Timer
npx remotion-ui@latest add countdown-timer
Data Flow Pipes
npx remotion-ui@latest add data-flow-pipes
Drag and Drop Flow
npx remotion-ui@latest add drag-drop-flow
End Card
npx remotion-ui@latest add end-card
FAQ Accordion
npx remotion-ui@latest add faq-accordion
Feature List
npx remotion-ui@latest add feature-list
File Tree Reveal
npx remotion-ui@latest add file-tree-reveal
Form Fill Sequence
npx remotion-ui@latest add form-fill-sequence
Hook Card
npx remotion-ui@latest add hook-card
Kanban Move
npx remotion-ui@latest add kanban-move
Logo Wall
npx remotion-ui@latest add logo-wall
Lower Third
npx remotion-ui@latest add lower-third
Media Frame
npx remotion-ui@latest add media-frame
Media Sequence
npx remotion-ui@latest add media-sequence
News Ticker Bar
npx remotion-ui@latest add news-ticker-bar
Notification Stack
npx remotion-ui@latest add notification-stack
OpenCode
npx remotion-ui@latest add opencode
Org Chart Build
npx remotion-ui@latest add org-chart-build
Poll Overlay
npx remotion-ui@latest add poll-overlay
Pricing Card
npx remotion-ui@latest add pricing-card
Quiz Question
npx remotion-ui@latest add quiz-question
Quote Card
npx remotion-ui@latest add quote-card
Reaction Burst
npx remotion-ui@latest add reaction-burst
Roadmap Lanes
npx remotion-ui@latest add roadmap-lanes
Search Results Populate
npx remotion-ui@latest add search-results-populate
Split Screen
npx remotion-ui@latest add split-screen
Sports Scorebug
npx remotion-ui@latest add sports-scorebug
Stat Card
npx remotion-ui@latest add stat-card
Tab Switch Panel
npx remotion-ui@latest add tab-switch-panel
Talking Head Layout
npx remotion-ui@latest add talking-head-layout
Team Grid
npx remotion-ui@latest add team-grid
Terminal Simulator
npx remotion-ui@latest add terminal-simulator
Timeline Steps
npx remotion-ui@latest add timeline-steps
Title Card
npx remotion-ui@latest add title-card
v0
npx remotion-ui@latest add v0
Weather Card
npx remotion-ui@latest add weather-card
Zoom Pan Frame
npx remotion-ui@latest add zoom-pan-frame
Transitions
TransitionSeries scene cuts · 18 components
Blur Reveal
npx remotion-ui@latest add blur-reveal
Chromatic Aberration Wipe
npx remotion-ui@latest add chromatic-aberration-wipe
Directional Wipe
npx remotion-ui@latest add directional-wipe
Frosted Glass Wipe
npx remotion-ui@latest add frosted-glass-wipe
Grid Pixelate Wipe
npx remotion-ui@latest add grid-pixelate-wipe
Spatial Push
npx remotion-ui@latest add spatial-push
Blinds
npx remotion-ui@latest add transition-blinds
Card Flip
npx remotion-ui@latest add transition-card-flip
Circle Reveal
npx remotion-ui@latest add transition-circle-reveal
Transition Clock Wipe
npx remotion-ui@latest add transition-clock-wipe
Transition Fade
npx remotion-ui@latest add transition-fade
Transition Light Leak
npx remotion-ui@latest add transition-light-leak
Liquid Warp
npx remotion-ui@latest add transition-liquid-warp
Morph Shape
npx remotion-ui@latest add transition-morph-shape
Transition Slide
npx remotion-ui@latest add transition-slide
Whip Pan
npx remotion-ui@latest add transition-whip-pan
Transition Wipe
npx remotion-ui@latest add transition-wipe
Zoom Through
npx remotion-ui@latest add zoom-through
Compositions
Full video templates · 21 components
AI Composer Showcase
npx remotion-ui@latest add ai-composer-showcase
AI Generation Canvas
npx remotion-ui@latest add ai-generation-canvas
Bento Pan
npx remotion-ui@latest add bento-pan
Browser Flow
npx remotion-ui@latest add browser-flow
Creator Reel
npx remotion-ui@latest add creator-reel
Dashboard Populate
npx remotion-ui@latest add dashboard-populate
Data Story
npx remotion-ui@latest add data-story
Deploy Reveal
npx remotion-ui@latest add deploy-reveal
Ecosystem Orbit
npx remotion-ui@latest add ecosystem-orbit
Hero Device Assemble
npx remotion-ui@latest add hero-device-assemble
Hero Loop
npx remotion-ui@latest add hero-loop
Image Expand
npx remotion-ui@latest add image-expand
Intro
npx remotion-ui@latest add intro
Landing Code Showcase
npx remotion-ui@latest add landing-code-showcase
Live Code Split
npx remotion-ui@latest add live-code-split
Podcast Clip
npx remotion-ui@latest add podcast-clip
Pricing Focus
npx remotion-ui@latest add pricing-focus
Showcase
npx remotion-ui@latest add showcase
Social Clip
npx remotion-ui@latest add social-clip
Tool Menu Slide
npx remotion-ui@latest add tool-menu-slide
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 |
| 3D | @/remotion/scenes/… (render with --gl=angle) | device-mockup-3d, product-turntable-3d, globe-points-3d |
| Shaders | @/remotion/primitives/… (render with --gl=angle) | dither-field-bg, warp-bands-bg |
| 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/.