Motion design articles and tutorials about Claude Stay curious.
Move forward.

Claude's 104 product demos: two clocks, a phoneme-timed mouth and one ffmpeg join

Reverse-engineers a batch of 104 Claude-made product demos and compares it with the site's own film engine. Covers recording tool runs with Playwright, drawing the cursor from logs, using Kokoro's phoneme timings for word budgets and lip sync, painting every frame from t, a seeded score, the ffmpeg join, and a contact-sheet gate before the batch.

Goal

Render pipeline

Route

No framework (Playwright + Kokoro + ffmpeg)

How to Make an Animated Website With Claude Code (2026)

A section-by-section build of an animated site: pick a reference, scaffold Vite with GSAP and Lenis, paste a structured brief, build one section at a time, extract hero frames with FFmpeg for a pinned canvas sequence, fix mobile and performance, and run a launch checklist. Also covers common Claude Code mistakes.

Goal

Animated websites

Route

GSAP + Lenis

Disclosure Vendor guide: published by ScrollHaus (disclosed on the page) and written by its founder; the examples are ScrollHaus sites, and it ends by pointing to ScrollHaus's ready-made scroll sites.

HyperFrames: HeyGen's Free Tool for Making Videos With Claude, Now a Mac App (and How It Compares to Remotion)

Explains HyperFrames as HeyGen's free open-source HTML-to-MP4 tool for agents such as Claude Code, covers the Studio desktop app release (free with a HeyGen account; agent usage bills to your own plan) and compares it with Remotion.

Disclosure None found. Updated 2026-10-29. Its platform list conflicts with other reports on Windows timing.

CSS scroll-driven animations - CSS | MDN

Make motion graphics with Claude Code, without After Effects

A beginner HyperFrames path: install Claude Code and the HyperFrames plugin, write the script and make an ElevenLabs voiceover first, start the project with --audio so word timings drive the scenes, describe the look in plain words, revise by asking, add music, and render vertical and horizontal versions of a 55-second video.

Goal

Explainer

Route

HyperFrames

Plan

Paid Claude plan (Pro, Max, Team or Enterprise) or a Console account

Disclosure Vendor guide: ends with a pitch for Fynl.io, the publisher's paid small-business portal ($49 a month per business on the page, checked 2026-10-27).

Claude Code + Remotion for Motion Graphics: What It's Great At, and What It Actually Takes

Eight steps for putting one motion graphic on a talking-head video with Claude Code and Remotion: set up the project, bring in the clip, get word-level timestamps, convert milliseconds to frames, place the graphic clear of the speaker, make it look designed, iterate on stills, and render.

Goal

Talking-head overlays

Route

Remotion

Disclosure Vendor blog: Rescroll makes an AI motion-graphics product for talking-head videos and pitches it at the end.

AI Broadcast Graphics: Build a Rive Graphic with AI

Shows an AI agent compiling a Rive project with Rive CLI 1.2.0, importing it into LIGR, binding live match data, checking bindings and publishing a theme version, with a person approving activation; the feature is in beta.

Goal

Broadcast graphics

Route

Coding agent + Rive CLI + LIGR CLI

Disclosure Vendor post about LIGR's own product.

Blender always scared me, but Claude helped me make this animated video in just a few hours

A Blender newcomer connects the Claude desktop app to Blender's official Blender Lab MCP add-on and has Opus 5.5 build a 45-second animated video over about four hours and three iterations, reviewing and redirecting as it works.

Disclosure Site-wide affiliate notice; no article-specific disclosure.

Claude Plus Blender: A Beginner's Guide to AI Assisted Animation

Beginner explainer on connecting Claude to Blender through the MCP add-on, common setup errors, and a reported 45-second clip that took three to four hours with under an hour hands-on and still had floating objects and off colours.

Disclosure States the first draft was written by an automated desk and then read and published by a person.

Is There an Official Blender MCP? Blender Lab vs MCP for Blender vs Paid Servers (2026)

Separates Blender Lab's free official MCP server, which Claude's Blender connector uses, from the community 'MCP for Blender' project and paid servers, comparing safety models, API lookup and verification.

Disclosure Publisher sells one of the paid servers it compares (stated in the article). Updated 2026-11-03.

HyperFrames vs Remotion: Which Should You Use in 2026?

Argues the choice between HyperFrames and Remotion depends mostly on what source material a team has, HTML or React, and covers agent workflows, revisions, render infrastructure, licensing and running both.

Disclosure Written by Voyager's CEO; promotes Voyager, which renders both formats.

Cinematic scroll with GSAP + Lenis in Claude Code: pin, scrub, and parallax (with Oryzo AI and Studio K95 cases)

A GSAP 3.15 and Lenis 1.3.x setup for scroll-driven pages built with Claude Code: when CSS is enough, pin versus scrub, why not to run ScrollSmoother and Lenis on one page, a starter prompt for a pinned hero, short readings of award-winning sites such as Oryzo AI and Studio K95, and a reduced-motion fallback that turns pin and scrub off.

Goal

Animated websites

Route

GSAP + Lenis

How to Use Claude Code With After Effects in 2026

Compares two ways to let Claude Code work in After Effects, an MCP bridge with named tools versus computer use driving the interface, covering precision, speed, setup and risks, and advises testing on copied projects.

Disclosure Promotes Vagon Cloud Computer, the publisher's product.

I recreated the viral riso animation with Claude Code + Opus 5. Here's the full prompt, the process and the token count

I Built a Claude Skill That Makes Videos (HyperFrames + HeyGen)

Describes a Claude skill that turns one sentence into an explainer by handling research, script, voice-over, scenes and captions and rendering with HyperFrames, with optional HeyGen avatar segments; the author finds the structure strong but the output still needs polish.

Disclosure HeyGen sponsored the accompanying video; the author sells a $29 product-video skill and gives away a free one.

Building a motion token system — movin.design

How I built my company website with Claude Design and Claude Code with SEO

How a small studio built its site: a Claude Design hero with a cursor-reactive constellation and a logo whose letters lean away from the pointer, a full-width projects grid, then export to Claude Code as plain HTML, CSS and JavaScript with no build step. Covers the SEO pass, Search Console and Bing, the legal company name in the footer and per-app legal pages, and ends with the exact hero prompt.

Goal

Animated websites

Route

Claude Design, then Claude Code (plain HTML)

Disclosure Maker's own studio: the site is for the author's company, Arctic Hare Studio.

Still: From Akira to Ink Wash, Building a Generative Garden in WebGPU

HyperFrames: Make Real Videos by Writing HTML (2026 Guide, Updated)

Introduces HyperFrames as an Apache-2.0 HTML-to-MP4 renderer using headless Chrome and FFmpeg, shows the CLI loop (add, tts, transcribe, lint, check, preview, render), compares it with Remotion and shares lessons from the firm's own videos.

Disclosure Consultancy post that ends with a sales offer.

Turn Your Terminal Into a Full Video Studio: Generating Polished Videos with Claude Code, Codex, and the Essential External Tools

prefers-reduced-motion: Designing Motion That Respects It

Claude Design Animations Is the Most Underrated AI Video Tool — Here's What It Can Actually Do

Shows ten short videos the author made with Claude Design's animation feature over two days with no motion background, covering launches, article promos, animated infographics and explainers, with prompts and limits; the production notebook is behind the paywall.

Disclosure Partly paywalled; promotes the author's own paid prompt-builder tool.

Paywall

I Tried Claude Design's Animations. They Just Work.

Hands-on test of Claude Design's Animation template: turning an article into an animated explainer, animating a logo, charting a public Marvel dataset and syncing B-roll to a talking-head clip using a Gemini-made SRT transcript and Clipchamp.

Goal

Explainer videos

Route

Claude Design (Animation template) + Gemini transcript + Clipchamp

Disclosure Bonus booklet is for paid subscribers and was co-written with ChatGPT; offers Claude Pro guest passes to readers who upgrade; author notes the dataset output was not fact-checked.

UI Microinteractions in 2026: The Small Details That Make Users Stay