I Made Vox-Style Motion Graphics Using Only Claude Code & Remotion — Transcript

Full transcript

1. 0:00I made this entire Vox style explainer
2. 0:02video using only Claude code and
3. 0:04Remotion.
4. 0:05>> The US and Iran are signing a peace
5. 0:07deal.
6. 0:08But the downfall of the American Empire
7. 0:11has already begun. And it started when a
8. 0:14far weaker nation held the Strait
9. 0:16[music] of Hormuz hostage.
10. 0:19Oil prices skyrocketed to $116
11. 0:23a barrel.
12. 0:24Pushing American inflation to a 3-year
13. 0:27high. And it hit a nation already owing
14. 0:32trillion.
15. 0:33A debt now bigger than its entire
16. 0:35economy.
17. 0:36Where the interest [music] alone costs
18. 0:38more than its entire military.
19. 0:41And the world is quietly leaving the
20. 0:44dollar [music] behind.
21. 0:46Empires don't end with a war.
22. 0:49They end with a bill they can no longer
23. 0:51pay.
24. 0:52>> In this video, I'll show you the exact
25. 0:54step-by-step on how to recreate this
26. 0:56scene. And you don't need an expensive
27. 0:57motion designer or know how to use After
28. 1:00Effects. In fact, you don't even need to
29. 1:02know how to code. So, let's get right
30. 1:04into it. So, in order to create this
31. 1:0647-second
32. 1:08Vox style explainer, what we need to do
33. 1:10is we need to follow a few steps. Now,
34. 1:12the number one is obviously your
35. 1:13storyboard and script. And essentially,
36. 1:16you need your script that acts as the
37. 1:19timeline. So, my script over here was
38. 1:21obviously the the US and Iran peace
39. 1:23deal, which I made a video out of. What
40. 1:26happens here is that each beat maps to a
41. 1:29visual. So, this is my entire script
42. 1:31over here in a table. So, you can see
43. 1:33the voice-over lines, the US and Iran
44. 1:35are signing a peace deal, held the
45. 1:36Strait of Hormuz hostage, oil prices
46. 1:38[music] skyrocketed. So, the entire
47. 1:40thing is just based off of the
48. 1:42voice-over first. And then after that,
49. 1:44you can see I've got all of the the
50. 1:46foreground assets. There's a midground
51. 1:48asset. I've got the prompt as well for
52. 1:51both the midground and the foreground.
53. 1:53Because essentially, what I'll be using
54. 1:55here is I'll be using an image
55. 1:57generator, most probably GPT 2.0 because
56. 2:00that's one of the best image generators
57. 2:02that's out there. And moving on from
58. 2:04there, once you have your [music] voice
59. 2:05over, the next thing you need to do is
60. 2:08you need to lock a visual system. So, in
61. 2:10my example over here, I'm using one
62. 2:12common background across all of the
63. 2:14scenes. I'm using the same fonts, the
64. 2:16same accent palette, but what changes is
65. 2:19the the mid ground and the foreground
66. 2:22where you have these different cutouts
67. 2:24that appear. So, the first thing we have
68. 2:26to do is I'm going to open up Cloud
69. 2:27Code. Now, over here I'm setting up a
70. 2:29new session. Before I start setting up
71. 2:32Remotion, what I need to do is I need to
72. 2:33make sure I have a few connectors. So,
73. 2:35over here I've got my Higgs Field and
74. 2:37Magnific MCP service connected. And in
75. 2:40order to do that, what you need to do is
76. 2:42you need to go to settings. You can go
77. 2:43to capabilities, sorry, connectors, and
78. 2:45then you can go to customize. And over
79. 2:47here you'll find all of your MCP
80. 2:49connectors. Now, if you want to add a
81. 2:50new connector, what you can essentially
82. 2:52do is you can add a custom connector,
83. 2:53and then you can get the MCP server
84. 2:56address for Magnific, post it in here.
85. 2:59And essentially what this allows Cloud
86. 3:01Code to do is instead of you going to
87. 3:03Magnific and getting all of these
88. 3:05images, you can just prompt it directly
89. 3:07through Cloud Code, and it'll be able to
90. 3:09like get all of those images for you.
91. 3:11[music] So, for example, this is my
92. 3:13Magnific MCP server that's set up over
93. 3:16here, and you can see that's the server
94. 3:18address right there. Okay, so once
95. 3:19you've set up your MCP servers, what you
96. 3:22need to do is you need to have a proper
97. 3:24architecture, a proper folder structure
98. 3:26for your project. So, essentially each
99. 3:29scene lives in its own folder. Each
100. 3:31scene has multiple props that that come
101. 3:34up, and obviously they have a shared
102. 3:36background. So, I'll show you what that
103. 3:37looks like in terms of a folder
104. 3:38structure. So, this is what the scenes
105. 3:41look like. So, if you look at scene one,
106. 3:42these are the cutouts that I got from
107. 3:45Magnific, and this is obviously the
108. 3:47White House, and this is the shared
109. 3:48background over here. And then you will
110. 3:50see the shared background is in every
111. 3:52scene. So, essentially this is the oil
112. 3:54tanker [music] scene and you've got a
113. 3:55shared background here as well. So, it's
114. 3:57there in all of them. And then, the only
115. 3:59thing that changes is that in each
116. 4:01scene, you've got a different cutout,
117. 4:03right? And I'll show you how that plays
118. 4:05in once we start building these scenes.
119. 4:08So, the next thing I'm going to do now
120. 4:09is I'm going to set up the Remotion
121. 4:11project. So, I'll just copy this prompt
122. 4:14and I'll go here and I'll just set that
123. 4:16up.
124. 4:19Oh, before I do that, I need to actually
125. 4:21select a folder. So, what I'm going to
126. 4:23do is I'm going to select the scenes
127. 4:25folder over here. Select folder and then
128. 4:27just run that prompt again.
129. 4:33So, while the Remotion project is being
130. 4:35set up, I'll show you how this worked.
131. 4:37Now, the reason why we have a locked
132. 4:38background is because it gives that
133. 4:40whole vox style animation where the the
134. 4:43background is static, but then things
135. 4:46are like moving in. So, it looks like
136. 4:47it's one continuous shot instead of like
137. 4:50having a [music] lot of different cuts
138. 4:51in the middle. And essentially, the way
139. 4:53how it works is each scene is made up of
140. 4:56three layers. So, you have the
141. 4:57background over here and then you have
142. 4:58the midground, which I choose, you know,
143. 5:01as a black and white half tone pattern
144. 5:04of characters popping up. And then the
145. 5:05foreground structures essentially,
146. 5:07right? So, they can be structures and
147. 5:09they can be some sort of scenery, ships,
148. 5:11whatever it may be. That's just how I do
149. 5:13it and I've seen a few vox animations
150. 5:16where they use this style. There are
151. 5:18many different styles and [music] this
152. 5:19is just the one that I've I've gone for.
153. 5:21So, the next thing you want to do is you
154. 5:22want to get cutouts of your scenes. For
155. 5:25example, over here of Donald Trump and
156. 5:27Kamin-A. You don't have to actually go
157. 5:30and do this yourself. So, essentially
158. 5:31what you can do is you can get a
159. 5:33transparent image of Donald Trump or
160. 5:36whoever that the character might be. And
161. 5:38essentially, what you can do is you can
162. 5:40tell Claude code to make the image of
163. 5:43Donald Trump in the folder as black and
164. 5:45white and give it a half tone pattern to
165. 5:47finish. You can see over here as well,
166. 5:49like do the same for the image of
167. 5:51Kamina. And this is what you get out of
168. 5:53[music] it, right? So, it gives that
169. 5:55magazine sort of feel, that papery feel,
170. 5:58a texture that you would get. Uh so, it
171. 6:00doesn't look all digital. I mean, I'm a
172. 6:02huge fan of the way how Vox does their
173. 6:05animations, and this is just like one
174. 6:07way to sort of simulate that. If you go
175. 6:09to the scene file over here, and this is
176. 6:12what it actually looks like. Okay. So,
177. 6:15the way how we're going to do this is
178. 6:18we're going to be animating with intent.
179. 6:20And what I mean by that is we're going
180. 6:22to be using just two functions. Again,
181. 6:23you don't have to know these function
182. 6:25calls, you don't have to to necessarily
183. 6:27know how to code. But just for you to
184. 6:28understand, there's a spring function,
185. 6:30and then there's a interpolate. So,
186. 6:32essentially, spring is what does the
187. 6:33whole pop-up effects and all that. And
188. 6:36what happens over here is you don't even
189. 6:37have to say to use a spring function
190. 6:40over here. So, you can essentially say
191. 6:41plain English, "Animate scene one with
192. 6:43the White House spring up first,
193. 6:45followed by Donald Trump and Kamina
194. 6:47right after. Stagger them so they don't
195. 6:49all move at once. Give me an offset red
196. 6:52marker stroke behind each cutout [music]
197. 6:54for the midground characters." And this
198. 6:56gives you that signature sort of red
199. 6:58sort of stroke just to give it that a
200. 7:01little bit of a 3D illusion, and it just
201. 7:03honestly just looks nice. So, I will
202. 7:05copy this prompt here. So, it looks like
203. 7:07Claude Code is still running, setting up
204. 7:10the Remotion dependencies. Okay. So, now
205. 7:13what it's done is [music] it set up the
206. 7:15first scene with our characters in the
207. 7:19midground and White House in the
208. 7:20foreground. So, I'm just going to let it
209. 7:22complete, and then what we will do is we
210. 7:24will get it to start a Remotion server
211. 7:26for us, or Remotion Studio. And then
212. 7:28we'll go inside Remotion Studio, and we
213. 7:31need to make a few fine adjustments.
214. 7:35All right. So, it's giving me some
215. 7:36commands to start the Remotion Studio.
216. 7:40But what I can do is I can just ask it
217. 7:42in [music] plain English to stop the
218. 7:43studio for me. Stop the Remotion studio
219. 7:45for me, please.
220. 7:48All right. So, this is what the first
221. 7:50scene looks like.
222. 7:52And you can see it's not actually the
223. 7:55best because we [music] need to go make
224. 7:56some changes here. So, that's exactly
225. 7:58what we're going to do. So, one thing if
226. 8:00you notice over here, we've got this
227. 8:02error. So, I'm I'm just going to go and
228. 8:03sort out this error. So, I'll go back to
229. 8:06my Claude code. Uh fix this error,
230. 8:08please.
231. 8:17All right. So, it's fixed that error for
232. 8:19us. Now, the next thing we want to do is
233. 8:21we want to start adjusting our
234. 8:23characters. And this is where it's
235. 8:24really important if you don't see these
236. 8:27prop controls over here. So, make sure
237. 8:28you go back to your Claude code and ask
238. 8:31it to give you a prop control for all
239. 8:34the elements on the screen. So, this is
240. 8:36the prop control for Kamala Harris. What
241. 8:38I'm going to do is I'm going to start
242. 8:39tweaking some of these scale controls.
243. 8:42So, for example, I can put the scale to
244. 8:441.4 and you'll see Donald Trump just
245. 8:46becomes a bit bigger over there. So, I
246. 8:49can change the XY positions. And what
247. 8:51you need to do, guys, is also you need
248. 8:52to save these numbers as well. So, if I
249. 8:55do the scale as 1.4, so you'll see that
250. 8:57it's changed the scale, but make sure
251. 8:59you save it. So, it stays like that. And
252. 9:01then I can change the XY positions here.
253. 9:04But before we do this, we might have to
254. 9:06actually change the size and scale of
255. 9:09the White House. So, I'll set this to a
256. 9:11scale of 1.5.
257. 9:13Okay, maybe I'll make it slightly
258. 9:16bigger, 1.6. Save that. And then I'm
259. 9:19going to set this uh Y axis maybe all
260. 9:23the way down here. So, let's see what
261. 9:25that looks like. So, the White House
262. 9:27comes first and then Donald Trump and
263. 9:29Kamala Harris. So, the White House is
264. 9:31fine. Now, I just need to fix both of
265. 9:34these characters here. Maybe make the
266. 9:35White House slightly bigger, 1.8.
267. 9:43So, I think that scene is done, and
268. 9:46that's what that looks like. So, just to
269. 9:48run it again, so you have the White
270. 9:50House pop up first, and then you have
271. 9:51the two [music] characters pop up right
272. 9:53behind. So, now that we've made those
273. 9:55changes, so what you get is a bunch of
274. 9:58different scenes. Now, let me show you
275. 10:00what those scenes look like. So, you'll
276. 10:02see this is like a debt transition
277. 10:04scene. So, this is an oil tanker scene.
278. 10:06Now, for this one, what I did was this
279. 10:08there's an actual like green screen
280. 10:11ocean video that you can download off of
281. 10:14Magnific, and essentially, it's just an
282. 10:17animated or or like an actual video of
283. 10:19an ocean with the background just
284. 10:22removed. And this is what that looks
285. 10:23like.
286. 10:28And you can see there's a number that
287. 10:29comes up right after just to show that
288. 10:31oil prices have shot up. So, each scene,
289. 10:34guys, would be like in a different file,
290. 10:36essentially, right? So, this is the
291. 10:37scene for the debt inflation, for
292. 10:40example.
293. 10:42And you'll see a bar chart, or sorry, a
294. 10:44line chart just pops up along with a US
295. 10:47map. And then we have a transition scene
296. 10:49over here, as well.
297. 10:51>> [music]
298. 10:53>> So, once you have all of these scenes,
299. 10:55what you need to do is you need to put
300. 10:57them together. After you've done all of
301. 10:58your fine adjustments, the next thing
302. 11:00you want to do is you want to make you
303. 11:02want to assemble a master sequence. So,
304. 11:04now you can get Claude code to stitch
305. 11:06all of these scenes together in one
306. 11:08video in order, each one playing for as
307. 11:11long as it's part of the voiceover, so
308. 11:13they run back-to-back as a single film.
309. 11:15The next thing you want to do, right
310. 11:17after this, is you want to do your
311. 11:19voiceovers. [music]
312. 11:20Now, you can obviously use Claude code
313. 11:22to do your voiceovers, but then I go
314. 11:24separately to 11 Labs, and I generate my
315. 11:27voiceover just because I've got like
316. 11:28these saved voices on there. So, let me
317. 11:31show you how that works. So, you can go
318. 11:32into 11 Labs and you can go to
319. 11:34text-to-speech and I use Kate, which is
320. 11:36cinematic British RP narrator, and then
321. 11:39you can generate the speech.
322. 11:41>> The US and Iran are signing a peace
323. 11:43deal.
324. 11:43>> Okay. So, once you have this, you can
325. 11:45download it and put it into the same
326. 11:47folder, and you can come back to your
327. 11:49Claude code, and you can ask Claude code
328. 11:51to sync your entire clip to this
329. 11:54voice-over. So, this is the prompt for
330. 11:55that. So, I'm going to say, "Embed the
331. 11:57voice-over into the composition and
332. 11:58sequence the scenes to it. Each scene
333. 12:00should start and end on its own
334. 12:02narration." And once you've done that,
335. 12:04once you've done the voice-overs, the
336. 12:06next step is just some music. You need a
337. 12:08bit of polish, and you might even need
338. 12:11uh some Foley, some background sounds as
339. 12:13well. Sometimes what happens is when
340. 12:15you're scrubbing through uh Remotion
341. 12:18Studio, what might happen is the audio
342. 12:20might sound jerky. Um don't worry about
343. 12:22this. This is This is just like a
344. 12:24Remotion thing, but then once you render
345. 12:25it, it's it's going to sound clean. So,
346. 12:28once you've done all of that, you can
347. 12:29literally ask Claude code to render the
348. 12:32whole thing as a 1080p MP4 video with
349. 12:36the music and voice-over mixed in. If
350. 12:38you'd much rather do the music and
351. 12:40voice-over later in Adobe Premiere Pro,
352. 12:43you can do that, too. You can just get
353. 12:45the composition by itself, and then do
354. 12:46the music and voice-over separately. So,
355. 12:49there you have it. A fully animated
356. 12:51motion design in just a few minutes. If
357. 12:53you're interested in these kind of
358. 12:54videos, then do subscribe. [music]
359. 12:56I have a whole lot more Claude code and
360. 12:58motion graphics videos planned, so you
361. 13:00won't want to miss that. But until then,
362. 13:02have a good one.