Remotion: Make a video of the original Kanto pokemon *from code* Part 1
Table of contents
Let's make a video of the original 151 pokemon using nothing but React and Remotion!
video.mp4 from Raghav Singh Gulia on Vimeo.
Starting the project
To start:
npm init video
Video.tsx
Now, hop onto Video.tsx
. Let's make the video 20 fps
. You can increase or decrease this if you want. Also, we want every Pokemon to be shown for 2 seconds, and there are 151 Pokemon, so the total number of frames will be 20 x 151 x 2
frames = 3020 frames
.
So the Video.tsx
should look like this:
import {Composition} from 'remotion';
import {MyComposition} from './Composition';
export const RemotionVideo: React.FC = () => {
return (
<>
<Composition
id="Empty"
component={MyComposition}
durationInFrames={3020}
fps={20}
width={1920}
height={1080}
/>
</>
);
};
font.css
Let's make a file for the font. I'll use Press Start 2P for this project. It's nice and pixelated.
fonts.google.com/specimen/Press+Start+2P?qu..
Now, let's import the font.
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
and set the font of h1
to it:
h1 {
font-family: 'Press Start 2P';
color: white;
}
I also changed the color to white ๐จ
An overview of PokeApi
Here are the official docs: pokeapi.co/docs/v2
Basically, it's a LEGENDARY API with unlimited requests and a lot of info about Pokemons! The endpoints are like this:
https://pokeapi.co/api/v2/pokemon/bulbasaur
OR
https://pokeapi.co/api/v2/pokemon/1
.
That's part 1. It was short but it was a start. Hope you like it!