Use Remotion and React to create custom videos related to Mother’s Day.
Technology is a tool that is constantly evolving and advancing, leading to significant changes in the way art and entertainment are created and consumed. Additionally, technology has allowed celebrations and festivities to feel more globalized and accessible to everyone, leading to new ways of using these occasions to showcase the capabilities of technology and how they can be used to connect people.
Mother’s Day is an international celebration that can be leveraged to create an interactive platform for personalized video creation, using technology to show love and gratitude towards mothers in an innovative and emotionally significant way. In this way, technology becomes a tool for fostering human connection and strengthening interpersonal relationships, demonstrating its importance and relevance in our current society. This project has been inspired by GitHubUnwrapped.
Remotion:
Remotion is an open-source browser-based video creation tool that allows users to create and edit videos using React and JavaScript components. With Remotion, users can create animated videos, screenshots, and other types of videos using a simple and intuitive interface. It is particularly useful for developers and designers who want to create videos for presentations, tutorials, and other purposes.
Create a project with Remotion
To create a project with Remotion, you’ll need to have Node.js and npm (Node Package Manager) installed on your computer. Here are the steps to create a new project:
- Open your terminal or command prompt and navigate to the directory where you want to create your project to run the following command to create a new Remotion project:
npx remotion create my-project- Next, navigate to the newly created directory by running.
cd my-project- Start the Remotion preview server:
npm startThis will start the development server and open a preview window in your browser. For more information on the uses of Remotion, visit the official site or watch this video.
React with Typescript:
React with TypeScript is a combination of the React JavaScript library and the TypeScript programming language. It allows developers to build scalable and robust applications using the React component model with the added benefits of TypeScript’s type-checking, interface declarations, and other features.
Advantages:
- Type safety: TypeScript helps catch type-related errors at compile time, making it easier to catch and fix bugs before they make it into production.
- Improved documentation: TypeScript provides a clear and concise way to define the structure and interfaces of components and functions, making it easier for developers to understand and use them.
- Enhanced developer experience: TypeScript provides features like autocomplete and type hinting, which help developers write code more quickly and accurately.
- Improved scalability: TypeScript makes it easier to manage and scale large codebases, particularly as applications become more complex.
Create a React project with Typescript
According to Official React Support, it’s recommended to choose one of the popular React-powered frameworks in the community, such as Next.js, Remix, or Gatsby. It is no longer recommended to use CRA (Create React App) that is to say without any framework, this is because there are some optimization problems and when creating a larger application, the resources that a Framework already has will be very limited.
Note: Make sure you have Node.js and npm installed on your machine.
Create a React project with Typescript in Next.js
- Open a terminal and navigate to the directory where you want to create your project, then run the following command to create a new Next.js app with Typescript.
npx create-next-app my-app --typescript- Once the project is created, navigate to the project directory:
cd my-app- Run the following command to start the development server:
npm run devCreate a React project with Typescript in Remix
- Open a terminal and navigate to the directory where you want to create your project, then run the following command to create a new Remix app with Typescript.
npm init remix my-app --template typescript- Once the project is created, navigate to the project directory:
cd my-app- Run the following command to install the project dependencies:
npm install- Run the following command to start the development server:
npm run devCreate a React project with Typescript in Gatsby
- Open a terminal and navigate to the directory where you want to create your project, then run the following command to create a new Gatsby app with Typescript.
npx gatsby new my-app https://github.com/gatsbyjs/gatsby-starter-typescript- Once the project is created, navigate to the project directory:
cd my-app- Run the following command to start the development server:
npm run developRemotion in an existing project
If you want to install Remotion in a React project with Typescript that you are developing, you need to follow the steps below:
- Open a terminal and navigate to the directory where your project is located and run the following command.
npm i @remotion/cli remotion- If you want to embed or render a Remotion video in your React app, also install:
> npm i @remotion/player remotion
> npm i @remotion/renderer remotionThen, create a new folder for the Remotion files, it is recommended to use the name “remotion” for the folder. If you want to see the preview of the remotion video, use the following command:
npx remotion preview src/remotion/index.tsSuppose we have the following folder organization.
└── src/
├── remotion/
│ ├── index.ts
│ ├── MyComp.tsx
│ └── Video.tsx
└── app/
└── App.tsx- App.tsx
import { Player } from "@remotion/player";
import { MyComp } from "./remotion/MyComp";
export const App: React.FC = () => {
return (
<Player
component={MyComp}
inputProps={{ text: "World" }}
durationInFrames={120}
compositionWidth={1920}
compositionHeight={1080}
fps={30}
style={{
width: 1280,
height: 720,
margin: '50px auto',
}}
controls
/>
);
};
export default App;Inside the remotion folder:
- index.ts
import { registerRoot } from "remotion";
import { MyVideo } from "./Video";
registerRoot(MyVideo);- Video.tsx
import { Composition } from "remotion";
import { MyComp } from "./MyComp";
export const MyVideo = () => {
return (
<>
<Composition
component={MyComp}
durationInFrames={120}
width={1920}
height={1080}
fps={30}
id="my-comp"
defaultProps={{ text: "World" }}
/>
</>
);
};- MyComp.tsx
export const MyComp: React.FC<{ text: string }> = ({ text }) => {
return (
<div
style={{
width: "100%",
height: "100%",
background: "radial-gradient(circle, rgb(168, 165, 165) 0%,rgb(31, 30, 30) 0%, rgb(0, 0, 0) 100%)",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<h1 style={{
fontSize: 100,
color: "white",
}}>Hello {text}!</h1>
</div>
)
};And if we use the indicated one to run the project locally, we have the following:
To get the background of that color, the css of the <body> was modified.
background: radial-gradient(circle, rgb(0, 0, 0) 0%, rgb(0, 0, 59) 0%, rgb(2, 41, 128) 100%);For more information on the implementation and more exercises, it is recommended to visit the Remotion documentation page:
Code sharing | Remotion | Make videos programmatically in React
A practical example is found in the following Github repository in which a personalized video is generated with Remotion for Mother’s Day.
Note from the author:
Thanks for reading this article. I hope it has met your expectations. 🤓You can also follow me on my LinkedIn account. 😀
Do you need some help?
We are ready to listen to you. If you need some help creating the next big thing, you can contact our team on our website or at info@jrtec.io
