The argument in one line.
When an AI writes the animation code and a renderer handles the output, the skill barrier for professional motion graphics collapses to being able to describe what you want in a sentence.
Read if. Skip if.
READ IF YOU ARE…
- A video creator who wants polished animated graphics but has no After Effects experience and no intention of learning it.
- A CapCut user who relies on template packs and wants to produce custom, brand-specific animations instead.
- Someone who has heard of Claude Code in a coding context and wants to see it applied to a creative workflow with no programming background.
- A solo creator producing educational or business content who wants analytics-style motion graphics that normally appear only on large-channel productions.
SKIP IF…
- You already use After Effects or a dedicated motion graphics tool fluently — the workflow shown here trades precision control for speed.
- You need real-time or broadcast-quality rendering; Remotion is a code-based renderer, not a live compositor.
The full version, fast.
Claude Code (the AI) writes Remotion (the renderer) code from a plain-English description; Remotion builds the animation in a browser-based studio; the finished .mp4 exports with a transparent background and drops straight into CapCut as an overlay. The tutorial demonstrates four builds completed in roughly 90 seconds each. The key transferable insight is the deliberate gap technique: building a timed pause into an animation so a separate CapCut text layer can fill it — making one render reusable for infinite text variations without ever re-running the AI.
Members feature
Chat with this breakdown.
Modern Creator members can chat with any breakdown — ask for the hook, quote a framework, find the exact transcript moment. Unlocks at T2: refer 3 friends + add your own API key.
Create a free account →Where the time goes.
00:00 – 00:34
01 · Intro montage
Finished animations play back-to-back; hook line delivered over the search bar graphic.
00:34 – 01:10
02 · The loop explained
Dina explains the Remotion + Claude Code feedback loop — AI writes code, Remotion renders, CapCut receives the transparent export.
01:10 – 02:13
03 · Setup overview
Four required tools listed (Node.js, Git, Claude Code, browser); full step-by-step guide deferred to linked Notion doc.
02:13 – 03:31
04 · Demo 1: Rolling number counter
Live build from blank Claude Code prompt to 100,000 counter rendering on transparent background in Remotion. ~90 seconds.
03:31 – 05:24
05 · Demo 2: Search bar + text-layer trick
Search bar animation built live; deliberate 5-second gap introduced as a reusable text placeholder for CapCut text layers.
05:24 – 05:51
06 · Mid-roll promo
Free Creator Starter Pack offer (horizontal mattes, social media mattes, outline frames, Apple Log LUT, 15 CapCut tutorials).
05:51 – 07:20
07 · Demo 3: Analytics dashboard
Glassmorphism subscriber dashboard built from a single long prompt; spring animations, sequential reveals, animated counters visible in Remotion preview.
07:20 – 08:39
08 · Demo 4: Website promo video
Claude given a live URL, logo, brand colors, and CTA; produces an Apple-ad-style promo pulling assets directly from the website.
08:39 – 09:12
09 · Outro
Recap, full setup guide reminder, like/subscribe ask, branded end card.
Lines worth screenshotting.
- Claude Code writing Remotion code is a one-sentence-in, polished-animation-out pipeline that requires no programming knowledge to operate.
- A transparent-background .mp4 exported from Remotion overlays on any CapCut clip exactly like a native effect — no compositing skill needed.
- Building a deliberate timed pause into an animation converts a single render into an infinitely reusable template by letting a swappable text layer fill the gap.
- Remotion Studio shows the animation building in real time as Claude writes the code — the feedback loop is fast enough to iterate live on camera.
- Giving Claude a live website URL alongside brand color hex codes and a call-to-action is sufficient input to generate a full promo video in Apple-ad style.
- The 90-second generation time for a rolling counter means the total time from idea to CapCut-ready asset is under five minutes including export.
- Glassmorphism UI cards, spring animations, and sequential reveals — the visual signature of big-channel analytics graphics — are fully accessible via a single long descriptive prompt.
- The setup is a one-time investment: once Node.js, Git, Claude Code, and a Remotion project exist on the machine, every subsequent animation is just a new prompt.
- Separating animation logic from text content at the editing stage (not the rendering stage) is what makes AI-generated motion graphics scalable for content creators.
- The same workflow that produces a 90-second number counter can produce a full brand promo video; the prompt length scales, the skill requirement does not.
One prompt is now enough to build a production-ready animation.
WHAT TO LEARN
The Claude Code and Remotion combination reduces motion graphics production to writing a description — and the deliberate gap technique turns each render into a reusable asset.
- Claude Code writes Remotion animation code from a plain-English sentence; you do not need to understand the code it produces to use the output.
- Remotion renders animations with a transparent background by default, which means the exported file overlays on any footage in CapCut without compositing knowledge.
- The one-time setup — Node.js, Git, Claude Code, a Remotion project — is a fixed cost; every animation after that is just a new prompt.
- Building a deliberate timed pause into a prompt converts one render into a permanent template: the animation handles motion, a separate text layer handles content, and swapping text never requires re-rendering.
- Prompt length correlates with output complexity — a three-sentence prompt produces a counter, a paragraph-length prompt produces a glassmorphism analytics dashboard with spring animations and sequential reveals.
- Giving Claude a live website URL with brand colors and a call-to-action is sufficient input to generate a full promotional video that pulls assets automatically from the page.
- The reusability principle applies beyond search bars: any animation with a predictable gap — a countdown, a highlighted word, a data slot — can be designed once and filled indefinitely with different content.
Terms worth knowing.
- Remotion
- A framework that renders animations and videos from JavaScript/TypeScript code, running in a browser-based studio with a live preview timeline. It produces .mp4 or image-sequence exports with optional transparency.
- Claude Code
- An AI coding assistant from Anthropic that operates as a desktop app, writes and edits code in a local project folder, and can be directed entirely through natural-language prompts.
- Transparent background (.mp4)
- A video file exported with an alpha channel so the animation floats over whatever footage sits beneath it in the editing timeline, with no visible background.
- Glassmorphism
- A UI design style characterized by frosted-glass-effect panels, soft shadows, and subtle translucency — commonly used in premium-looking dashboards and analytics graphics.
- PiP (Picture-in-Picture)
- A screen layout where a smaller video window (typically the presenter's webcam) is inset into a corner of a larger screen-share or background frame.
- Spring animation
- An easing style where elements overshoot their final position slightly and bounce back, giving motion a physical, elastic quality rather than a mechanical linear feel.
Things they pointed at.
Lines you could clip.
00:16
“Everything you just watched came from a text prompt. No After Effects, no design skills, no coding.”
03:15
“That took about ninety seconds.”
05:11
“This means I can reuse this animation forever. Any search query, any keyword, any phrase, I just swap the text layer. I never have to rerender the animation itself.”
08:20
“I genuinely could not believe it the first time I saw this render.”
Word for word.
metaphoranalogystory
00:16Everything you just watched came from a text prompt. No after effects, no design skills, no coding. Just a sentence typed into an AI.
00:26I'm going to show you exactly how to do this today. I'm Dino, and I'm here to help you master Capcom the easy way.
00:33Let's jump in.
00:39So let me explain what is actually happening here because once you get it, the whole thing clicks. Two tools that they work together, Remotion is the tool that renders motion graphics from code, and Clothecode is the AI that writes the code for you.
00:56You describe what you want in plain English. Clothecode writes the code. Remotion builds the animation, and you export it, and then you can drop it straight into CapCart.
01:06That is the whole loop. You never have to type any code whatsoever.
01:16Right. Setup. I'm going to keep this short because I have put together a full step by step guide, Mac and Windows, and the link is in the description.
01:25Everything 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 from nodejs.org.
01:38Download the LTS version. Git from git-scm.com. Clawd Code desktop app from clawd.ai.
01:48This does require a subscription 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.
02:01The 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.
02:18So 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. You have seen those videos where a number counts up on screen.
02:34They 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.
02:48Type this prompt into growth code. Create a rolling number animation from zero to 100,000 over five seconds.
02:56Place it on a transparent background. Make the final number or brand color, 02E482. Keep it on screen for five more seconds, then fade out.
03:07Watch what happens in Remotion Studio as Kroll writes the code. You can literally see building the animation in real time. That is the thing that gets me every time.
03:18And that is it. That took about ninety seconds. Now I can hit render, export it, and drop it straight over any clip in Capcom.
03:26It sits on top of your footage perfectly because the background is transparent.
03:36Next 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.
03:51Type this into ClotCode. Create a search bar animation. In the animation, make the search bar slowly zoom in smoothly, then leave it on for three seconds, then make a cursor blink instead of the word search for three seconds.
04:06After that, wait five seconds and add an arrow cursor animation clicking the magnifying glass. Then after the click, the entire animation fades to black.
04:19Make 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.
04:33Notice that in the prompt, I asked Claude to wait five seconds after the cursor blink before the click happens. That was intentional. , basically.
04:47When I drop this into CapCart, I add a text clip on a layer above the animation during those five seconds 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.
05:07It looks like one seamless sequence, but the text is completely separate. This means I can reuse this animation forever. Any search query, any keyword, any phrase, I just swap the text layer.
05:19I never have to rerender the animation itself. This is the whole point of building it this way. Quick one before the good stuff.
05:26If you want the free assets to use in your edits right now, there is a free creator starter pack at .com. You get horizontal mattes, social media mattes, outline frames, Apple look to rec seven zero nine lot, and 15 cap cut effect tutorials. Each one is under a minute and designed to create the kind of scroll stopping visual hooks that make people stop and watch.
05:49All free. Link's in the description.
05:56This one is where it starts to feel genuinely impressive. This is the subscriber analytics dashboard, class morphism cards, animated counters, the whole thing.
06:07The kind of graphic you see on big channels and assume took hours. 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, smooth graph animation, and green accents in zero two e four a two.
06:31Include a large animated subscriber counter, growth percentage, watch time, engagement stats, floating analytics cards, and dynamic UI motion.
06:41Use premium typography, cinematic pacing, soft easing, spring animations, sequential reveals, and subtle motion blur.
06:50Content, YouTube subscribers, 12,487.
06:54Growth, plus 42%. Watch time, one four eight k. Engagement, 8.7%.
07:00Format, nineteen twenty by ten eighty, 30 frames per second, eight seconds.
07:08Those floating cards, the spring animations, the sequential reveals, all from that one prompt. And you can swap in your own numbers, your own colors, whatever you need.
07:18Just tell what to change.
07:25The last one is the most ambitious, a full website promo video. I gave Claude a URL, our logo, our brand colors, and a call to action and ask for something that looks like an Apple ad.
07:38I just needed to add some sound effects and music to it. Type this into. Make a promo for dinner and agnus.com.
07:46Use photos and videos available on their website. Use their logo, horizontal videos, some brand font, and colors.
07:53Call to action is everything on their website is 30% off for a week. Professionally designed like Apple and beautifully animated.
08:03This is what came back.
08:20That'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. And every single one of these, the rolling number, the search bar, the dashboard, the promo, they all came out of and Remotion, then I just exported them and dropped straight into CapCart.
08:43The full setup guide is link in the description, every step, every command, Mac and Windows, completely free. Go get it, follow the steps, and you will be building your first motion graphic today.
08:55If 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.
The Hook
The bait, then the rug-pull.
A glowing search bar materializes on a black field, zooms forward, and fades — and then the host tells you it took one sentence to make. The title promises no coding; the opening montage delivers that promise before a word of explanation is spoken.
Named ideas worth stealing.
00:34model
The Prompt-Render-Export Loop
- Describe the animation in plain English to Claude Code
- Claude writes the Remotion component
- Remotion Studio previews live
- Export as transparent .mp4
- Drop into CapCut as an overlay
The five-step production loop the whole tutorial is built around.
Steal forAny creator workflow that needs branded animated overlays without a motion design budget
04:22concept
The Deliberate Gap Technique
Build a timed pause into an animation during the prompt phase. The gap becomes a placeholder for a CapCut text layer, making one render reusable for any text variation.
Steal forSearch-bar animations, countdown animations, any graphic where the text content changes but the motion does not
How they asked for the click.
08:39subscribe
“If this video was useful, a like and a subscribe means a lot. It shows us that we're doing the right stuff.”
Soft ask, framed as audience feedback signal rather than vanity metric. Follows a genuine summary of what was delivered. Mid-roll product promo at 05:24 is separate and well-paced.
Visual structure at a glance.
