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 2frames = 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!

---