Decoded

How to Make Motion Graphics with Claude AI: A 30-Second Promo in 4 Prompts Motion graphics used to mean a timeline editor, a template library and an afternoon of keyframes. In our latest tutorial we skip all of that. Four prompts take a fictional brand called POPSY from a written brief to a 30-second kinetic-typography promo. It plays in the browser, can be re-texted for any client, and records itself as a video file. Here is the full workflow, the tips that make it work, and the mistakes that will cost you time. ## What you will make A 30-second promo ad built from code. Bold words slam, stretch and wipe across colour fields across six timed scenes, then land on a logo card. By the end you have: - A promo that plays in any browser - Play, pause and a scrubber to preview any moment - 16:9, 9:16 and 1:1 formats from the same build - A live text editor to rebrand it for a new client - A Record button that exports a .webm video - A polished final version with easing, blur, grain and beat-locked timing ## The tools - Claude: the chat does the planning. The free plan is enough to write the brief. - Claude Code: does the building. It reads your brief and writes the files. Check which Claude plan currently includes it before you start. - A web browser: plays, previews and records the promo. No extra software. - An empty folder: everything lives here, starting with one file. No video editor, no stock template, no plugins. ## Step 1: Plan the promo with Claude Open the Claude chat and ask for a one-page brief. Be specific about what it must contain: the brand (POPSY), its audience, six timed scenes with the exact words for each, the motion for each word, the colour palette and the fonts. Save the reply as brief.md in an empty folder. This file becomes the single source of truth. Every later prompt points back to it. Practical tip: ask for 1-4 words per scene beat. If the brief is wordy, the animation will be unreadable no matter how good the code is. ## Step 2: Build the animation with Claude Code Open Claude Code in the same folder and tell it to read brief.md. It writes three files: index.html, style.css and script.js. Open index.html and the full 30-second promo plays. Words slam, stretch and wipe across bold colour fields, ending on the logo card. Practical tip: ask for one central timeline with fixed scene times. That single decision makes scrubbing, looping and recording reliable later. ## Step 3: Add controls and recording This is the step that turns a demo into something you can use for clients. Claude Code adds: - Play, pause and a scrubber - 16:9, 9:16 and 1:1 format switching - A live text editor so you can swap the words for any brand - A Record button that exports the promo as a .webm file Practical tip: test every format after this step. A scene that looks clean in widescreen can crowd the frame in vertical. ## Step 4: Premium polish The last prompt adds the details that separate a code experiment from a finished ad: overshoot easing, motion blur, film grain, beat-locked timing and screen shake. Claude Code also cleans up the mobile controls, adds reduced-motion support and adds meta tags. Then we record the final vertical and widescreen versions as the payoff. Practical tip: add polish last. Effects on top of shaky timing only make the problems more visible. ## Mistakes to avoid - Too many words on screen. Kinetic typography works at 1-4 words per beat. Keep the brief's copy short or nothing is readable at speed. - Scattered setTimeout calls. Timing built from loose timers drifts and breaks the scrubber. One central timeline with fixed scene times keeps scrubbing, looping and recording in sync. - Recording before checking the format. Pick 9:16 or 16:9 first, close other tabs and hide the controls. Otherwise the export can come out cropped, laggy or cluttered. ## How creators can use it None of this is a promise of income. Results depend on your skills, your clients and your effort. These are realistic ways creators put a build like this to work: - Short launch promos and reels for small brands, cafés, gyms and creators who need social ads - A re-textable template sold as a digital product on marketplaces like Gumroad - A monthly package of re-texted clips in 9:16 and 16:9 for a client's ads and social posts - Intros, title cards and explainers for your own YouTube channel or client videos instead of paying for stock templates The live text editor is what makes these possible. One build can be re-texted for each new client instead of rebuilt from scratch. ## Watch the full build The video walks through all four prompts on screen, from the empty folder to the recorded vertical and widescreen files. You see every prompt, every file Claude Code writes, and the finished promo playing at full speed. Watch it once, copy the prompts, then swap POPSY for a brand of your own. @claudeai @AnthropicAI @ClaudeDevs #claude #opus #anthropic Watch the full tutorial: youtu.be/XAKZPrJey4M

How to Build a 3D Scroll Website with Claude Code in 4 Prompts (No npm) Picture a product bottle that spins as you scroll, splits into its layers, then snaps back together. A configurator recolours it live. A reserve drawer saves orders. We built all of it with Claude and Claude Code in four prompts. There is no npm, no build step and no image files. It is one folder with three files that opens with a double-click. Below is the full workflow, the tips that kept it clean and the mistakes worth avoiding. ## What you will make The result is a one-page 3D product site for Halo Flask, a premium bottle. By the end you will have: - A 3D bottle rendered in the browser that spins, explodes into layers and reassembles as you scroll - A configurator with finish swatches that recolour the bottle live, size options with live pricing and an engraving field - A reserve drawer with form validation that saves orders - Scroll reveals, a progress bar, hover effects, a mobile layout and reduced-motion support Everything lives in index.html, style.css and script.js. You need no server and no installs. ## Tools and what they cost - Claude (chat): plans the brief. The free tier is enough for this step. - Claude Code: writes and edits the files. Access depends on your Claude plan, so check what your account includes before you start. - Three.js: renders the 3D bottle. It is free and open source, loaded from a CDN script tag. - Any modern browser: this is your preview window. ## The workflow, step by step Step 1: Plan it with Claude Open a Claude chat and ask for a one-page brief for Halo Flask. Ask it to cover the sections, the exact copy for each section, the 3D motion per section, the colour palette and the fonts. Save the result as brief.md in an empty folder. Tip: be specific about motion. A line like rotate the bottle half a turn and lift the cap away leaves Claude Code far less to guess than make it dynamic. Step 2: Claude Code builds it Open Claude Code in that folder. Ask it to read brief.md and build the page as index.html, style.css and script.js. Then double-click index.html and scroll. You should see the bottle spin, split into layers and reassemble. Tip: tell Claude Code at the start that the page must open from the file system with no build step. That one constraint shapes every choice it makes. Step 3: Make it work In a new session, ask for the configurator. Claude Code adds: - Finish swatches that recolour the 3D bottle live - Size options with live pricing - An engraving field - A reserve drawer that validates input and saves orders Tip: test it the way a customer would. Switch finishes mid-scroll, leave the engraving empty and submit the form with a bad email. Paste any bug straight back into Claude Code. Step 4: Make it premium In the final session, ask for scroll reveals, a progress bar, hover effects, a mobile layout, reduced-motion support and meta tags. Then open the first version next to the finished one and compare. Tip: reduced-motion support matters more on a 3D page than almost anywhere else. Some visitors get motion sick, and this setting respects their system preference. ## Mistakes to avoid - Loading Three.js as an ES module or through npm. It breaks when you double-click index.html. Use the plain cdnjs script tag instead. - Asking for everything in one prompt. A single request for the site, the configurator and the polish is hard to check and harder to fix. Build in small sessions and look at the browser after each one. - Forgetting mobile performance. A full-resolution 3D canvas with no pixel-ratio cap can make phones lag or overheat. Ask Claude Code to cap the device pixel ratio, then test on a real phone. ## How creators can earn with it None of these are guaranteed. Results depend on your skills, your market and your follow-through. These are some realistic ways to put the build to work: - Sell custom 3D scroll product pages to small brands, Kickstarter creators and Shopify sellers launching a hero product. - Package the folder as a reusable template and list it on marketplaces like Gumroad or ThemeForest. - Use the page to test interest in a product idea with preorders or a waitlist before you pay for manufacturing. - Add it to your freelance portfolio as a standout demo when pitching higher-value web design clients. The three-file structure helps with all of these. Clients and buyers can open the page, edit the copy and host it without touching a build tool. ## Watch the full build The video walks through all four prompts in order. You see each browser check, every fix and the side-by-side comparison of the first version and the final page. If you want to build your own 3D product page, follow along and copy the prompts as you go. @claudeai @AnthropicAI @ClaudeDevs Watch the full tutorial: youtu.be/NO0r7VAtHis

Anthropic's Claude 3.5 Sonnet demonstrated a 2x speed increase over Opus today. This significantly lowers inference costs for complex tasks in real-world applications.

Decoded AI Subscribe youtu.be/VjNU2rHn528?si=T8Ee…