Remotion | Make videos programmatically Blog https://www.remotion.dev/learn Remotion | Make videos programmatically Blog Thu, 22 Dec 2022 00:00:00 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed en <![CDATA[Recreating the Apple fireworks animation]]> https://www.remotion.dev/learn/apple-wow https://www.remotion.dev/learn/apple-wow Thu, 22 Dec 2022 00:00:00 GMT "---\nslug: apple-wow\ntitle: Recreating the Apple fireworks animation\nauthors:\n - name: Mehmet Ademi\n title: Business Developer\n url: https://github.com/MehmetAdemi\n image_url: /img/team/mehmet.png\n - name: Jonny Burger\n title: Chief Hacker\n url: https://github.com/JonnyBurger\n image_url: /img/team/jonny.png\n---\n\nimport Tabs from '@theme/Tabs';\nimport TabItem from '@theme/TabItem';\nimport {AppleFireworksTutorial} from '../src/components/tutorials';\n\nLearn how to create an animation that Apple has on its website during the holiday season with this beginner-friendly Remotion tutorial!\n\n\n\n## Video version\n\nThis tutorial is also available as a video version:\n\n\n\n## Source code\n\n[GitHub](https://github.com/remotion-dev/apple-wow-tutorial)\n\n## Getting started\n\nStart a new Remotion project and select the blank template:\n\n\n\n\n```bash\nnpm init video --blank\n```\n\n \n \n\n```bash\npnpm create video --blank\n```\n\n \n\n \n\n```bash\nyarn create video --blank\n```\n\n \n\n\n## Composition setup\n\nA [``](https://www.remotion.dev/docs/terminology/composition) defines the dimensions and duration of the video. In the `src/Root.tsx` file, adjust the width and height to the following:\n\n```tsx twoslash title=\"src/Root.tsx\"\nimport {Composition} from 'remotion';\nexport const MyComposition: React.FC = () => null;\n// ---cut---\nexport const RemotionRoot: React.FC = () => {\n return (\n <>\n \n \n );\n};\n```\n\n## Create a background\n\nCreate a new file `src/Background.tsx` and return a background with linear gradient:\n\n```tsx twoslash title=\"src/Background.tsx\"\nimport React from 'react';\nimport {AbsoluteFill} from 'remotion';\n\nexport const Background: React.FC = () => {\n return (\n \n );\n};\n```\n\nAdd the created background to the `` component, which can be found in the file `src/Composition.tsx`. This file will contain all the components that you create in this tutorial.\n\n```tsx twoslash title=\"src/Composition.tsx\"\n// @filename: Background.tsx\nexport const Background: React.FC = () => null;\n\n// @filename: Composition.tsx\nimport React from 'react';\nimport {AbsoluteFill} from 'remotion';\nimport {Background} from './Background';\n// ---cut---\n\nexport const MyComposition: React.FC = () => {\n return (\n \n \n \n );\n};\n```\n\nThis results in the following:\n\n\n\n## Render a dot\n\nRender a white dot by creating a new file `src/Dot.tsx` and return a centered circle.\n\n```tsx twoslash title=\"src/Dot.tsx\"\nimport React from 'react';\nimport {AbsoluteFill} from 'remotion';\n\nexport const Dot: React.FC = () => {\n return (\n \n \n \n );\n};\n```\n\nAdd the `` in your main composition `src/Composition.tsx`:\n\n```tsx twoslash title=\"src/Composition.tsx\"\n// @filename: Dot.tsx\nexport const Dot: React.FC = () => null;\n// @filename: Background.tsx\nexport const Background: React.FC = () => null;\n\n// @filename: Composition.tsx\nimport React from 'react';\nimport {AbsoluteFill} from 'remotion';\nimport {Background} from './Background';\nimport {Dot} from './Dot';\n// ---cut---\n\nexport const MyComposition: React.FC = () => {\n return (\n \n \n \n \n );\n};\n```\n\nNow we got a white dot on top of our background:\n\n\n\n## Animate the dot\n\nLet's apply some animation to the white dot we created above. We create another component called `` in a new file `src/Shrinking.tsx`, which then wraps the dot in the main composition `src/Composition.tsx`.\n\n```tsx title=\"src/Shrinking.tsx\"\nimport React from 'react';\nimport {AbsoluteFill, interpolate, useCurrentFrame} from 'remotion';\n\nexport const Shrinking: React.FC<{\n children: React.ReactNode;\n}> = ({children}) => {\n const frame = useCurrentFrame();\n\n return (\n \n {children}\n \n );\n};\n```\n\nAdd the `` component in your main composition `src/Composition.tsx`:\n\n```tsx twoslash\n// @filename: Shrinking.tsx\nexport const Shrinking: React.FC<{\n children: React.ReactNode;\n}> = () => null;\n// @filename: Background.tsx\nexport const Background: React.FC = () => null;\n// @filename: Dot.tsx\nexport const Dot: React.FC = () => null;\n\n// @filename: Composition.tsx\nimport React from 'react';\nimport {AbsoluteFill} from 'remotion';\nimport {Background} from './Background';\nimport {Dot} from './Dot';\nimport {Shrinking} from './Shrinking';\n\n// ---cut---\n\nexport const MyComposition: React.FC = () => {\n return (\n \n \n \n \n \n \n );\n};\n```\n\nNow, you have some action to show. By using `` in your main composition you have created a scale out effect:\n\n\n\n## Move the dot\n\nNext, create a component called ``. This component has a spring animation, which by default goes from zero to one, and has a duration of four seconds (`durationInFrames: 120`) in the code snippet below:\n\n```tsx twoslash title=\"src/Move.tsx\"\nimport React from 'react';\nimport {AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig} from 'remotion';\n\nexport const Move: React.FC<{\n children: React.ReactNode;\n}> = ({children}) => {\n const {fps} = useVideoConfig();\n const frame = useCurrentFrame();\n\n const down = spring({\n fps,\n frame,\n config: {\n damping: 200,\n },\n durationInFrames: 120,\n });\n\n const y = interpolate(down, [0, 1], [0, -400]);\n\n return (\n \n {children}\n \n );\n};\n```\n\nAdd the `` component to your composition `src/Composition.tsx`. You get a nice animation by combining the effect of moving and shrinking by surrounding the shrinking dot in the `` component:\n\n```tsx twoslash title=\"src/Composition.tsx\"\n// @filename: Move.tsx\nexport const Move: React.FC<{\n children: React.ReactNode;\n}> = ({children}) => null;\n// @filename: Shrinking.tsx\nexport const Shrinking: React.FC<{\n children: React.ReactNode;\n}> = () => null;\n// @filename: Background.tsx\nexport const Background: React.FC = () => null;\n// @filename: Dot.tsx\nexport const Dot: React.FC = () => null;\n\n// @filename: Composition.tsx\nimport React from 'react';\nimport {AbsoluteFill} from 'remotion';\nimport {Background} from './Background';\nimport {Dot} from './Dot';\nimport {Move} from './Move';\nimport {Shrinking} from './Shrinking';\n\n// ---cut---\n\nexport const MyComposition = () => {\n return (\n \n \n \n \n \n \n \n \n );\n};\n```\n\nAnd up goes the dot:\n\n\n\n## Duplicate the moving dot\n\nHere it gets a little bit trickier, but the following steps are going to make your animation a lot more entertaining. First, you add a `delay` prop into the `` component and then change the `frame` parameter of your `spring()` function.\n\n```tsx twoslash title=\"src/Move.tsx\"\nimport React from 'react';\nimport {AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig} from 'remotion';\n\nexport const Move: React.FC<{\n children: React.ReactNode;\n delay: number;\n}> = ({children, delay}) => {\n const {fps} = useVideoConfig();\n const frame = useCurrentFrame();\n\n const down = spring({\n fps,\n frame: frame - delay,\n config: {\n damping: 200,\n },\n durationInFrames: 120,\n });\n\n const y = interpolate(down, [0, 1], [0, -400]);\n\n return (\n \n {children}\n \n );\n};\n```\n\nNow, let's create a `` component. It takes some React children and duplicates them. The component adds a delay to each subsequent dot so they don't start all at once. Each dot will have a scale applied to it, so that each dot is smaller than the previous one.\n\nPut the previously created `` component within the `` component.\nThe order is crucial here. Things are done from inside out:\n\n1. Apply a scale so that the dots become smaller over time.\n2. Apply the move animation.\n3. Apply a delay between the animation start of each dot by using Remotion's `` component.\n\n```tsx twoslash title=\"src/Trail.tsx\"\n// @filename: Move.tsx\nexport const Move: React.FC<{\n children: React.ReactNode;\n delay: number;\n}> = () => null;\n\n// @filename: Trail.tsx\n// ---cut---\nimport React from 'react';\nimport {AbsoluteFill, Sequence} from 'remotion';\nimport {Move} from './Move';\n\nexport const Trail: React.FC<{\n amount: number;\n children: React.ReactNode;\n}> = ({amount, children}) => {\n return (\n \n {new Array(amount).fill(true).map((a, i) => {\n return (\n \n \n \n \n {children}\n \n \n \n \n );\n })}\n \n );\n};\n```\n\nIn your main component, you now replace the `` component with the `` component:\n\n```tsx twoslash title=\"src/Composition.tsx\"\n// @filename: Move.tsx\nexport const Move: React.FC<{\n children: React.ReactNode;\n delay: number;\n}> = () => null;\n// @filename: Shrinking.tsx\nexport const Shrinking: React.FC<{\n children: React.ReactNode;\n}> = () => null;\n// @filename: Background.tsx\nexport const Background: React.FC<{}> = () => null;\n// @filename: Dot.tsx\nexport const Dot: React.FC<{}> = () => null;\n// @filename: Trail.tsx\nexport const Trail: React.FC<{\n children: React.ReactNode;\n amount: number;\n}> = () => null;\n\n// @filename: Composition.tsx\nimport React from 'react';\nimport {AbsoluteFill} from 'remotion';\nimport {Background} from './Background';\nimport {Dot} from './Dot';\nimport {Shrinking} from './Shrinking';\nimport {Trail} from './Trail';\n// ---cut---\n\nexport const MyComposition = () => {\n return (\n \n \n \n \n \n \n \n \n );\n};\n```\n\nAnd this is how your animation with the duplicated dots should look like:\n\n\n\n## Duplicating markup and arranging it in a circle\n\nNow let's create a `` component. It takes children and renders them for example 10 times and applies a rotation to each instance. It's worth mentioning here that a full rotation amounts to 2π, while `(i/AMOUNT)` represents a factor between 0 and 1.\n\n```tsx twoslash title=\"src/Explosion.tsx\"\nimport React from 'react';\nimport {AbsoluteFill} from 'remotion';\n\nconst AMOUNT = 10;\n\nexport const Explosion: React.FC<{\n children: React.ReactNode;\n}> = ({children}) => {\n return (\n \n {new Array(AMOUNT).fill(true).map((_, i) => {\n return (\n \n {children}\n \n );\n })}\n \n );\n};\n```\n\n`` gets put inside the `` component. Your main component (`src/Composition.tsx`) looks like this:\n\n```tsx twoslash title=\"src/Composition.tsx\"\n// @filename: Move.tsx\nexport const Move: React.FC<{\n children: React.ReactNode;\n delay: number;\n}> = () => null;\n// @filename: Shrinking.tsx\nexport const Shrinking: React.FC<{\n children: React.ReactNode;\n}> = () => null;\n// @filename: Explosion.tsx\nexport const Explosion: React.FC<{\n children: React.ReactNode;\n}> = () => null;\n// @filename: Background.tsx\nexport const Background: React.FC<{}> = () => null;\n// @filename: Dot.tsx\nexport const Dot: React.FC<{}> = () => null;\n// @filename: Trail.tsx\nexport const Trail: React.FC<{\n children: React.ReactNode;\n amount: number;\n}> = () => null;\n\n// @filename: MyComposition.tsx\n// ---cut---\nimport React from 'react';\nimport {AbsoluteFill} from 'remotion';\nimport {Background} from './Background';\nimport {Dot} from './Dot';\nimport {Explosion} from './Explosion';\nimport {Shrinking} from './Shrinking';\nimport {Trail} from './Trail';\n// ---cut---\n\nexport const MyComposition = () => {\n return (\n \n \n \n \n \n \n \n \n \n \n );\n};\n```\n\nThe animated explosion should look like this:\n\n\n\n## Cleanup\n\nYou have created a bunch of files until now, let's put most of them together in one file called `src/Dots.tsx`. Extract `` and it's children into a new separate component called Dots.\n\n```tsx twoslash title=\"src/Dots.tsx\"\n// @filename: Move.tsx\nexport const Move: React.FC<{\n children: React.ReactNode;\n delay: number;\n}> = () => null;\n// @filename: Shrinking.tsx\nexport const Shrinking: React.FC<{\n children: React.ReactNode;\n}> = () => null;\n// @filename: Explosion.tsx\nexport const Explosion: React.FC<{\n children: React.ReactNode;\n}> = () => null;\n// @filename: Background.tsx\nexport const Background: React.FC<{}> = () => null;\n// @filename: Dot.tsx\nexport const Dot: React.FC<{}> = () => null;\n// @filename: Trail.tsx\nexport const Trail: React.FC<{\n children: React.ReactNode;\n amount: number;\n}> = () => null;\n\n// @filename: MyComposition.tsx\n// ---cut---\nimport React from 'react';\nimport {Sequence} from 'remotion';\nimport {Dot} from './Dot';\nimport {Explosion} from './Explosion';\nimport {Shrinking} from './Shrinking';\nimport {Trail} from './Trail';\n\nexport const Dots: React.FC = () => {\n return (\n \n \n \n \n \n \n \n \n \n );\n};\n```\n\nReplace the `` with the new `` component:\n\n```tsx twoslash\n// @filename: Background.tsx\nexport const Background: React.FC<{}> = () => null;\n// @filename: Dots.tsx\nexport const Dots: React.FC<{}> = () => null;\n\n// @filename: MyComposition.tsx\nimport React from 'react';\nimport {AbsoluteFill} from 'remotion';\nimport {Background} from './Background';\nimport {Dots} from './Dots';\n// ---cut---\n\nexport const MyComposition = () => {\n return (\n \n \n \n \n );\n};\n```\n\nNothing has changed on the animation itself:\n\n\n\n## Adding hearts and stars\n\nTo make the animation more exciting, let's add some stars and hearts in different colors. To do this, we need to basically repeat the previous steps. Besides the ``component, we'll add three more components in the next few steps.\n\nLet's start with red hearts. First you render a red heart by creating a new file `src/RedHeart.tsx` and return a centered red heart emoji.\n\n```tsx twoslash title=\"src/RedHeart.tsx\"\nimport React from 'react';\nimport {AbsoluteFill} from 'remotion';\n\nexport const RedHeart: React.FC = () => {\n return (\n \n ❤️\n \n );\n};\n```\n\nEffects like ``, `` and `` need to be applied to that red heart. We do this in a new component called RedHearts.\n\nConsider s that we need to add an offset to ``, otherwise they would be positioned the same as the ``.\n\nWe change the position by giving the red hearts a bigger radius than the dots, and apply a `100px` translation. Also, we add a short delay of 5 frames to the `` component:\n\n```tsx twoslash title=\"src/RedHearts.tsx\"\n// @filename: Move.tsx\nexport const Move: React.FC<{\n children: React.ReactNode;\n delay: number;\n}> = () => null;\n// @filename: Shrinking.tsx\nexport const Shrinking: React.FC<{\n children: React.ReactNode;\n}> = () => null;\n// @filename: Explosion.tsx\nexport const Explosion: React.FC<{\n children: React.ReactNode;\n}> = () => null;\n// @filename: Background.tsx\nexport const Background: React.FC<{}> = () => null;\n// @filename: Dot.tsx\nexport const Dot: React.FC<{}> = () => null;\n// @filename: RedHeart.tsx\nexport const RedHeart: React.FC<{}> = () => null;\n// @filename: Trail.tsx\nexport const Trail: React.FC<{\n children: React.ReactNode;\n extraOffset: number;\n amount: number;\n}> = () => null;\n\n// @filename: MyComposition.tsx\n// ---cut---\nimport React from 'react';\nimport {AbsoluteFill} from 'remotion';\nimport {Explosion} from './Explosion';\nimport {Move} from './Move';\nimport {RedHeart} from './RedHeart';\nimport {Shrinking} from './Shrinking';\n\nexport const RedHearts: React.FC = () => {\n return (\n \n \n \n \n \n \n \n \n \n );\n};\n```\n\nWe do the same to get some yellow hearts in our animation:\n\n```tsx twoslash title=\"src/YellowHeart.tsx\"\nimport React from 'react';\nimport {AbsoluteFill} from 'remotion';\n\nexport const YellowHeart: React.FC = () => {\n return (\n \n 💛\n \n );\n};\n```\n\nFor the yellow hearts we are going to change the position by applying a translation of `50px` and adding a delay of 20 frames to the `` component:\n\n```tsx twoslash title=\"src/YellowHearts.tsx\"\n// @filename: Move.tsx\nexport const Move: React.FC<{\n children: React.ReactNode;\n delay: number;\n}> = () => null;\n// @filename: Shrinking.tsx\nexport const Shrinking: React.FC<{\n children: React.ReactNode;\n}> = () => null;\n// @filename: Explosion.tsx\nexport const Explosion: React.FC<{\n children: React.ReactNode;\n}> = () => null;\n// @filename: Background.tsx\nexport const Background: React.FC<{}> = () => null;\n// @filename: YellowHeart.tsx\nexport const YellowHeart: React.FC<{}> = () => null;\n// @filename: Dot.tsx\nexport const Dot: React.FC<{}> = () => null;\n// @filename: RedHeart.tsx\nexport const RedHeart: React.FC<{}> = () => null;\n// @filename: Trail.tsx\nexport const Trail: React.FC<{\n children: React.ReactNode;\n extraOffset: number;\n amount: number;\n}> = () => null;\n\n// @filename: MyComposition.tsx\n// ---cut---\nimport React from 'react';\nimport {AbsoluteFill} from 'remotion';\nimport {Explosion} from './Explosion';\nimport {Move} from './Move';\nimport {Shrinking} from './Shrinking';\nimport {YellowHeart} from './YellowHeart';\n\nexport const YellowHearts: React.FC = () => {\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n};\n```\n\nYour main composition should look like this:\n\n\n\n
\n
\n\nIn addition to the dots and hearts let's also add stars.\n\nCreate a new file `src/Star.tsx` and return a centered star emoji.\n\n```tsx twoslash title=\"src/Star.tsx\"\nimport React from 'react';\nimport {AbsoluteFill} from 'remotion';\n\nexport const Star: React.FC = () => {\n return (\n \n ⭐\n \n );\n};\n```\n\nConsider that we need to change the positioning of the stars, otherwise they would be on top of the ``.\n\nLet's give `` an `extraOffset` prop, so the stars can start more outwards than the dots.\n\nAn `extraOffset` of 100 for the stars leads to the same circumference at the beginning and end as the red hearts have. Here is the adjusted ``:\n\n```tsx twoslash title=\"src/Trail.tsx\"\n// @filename: Move.tsx\nexport const Move: React.FC<{\n children: React.ReactNode;\n delay: number;\n}> = () => null;\n\n// @filename: Trail.tsx\n// ---cut---\nimport React from 'react';\nimport {AbsoluteFill, Sequence} from 'remotion';\nimport {Move} from './Move';\n\nexport const Trail: React.FC<{\n amount: number;\n extraOffset: number;\n children: React.ReactNode;\n}> = ({amount, extraOffset, children}) => {\n return (\n \n {new Array(amount).fill(true).map((a, i) => {\n return (\n \n \n \n \n {children}\n \n \n \n \n );\n })}\n \n );\n};\n```\n\nEffects like ``, the new `` and `` need to be applied to the star we created above. Additionally we also add some rotation. We do all of this in a new component called Stars:\n\n```tsx twoslash title=\"src/Stars.tsx\"\n// @filename: Move.tsx\nexport const Move: React.FC<{\n children: React.ReactNode;\n delay: number;\n}> = () => null;\n// @filename: Shrinking.tsx\nexport const Shrinking: React.FC<{\n children: React.ReactNode;\n}> = () => null;\n// @filename: Explosion.tsx\nexport const Explosion: React.FC<{\n children: React.ReactNode;\n}> = () => null;\n// @filename: Background.tsx\nexport const Background: React.FC<{}> = () => null;\n// @filename: Dot.tsx\nexport const Dot: React.FC<{}> = () => null;\n// @filename: Star.tsx\nexport const Star: React.FC<{}> = () => null;\n// @filename: Trail.tsx\nexport const Trail: React.FC<{\n children: React.ReactNode;\n extraOffset: number;\n amount: number;\n}> = () => null;\n\n// @filename: MyComposition.tsx\n// ---cut---\nimport React from 'react';\nimport {AbsoluteFill} from 'remotion';\nimport {Explosion} from './Explosion';\nimport {Shrinking} from './Shrinking';\nimport {Star} from './Star';\nimport {Trail} from './Trail';\n\nexport const Stars: React.FC = () => {\n return (\n \n \n \n \n \n \n \n \n \n );\n};\n```\n\nHere is how the almost complete firework should look like:\n\n\n\n## Slow motion effect\n\nLastly let's apply a slow motion effect to the firework. For this, create a new file `src/SlowedTrail.tsx`. It should contain a component called Slowed and a helper function `remapSpeed()` which will apply different speed levels to the firework. In the code snippet below a speed of 1.5 is applied until frame 20, afterwards the speed slows down to 0.5.\n\n```tsx twoslash title=\"src/SlowedTrail.tsx\"\nimport React from 'react';\nimport {Freeze, interpolate, useCurrentFrame} from 'remotion';\n\n// remapSpeed() is a helper function for the component that takes a frame number and a speed\nconst remapSpeed = ({frame, speed}: {frame: number; speed: (fr: number) => number}) => {\n let framesPassed = 0;\n for (let i = 0; i <= frame; i++) {\n framesPassed += speed(i);\n }\n\n return framesPassed;\n};\n\nexport const Slowed: React.FC<{\n children: React.ReactNode;\n}> = ({children}) => {\n const frame = useCurrentFrame();\n const remappedFrame = remapSpeed({\n frame,\n speed: (f) =>\n interpolate(f, [0, 20, 21], [1.5, 1.5, 0.5], {\n extrapolateRight: 'clamp',\n }),\n });\n\n return {children};\n};\n```\n\nIn the main component, wrap all moving dots, hearts and stars in the component ``. As you sure can tell by now, everything is very composable:\n\n```tsx twoslash title=\"src/Composition.tsx\"\n// @filename: Move.tsx\nexport const Move: React.FC<{\n children: React.ReactNode;\n delay: number;\n}> = () => null;\n// @filename: Shrinking.tsx\nexport const Shrinking: React.FC<{\n children: React.ReactNode;\n}> = () => null;\n// @filename: Stars.tsx\nexport const Stars: React.FC<{}> = () => null;\n// @filename: Background.tsx\nexport const Background: React.FC<{}> = () => null;\n// @filename: Dots.tsx\nexport const Dots: React.FC<{}> = () => null;\n// @filename: RedHearts.tsx\nexport const RedHearts: React.FC<{}> = () => null;\n// @filename: YellowHearts.tsx\nexport const YellowHearts: React.FC<{}> = () => null;\n// @filename: SlowedTrail.tsx\nexport const Slowed: React.FC<{\n children: React.ReactNode;\n}> = () => null;\n\n// @filename: MyComposition.tsx\n// ---cut---\nimport React from 'react';\nimport {AbsoluteFill} from 'remotion';\nimport {Background} from './Background';\nimport {Dots} from './Dots';\nimport {RedHearts} from './RedHearts';\nimport {Slowed} from './SlowedTrail';\nimport {Stars} from './Stars';\nimport {YellowHearts} from './YellowHearts';\n\nexport const MyComposition = () => {\n return (\n \n \n \n \n \n \n \n \n \n );\n};\n```\n\nYour final firework should look like this:\n\n\n\n## Adding your animoji\n\nAs the final step of this tutorial, we add your animoji on top of the firework. For the animoji you need to have an iPhone and a Mac. This is how you get it: On your iPhone in iMessage, record an animoji of yourself and send it to a friend. After you've done that, it will also appear in the Messages app on your Mac. Download your animoji there by right-clicking. Once you have done that, create a transparent version of your animoji. Just follow these points:\n\n1. Right-click your downloaded animoji\n2. Select \"Services\"\n3. Select \"Encode Selected Video Files\"\n4. Choose \"Apple ProRes\" in the settings dropdown\n5. Tick the box that says \"Preserve Transparency\".\n\nA new encoded file of your animoji will be created. Give it a simple name like animoji.mov.\n\nIn addition to the `src` folder in your Remotion project, create a new one called `public`. Put your encoded video in this folder. You can then use FFmpeg to turn the encoded video into a series of frames:\n\n1. Change the current working directory to `public`: `cd public`\n2. Use this command: `ffmpeg -i animoji.mov -pix_fmt rgba -start_number 0 frame%03d.png`\n\nOnly assets that are being used by Remotion need to be in the `public` folder. You don't need the encoded video, so you can delete it after the frames have been extracted.\n\nHere is a screenshot right before creating the series of frames:\n\n\n\n
\n
\n\nAlright, so far you've prepared the animoji to be used in a new component called Animoji. You can import this series of frames by using the [staticFile()](https://www.remotion.dev/docs/staticfile) API. The file name of each frame will help you to determine the current frame number.\n\n```tsx twoslash title=\"src/Animoji.tsx\"\nimport React from 'react';\nimport {AbsoluteFill, Img, staticFile, useCurrentFrame} from 'remotion';\n\nexport const Animoji: React.FC = () => {\n const frame = useCurrentFrame();\n\n const src = `frame${(frame * 2).toString().padStart(3, '0')}.png`;\n\n return (\n \n \n \n );\n};\n```\n\nRender the `` component in your main composition:\n\n```tsx twoslash title=\"src/Composition.tsx\"\n// @filename: Move.tsx\nexport const Move: React.FC<{\n children: React.ReactNode;\n delay: number;\n}> = () => null;\n// @filename: Shrinking.tsx\nexport const Shrinking: React.FC<{\n children: React.ReactNode;\n}> = () => null;\n// @filename: Stars.tsx\nexport const Stars: React.FC<{}> = () => null;\n// @filename: Background.tsx\nexport const Background: React.FC<{}> = () => null;\n// @filename: Dots.tsx\nexport const Dots: React.FC<{}> = () => null;\n// @filename: RedHearts.tsx\nexport const RedHearts: React.FC<{}> = () => null;\n// @filename: YellowHearts.tsx\nexport const YellowHearts: React.FC<{}> = () => null;\n// @filename: Animoji.tsx\nexport const Animoji: React.FC<{}> = () => null;\n// @filename: SlowedTrail.tsx\nexport const Slowed: React.FC<{\n children: React.ReactNode;\n}> = () => null;\n\n// @filename: MyComposition.tsx\n// ---cut---\nimport React from 'react';\nimport {AbsoluteFill} from 'remotion';\nimport {Animoji} from './Animoji';\nimport {Background} from './Background';\nimport {Dots} from './Dots';\nimport {RedHearts} from './RedHearts';\nimport {Slowed} from './SlowedTrail';\nimport {Stars} from './Stars';\nimport {YellowHearts} from './YellowHearts';\n\nexport const MyComposition = () => {\n return (\n \n \n \n \n \n \n \n \n \n \n );\n};\n```\n\nBy doing all of this you have imported a transparent version of your animoji into your composition. You can run `npm run build` to export your video as MP4. Which should look like this:\n\n\n\nCongrats on your programmatically generated video! 🎉\n"

Learn how to create an animation that Apple has on its website during the holiday season with this beginner-friendly Remotion tutorial!

Video version​

This tutorial is also available as a video version:

Source code​

GitHub

Getting started​

Start a new Remotion project and select the blank template:

npm init video --blank

Composition setup​

A <Composition> defines the dimensions and duration of the video. In the src/Root.tsx file, adjust the width and height to the following:

src/Root.tsx
export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition id="MyComp" component={MyComposition} durationInFrames={150} fps={30} width={1920} height={1080} />
    </>
  );
};

Create a background​

Create a new file src/Background.tsx and return a background with linear gradient:

src/Background.tsx
import React from 'react';
import {AbsoluteFill} from 'remotion';

export const Background: React.FC = () => {
  return (
    <AbsoluteFill
      style={{
        background: 'linear-gradient(to bottom, #000021, #010024)',
      }}
    />
  );
};

Add the created background to the <MyComposition/> component, which can be found in the file src/Composition.tsx. This file will contain all the components that you create in this tutorial.

src/Composition.tsx

export const MyComposition: React.FC = () => {
  return (
    <AbsoluteFill>
      <Background />
    </AbsoluteFill>
  );
};

This results in the following:

Render a dot​

Render a white dot by creating a new file src/Dot.tsx and return a centered circle.

src/Dot.tsx
import React from 'react';
import {AbsoluteFill} from 'remotion';

export const Dot: React.FC = () => {
  return (
    <AbsoluteFill
      style={{
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <div
        style={{
          height: 14,
          width: 14,
          borderRadius: 14 / 2,
          backgroundColor: '#ccc',
        }}
      />
    </AbsoluteFill>
  );
};

Add the <Dot> in your main composition src/Composition.tsx:

src/Composition.tsx

export const MyComposition: React.FC = () => {
  return (
    <AbsoluteFill>
      <Background />
      <Dot />
    </AbsoluteFill>
  );
};

Now we got a white dot on top of our background:

Animate the dot​

Let's apply some animation to the white dot we created above. We create another component called <Shrinking> in a new file src/Shrinking.tsx, which then wraps the dot in the main composition src/Composition.tsx.

src/Shrinking.tsx
import React from 'react';
import {AbsoluteFill, interpolate, useCurrentFrame} from 'remotion';

export const Shrinking: React.FC<{
  children: React.ReactNode;
}> = ({children}) => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill
      style={{
        scale: String(
          interpolate(frame, [60, 90], [1, 0], {
            extrapolateLeft: 'clamp',
            extrapolateRight: 'clamp',
          }),
        ),
      }}
    >
      {children}
    </AbsoluteFill>
  );
};

Add the <Shrinking> component in your main composition src/Composition.tsx:


export const MyComposition: React.FC = () => {
  return (
    <AbsoluteFill>
      <Background />
      <Shrinking>
        <Dot />
      </Shrinking>
    </AbsoluteFill>
  );
};

Now, you have some action to show. By using <Shrinking> in your main composition you have created a scale out effect:

Move the dot​

Next, create a component called <Move>. This component has a spring animation, which by default goes from zero to one, and has a duration of four seconds (durationInFrames: 120) in the code snippet below:

src/Move.tsx
import React from 'react';
import {AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig} from 'remotion';

export const Move: React.FC<{
  children: React.ReactNode;
}> = ({children}) => {
  const {fps} = useVideoConfig();
  const frame = useCurrentFrame();

  const down = spring({
    fps,
    frame,
    config: {
      damping: 200,
    },
    durationInFrames: 120,
  });

  const y = interpolate(down, [0, 1], [0, -400]);

  return (
    <AbsoluteFill
      style={{
        translate: `0 ${y}px`,
      }}
    >
      {children}
    </AbsoluteFill>
  );
};

Add the <Move> component to your composition src/Composition.tsx. You get a nice animation by combining the effect of moving and shrinking by surrounding the shrinking dot in the <Move> component:

src/Composition.tsx

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Background />
      <Move>
        <Shrinking>
          <Dot />
        </Shrinking>
      </Move>
    </AbsoluteFill>
  );
};

And up goes the dot:

Duplicate the moving dot​

Here it gets a little bit trickier, but the following steps are going to make your animation a lot more entertaining. First, you add a delay prop into the <Move> component and then change the frame parameter of your spring() function.

src/Move.tsx
import React from 'react';
import {AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig} from 'remotion';

export const Move: React.FC<{
  children: React.ReactNode;
  delay: number;
}> = ({children, delay}) => {
  const {fps} = useVideoConfig();
  const frame = useCurrentFrame();

  const down = spring({
    fps,
    frame: frame - delay,
    config: {
      damping: 200,
    },
    durationInFrames: 120,
  });

  const y = interpolate(down, [0, 1], [0, -400]);

  return (
    <AbsoluteFill
      style={{
        translate: `0 ${y}px`,
      }}
    >
      {children}
    </AbsoluteFill>
  );
};

Now, let's create a <Trail> component. It takes some React children and duplicates them. The component adds a delay to each subsequent dot so they don't start all at once. Each dot will have a scale applied to it, so that each dot is smaller than the previous one.

Put the previously created <Move> component within the <Trail> component. The order is crucial here. Things are done from inside out:

  1. Apply a scale so that the dots become smaller over time.
  2. Apply the move animation.
  3. Apply a delay between the animation start of each dot by using Remotion's <Sequence> component.
src/Trail.tsx
import React from 'react';
import {AbsoluteFill, Sequence} from 'remotion';
import {Move} from './Move';

export const Trail: React.FC<{
  amount: number;
  children: React.ReactNode;
}> = ({amount, children}) => {
  return (
    <AbsoluteFill>
      {new Array(amount).fill(true).map((a, i) => {
        return (
          <Sequence from={i * 3}>
            <AbsoluteFill>
              <Move delay={0}>
                <AbsoluteFill
                  style={{
                    scale: String(1 - i / amount),
                  }}
                >
                  {children}
                </AbsoluteFill>
              </Move>
            </AbsoluteFill>
          </Sequence>
        );
      })}
    </AbsoluteFill>
  );
};

In your main component, you now replace the <Move> component with the <Trail> component:

src/Composition.tsx

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Background />
      <Trail amount={4}>
        <Shrinking>
          <Dot />
        </Shrinking>
      </Trail>
    </AbsoluteFill>
  );
};

And this is how your animation with the duplicated dots should look like:

Duplicating markup and arranging it in a circle​

Now let's create a <Explosion> component. It takes children and renders them for example 10 times and applies a rotation to each instance. It's worth mentioning here that a full rotation amounts to 2π, while (i/AMOUNT) represents a factor between 0 and 1.

src/Explosion.tsx
import React from 'react';
import {AbsoluteFill} from 'remotion';

const AMOUNT = 10;

export const Explosion: React.FC<{
  children: React.ReactNode;
}> = ({children}) => {
  return (
    <AbsoluteFill>
      {new Array(AMOUNT).fill(true).map((_, i) => {
        return (
          <AbsoluteFill
            style={{
              rotate: (i / AMOUNT) * (2 * Math.PI) + 'rad',
            }}
          >
            {children}
          </AbsoluteFill>
        );
      })}
    </AbsoluteFill>
  );
};

<Trail> gets put inside the <Explosion> component. Your main component (src/Composition.tsx) looks like this:

src/Composition.tsx

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Background />
      <Explosion>
        <Trail amount={4}>
          <Shrinking>
            <Dot />
          </Shrinking>
        </Trail>
      </Explosion>
    </AbsoluteFill>
  );
};

The animated explosion should look like this:

Cleanup​

You have created a bunch of files until now, let's put most of them together in one file called src/Dots.tsx. Extract <Explosion> and it's children into a new separate component called Dots.

src/Dots.tsx
import React from 'react';
import {Sequence} from 'remotion';
import {Dot} from './Dot';
import {Explosion} from './Explosion';
import {Shrinking} from './Shrinking';
import {Trail} from './Trail';

export const Dots: React.FC = () => {
  return (
    <Explosion>
      <Trail amount={4}>
        <Shrinking>
          <Sequence from={5}>
            <Dot />
          </Sequence>
        </Shrinking>
      </Trail>
    </Explosion>
  );
};

Replace the <Explosion> with the new <Dots> component:


export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Background />
      <Dots />
    </AbsoluteFill>
  );
};

Nothing has changed on the animation itself:

Adding hearts and stars​

To make the animation more exciting, let's add some stars and hearts in different colors. To do this, we need to basically repeat the previous steps. Besides the <Dots>component, we'll add three more components in the next few steps.

Let's start with red hearts. First you render a red heart by creating a new file src/RedHeart.tsx and return a centered red heart emoji.

src/RedHeart.tsx
import React from 'react';
import {AbsoluteFill} from 'remotion';

export const RedHeart: React.FC = () => {
  return (
    <AbsoluteFill
      style={{
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      ❤️
    </AbsoluteFill>
  );
};

Effects like <Shrinking>, <Move> and <Explosion> need to be applied to that red heart. We do this in a new component called RedHearts.

Consider s that we need to add an offset to <RedHearts>, otherwise they would be positioned the same as the <Dots>.

We change the position by giving the red hearts a bigger radius than the dots, and apply a 100px translation. Also, we add a short delay of 5 frames to the <Move> component:

src/RedHearts.tsx
import React from 'react';
import {AbsoluteFill} from 'remotion';
import {Explosion} from './Explosion';
import {Move} from './Move';
import {RedHeart} from './RedHeart';
import {Shrinking} from './Shrinking';

export const RedHearts: React.FC = () => {
  return (
    <Explosion>
      <Move delay={5}>
        <AbsoluteFill style={{transform: `translateY(-100px)`}}>
          <Shrinking>
            <RedHeart />
          </Shrinking>
        </AbsoluteFill>
      </Move>
    </Explosion>
  );
};

We do the same to get some yellow hearts in our animation:

src/YellowHeart.tsx
import React from 'react';
import {AbsoluteFill} from 'remotion';

export const YellowHeart: React.FC = () => {
  return (
    <AbsoluteFill
      style={{
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      💛
    </AbsoluteFill>
  );
};

For the yellow hearts we are going to change the position by applying a translation of 50px and adding a delay of 20 frames to the <Move> component:

src/YellowHearts.tsx
import React from 'react';
import {AbsoluteFill} from 'remotion';
import {Explosion} from './Explosion';
import {Move} from './Move';
import {Shrinking} from './Shrinking';
import {YellowHeart} from './YellowHeart';

export const YellowHearts: React.FC = () => {
  return (
    <AbsoluteFill
      style={{
        rotate: '0.3rad',
      }}
    >
      <Explosion>
        <Move delay={20}>
          <AbsoluteFill
            style={{
              transform: `translateY(-50px)`,
            }}
          >
            <Shrinking>
              <YellowHeart />
            </Shrinking>
          </AbsoluteFill>
        </Move>
      </Explosion>
    </AbsoluteFill>
  );
};

Your main composition should look like this:



In addition to the dots and hearts let's also add stars.

Create a new file src/Star.tsx and return a centered star emoji.

src/Star.tsx
import React from 'react';
import {AbsoluteFill} from 'remotion';

export const Star: React.FC = () => {
  return (
    <AbsoluteFill
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: 14,
      }}
    >
      ⭐
    </AbsoluteFill>
  );
};

Consider that we need to change the positioning of the stars, otherwise they would be on top of the <Dots>.

Let's give <Trail> an extraOffset prop, so the stars can start more outwards than the dots.

An extraOffset of 100 for the stars leads to the same circumference at the beginning and end as the red hearts have. Here is the adjusted <Trail>:

src/Trail.tsx
import React from 'react';
import {AbsoluteFill, Sequence} from 'remotion';
import {Move} from './Move';

export const Trail: React.FC<{
  amount: number;
  extraOffset: number;
  children: React.ReactNode;
}> = ({amount, extraOffset, children}) => {
  return (
    <AbsoluteFill>
      {new Array(amount).fill(true).map((a, i) => {
        return (
          <Sequence from={i * 3}>
            <AbsoluteFill
              style={{
                translate: `0 ${-extraOffset}px`,
              }}
            >
              <Move delay={0}>
                <AbsoluteFill
                  style={{
                    scale: String(1 - i / amount),
                  }}
                >
                  {children}
                </AbsoluteFill>
              </Move>
            </AbsoluteFill>
          </Sequence>
        );
      })}
    </AbsoluteFill>
  );
};

Effects like <Shrinking>, the new <Trail> and <Explosion> need to be applied to the star we created above. Additionally we also add some rotation. We do all of this in a new component called Stars:

src/Stars.tsx
import React from 'react';
import {AbsoluteFill} from 'remotion';
import {Explosion} from './Explosion';
import {Shrinking} from './Shrinking';
import {Star} from './Star';
import {Trail} from './Trail';

export const Stars: React.FC = () => {
  return (
    <AbsoluteFill
      style={{
        rotate: '0.3rad',
      }}
    >
      <Explosion>
        <Trail extraOffset={100} amount={4}>
          <Shrinking>
            <Star />
          </Shrinking>
        </Trail>
      </Explosion>
    </AbsoluteFill>
  );
};

Here is how the almost complete firework should look like:

Slow motion effect​

Lastly let's apply a slow motion effect to the firework. For this, create a new file src/SlowedTrail.tsx. It should contain a component called Slowed and a helper function remapSpeed() which will apply different speed levels to the firework. In the code snippet below a speed of 1.5 is applied until frame 20, afterwards the speed slows down to 0.5.

src/SlowedTrail.tsx
import React from 'react';
import {Freeze, interpolate, useCurrentFrame} from 'remotion';

// remapSpeed() is a helper function for the component <Slowed> that takes a frame number and a speed
const remapSpeed = ({frame, speed}: {frame: number; speed: (fr: number) => number}) => {
  let framesPassed = 0;
  for (let i = 0; i <= frame; i++) {
    framesPassed += speed(i);
  }

  return framesPassed;
};

export const Slowed: React.FC<{
  children: React.ReactNode;
}> = ({children}) => {
  const frame = useCurrentFrame();
  const remappedFrame = remapSpeed({
    frame,
    speed: (f) =>
      interpolate(f, [0, 20, 21], [1.5, 1.5, 0.5], {
        extrapolateRight: 'clamp',
      }),
  });

  return <Freeze frame={remappedFrame}>{children}</Freeze>;
};

In the main component, wrap all moving dots, hearts and stars in the component <Slowed>. As you sure can tell by now, everything is very composable:

src/Composition.tsx
import React from 'react';
import {AbsoluteFill} from 'remotion';
import {Background} from './Background';
import {Dots} from './Dots';
import {RedHearts} from './RedHearts';
import {Slowed} from './SlowedTrail';
import {Stars} from './Stars';
import {YellowHearts} from './YellowHearts';

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Background />
      <Slowed>
        <Dots />
        <RedHearts />
        <YellowHearts />
        <Stars />
      </Slowed>
    </AbsoluteFill>
  );
};

Your final firework should look like this:

Adding your animoji​

As the final step of this tutorial, we add your animoji on top of the firework. For the animoji you need to have an iPhone and a Mac. This is how you get it: On your iPhone in iMessage, record an animoji of yourself and send it to a friend. After you've done that, it will also appear in the Messages app on your Mac. Download your animoji there by right-clicking. Once you have done that, create a transparent version of your animoji. Just follow these points:

  1. Right-click your downloaded animoji
  2. Select "Services"
  3. Select "Encode Selected Video Files"
  4. Choose "Apple ProRes" in the settings dropdown
  5. Tick the box that says "Preserve Transparency".

A new encoded file of your animoji will be created. Give it a simple name like animoji.mov.

In addition to the src folder in your Remotion project, create a new one called public. Put your encoded video in this folder. You can then use FFmpeg to turn the encoded video into a series of frames:

  1. Change the current working directory to public: cd public
  2. Use this command: ffmpeg -i animoji.mov -pix_fmt rgba -start_number 0 frame%03d.png

Only assets that are being used by Remotion need to be in the public folder. You don't need the encoded video, so you can delete it after the frames have been extracted.

Here is a screenshot right before creating the series of frames:



Alright, so far you've prepared the animoji to be used in a new component called Animoji. You can import this series of frames by using the staticFile() API. The file name of each frame will help you to determine the current frame number.

src/Animoji.tsx
import React from 'react';
import {AbsoluteFill, Img, staticFile, useCurrentFrame} from 'remotion';

export const Animoji: React.FC = () => {
  const frame = useCurrentFrame();

  const src = `frame${(frame * 2).toString().padStart(3, '0')}.png`;

  return (
    <AbsoluteFill
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 80,
      }}
    >
      <Img
        style={{
          height: 800,
        }}
        src={staticFile(src)}
      />
    </AbsoluteFill>
  );
};

Render the <Animoji> component in your main composition:

src/Composition.tsx
import React from 'react';
import {AbsoluteFill} from 'remotion';
import {Animoji} from './Animoji';
import {Background} from './Background';
import {Dots} from './Dots';
import {RedHearts} from './RedHearts';
import {Slowed} from './SlowedTrail';
import {Stars} from './Stars';
import {YellowHearts} from './YellowHearts';

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Background />
      <Slowed>
        <Dots />
        <RedHearts />
        <YellowHearts />
        <Stars />
      </Slowed>
      <Animoji />
    </AbsoluteFill>
  );
};

By doing all of this you have imported a transparent version of your animoji into your composition. You can run npm run build to export your video as MP4. Which should look like this:

Congrats on your programmatically generated video! 🎉

]]>