juhiechandra / Remotion-TS-HO

Unsplash Video

Headout Assignment

Table of Contents

1. Outcomes Expected
2. Process
3. Decisions
4. Demo Video
5. Instructions To Setup
6. References
7. Thanking Note

Outcomes Expected

• Use Unsplash API: Use Unsplash API to fetch at least 5 images from a chosen profile and store them in a local directory in the project.

• Create a showreel: Use any tool of your choice to create a 10-15 second video that showcases the images. Add animation, transition, sound effects, and export the video in a common format.

• Document your process: Create a README file that explains your approach to the assignment, any decisions made, and instructions on how to run the script and build the video. Publish the assignment on a public repository on your Github/Gitlab profile.

Process

Decisions

How to go about fetching data:

Using static images in video or using @remotion/preload:

How to go about integrating script and video app:

Demo Video

This video is rendered from this codebase Youtube Video

Instructions

Setup Locally

To set up this project on your local system, follow these steps:

1. Clone the repository using the following command:

git clone https://github.com/juhiechandra/Headout-Assignment.git

2. Install Dependencies

npm i

3. Create a profile on Unsplash for Developers

4. Create your Unsplash API Application

5. Get the Access key. Replace "ENTER_YOUR_CLIENT_ID" in /scripts/index.js with it.

const collectionResponse = await axios.get('https://api.unsplash.com/search/collections?query=winter&client_id=ENTER_YOUR_CLIENT_ID');

const photoResponse = await axios.get(`https://api.unsplash.com/collections/${collectionId}/photos?client_id=ENTER_YOUR_CLIENT_ID&per_page=5&orientation=landscape&content_filter=low`);

6.Change Output Path of /scripts/index.js to Public folder in your local system

  const outputPath = '/Users/juhiechandra/Interns-assign/my-video/public';
  const collectionName = 'image';

7. Fetch Important Scripts:

npm run fetch

8. Start Preview

npm start

9. Render video

npm run build

10. Upgrade Remotion

npm run upgrade

11. You can modify search query to any theme you like.

12. You can modify Intro Text in /src/Intro.jsx to any theme you like. <div style={{...}}>THEME OF YOUR CHOICE</div>

References

1. Remotion Docs
2. Node.js Docs
3. Fireship Tutorial on Remotion

Thanking Note

I'd sincerely like to thank Sid for being patient with throughout this assignment. Happy Headouting!⛱️🏖️