Claude Design Just Unlocked AI Motion Graphics — Transcript

Full transcript

1. 0:00Cloud design is an awesome platform
2. 0:02that's gaining popularity, but there's
3. 0:04one feature that most people overlook,
4. 0:06but it's the one that I use the most.
5. 0:09Animations. That's what I used to make
6. 0:11all the motion graphics you're seeing on
7. 0:13the screen right now, and I've been
8. 0:14using in every one of my recent videos.
9. 0:16It can make all sorts of other
10. 0:18interesting animations, too. But the
11. 0:20most unique part is the ability to guide
12. 0:22it with a transcript. I drop in a
13. 0:24transcript and it pops out animations
14. 0:26fully synced up to the words I'm
15. 0:28speaking. So, I'll walk through some
16. 0:30different kinds of animations it can
17. 0:31make and the exact prompts and process
18. 0:34I've been using in my videos. I'll
19. 0:36include the editing process since I've
20. 0:37had a lot of people ask about that.
21. 0:42First, just a quick overview and how to
22. 0:44access it. You do need to be on a paid
23. 0:46Claude plan to use Claude Design, either
24. 0:48pro or max. Then, you can go to
25. 0:50claude.ai/design
26. 0:52or you can find it on the sidebar in
27. 0:54Claude. Once you're there, you have all
28. 0:56sorts of different templates to choose
29. 0:58from. In my dedicated claude design
30. 1:00video, I covered all of those. We've got
31. 1:02slides, mobile app design, UI mockups,
32. 1:06resume, 3D objects, and a lot more. But
33. 1:08for this video, I'm focusing on
34. 1:10animations. I'll start by creating one
35. 1:12with just a prompt. Then I'll show using
36. 1:14a reference image, then multiple
37. 1:16reference images, then using a design
38. 1:18system, which is where you can create a
39. 1:20full brand style and voice guide that it
40. 1:22will work from each time. And for every
41. 1:24video I make about Claude, I have a
42. 1:26Claude design system that includes the
43. 1:28UI, the logo, colors, and all of that.
44. 1:31So, all I have to do is select it, paste
45. 1:33in my prompt, drop in a timestamped
46. 1:35transcript, which I'll show you how to
47. 1:37get easily, then send it.
48. 1:42I'll build up to that. So, how about for
49. 1:44this first example, I'll say animate a
50. 1:48visual explanation of how LLMs are
51. 1:51trained and how they work. And I'll just
52. 1:53send it like that. And some of the time
53. 1:55it will come back with a list of
54. 1:57questions. Usually it's just a couple,
55. 1:58but for a very vague prompt like this
56. 2:01was, it has quite a few. So I'll answer
57. 2:03those. This is for curious professionals
58. 2:05and execs. 30 seconds since this is just
59. 2:08a demo. 16:9 aspect ratio. Decide for
60. 2:11me. Decide for me. Minimal labels. And
61. 2:15there's a few more. Then I will hit
62. 2:17continue. And it will start generating.
63. 2:19In just a few minutes, that came back.
64. 2:21Let's check it out.
65. 2:22And it does have this tweaks panel where
66. 2:24I can test different accent colors. I
67. 2:27actually really liked that opening shot
68. 2:29or the cat sat on the mat. That's the
69. 2:31example I see used every time this topic
70. 2:34is explained.
71. 2:35That was a solid transition. And I think
72. 2:38I liked this red color the most. And
73. 2:40there is this timeline at the bottom
74. 2:42where I can adjust the length of these
75. 2:43shots. I could drag this in if I wanted
76. 2:46this one to go faster. Yeah, you get the
77. 2:47idea. This is looking great. But what is
78. 2:50awesome is I can make changes using
79. 2:52natural language. So maybe I want it to
80. 2:54use a different phrase as the example. I
81. 2:56can just ask for it to change that. Then
82. 2:59it came back and it says the kettle
83. 3:01began to boil. Yeah, changed it
84. 3:03perfectly while keeping everything else
85. 3:05the same. And I'll actually skip to the
86. 3:07end. See if it switched it out in the
87. 3:09question. And it did. So that is
88. 3:12amazing. It would take a really long
89. 3:14time to create this from scratch. And
90. 3:16that was still a relatively simple one.
91. 3:18Another thing it's particularly useful
92. 3:19for is data visualizations like animated
93. 3:22charts and graphs. Here's another quick
94. 3:24one I did just from a prompt with no
95. 3:26reference images. I asked for a
96. 3:28comparison of the different market
97. 3:29bubbles through history and where we're
98. 3:31at now in the AI bubble. And that turned
99. 3:33out amazing. And I didn't give it any of
100. 3:35this information as part of the prompt.
101. 3:37It went out and did the research itself
102. 3:39to find all the numbers to use. So just
103. 3:41from a prompt, you can get some super
104. 3:43helpful animations. And these are very
105. 3:45different from what you would get from a
106. 3:47typical texttovideo generator. Claude is
107. 3:49writing actual code underneath like
108. 3:51HTML, CSS, and JavaScript. And it shows
109. 3:54it to you live. And those three are
110. 3:56basically the structure, the styling,
111. 3:58and the motion. It's all happening in
112. 4:00real time. It is totally different from
113. 4:02a generator that sends back a completed
114. 4:04video file. And that's why the output in
115. 4:06design is so easy to make precise edits
116. 4:09to. It's just changing parts of that
117. 4:10code. I'm focused on just one of these
118. 4:13templates in Cloud Design right now, but
119. 4:15there's way more to the platform. So, we
120. 4:17created a free guide called Claude
121. 4:19Design in action with use cases you can
122. 4:21try today. And each use case has an
123. 4:23optimized prompt to get you the result
124. 4:25you're looking for much faster. And we
125. 4:27updated this to include the exact prompt
126. 4:29that I'll be using in the next section
127. 4:31to create these motion graphics. But on
128. 4:33top of that, there's workflows for
129. 4:35tailored pitch decks, landing page from
130. 4:37competitor screenshots, social media
131. 4:39templates, and more. These will save you
132. 4:41a lot of iteration time with every step
133. 4:43from prompt to export. That's a free
134. 4:45guide at the link in the description.
135. 4:51You can also create animations that work
136. 4:53from an image. Here's an example from a
137. 4:55previous video. I was covering the
138. 4:57Claude ecosystem and had the idea of how
139. 4:59I wanted it to look. So, I prompted GPT
140. 5:01image 2 and it came back looking almost
141. 5:04exactly how I was envisioning it. But, I
142. 5:06needed this animated. So I can drop the
143. 5:08image in and explain what type of
144. 5:10animation I want. Basically I want the
145. 5:12top three at the start, then for each
146. 5:14layer to animate in, pause, then move on
147. 5:17to the next going down the ecosystem.
148. 5:19And the pauses are because I was using
149. 5:20it sort of like a title screen when I'd
150. 5:22get to that section. Then this one did
151. 5:24not have any questions. It just went for
152. 5:26it and came back like this. So it starts
153. 5:28on the title, then the core products
154. 5:30comes in. There's a pause, then the
155. 5:33universal layer. These are all really
156. 5:35smooth animations. There's context in
157. 5:37memory, a pause, then the final
158. 5:39autonomous layer. That nailed it on the
159. 5:42first try. And this looks different from
160. 5:44my reference image because again, it's
161. 5:46not animating the image itself. It
162. 5:48recreates the idea using code. That
163. 5:51example was using the image for it to
164. 5:53basically recreate it. But you can use
165. 5:54image references for all sorts of
166. 5:56things. A great one I've been using is
167. 5:58the UI of different platforms since I
168. 6:00need that regularly. I drop it in and it
169. 6:02can simulate like a cursor moving around
170. 6:04and clicking on things, windows popping
171. 6:06up or typing into a prompt box or a
172. 6:08conversation going back and forth. That
173. 6:10stuff is really hard to do the
174. 6:12traditional way unless you use a
175. 6:14template which you can find for some of
176. 6:15the common platforms but definitely not
177. 6:17the less used platforms and you can't
178. 6:19really get that customized with it. So
179. 6:21this is a huge time saver there
180. 6:25and those were using one image
181. 6:27reference. With multiple image
182. 6:29references, you can really guide the
183. 6:30style to be consistent across a long
184. 6:32generation while also including specific
185. 6:35logos, UIs, icons, or anything you need.
186. 6:38I'm going to make one about Claude. So,
187. 6:40I'll use the little Claude character.
188. 6:42Then the prompt box, chat interface, and
189. 6:45this one is what I want the background
190. 6:47to look like. These four should give it
191. 6:49everything I need. So, I'll drop those
192. 6:51in. Then I have a relatively simple
193. 6:53prompt I've been using. And I made it a
194. 6:55little more generalized with room for
195. 6:57Claude to design things so I can use it
196. 6:59across any generations for different
197. 7:01products, different concepts, and
198. 7:03different types of explanations I'm
199. 7:04giving. I want motion graphics that will
200. 7:06be used over a talking head video. They
201. 7:08should follow the transcript, illustrate
202. 7:09the concepts at the matching timestamps,
203. 7:11default to graphics and icons to
204. 7:13illustrate concepts whenever possible.
205. 7:15Use the interface when applicable. Use
206. 7:17text minimally when appropriate to
207. 7:18emphasize key points or label things.
208. 7:20The exception is if there's a definition
209. 7:22where the exact text on screen makes
210. 7:24sense. So, you can see that's pretty
211. 7:26generalized to work across basically any
212. 7:27of the types of videos that I make. And
213. 7:29the part about using text minimally is
214. 7:31because it will default to using a lot
215. 7:33of text, almost like full captions
216. 7:35throughout, which I don't like at all,
217. 7:36but that's easy to fix. And then the
218. 7:38next part, this is telling it to leave
219. 7:40blank space on the right third, mostly,
220. 7:42sometimes the top third, for me to place
221. 7:44the talking head. Otherwise, it defaults
222. 7:46to full screen the whole time. Then I
223. 7:47don't have a spot to place myself in it.
224. 7:49And I tell it to switch between
225. 7:51locations as it sees fit. But usually
226. 7:52the top third open is for larger points
227. 7:55and definitions or it can even go full
228. 7:57screen if it calls for it. Then in this
229. 7:58case I actually need to add a line about
230. 8:01how I added that background image for it
231. 8:03to use. I'll tell it to add a subtle
232. 8:04animation to it. We got aspect ratio
233. 8:0716:9. Then I need to paste in the
234. 8:09transcript. The easiest and fastest way
235. 8:12I found to do this is using Gemini. Say
236. 8:14give me an SRT transcript for this. Then
237. 8:16I drop in the section of the video I
238. 8:18want the animations over. Then in 5 to
239. 8:2010 seconds it comes back. And SRT stands
240. 8:23for subrippp text. It's just this
241. 8:25format. It's a plain text file that
242. 8:27includes the time codes with the text
243. 8:30below and line breaks in between. Gemini
244. 8:32knows what that means. I just click to
245. 8:34copy that, then paste it at the end of
246. 8:35the prompt and send it off. And again,
247. 8:38that prompt is included in that resource
248. 8:40that's linked in the description. You
249. 8:41can take that and modify it for whatever
250. 8:43your purposes are. There were no
251. 8:44questions to answer. This is what came
252. 8:46back. You can see it left space on the
253. 8:48right for my talking head. Then this
254. 8:51chat interface looks amazing with the
255. 8:53little claw character floating up and
256. 8:55down. This is looking great, but it
257. 8:56really makes the most sense when my
258. 8:58talking head is over the top. So, I'll
259. 8:59add that and play the full thing back
260. 9:01with sound, except it actually only left
261. 9:03the space on the right this whole time.
262. 9:05So, I want to switch the open space to
263. 9:07the top near the end so I can send off a
264. 9:09quick follow-up. move conversation and
265. 9:11one turn to the bottom center, leaving
266. 9:13enough room up top for the talking head.
267. 9:15And those are the titles Claude gave
268. 9:16those sections. You can see those below.
269. 9:18I usually just reference those by name
270. 9:20when I need them changed. And that's
271. 9:21worked really well. And that did come
272. 9:23back. Perfect. So I'll come up to share
273. 9:25then select video. Then I want to bump
274. 9:27it up to 1080p. Export that. Then I can
275. 9:30bring it into Premiere. And this is my
276. 9:32actual timeline from the previous video
277. 9:34I made where this clip came from. Then I
278. 9:36added the scale and position key frames
279. 9:38manually. then use a bezier to smooth
280. 9:41the motion out. I'll then do a similar
281. 9:42thing with the mask. I would adjust that
282. 9:44manually to where I want it, then sync
283. 9:46it up with the movement. Then I'll go
284. 9:48over to the next movement and click into
285. 9:50that. And you can see it's just the same
286. 9:52thing. And once I've made these moves
287. 9:53once, I can copy paste them. But the way
288. 9:55to do that in Premiere is actually
289. 9:57pretty annoying. So I built a plugin for
290. 9:59Premiere to fix that. Plus a few other
291. 10:01things that are just timeconuming for
292. 10:03this type of video like zooms and
293. 10:04animated highlights and things like
294. 10:06that. It's actually been amazing. It
295. 10:08saves so much time on the really tedious
296. 10:10things I do a lot and it was fun to make
297. 10:12too. And this is just like a personal
298. 10:14use plugin I've been making. Um, this
299. 10:15isn't something you can use right now if
300. 10:17you want to. Sorry, but I've been super
301. 10:19excited about this. So, I'll just really
302. 10:21quickly show some of this since this is
303. 10:22what I'm actually using now. And I built
304. 10:24the whole thing in codecs, by the way.
305. 10:26For zooms, I just click where I want the
306. 10:28zoom. I can change the scale if I want
307. 10:30and then just hit animate and it's done.
308. 10:32It's a super smooth zoom. Then for
309. 10:34highlights, I position this rectangle
310. 10:36and hit magnify to zoom in and get it
311. 10:38just right. I can change the color or
312. 10:40the animation style. I really like draw.
313. 10:43Then it's good. Hit animate. And now it
314. 10:46has that highlight. And I have that. So
315. 10:47the highlight is animating in while it's
316. 10:49zooming. And it adds a fade to the
317. 10:51background all at the same time. Super
318. 10:53easy. Or I can even do a popup where I
319. 10:55place another rectangle. Then it will
320. 10:57animate out into that. There's actually
321. 10:59a bunch of other stuff in here, but I'll
322. 11:00move on to the talking head option. So,
323. 11:02I have the talking head clip on top.
324. 11:04Then, the video I just got back from
325. 11:05Claude below. Now, all I need to do is
326. 11:08click one of these preset positions and
327. 11:10a shape. Then, I can resize it manually
328. 11:12if I want. And I don't need these on
329. 11:14this one, but I can also add like a
330. 11:15border and change the color and add a
331. 11:17gradient, then a glow or drop shadow.
332. 11:20I'll turn all that off. Or maybe leave
333. 11:21the drop shadow. And then I'll actually
334. 11:23reframe the shot a little. I like when
335. 11:25the orange light is right at the top of
336. 11:27the mask. That's better. Then I click
337. 11:29animate to this state. And in a couple
338. 11:31seconds, there it is.
339. 11:34And everybody knows. And it works the
340. 11:36same across all three surfaces. That's a
341. 11:39perfectly smooth animation. Then in the
342. 11:41later section, I wanted that to move up
343. 11:43to the center. So I'll put the playhead
344. 11:45there. Click refresh frame so I can see
345. 11:47where it needs to go. Click the location
346. 11:49and shape again. Got to make sure that
347. 11:51orange light is perfectly at the top.
348. 11:53Then click animate. And now here it is.
349. 11:57Perfect. So now I'll make it bigger.
350. 11:58Then I can play that from the beginning
351. 12:00and you can see how the animations sync
352. 12:02up with what I'm saying. Chat is the one
353. 12:05everybody knows and it works the same
354. 12:07across all three surfaces. This is your
355. 12:09back and forth with Claude for
356. 12:11brainstorming, writing, research,
357. 12:14working out an idea. It's a thinking
358. 12:16partner. You can extend it with built-in
359. 12:19features like projects which give it
360. 12:21permanent context about your work or
361. 12:23connectors which let it use your other
362. 12:25tools like your email or your calendar
363. 12:27or artifacts which is that little app or
364. 12:30document window that opens next to the
365. 12:32chat. But at its core, chat is a
366. 12:35conversation. Everything chat does even
367. 12:37when it makes you a file or builds you a
368. 12:39little dashboard, it happens inside one
369. 12:42turn, then it hands it back and waits
370. 12:44for you.
371. 12:45I've used these in quite a few videos
372. 12:47now, but it is still insane to me how
373. 12:50easy it is to get this quality of motion
374. 12:52graphics. But now I want to do one more
375. 12:54example because there's still a really
376. 12:56important feature I haven't covered yet.
377. 13:00Uploading a series of reference images
378. 13:02works great, but that only applies to
379. 13:04that generation. A lot of the time,
380. 13:06you'll want to use a style across
381. 13:08multiple generations so it stays
382. 13:10consistent across shots or across
383. 13:12videos. Maybe that's so it matches your
384. 13:14brand colors every time. Or like me, I
385. 13:16make a lot of videos about Claude and I
386. 13:18want it to have the logo and UI and
387. 13:20colors every time. Or even within a
388. 13:22single video, I usually only generate
389. 13:23around 30 seconds or up to 2 minutes
390. 13:26sections at a time. And I may have a few
391. 13:28of those across a video. So I need to
392. 13:30create a reusable design system, which
393. 13:32is really easy. You can click the plus
394. 13:34button under the design system dropown
395. 13:36or below there's a design system tab
396. 13:38where you can see all of your previous
397. 13:40systems. Then for a new one, click
398. 13:42create design system. Then either create
399. 13:44using cloud code or I'll show create
400. 13:47here. Then you can link code from
401. 13:48GitHub, your computer, upload a Figma
402. 13:50file, or drop in the images you want it
403. 13:52to draw from. I just dropped in these
404. 13:54three images. I used GPT image 2 to
405. 13:57generate these in a consistent style
406. 13:59across them, covering the types of
407. 14:01things that would come up in some of my
408. 14:02videos. Then you can add more notes to
409. 14:04guide it, but I'll just call that good
410. 14:06and say continue to generation. Then it
411. 14:08will take about 5 minutes. Now it
412. 14:11finished the whole document with the
413. 14:13system laid out, the content
414. 14:14fundamentals, visual foundations, then
415. 14:17all these different visuals it will use
416. 14:18across generations, types of lines
417. 14:21connecting things, the style of glass
418. 14:23and strokes, glow elevation,
419. 14:25iconography. This keeps going on and on.
420. 14:28Like there's a ton of stuff in here and
421. 14:29you can of course ask for any edits you
422. 14:31want to this, but I'll use it as is.
423. 14:33Now, when I go back to the main screen
424. 14:35and open up that design system dropown,
425. 14:37it's right here. I didn't give it a name
426. 14:39or specify what it's for, so it just
427. 14:41called it Halo Neon Design System. And
428. 14:43select animation, and I'll paste in that
429. 14:46same prompt. Go to Gemini, drop in a
430. 14:48section from an old video about agents.
431. 14:51Copy, paste that in, and send it off.
432. 14:55Now, that has come back and everything
433. 14:56looks like it used the style from the
434. 14:58design system perfectly. I'm going to go
435. 15:00ahead and just export this so I can add
436. 15:01the talking head over it. I'll do this
437. 15:04in the same way, although I'm noticing
438. 15:05the color grading was so bad in this
439. 15:07video. I don't know why I made myself so
440. 15:09bright compared to the background here.
441. 15:11Oh well, just a few clicks using that
442. 15:13plugin. Finished the video up and here
443. 15:15it is. Just quick refresher for those
444. 15:17new here. An AI agent is a system that
445. 15:20can reason, plan, and take actions on
446. 15:22its own based on information it's given.
447. 15:24Think of it like a digital employee that
448. 15:26can think, remember, and get things
449. 15:28done. That's different from a chatbot or
450. 15:30an automation. A chatbot answers
451. 15:32questions. An agent takes your goal and
452. 15:35delivers a result. An automation follows
453. 15:37fixed steps. An agent reasons and
454. 15:40chooses actions based on context. To
455. 15:42pull this off, an agent has three core
456. 15:45components. The brain, memory, and
457. 15:48tools, integrations that let it take
458. 15:50actions on your behalf. This is how it
459. 15:52actually interacts with the world and
460. 15:54accomplishes tasks.
461. 15:56I think that looked amazing. Literally
462. 15:58one shot. I just used it as is. That's
463. 16:00the whole system. I am still genuinely
464. 16:03blown away to be able to do this now.
465. 16:04It's been a huge timesaver for me. I
466. 16:07don't know how many people that workflow
467. 16:08is relevant to, but I'm sure there's
468. 16:10some out there. So hopefully that helps
469. 16:12and I'll see you in the next