Skip to content

reactvideoeditor/remotion-templates

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
templates
templates
 
 
README.md
README.md
 
 

Repository files navigation

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

  1. Clone or download this repository
  2. Copy the template file(s) you want into your Remotion project
  3. 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.

About

Free Remotion Effects & Animations

www.reactvideoeditor.com/remotion-templates

Resources

Readme
Activity
Custom properties

Stars

88 stars

Watchers

3 watching

Forks

11 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages