Remotion Templates by RVE
A collection of 81 free, ready-to-use Remotion templates for creating programmatic videos with React. Each template is a self-contained React component that uses Remotion hooks (useCurrentFrame, interpolate, spring, useVideoConfig) — no CSS keyframes or external animation libraries.
Live Demos
See all templates in action at reactvideoeditor.com/remotion-templates.
Templates by Category
Charts & Data (9)
| Template | File | Description |
|---|
| Bar Chart | chart-animation.tsx | Animated SVG bar chart with staggered bar growth |
| Line Chart | line-chart.tsx | SVG polyline drawing left-to-right with data points |
| Pie Chart | pie-chart.tsx | Segmented circle with sequential segment reveals |
| Donut Chart | donut-chart.tsx | Ring chart with animated segments and centre metric |
| Area Chart | area-chart.tsx | Gradient-filled area under a line, revealing left to right |
| Progress Bars | progress-bars.tsx | Horizontal bars filling to different widths |
| Stat Counter | stat-counter.tsx | Large number counting up with comma formatting |
| Comparison Chart | comparison-chart.tsx | Side-by-side before/after metric comparison |
| Circular Progress | circular-progress.tsx | Animated progress ring with percentage |
Text (9)
| Template | File | Description |
|---|
| Animated Text | animated-text.tsx | Character-by-character text reveal |
| Bounce Text | bounce-text.tsx | Spring bounce entrance for titles |
| Bubble Pop Text | bubble-pop-text.tsx | Characters pop in inside bubbles |
| Floating Text Chip | floating-bubble-text.tsx | Floating label with sine-wave wobble |
| Glitch Text | glitch-text.tsx | RGB split glitch with decay |
| Popping Scale Text | popping-text.tsx | Spring-based scale pop entrance |
| Pulsing Text | pulsing-text.tsx | Continuous scale pulse for emphasis |
| Slide Text | slide-text.tsx | Directional slide-in text |
| Typewriter Subtitle | typewriter-subtitle.tsx | Character-by-character typing with cursor |
Content Animation (9)
| Template | File | Description |
|---|
| Animated List | animated-list.tsx | Staggered list item entrance |
| Card Flip | card-flip.tsx | 3D card flip with front/back content |
| Countdown Timer | countdown-timer.tsx | 5-4-3-2-1-GO with spring scale |
| Notification Pop | notification-pop.tsx | Stacking notification toasts |
| Particle Explosion | particle-explosion.tsx | Burst particles from centre |
| Progress Steps | progress-steps.tsx | Step indicator filling in sequence |
| Rotating Carousel | rotating-carousel.tsx | 3D rotating card carousel |
| Sound Wave | sound-wave.tsx | Audio waveform bar visualiser |
| Text Highlight | text-highlight.tsx | Sequential word highlighting |
Background (9)
| Template | File | Description |
|---|
| Bokeh Circles | bokeh-circles.tsx | Floating soft circles with drift |
| Geometric Patterns | geometric-patterns.tsx | Rotating/scaling geometric shapes |
| Gradient Shift | gradient-shift.tsx | Slowly shifting ambient gradient |
| Grid Pulse | grid-pulse.tsx | Dot grid with ripple wave pulse |
| Liquid Wave | liquid-wave.tsx | Flowing SVG wave shapes |
| Matrix Rain | matrix-rain.tsx | Falling code rain columns |
| Noise Grain | noise-grain.tsx | Subtle film grain overlay |
| Pixel Transition | pixel-transition.tsx | Pixelated grid reveal |
| Starfield | starfield.tsx | Flying-through-space star effect |
Cinematic (9)
| Template | File | Description |
|---|
| Camera Shake | camera-shake.tsx | Decaying shake for impact moments |
| Film Burn | film-burn.tsx | Warm light leak overlay |
| Ken Burns | ken-burns.tsx | Pan and zoom for images |
| Letterbox Reveal | letterbox-reveal.tsx | Black bars retracting to reveal |
| Parallax Pan | parallax-pan.tsx | Multi-layer parallax scrolling |
| Spotlight Reveal | spotlight-reveal.tsx | Expanding circle clip-path reveal |
| Vignette Pulse | vignette-pulse.tsx | Pulsing darkened edges overlay |
| Whip Pan | whip-pan.tsx | Fast horizontal pan with motion blur |
| Zoom Pulse | zoom-pulse.tsx | Rhythmic zoom in/out pulse |
Transition (9)
| Template | File | Description |
|---|
| Blinds Transition | blinds-transition.tsx | Horizontal blinds opening |
| Clock Wipe | clock-wipe.tsx | Radial clock-hand sweep |
| Cross Dissolve | cross-dissolve.tsx | Classic cross-fade between scenes |
| Fade Through Black | fade-through-black.tsx | Dip to black between scenes |
| Iris Transition | iris-transition.tsx | Circular iris close/open |
| Morph Transition | morph-transition.tsx | Scale-and-fade morph |
| Push Transition | push-transition.tsx | New scene pushes old off-screen |
| Slide Wipe | slide-wipe.tsx | Spring-driven panel slide |
| Zoom Through | zoom-through.tsx | Zoom in then zoom out reveal |
Logo & Branding (9)
| Template | File | Description |
|---|
| Logo Blur Reveal | logo-blur-reveal.tsx | Focus-pull blur to sharp |
| Logo Bounce Drop | logo-bounce-drop.tsx | Drop from above with bounce |
| Logo Fade Reveal | logo-fade-reveal.tsx | Fade in with subtle scale-up |
| Logo Glitch Reveal | logo-glitch-reveal.tsx | RGB split glitch decaying to clean |
| Logo Scale Rotate | logo-scale-rotate.tsx | Spinning scale entrance |
| Logo Spin Reveal | logo-spin-reveal.tsx | 3D Y-axis spin reveal |
| Logo Split Reveal | logo-split-reveal.tsx | Left/right halves expanding |
| Logo Stroke Draw | logo-stroke-draw.tsx | SVG stroke drawing animation |
| Logo Typewriter | logo-typewriter.tsx | Icon + typed company name |
Intro & Outro (9)
| Template | File | Description |
|---|
| Chapter Title | chapter-title.tsx | Chapter number with extending lines |
| Cinematic Title Intro | cinematic-title-intro.tsx | Title spring-in with growing underline |
| Countdown Intro | countdown-intro.tsx | Ring countdown 3-2-1-GO |
| Credits Roll | credits-roll.tsx | Scrolling movie-style credits |
| End Card | end-card.tsx | Outro with subscribe CTA |
| Lower Third | lower-third.tsx | News-style name/title bar |
| Quote Card | quote-card.tsx | Animated quotation with attribution |
| Subscribe Reminder | subscribe-reminder.tsx | Floating subscribe overlay |
| Title Split | title-split.tsx | Split text meeting in centre |
Image & Media (9)
| Template | File | Description |
|---|
| Gallery Grid | gallery-grid.tsx | Staggered 2x3 grid reveal |
| Image Carousel | image-carousel.tsx | Horizontal sliding with centre focus |
| Image Comparison Slider | image-comparison-slider.tsx | Before/after sliding divider |
| Image Zoom Reveal | image-zoom-reveal.tsx | Zoom-out focus-pull reveal |
| Masonry Gallery | masonry-gallery.tsx | Pinterest-style staggered grid |
| Photo Stack | photo-stack.tsx | Overlapping frames with rotation |
| Picture in Picture | picture-in-picture.tsx | PiP overlay layout |
| Polaroid Frame | polaroid-frame.tsx | Polaroid-style photo with drop-in |
| Split Screen | split-screen.tsx | Two panels sliding to meet |
Getting Started
- Clone or download this repository
- Copy the template file(s) you want into your Remotion project
- Import and use in your
<Composition />:
import ChartAnimation from "./templates/chart-animation";
<Composition
id="BarChart"
component={ChartAnimation}
durationInFrames={90}
fps={30}
width={960}
height={540}
/>;
Note: These templates are standalone React components. Copy them into your project, link them with your Remotion setup, and adjust props to fit your needs.
Contributing
Contributions are welcome! If you have ideas for new templates or improvements to existing ones, feel free to submit an issue or a pull request.
License
All templates in this repository are available under the MIT License. You can use them in personal and commercial projects, but attribution is appreciated where applicable.
