Motion design articles and tutorials about Claude Stay curious.
Move forward.
Motion principles, production workflows and practical tutorials. Read the original publications, with the authors credited.
Find your next readOpus 5.5 Motion Graphics: What 39 Review Notes Taught Us
A production team shares the revisions behind two client films, and explains where coded motion still needs a designer’s judgement.
Read the motion 399
Using prefers-reduced-motion for Accessible Animation
Claude to Blender in 2026: My Prompt-to-Animation Workflow for AI Video Production
A video producer explains using Claude as a planning layer that sends a structured JSON animation spec through a local MCP server to Blender's Python API, which builds objects, materials, camera, lights and keyframes and saves an editable .blend file. Argues against giving Claude raw Python access, shows weak versus constrained prompts, and lists templates to add once a basic version works.
- Goal
- 3D scenes
- Route
- Claude Desktop + local MCP server + Blender Python API
Disclosure Author is founder of the LIKEMAZ studio and mentions it.
Creating Scroll-Driven SVG Map Animations with GSAP
I built a 3D scroll website. Sharing all my code.
A short route to a scroll-driven product site with its code shared: write a video-to-website skill (the author credits Nate Herk for it), make a clip in Veo from a first and a last frame, then prompt Claude Code for the rest and tweak the design. The author reports about two hours end to end and links the live site and the full project.
- Goal
- Animated websites
- Route
- Claude Code + video-to-website skill + Veo
Disclosure Veo is Google's video model and is used outside Claude; the post does not say which plan it needs.
The Definitive Guide to Building a Motion Design System
Reduced Motion, Not Reduced Quality: prefers-reduced-motion Patterns That Still Feel Premium — Monotonomo
AI Video Creation with Hyperframes and Claude Code
The author makes a three-second brand intro by prompting Claude Code, which writes an HTML and GSAP composition that HyperFrames renders to MP4. Covers installing Node, FFmpeg and the HyperFrames skills, revising easing and timing with short follow-up prompts, turning a webpage into an explainer, and limits such as the 1080p ceiling, voiceover sync and long renders.
- Goal
- Logo animation
- Route
- Claude Code + HyperFrames + GSAP
Disclosure Page promotes the author's consulting services, courses and app.
GSAP Animation Guide for Scroll Effects & Motion
Hermes Agent x HyperFrames 實戰：AI 助理自介影片自動生成指南
A blog run by a Hermes agent documents how it scripted and built a 15-second terminal-style intro video as a HyperFrames HTML composition with a GSAP timeline. It covers lint and inspect checks, rendering 450 frames with headless Chrome and FFmpeg, compressing the file and publishing it to Cloudflare Pages. An attempt to hand the HTML off to Copilot failed along the way.
Disclosure Written and published by the Hermes agent itself, per the article. The model is DeepSeek V4 Pro, not Claude.
Kinetic Typography Masterclass
Nous Hermes Agent and HyperFrames Explained: Building Full AI Videos with HTML-Native Skills
Explains the Hermes Agent and HyperFrames pairing: videos are HTML compositions with GSAP timelines that render to MP4 or WebM. It lists the install, init, lint, preview and render commands, the Node 22 and FFmpeg requirements, and a generic prompt-to-video checklist. It is a secondary summary with no example output and no model named.
Disclosure Secondary write-up with no primary links. Style suggests AI-assisted writing; not confirmed.
The Storyboard That Actually Ships On Time (And Why Most Don't)
How to Build a Landing Page With Claude Design
Walkthrough from a live class: the author sets up a design system in Claude Design from a brand guide PDF, then generates a landing page for a fictional email product from a long build prompt that includes motion rules, such as a typing terminal line, a scroll-triggered timeline, an animated pie chart and count-up pricing. Covers chat and on-canvas edits, export and handoff to Claude Code.
- Goal
- Animated websites
- Route
- Claude Design + Claude Code
Disclosure Author is co-founder and CEO of Masset and links to Masset's own product pages.
Typography Motion Graphics Animation Secrets
Typography Motion Graphics in After Effects
Emil Kowalski Thinks Taste Is Teachable. His Skill Is the Argument. - AI Skill Market Blog | AI Skill Market
What Is a Storyboard? Examples and How to Create One (2026) | Motifmotion
GSAP Animation Principles: Easing, Timing & Hierarchy
Claude Code Video Production: The 3-Tool Stack I Use
First-hand account of a video pipeline where Claude Design exports a brand style system, Claude Code composes and renders GSAP animations such as lower thirds through HyperFrames, and the Auphonic API cleans voiceover audio. Covers reusable skills, model choice for heavy versus small edits, the 1080p render cap, weak built-in audio, busy early compositions and a five-day onboarding plan.
- Goal
- Explainer videos
- Route
- Claude Design + Claude Code + HyperFrames + Auphonic
Disclosure Promotes the author's Ramlit service for building video pipelines, consulting CTAs and a Buy me a coffee link
GSAP SVG Animation Tutorial for Beginners
How I make custom motion graphics using Claude Code + Remotion
A non-editor's method: install Remotion and its skill, gather references from Pinterest and YouTube, have Claude Code rebuild a still as a composition, refine by prompt, pull frames from reference video with FFmpeg and render ProRes for the editor.
- Goal
- Explainer videos
- Route
- Claude Code + Remotion + FFmpeg
Disclosure Recommends Tella and asks readers to follow 'the Tella YouTube channel', suggesting an affiliation not stated outright.
Kinetic Text Animation Tutorial for After Effects Editors and Motion Designers
How we taught Chrome to export video
A HyperFrames team member explains how the framework renders HTML to deterministic video: Chrome's BeginFrame protocol controls timing, a seek(t) contract lets GSAP, React, WebGL and Lottie scrub to any frame, and parallel Chrome workers cut render time sharply. It argues coding agents such as Claude Code can write video as plain HTML and lists limits like WebGPU and font swaps.
Disclosure Author works on HyperFrames (a HeyGen project)
HyperFrames: Claude Code Can Now Write and Render Videos
Overview of HeyGen's HyperFrames skill for Claude Code: why agents can write video as HTML compositions, how clips, overlays and audio are timed with data attributes, animation options such as GSAP, Lottie, CSS and Three.js, the init, preview and render CLI loop, and use cases like automated product and release videos. Descriptive rather than a hands-on test.
Read the original. Credit the creator.
Every read links to the original publication. Authors and publishers keep their credit. When a publisher discloses writing assistance, you’ll find that statement with a link to its source.