Remotion is a suite of libraries building a foundation for creating videos programmatically using React.
Why create videos in React?
- Leverage web technologies: Use all of CSS, Canvas, SVG, WebGL, etc.
- Leverage programming: Use variables, functions, APIs, math and algorithms to create new effects
- Leverage React: Reusable components, Powerful composition, Fast Refresh, Package ecosystem
Example videos
- Remotion Trailer Watch • Source code • The announcement video for Remotion was written in Remotion itself!
- AnySticker Welcome Video Watch • Source code • An in-app explainer video for my app AnySticker.
- Spotify Wrapped Recreated Watch • Tutorial • Source code • A recreation of Spotify Wrapped where you can override all text and images via command line.
- “Game changer or no game changer” intro Watch • Source code • An intro for a quiz show I did with William Candillon.
- “The X in MDX” talk Watch • Source code • A re-recording of this talk using Remotion.
- Redesigning the Scatterplot Watch • Source code • An animated section of Edward R. Tufte’s book The Visual Display of Quantitative Information.
- News Podcast Maker Watch • Source code • A fully automated News Podcast Maker.
Feel free to pull request your creations!
Get started
If you already have Yarn and FFMPEG installed, type
|
1 |
<span class="pl-c1">yarn create video</span> |
to get started. Otherwise, read the installation page in the documentation.
Documentation
Head to remotion.dev to learn the in and outs of Remotion!
Video.tsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
import {Composition} from 'remotion'; import {HelloWorld} from './HelloWorld'; import {Logo} from './HelloWorld/Logo'; import {Subtitle} from './HelloWorld/Subtitle'; import {Title} from './HelloWorld/Title'; export const RemotionVideo: React.FC = () => { return ( <> <Composition id="HelloWorld" component={HelloWorld} durationInFrames={150} fps={30} width={1920} height={1080} defaultProps={{ titleText: 'Welcome to Remotion', titleColor: 'black', }} /> <Composition id="Logo" component={Logo} durationInFrames={200} fps={30} width={1920} height={1080} /> <Composition id="Title" component={Title} durationInFrames={100} fps={30} width={1920} height={1080} defaultProps={{ titleText: 'Welcome to Remotion', titleColor: 'black', }} /> <Composition id="Subtitle" component={Subtitle} durationInFrames={100} fps={30} width={1920} height={1080} /> </> ); }; |
HelloWorld.tsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
import {interpolate, Sequence, useCurrentFrame, useVideoConfig} from 'remotion'; import {Logo} from './HelloWorld/Logo'; import {Subtitle} from './HelloWorld/Subtitle'; import {Title} from './HelloWorld/Title'; export const HelloWorld: React.FC<{ titleText: string; titleColor: string; }> = ({titleText, titleColor}) => { const frame = useCurrentFrame(); const videoConfig = useVideoConfig(); const opacity = interpolate( frame, [videoConfig.durationInFrames - 25, videoConfig.durationInFrames - 15], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', } ); const transitionStart = 25; return ( <div style={{flex: 1, backgroundColor: 'white'}}> <div style={{opacity}}> <Sequence from={0} durationInFrames={videoConfig.durationInFrames}> <Logo transitionStart={transitionStart} /> </Sequence> <Sequence from={transitionStart + 10}> <Title titleText={titleText} titleColor={titleColor} /> </Sequence> <Sequence from={transitionStart + 50}> <Subtitle /> </Sequence> </div> </div> ); }; |
https://github.com/remotion-dev/remotion
