**Full Remotion Tutorial to Create Insane Motion Graphics — Transcript & Summary | SozAI**
Source: https://sozai.app/transcript/full-remotion-tutorial-motion-graphics/

Learn how to create advanced motion graphics using Remotion and Clot Code without coding or After Effects skills.

## Key Takeaways

- Remotion allows creation of motion graphics using code, making complex animations faster and easier.
- No need for After Effects or coding knowledge when using Clot Code integration.
- Remotion excels at animated titles, data charts, and customizable motion graphics.
- The tool supports version control and multiple video variations efficiently.
- Remotion Studio provides an intuitive interface similar to After Effects but code-driven.

## What the video covers

- Introduction to Remotion as a tool for creating motion graphics through code.
- Comparison of Remotion with traditional tools like After Effects and Premiere Pro.
- Advantages of Remotion including speed, version control, and ease of creating data charts and animated titles.
- Integration with Clot Code to enable AI-driven, no-code animation creation.
- Step-by-step installation of Remotion both manually via terminal and using Clot Code.
- Overview of Remotion Studio interface including timeline, frame control, and property control panel.
- Detailed example of creating a Vox style data chart with Remotion.
- Explanation of animation techniques in Remotion without keyframing or camera tricks.
- Demonstration of creating complex mixed motion graphics quickly and efficiently.
- Availability of free resources and community support for learning Remotion.

## Chapters

1. 00:00 Introduction and Overview of Remotion
2. 01:02 How Remotion Differs from After Effects and Premiere Pro
3. 02:22 Installing Remotion: Manual and Easy Methods
4. 04:41 Exploring Remotion Studio Interface
5. 05:50 Working with Assets and Timeline in Remotion
6. 07:11 Creating a Vox Style Data Chart Example
7. 08:25 Animation Techniques and Effects in Remotion
8. 14:58 Advanced Motion Graphics and Final Thoughts

Answers

## Questions about this video

What is Remotion and how does it differ from After Effects?

Remotion is a tool that creates videos from code by rendering screenshots frame-by-frame, unlike After Effects which works with traditional video frames and keyframing. It is faster and more efficient for motion graphics like animated titles and data charts.

Do I need coding skills to use Remotion?

No, with the integration of Clot Code, you can create animations by giving plain English prompts, making it accessible even if you don't know how to code.

How do I install Remotion?

You can install Remotion manually by running commands in the terminal or use Clot Code to automate the setup with simple prompts, which is easier for beginners.

## Full Transcript — Download SRT & Markdown

00:00

Speaker A

So I made this animated Vox style timeline using only Remotion and Clot Code, and also this chart and [music] this viral reel. All three of them were made with Remotion using code. And the best part is you don't even need to know

00:14

Speaker A

how to code because that's where Clot Code comes in, and you genuinely don't need to know After Effects or spend hours [music] keyframing. Now, Remotion is one of the best tools for motion design, especially if you know how

00:26

Speaker A

to use it. So, in this video, I'll teach you everything you need to know about Remotion for motion graphics. We'll start slow with a Vox style data chart, and then we'll move on to a Vox style timeline. And finally, we'll finish it

00:37

Speaker A

off with a viral reel edit, which [music] are so famous on TikTok and Instagram. But here's my promise to you.

00:44

Speaker A

[music] If you can master Remotion, then you can recreate any type of motion graphics that you can think of. So, let's get into it. So, we'll start off by exploring what Remotion actually is.

00:55

Speaker A

Now, Remotion just makes video out of code. So, say for example, you need to have an animated website or a web page.

01:02

Speaker A

So, what you would do is you'd build a web page and you can animate it through Remotion, and essentially you can make a video out of that. So, essentially the difference is in After Effects or Premiere Pro, you might actually be

01:12

Speaker A

playing around with an [music] actual video which literally goes frame by frame, but in Remotion, the same thing is literally just screenshots. So, this is exactly that example over here. So a movie is essentially just a bunch of

01:25

Speaker A

different frames. But in Remotion, the same thing is just a bunch of different screenshots [music] of that code. And this is why it's so easy for motion graphics on Remotion because motion graphics at the end of the day is just a bunch of code meshed

01:39

Speaker A

in [music] together based on movement and choreography. So here's the difference between Premiere Pro and After Effects. [music] Now, your traditional trimming and cutting your raw footage and everything, Premiere Pro [music] is actually much better for that. Remotion, it's really clunky. Same

01:54

Speaker A

thing for color grading as well. You'll find much better use in Premiere Pro or After Effects for that. But where Remotion really excels is, for example, if you want to do motion graphic or an animated title. So in Remotion it's

02:07

Speaker A

literally just one line of code where you could change the type of text animation [music] which for example in After Effects that might be several minutes, sometimes 30, 40 minutes just to animate one piece of text essentially. And Remotion is also really good at

02:22

Speaker A

creating charts or data charts, for example, and these are really good if you run some sort of documentary or some sort of historical channel because this can literally take more than an hour to create [music] in After Effects as

02:35

Speaker A

opposed to Remotion. It literally just takes 2 minutes. That's that's literally it. And we'll actually go through that example. And then there are other advantages as well like, you know, you can have the same video but you can create

02:47

Speaker A

many different variations in Remotion. [music] You also have really good version control. And finally, because we'll be connecting Remotion to Clot Code, everything [music] is just like AI-driven. So you don't even need to know to write any bit of code essentially.

03:03

Speaker A

And all we're doing is we're literally just giving prompts [music] in plain English. So I'll show you how to install Remotion. Now I'll do it the hard way and also the easy way. So the hard way is essentially going into your terminal

03:15

Speaker A

and then inputting this command. So I'm going to copy this command right here. So I've come to my terminal window over here and I've just pasted that command.

03:22

Speaker A

[music] And then you can see it's just asked me if I want to install the following packages and I said yes. Now the next thing we do is we need to select a template. Now for this I'll go with the

03:33

Speaker A

hello world template. Just click on yes. So the next thing we can do is we can install some skills. So what I'm going to do is I'm just going to pick a few skills. [music] Just click on enter. And

03:50

Speaker A

for agents we can pick Clot Code. And for the installation scope we'll just install it in the current project file.

03:58

Speaker A

And yes to proceed with installation. So, and then it'll ask you if you want to open in vi. So, I'm just going to say no. So, that's basically it. You've just installed Remotion. Now, if you're not used to using the terminal, that might

04:10

Speaker A

seem a bit scary, but there is an easier way to do it. And the next method to do it is actually set it up and just [music] literally ask Clot Code to do it for you. Now, this is the prompt for

04:21

Speaker A

that. So, I'm just going to copy [music] this in and I will just open a new Clot Code session and just paste that in.

04:30

Speaker A

and just give it a few minutes basically. Okay, so it's just built the project folder. All right, so it's literally just finished setting it up and what I can do is I can actually go to this localhost link over here and

04:41

Speaker A

open that. And this is basically our Remotion Studio. [music] So we'll go over a few things that are really essential here for you to know.

04:49

Speaker A

But for that, let me actually go to another installed instance that I have over here.

04:55

Speaker A

[music] And to give you an overview, the most important thing you need to know is this frame number over here. So anytime you tell Clot Code that from frame number 50 to frame number 70, I want a certain

05:08

Speaker A

animation to happen. This is what you'd be using. So for example, from let's say from frame [music] number 40, this animation basically starts and it goes all the way till about frame number 150 or 149. So you can say like from this

05:24

Speaker A

frame to this frame I want the [music] data chart to go live. The other thing you need to know and which you will see is that it's basically like a timeline essentially. So you will see that you have a timeline over here. So obviously

05:37

Speaker A

we don't have any video files because this is purely code. But if you do have some video files like this viral reel file over here. So you'll see it pretty much looks just like your After Effects window. So you'll have like, um,

05:50

Speaker A

your assets over here like your video file over here. You might even have some voiceovers or maybe, um, some background music and you might have a few different tracks in your timeline essentially. So the other really important thing that we

06:05

Speaker A

need to know about is also the property control. Now property control is what allows me to change, say, the colors of the bars over here. It allows me to change [music] like say for example the headline sizes, um, maybe the font sizes

06:19

Speaker A

over there. So anything you can think of over here, you can change through this prop [music] control panel. And we'll see how the prop control works when we go through our first example. But for now, this is what you need to know about

06:31

Speaker A

Remotion. And when you're ready to render your creation, you just come and click on render over here. And you can essentially either render it as a video or you can [music] render it as a still.

06:43

Speaker A

And if you're rendering it out as a video, it'll essentially be in [music] the same folder where you created your Remotion project. So to make it a lot easier, let's go through our first animation example. And over here, what

06:56

Speaker A

I'm looking at is the Vox style, uh, data chart. So essentially, you can see how I segment my prompts. Over here, I have the build first, which is essentially telling Remotion that it's a bar chart in the style of a Vox explainer. I've

07:11

Speaker A

given the sizes at 30 fps. I'm even giving the copy as well. So where I'm saying America pays more for healthcare, um, with more healthcare swiped in [music] marker yellow. And under it I'm saying there are two small italic lines.

07:28

Speaker A

And then we have a current health expenditure per person in 2022 in US [music] dollars. And right after that we have the data that we provide for our charts. So we've got six horizontal bars with light vertical grid lines behind

07:42

Speaker A

them. And then the axis goes from 0 t

07:59

Speaker A

just completely giving the data over here. Now you can do one of two things.

08:02

Speaker A

So you can either give it in the prompt itself or you can just give it in the prompt and then attach an Excel sheet if you want to do it that [music] way.

08:10

Speaker A

Finally, we also have the colors. Now obviously because the US we want the US to stand out. We have it in a different color. And finally the motion. We have the headline and the source lines land first, then the axis, then the bars grow

08:25

Speaker A

in from left one after another. Now each starting in a few frames after the one above it. Now what this does is that all of them don't start at the same time. So it's a staggered approach. And when you

08:37

Speaker A

copy paste this prompt to claude code and you can see this is what the chart looks like [music] and there's an animation. The bar charts just come up and then we have the numbers that go right after. And say if you want to make

08:50

Speaker A

any changes and this is where we go into the prop control that I spoke about earlier. And say for example I want to change the color of this. So maybe let's make it an orange color. So FF8D00 0. Okay. So that's a nice orange color.

09:05

Speaker A

Uh say for example I want to maybe make some changes to the headline. So I can [music] make it slightly bigger if I wanted to. The deck size I can make these [music] letters slightly bigger too. So the

09:18

Speaker A

label size as well. I can make these bigger. [music] Just whichever way that I want. Values. For example, I can increase the value sizes or maybe make them [music] smaller. I can also change their XY position. So headline X will

09:34

Speaker A

move it along the X axis. So I'll control Z that. And headline Y will make it move along the Y-axis. Now to make it a little bit more succinct [music] and just to separate it from the rest of

09:47

Speaker A

the chart, I'm going to move it up just a [music] little. I'll also move this just a little up here as well.

09:57

Speaker A

And there we go. So that looks a lot cleaner [music] and that's essentially your first chart done. Now you could call it a day and you could just stop there. But we can actually go further and we can make our graph more exciting.

10:10

Speaker A

For example, say it was [music] just linear graph and you can see like you know it's just a a linear movement no sort of no drama in there but at the same time if I use a ease out effect you

10:24

Speaker A

can see it accelerates in the beginning and then it eases out in the very end hence [music] the name ease out. So if I use a ease in and out so what it will do is it'll have an easy in and then it'll

10:36

Speaker A

accelerate in in the middle and then it'll ease out at the very end. You can also do a spring pop for example.

10:42

Speaker A

[music] Now this looks a bit cartoonish. So I wouldn't recommend using this for if you're doing a documentary style video, but hey ho, you know, just whatever floats your boat. [music] And this guys is what makes a good shot look

10:56

Speaker A

great. So we also have a few other grain and paper look going on here. And if you see that's what it looks like with the paper grain. It doesn't look too digital, right? and it looks more like something that you might see in a

11:09

Speaker A

magazine or something that resembles a print style layout. Okay, so now that we've done that, let's move on to the next graph, which is building this Mac timeline. [music] And it's just a gradual timeline that shows the evolution of either a company

11:26

Speaker A

or a product or something [music] that's of historical significance. So the prompt here itself is [music] uh the format is a Voxy documentary timeline of Macintosh's history and the data itself.

11:40

Speaker A

We've got six milestones on one timeline from 1984 to 2020. So Macintosh 128K 1984 uh we have the power bank, sorry, the power book. And then we've got the iMac G3, um the Intel Max, and finally we also have the [music] U MacBook Air and

11:58

Speaker A

the MacBook Apple um M1. And for the camera, it is one continuous move, no cut. So the whole timeline is at scale one with about a half a second with about a second and a half of hold at

12:12

Speaker A

each stop. And essentially this is what it looks like. And you can see it slides into the next [music] dot where the machine shows up for that generation.

12:20

Speaker A

Now let me show you how this animation is achieved. Now first of all there's no camera trick because Remotion has no sort of camera settings. [music] Now the whole thing is being treated as like a div. So if you're not a developer that's

12:33

Speaker A

fine. So a div is basically [music] like a container. And what we're doing is we're just sort of moving that div to give that timeline uh effect essentially. So it starts off wide and then it punches into the first machine

12:48

Speaker A

in 1984 which is the Macintosh 128k. So obviously you can see the scale moves from 1 all the way to 2.8. And essentially at this point, we're holding the camera over here at scale 2.8 [music] and then all the dots are just

13:03

Speaker A

literally moving on the screen. And to add a bit of editorial effect, we have these [music] um yellow highlights that come in with each of the Macintosh's titles. And then finally, we don't stop there. Again, we want to give it like a nice magazine

13:20

Speaker A

look because let's be honest now, this is what the assets [music] look like. And honestly, I just got these assets straight from Google images. But if you see the assets over here, they all have like different colors. [music]

13:32

Speaker A

The shine is different. Um the sort of build is different. Obviously, it's all over the place. And it just you could use it, right? But it wouldn't really look all that professional, but at the same time, what we've done is we've did

13:45

Speaker A

like a half te effect over here [music] that makes all of them sort of look the same, right? And that just gives it that magazine editorial effect. And honestly guys, if you were doing this in After Effects, [music] which is first doing

13:57

Speaker A

the cutout and then doing that half te effect across all of your assets, I can promise you it's going to take at least an hour. But in Remotion, and here's the beautiful [music] thing, it literally takes just one line of code. And that's

14:11

Speaker A

about it. And to close it off, we also we're also doing like a nice offset drop shadow for each of those assets. [music] So, just so it can it can look like it's not flat on the paper, but rather it's a

14:22

Speaker A

little bit lifted off of the background. Okay. So, moving on from here, we're going to be looking at the last animation, which is a viral reel. Now, this is one of the hardest ones to do, obviously, if you are using After

14:35

Speaker A

Effects. It is a bit hard as well, even on Remotion, until you master it and then it just [music] becomes a template essentially. In 2000, a small startup called Netflix pitched Blockbuster [music] to buy them out. They asked for

14:49

Speaker A

$50 million. Blockbuster [music] laughed them out of the room. [snorts] So Netflix built the opposite. No late fees, no stores, [music] customer first.

14:58

Speaker A

10 years later, Blockbuster closed a thousand stores [music] and declared bankruptcy. Today, Netflix drives $45 billion a year in revenue. The biggest paid [music] streaming service on Earth.

15:10

Speaker A

the most expensive no in history. So these are six pre-rendered scenes and you can see this is the voice over. So for anytime I'm doing like a viral reel, what I start off with is always the voice over. Right now this is

15:26

Speaker A

essentially the voice over. So I do go back and forth a few times, maybe two to three times [music] uh with Claude just to get these voiceovers correct because each of the line in the voice over becomes its

15:40

Speaker A

[music] own scene essentially. So you can see the first line of the voice over over here in 2000 a small startup called Netflix [music] pitched Blockbuster to buy them out, right? So we have that first scene come up [music] and then the next scene is

15:53

Speaker A

they asked for $50 million. Blockbuster laughed them out of the room. And you can see like, you know, it's just literally just cutting that voice over into six different [music] scenes. And this is what the entire reel looks like

16:06

Speaker A

when all of those voiceovers are put together. [music] Okay. So, I'm going to show you how to build just one scene in this viral reel. And [music] we'll start with just the first scene. And you can see like this is what the scene looks

16:18

Speaker A

like. Now, this is a looped uh video of just scene one. [music] So essentially what's happening here is there's a slow push on the wall. So there's a a picture frame on the wall and then we're doing like a slow push. So essentially it

16:30

Speaker A

means we're scaling from 1 to 1.16 just ever so slowly in the beginning and then right after that what happens is the wall accelerates [music] to 6.8x. Now that's the acceleration that's happening here and then the camera flies into the photograph. Right?

16:46

Speaker A

So and then the photo and the frame they stay welded. So they come in. So this is called a portal effect. So they come in as like one object until like around frame 62. Then the frame keeps going and

16:58

Speaker A

the photo settles in. And then we're saying on the way through black and white crossfades to color and a blur burst peaks [music] at at the fastest moment. So what this means is when the the picture frame is accelerating

17:11

Speaker A

towards us, [music] what's happening is there's a bit of a blur moment that happens over there. You've just seen that. And [music] that just gives it that subtle hint of motion. And finally, we also have like two cloud layers over

17:23

Speaker A

here that are floating uh behind our character right here. [music] And let me show you how easy it is to build these scenes, right? The amount of assets you'd have to collect is very very minimal. So, you can see like the the

17:36

Speaker A

assets I have over here are literally just the the [music] main character. We have a photo frame right here. We have that Netflix um headquarter building.

17:45

Speaker A

And then we [music] have like two puffy clouds, right? All of them are being used as cutouts. So you can either go find these images for free on Google images or you can render them for very very cheap essentially using replicate

17:59

Speaker A

API. And on top of that we also have the filmic look as well. So we have like a very subtle uh window shadow over here.

18:08

Speaker A

So we have like a grain overlay and then we also have like a grunge overlay which gives it that 80s style television scan [music] lines just to make it pop just a little bit more and less digital. So

18:21

Speaker A

putting everything that we've learned into a prompt and this is what the prompt looks like. So the scene is build scene one the opener that we're saying compose a black and white framed photo read in front of the Netflix building

18:34

Speaker A

inside an ornate gold frame. uh the assets. So I'm saying that the assets are in the assets folder [music] and the actual movement itself. So we're doing a slow push first, easing the wall from scale 1 to 1.6 just over a few frames

18:50

Speaker A

and then from frame 46 [music] onwards we are accelerating that wall scale all the way up to like 6.8x frame 76. And then this is the weld and detach mechanic that I spoke about. So until frame 62, lock the photo and gold

19:06

Speaker A

frame together as one unit. Now all of these numbers like the 0.369, don't worry about it. Like you know when you're in Remotion Studio, you can literally use the prop control to make sure that you fine-tune it to your

19:19

Speaker A

liking. [music] And then we also have a part of the texture as well in our prompt. So, we're saying that there should be a motion blur [music] burst ramping zero to about 9 pixels and then back to zero across frames 54,61 and 72.

19:33

Speaker A

[music] And as I said before, to give it that stop motion effect, we are putting it at 12 fps step. So, it stutters basically.

19:42

Speaker A

Once we do that guys, we finish it off with the voice. Now, for the voice, you can either do text to speech on 11 Labs or you can record it yourself. Now, the one that I did, if you check my video on

19:53

Speaker A

the full tutorial on how to do this vital reel, [music] it's completely done uh using AI and 11 Labs. So, that is basically it. That's literally 95% of Remotion. And with all things, practice makes perfect. [music] You just saw me

20:09

Speaker A

build three different types of animations without any sort of key framing or After Effects. And this is basically all you need to create complex mixed motion graphics. Now everything you've seen today is available for free in my free school community. The link is

20:24

Speaker A

in the description. Now if you like this tutorial then please do like and subscribe for more of these kind of videos. Now in the next video I'll show you how I edit my actual YouTube videos completely in Remotion. [music]

20:35

Speaker A

I'll see you in the next one. Have a good day.

Topics: Remotion motion graphics Clot Code animated charts no code animation Vox style timeline video tutorial motion design data visualization After Effects alternative


---
This is the markdown twin of https://sozai.app/transcript/full-remotion-tutorial-motion-graphics/ — the same content, without the markup.
Published by SozAI (https://sozai.app). Reuse and quotation are allowed with attribution and a link back.
Machine-readable index: https://sozai.app/llms.txt · data API: https://sozai.app/api/