A showreel showcasing the Unsplash profile of Daniel Shapiro, made using Remotion and TypeScript.
This is a GIF of the video. The actual video has audio included in it.
There were three approaches I had in mind initially -
- Creating an animation sequence in the browser and finding a way to programmatically screen-record it
- Using a JSON ⇒ video converter like Shotstack
- Using a video editing library like Remotion
I ended up choosing Remotion since screen capturing would be added work and using a JSON template limits creative liberty (unless we're ready to write thousands of lines of JSON).
- Choosing a theme
The first challenge was deciding the kind of profile I wanted to showcase and the background score. I decided to go with Daniel Shapiro's pictures because of his almost-monochrome style of shots that aren't too loud. This allowed me to pair it with a poppy soundtrack and a snappy video style with quick cuts and a lot of colors to balance out the monochrome pictures. - Animation sequence
I had to leave the viewer with a clear message in a short span of 15 seconds, while also showcasing the photographer's profile. I had to find a sweet-spot between 1) fewer, but longer sequences, and 2) many short sequences. I ended up choosing four 3 second long sequences, as I felt it just short enough to not be boring, while still being long enough to convey the idea.
TheImageStackandCarouselsequences were planned from the beginning. However, planning the third sequence proved to be a challenge. I had to scrape off the idea of showcasing images through a cutout of text. The reason has been elaborated in the Challenges section.
I re-planned the third sequence and decided to go with a fast-paced reel of changing images. - Stylistic choices in presentation
Since the photographs mostly revolved around the theme of travelling - mountains, monuments, deserts, vehicles, etc., I wanted the images to look like Polaroids. The textured backdrop in the beginning and at the end aims to create the feel of keeping the images on a wall/table-top. Overall, I wanted the showreel to elicit the excitement of planning a trip. - Preloading assets
Fetching images and the audio track (even from the local directory) was creating rendering issues since the initial sequence needs a lot of pictures to load one after the other. I decided to preload all assets at the beginning itself.
- Using cutout text
Remotion doesn't allow URLs in the style attribute. Instead, it requires us to use theImgwrapper and set its size to cover the screen to use it as a background image. This proved to be a hindrance when I wanted to add a cutout text that shows the image that's behind it ( the conventional method is setting a background image and using eitherbackground-clipormix-blend-mode : screen) - Syncing visuals with audio
Audio tracks in standard video editing softwares usually show a sound spectrum, which makes it easy to sync animations with the beat. The lack of a sound spectrum made the syncing process ad hoc and inconvenient - Managing timeline
Currently, the timeline is created by storing the start time and duration of each sequence in an object. The numbers, however, were also decided in an ad hoc fashion, and I wasn't able to find a way to time the video in a principled manner
To run this project locally, you will need Node.js >= 18.0.0 (we use ESM in a script), and a package manager (npm/pnpm/yarn).
- First, clone the repository, cd to its root and install dependencies:
$ git clone https://github.com/debanwita27/Unsplash-Showreel
$ cd Unsplash-Showreel
$ npm install- Next, we need to download the assets used in the video by running a script (
scripts/fetch-assets.mjs):
Ensure that:- You have Node v18 or higher (Since we use the built-in
fetch, top-levelawait, and ESM imports). - You're in the root directory of the project.
- You have Node v18 or higher (Since we use the built-in
$ node ./scripts/fetch-assets.mjs- Now, you can preview the video in the browser using:
$ npm start- To render the final MP4 output:
$ npm run build