owntheweb / remotion-video-demo

7 stars 1 forks source link

Remotion video with Tailwind

Animated Remotion Logo

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](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](https://remotion.dev). Background music provided courtesy of [StreamBeats](https://www.senpai.tv/streambeats/) Astronomy Picture of the Day courtesy of [NASA](https://api.nasa.gov/). Weather data provided by [OpenWeather](https://home.openweathermap.org/). [Looking at cell phone photo](https://github.com/owntheweb/remotion-video-demo/blob/main/public/images/jaikishan-patel-T9H8anqa458-unsplash-cropped.jpg) by [jaikishan patel](https://unsplash.com/@magictype) on [Unsplash](https://unsplash.com/photos/T9H8anqa458) [Looking at laptop photo](https://github.com/owntheweb/remotion-video-demo/blob/main/public/images/bruce-mars-xj8qrWvuOEs-unsplash-cropped.jpg) by [bruce mars](https://unsplash.com/@brucemars) on [Unsplash](https://unsplash.com/photos/xj8qrWvuOEs) Text-to-speech narration provided by [murf.ai](https://murf.a) "Tea time lady" generated with [DALL-E 2](https://openai.com/dall-e-2) and [HeyGen](https://www.heygen.com/affiliate-program). ## Setup **Install Dependencies** ```console 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](https://www.remotion.dev/docs/env-variables) for more information on how Remotion handles environment variables. ```console cp template.env .env ``` Obtain an OpenWeather access key for the weather demo by [signing up here](https://home.openweathermap.org/users/sign_up). The access key can be [found here](https://home.openweathermap.org/api_keys) 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 `` in `src/Composition.tsx`. Obtain the NASA access key for the Astronomy Picture of the Day demo by visiting the [NASA APIs](https://api.nasa.gov/) 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](https://www.senpai.tv/streambeats/). Visit the [audio download page here](ttps://drive.google.com/drive/folders/1IoVhvfigg25IEaW-QNMGuG72U_pxcoI8). Download and copy `9. EZ PZ.wav` to `public/audio/external/`. ## StreamBeats Audio (thank you!) Audio courtesy of [StreamBeats](https://www.senpai.tv/streambeats/), can be downloaded to this folder for personal, YouTube and streaming use: - [9. EZ PZ.wav](https://drive.google.com/drive/folders/1IoVhvfigg25IEaW-QNMGuG72U_pxcoI8) - 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](https://oss.issuehunt.io/r/remotion-dev/remotion/issues/1761). If this addition is causing issues on non-Mac machines, try disabling the line in `remotion.config.js`. ## Run and Render **Start Preview** ```console npm start ``` **Render video** ```console npm run build ``` **Upgrade Remotion** ```console npm run upgrade ``` ## Using server-side rendering This template uses a [custom Webpack override](https://www.remotion.dev/docs/webpack). If you are using server-side rendering, you need to import the override function from `./src/webpack-override.ts` and pass it to [`bundle()`](https://www.remotion.dev/docs/bundle) (if using SSR) and [`deploySite()`](https://www.remotion.dev/docs/lambda/deploysite) (if using Lambda). ## Docs Get started with Remotion by reading the [fundamentals page](https://www.remotion.dev/docs/the-fundamentals). Get started with Tailwind by reading the ["Utility first" page](https://tailwindcss.com/docs/utility-first) ## Help We provide help [on our Discord server](https://remotion.dev/discord). ## Issues Found an issue with Remotion? [File an issue here](https://github.com/remotion-dev/remotion/issues/new). ## License Note that for some entities a company license is needed. Read [the terms here](https://github.com/remotion-dev/remotion/blob/main/LICENSE.md).