WEBVTT 00:00:16.415 --> 00:00:23.055 Everything you just watched came from a text prompt. No after effects, no design skills, no coding. 00:00:23.135 --> 00:00:25.775 Just a sentence typed into an AI. 00:00:26.015 --> 00:00:28.975 I'm going to show you exactly how to do this today. 00:00:29.135 --> 00:00:32.190 I'm Dino, and I'm here to help you master Capcom 00:00:32.190 --> 00:00:34.430 the easy way. Let's jump in. 00:00:39.230 --> 00:00:46.975 So let me explain what is actually happening here because once you get it, the whole thing clicks. Two tools that they work together, 00:00:47.295 --> 00:00:51.295 Remotion is the tool that renders motion graphics from code, 00:00:51.695 --> 00:01:02.240 and Clothecode is the AI that writes the code for you. You describe what you want in plain English. Clothecode writes the code. Remotion builds the animation, 00:01:02.320 --> 00:01:06.160 and you export it, and then you can drop it straight into CapCart. 00:01:06.320 --> 00:01:10.560 That is the whole loop. You never have to type any code whatsoever. 00:01:16.285 --> 00:01:23.645 Right. Setup. I'm going to keep this short because I have put together a full step by step guide, Mac and Windows, 00:01:23.885 --> 00:01:36.110 and the link is in the description. Everything is in there. So I'm just going to show you what you need, where to get it, and then we are moving straight into the fun part. You need four things, Node JS 00:01:36.110 --> 00:01:38.670 from nodejs.org. 00:01:38.955 --> 00:01:44.155 Download the LTS version. Git from git-scm.com. 00:01:44.155 --> 00:01:47.595 Clawd Code desktop app from clawd.ai. 00:01:48.075 --> 00:01:50.315 This does require a subscription 00:01:50.475 --> 00:02:13.165 and a browser for the live preview, which you already have. Once those are installed, you create your Remotion project, do a one time git setup in signing. The full guide walks you through every command in order and covers everything that can go wrong. So if you get stuck at any point, open the link in the description, and it is all in there for you. 00:02:18.765 --> 00:02:30.300 So let me show you how this actually works by building one life. I'm going to start with the rolling number animation because it is one of the most useful things you can drop into CapCut. 00:02:30.380 --> 00:02:54.780 You have seen those videos where a number counts up on screen. They always look great, and now you can have one in two minutes. So I have Remotion Studio running in the browser and Cloud Code open right in front of me. I'm just going to type exactly what I want. Type this prompt into growth code. Create a rolling number animation from zero to 100,000 00:02:54.860 --> 00:03:03.180 over five seconds. Place it on a transparent background. Make the final number or brand color, 02E482. 00:03:03.785 --> 00:03:06.825 Keep it on screen for five more seconds, 00:03:07.065 --> 00:03:15.065 then fade out. Watch what happens in Remotion Studio as Kroll writes the code. You can literally see building the animation in real time. 00:03:15.305 --> 00:03:22.830 That is the thing that gets me every time. And that is it. That took about ninety seconds. Now I can hit render, 00:03:22.830 --> 00:03:26.830 export it, and drop it straight over any clip in Capcom. 00:03:26.990 --> 00:03:31.630 It sits on top of your footage perfectly because the background is transparent. 00:03:36.895 --> 00:03:54.680 Next one. This is the search bar animation, and, honestly, this is one of my favorites because it looks so much more polished than it should. It is the kind of thing you see in high end production YouTube videos, and it takes two minutes to make. Type this into ClotCode. Create a search bar animation. 00:03:54.840 --> 00:03:58.440 In the animation, make the search bar slowly zoom in smoothly, 00:03:58.760 --> 00:04:06.475 then leave it on for three seconds, then make a cursor blink instead of the word search for three seconds. 00:04:06.875 --> 00:04:17.430 After that, wait five seconds and add an arrow cursor animation clicking the magnifying glass. Then after the click, the entire animation 00:04:17.590 --> 00:04:42.420 fades to black. Make the search bar box semi transparent and this color, zero two e four eight two. See that cursor blink, the click, the fade? Looks properly produced, but here is the part I actually want you to pay attention to. Notice that in the prompt, I asked Claude to wait five seconds after the cursor blink before the click happens. That was intentional. 00:04:42.660 --> 00:04:46.580 That five second gap is a text layer placeholder, 00:04:46.580 --> 00:04:54.660 basically. When I drop this into CapCart, I add a text clip on a layer above the animation during those five seconds 00:04:55.225 --> 00:05:11.640 and put a time brighter effect on it from the animation step. The animation does the search bar, the cursor blink, the buildup, and then my text types itself in during that gap, and then the click happens and it fades to black. It looks like one seamless sequence, but the text is completely separate. 00:05:11.800 --> 00:05:14.440 This means I can reuse this animation forever. 00:05:14.760 --> 00:05:21.160 Any search query, any keyword, any phrase, I just swap the text layer. I never have to rerender the animation itself. 00:05:21.665 --> 00:05:32.865 This is the whole point of building it this way. Quick one before the good stuff. If you want the free assets to use in your edits right now, there is a free creator starter pack at .com. 00:05:32.865 --> 00:05:41.470 You get horizontal mattes, social media mattes, outline frames, Apple look to rec seven zero nine lot, and 15 cap cut effect tutorials. 00:05:41.710 --> 00:05:51.935 Each one is under a minute and designed to create the kind of scroll stopping visual hooks that make people stop and watch. All free. Link's in the description. 00:05:56.975 --> 00:06:00.575 This one is where it starts to feel genuinely impressive. 00:06:00.655 --> 00:06:03.215 This is the subscriber analytics dashboard, 00:06:03.215 --> 00:06:07.130 class morphism cards, animated counters, the whole thing. 00:06:07.610 --> 00:06:12.010 The kind of graphic you see on big channels and assume took hours. 00:06:12.410 --> 00:06:26.305 Type this into growth code. Create a premium cinematic creator analytics motion graphic in apple linear stripe style with a black background, glass morphism UI cards, soft shadows, subtle depth, floating layered elements, 00:06:26.385 --> 00:06:28.065 smooth graph animation, 00:06:28.145 --> 00:06:34.830 and green accents in zero two e four a two. Include a large animated subscriber counter, 00:06:34.830 --> 00:06:38.270 growth percentage, watch time, engagement stats, 00:06:38.270 --> 00:06:39.950 floating analytics cards, 00:06:40.110 --> 00:06:43.390 and dynamic UI motion. Use premium typography, 00:06:43.390 --> 00:06:46.670 cinematic pacing, soft easing, spring animations, 00:06:47.015 --> 00:06:47.815 sequential 00:06:47.815 --> 00:06:50.775 reveals, and subtle motion blur. Content, 00:06:50.935 --> 00:06:52.215 YouTube subscribers, 00:06:52.375 --> 00:06:54.215 12,487. 00:06:54.215 --> 00:06:56.295 Growth, plus 42%. 00:06:56.295 --> 00:06:59.735 Watch time, one four eight k. Engagement, 8.7%. 00:07:00.060 --> 00:07:04.780 Format, nineteen twenty by ten eighty, 30 frames per second, eight seconds. 00:07:08.540 --> 00:07:13.260 Those floating cards, the spring animations, the sequential reveals, all from that one prompt. 00:07:13.765 --> 00:07:17.285 And you can swap in your own numbers, your own colors, 00:07:17.365 --> 00:07:20.325 whatever you need. Just tell what to change. 00:07:25.125 --> 00:07:33.370 The last one is the most ambitious, a full website promo video. I gave Claude a URL, our logo, our brand colors, 00:07:33.530 --> 00:07:43.245 and a call to action and ask for something that looks like an Apple ad. I just needed to add some sound effects and music to it. Type this into. 00:07:43.645 --> 00:07:46.125 Make a promo for dinner and agnus.com. 00:07:46.125 --> 00:07:51.645 Use photos and videos available on their website. Use their logo, horizontal videos, 00:07:51.645 --> 00:07:58.000 some brand font, and colors. Call to action is everything on their website is 30% 00:07:58.000 --> 00:08:03.120 off for a week. Professionally designed like Apple and beautifully animated. 00:08:03.280 --> 00:08:04.400 This is what came back. 00:08:20.435 --> 00:08:30.450 That's pulled the photos from the web website, used our logo, matched the brand fonts and colors, and animated the whole thing. I genuinely could not believe it the first time I saw this render. 00:08:30.850 --> 00:08:38.365 And every single one of these, the rolling number, the search bar, the dashboard, the promo, they all came out of and 00:08:38.365 --> 00:08:39.245 Remotion, 00:08:39.245 --> 00:08:42.925 then I just exported them and dropped straight into CapCart. 00:08:43.005 --> 00:08:48.765 The full setup guide is link in the description, every step, every command, Mac and Windows, 00:08:49.085 --> 00:09:04.880 completely free. Go get it, follow the steps, and you will be building your first motion graphic today. If this video was useful, a like and a subscribe means a lot. It shows us that we're doing the right stuff. Now go create something awesome, and I'll see you in the next one.