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
Claude Design: Everything You Can Build in 16 Minutes (5 Real Use Cases)
Peter Yang runs live demos of Claude Design, starting with a one-shot animated video made from pasted announcement text, saved with Mac screen recording because video export was not available yet. Further sections cover a slide deck, landing page, 3D globe with particle text, a fitness app and a design system, most of them behind the paywall.
- Goal
- Explainer videos
- Route
- Claude Design + macOS screen recording
Disclosure Sponsored: author states a partnership with Granola; Granola links carry tracking parameters
Paywall
How to Build a Motion Design System for Web UIs — Lenka Studio
The Art of Complex Motion: Corentin Bernadou’s World of Shaders and Experimentation
Lottie Creator Now Speaks MCP
Announces the Lottie Creator MCP: Claude can read, modify and create animations inside Lottie Creator, adjust timing from plain-language instructions, make variants and run accessibility checks without leaving the editor.
Disclosure Vendor announcement of its own product.
Spring Animations in Pure CSS with linear()
Spring Easing in CSS with linear(): Interactive Demo — Lab
Why Your Animations Feel Wrong — Nuzair Ibrahim
How to Create a Motion Graphics Storyboard?
Motion Tokens for Design Systems: Duration and Easing
How I built a production landing page video in 3 hours using Claude, Remotion, and ElevenLabs
A developer documents making a 35-second homepage demo video: Claude plans and scripts six scenes, an agent captures app screenshots, each scene is a Remotion React component driven by one shared config, ElevenLabs makes per-scene voiceover and a music loop, then it renders to 1080p MP4. Covers fixing robotic voiceover, overlapping audio, timing drift and music levels.
- Goal
- Product launch videos
- Route
- Claude (Sonnet 4.6) + Remotion + ElevenLabs
Disclosure Video is for the author's own product (FitComrade); ends with a call to book his consulting.
How to Design Micro-Interactions That Feel Effortless
Claude Just Changed Content Creation Forever! (Tutorial)
Uses Claude Code with the Remotion skill to draft, edit and fact-check short videos locally, including screenshots of GitHub repos via Claude in Chrome, custom assets and music, then schedules posts through an MCP server.
- Goal
- Explainer videos
- Route
- Claude Code + Remotion skill + Claude in Chrome
Disclosure Author built Blotato and includes a discount offer for it.
How to Build Animated 3D Websites with Claude Code and AI Video Generation
Step-by-step guide to a scroll-driven landing page: generate short background clips with an AI video model, compress them, have Claude Code scaffold plain HTML, CSS and JS, then add GSAP ScrollTrigger sections and optional Three.js effects before deploying to a static host. Includes sample prompts, GSAP snippets and fixes for mobile autoplay, scroll jank and mistimed triggers. No built result is shown.
- Goal
- Animated websites
- Route
- AI video generator (Runway/Kling/Sora) + FFmpeg + Claude Code + GSAP ScrollTrigger + Three.js
Disclosure MindStudio blog; promotes its own AI Media Workbench and the Remy product in banners.
CSS Animation Performance and GPU Compositing
Lottie and Vector Animation for the Web, Done Properly | MediaScaleUp
Claude Code + Remotion: Generate Pro Videos with AI
Introduces Remotion, the React video framework, and shows how Claude Code with the Remotion skills package turns plain-English prompts into rendered MP4s. Covers setup, example prompts for product demos, bar charts and short social clips, and a multi-skill session that built a Douyin top-ten songs video with downloaded media. Ends with an FAQ on render speed, Chinese fonts, licensing and Node errors.
- Goal
- Data animation
- Route
- Claude Code + Remotion skills + Remotion
How To Turn Claude Code into a Video Director with Remotion
Step-by-step guide to making videos with Claude Code and Remotion: scaffold a Remotion project, install the official Remotion agent skill, prompt Claude Code for a 5-second branded intro, refine it, add props with Zod schemas, build a multi-scene demo with Sequence, add background music, render to MP4/GIF/WebM, and optionally render on Remotion Lambda. Includes a troubleshooting list.
- Goal
- Product launch videos
- Route
- Claude Code + Remotion agent skill + Remotion CLI (+ optional Remotion Lambda)
Disclosure Published by Apidog; promotes its own API tool, which is used in a side step for testing a render API.
Explainer Video Storyboard: How to Plan, Align, and Streamline Your Video Production
Motion Design Tokens for Animation | Design System Problems
Efecto: Building Real-Time ASCII and Dithering Effects with WebGL Shaders
Design accessible animation and movement with code examples
Motion Design System at Swiggy
Motion Design System Explained -What It Is, Why You Need One, and How to Build It for Scalable UI Animation - DEV Community
Powerful Emotional Storytelling Through Animation
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.