# remotion-templates

**Repository Path**: caomusheng/remotion-templates

## Basic Information

- **Project Name**: remotion-templates
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-11
- **Last Updated**: 2026-07-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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](https://www.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 />`:

```tsx
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.