Remotion video with Tailwind

This demo presents ideas on how to design and generate videos with the power of React combined with Remotion.

Watch the resulting video at: https://youtu.be/kHTD5kkEkJc

⭐️ Be sure to star this repository or post a like or comment on YouTube if interested in seeing more Remotion demos and tutorials like this. Pull requests to make this better are also very welcome. :D

Special thanks

This video was made possible by Remotion.

Background music provided courtesy of StreamBeats

Astronomy Picture of the Day courtesy of NASA.

Weather data provided by OpenWeather.

Looking at cell phone photo by jaikishan patel on Unsplash

Looking at laptop photo by bruce mars on Unsplash

Text-to-speech narration provided by murf.ai

"Tea time lady" generated with DALL-E 2 and HeyGen.

Setup

Install Dependencies

npm i

Connect To OpenWeather and NASA APIs

Copy template.env to .env where Remotion will read API access keys for OpenWeather and NASA. See here for more information on how Remotion handles environment variables.

cp template.env .env

Obtain an OpenWeather access key for the weather demo by signing up here. The access key can be found here after login to place in the .env file REMOTION_OPENWEATHER_API_KEY variable. Note: Once the email address is verified, it takes up to two hours for the key to become active. To customize the weather location, customize <Weather ... /> in src/Composition.tsx.

Obtain the NASA access key for the Astronomy Picture of the Day demo by visiting the NASA APIs website and filling out the form. An email will be sent with a verification link. Clicking the link will give access to the API key that can be copied into the .env file's REMOTION_NASA_API_KEY variable.

Background Music Setup

The music used in this project isn't included as part of this repository, yet can be downloaded for free with open licensing to post on YouTube and elsewhere courtesy of StreamBeats.

Visit the audio download page here. Download and copy 9. EZ PZ.wav to public/audio/external/.

StreamBeats Audio (thank you!)

Audio courtesy of StreamBeats, can be downloaded to this folder for personal, YouTube and streaming use:

• 9. EZ PZ.wav
  • Download the song. Move to this folder and ensure name is still "9. EZ PZ.wav" (no name changes for simplicity).

Other Notes

One issue experienced while developing on a Mac was an error when rendering Three.js animations. A work-around for this was to add this line to remotion.config.ts:

Config.setChromiumOpenGlRenderer('angle');

More on this Chrome version issue can be found here. If this addition is causing issues on non-Mac machines, try disabling the line in remotion.config.js.

Run and Render

Start Preview

npm start

Render video

npm run build

Upgrade Remotion

npm run upgrade

Using server-side rendering

This template uses a custom Webpack override. If you are using server-side rendering, you need to import the override function from ./src/webpack-override.ts and pass it to bundle() (if using SSR) and deploySite() (if using Lambda).

Docs

Get started with Remotion by reading the fundamentals page.

Get started with Tailwind by reading the "Utility first" page

Help

We provide help on our Discord server.

Issues

Found an issue with Remotion? File an issue here.

License

Note that for some entities a company license is needed. Read the terms here.