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

Build an End-to-End AI Video Production Pipeline with Hermes Agent and Remotion

Walks through a Hermes Agent workflow for vertical short videos. The agent researches a topic, writes a script and production plan, generates scene images, builds Remotion scenes and checks rendered frames against the plan, then adds voiceover, music and Whisper word-level captions. Gives no code or commands, and no model is named.

Goal

Explainer videos

Route

Hermes Agent + Remotion skills + image model + TTS + Whisper

Disclosure Entry in DEV's Hermes Agent Challenge. The LLM is not named. The page shows only 'Aug 4'; the year comes from the author's matching YouTube upload dated 2026-08-04.

Motion Design for the Web: The Complete Guide

I ran the same UI brief 6 times with and without the frontend-design plugin

A small test of the official frontend-design plugin on one landing-hero brief, six runs with it and six without. Explains that the plugin is a single model-invoked skill with no slash command, which plans a palette, type pairing and one signature element before writing code. A 29 July re-run withdrew two of the original claims; the remaining finding is that runs without the plugin repeated each other.

Disclosure Self-scored, six runs per arm. In the comments the author says they draft with Claude and that the runs and numbers are their own.

How I make motion graphics with HyperFrames and Claude Code

A non-motion-designer explains how he uses Claude Code to plan graphics against a narration script and write HyperFrames compositions for animated route maps and title cards, fixing them with targeted plain-English requests instead of restarting. Covers preview and render commands, a blur flicker fixed by rendering with one worker, and having Claude find and trim YouTube clips with ffmpeg.

Goal

Explainer videos

Route

Claude Code + HyperFrames + ffmpeg

Disclosure Site run by the author; promotes his free email course.

How to Edit Videos With Claude Code and HyperFrames

Shows how to treat a video edit as a HyperFrames project driven by Claude Code or Codex: write an edit contract, build a time-coded storyboard, compose scenes, then run lint, check, preview and render to MP4 with a human review pass. Lists common failures such as missing dependencies, drifting captions, bad media paths, seek mismatches and out-of-memory renders.

Goal

Video editing

Route

Claude Code + HyperFrames CLI + FFmpeg

Disclosure Author works at Aident; the article promotes Aident Loadout in several calls to action.

Key Motion Design Principles That Make Animations Feel Natural

How I Built This Site's Hero Animation with GSAP | Adam Culpepper

'Ghost Font' Is An Anti-AI Font That Uses Motion Illusions To Hide Text From AI, But Not Humans | Eyerys

prefers-reduced-motion, explained (and how to test it) — MotionSpec

How to storyboard motion graphics for client projects | OlafMotion

How to Use Remotion with Claude Code to Generate Animated Logo Reveals and Motion Graphics

Covers Remotion project setup, adding a best-practices skill file, frame-specific prompts for logo reveals and lower thirds, preview, H.264 or ProRes 4444 render, and common fixes.

Goal

Logo animation

Route

Claude Code + Remotion

Disclosure Promotes MindStudio's AI Media Workbench.

How to Make AI Videos With Hyperframes (Free Guide)

Beginner guide that starts from Claude Desktop's Code tab: install HyperFrames, prompt, review the storyboard, render to MP4, and edit talking-head clips with Whisper and FFmpeg; ends with publishing through Blotato.

Goal

Explainer videos

Route

Claude Code + HyperFrames (+ optional HeyGen voice)

Disclosure Author founded Blotato and promotes it. Updated 2026-08-12.

How to Use HyperFrames with Claude Code: Step-by-Step (2026)

Setup and workflow guide: prerequisites, installing the HyperFrames skills, briefing Claude on a scene, previewing, rendering and fixing errors, with the reminder that HyperFrames renders browser output rather than generating footage.

Goal

Explainer videos

Route

Claude Code + HyperFrames (GSAP)

Disclosure Ends by promoting AutoAE's paid Motion Agent.

Hermes Agent創作スキル20選｜図解から音楽まで

A Japanese tour of 20 creative and media skills bundled with Hermes Agent, grouped into diagrams, video and animation (manim-video, ascii-video), creative coding (p5js, touchdesigner-mcp), image generation, web design (claude-design, popular-web-designs) and audio. It credits upstream authors and says the skills also work in Claude Code. No outputs are shown, and HyperFrames is not covered.

Disclosure Part 3 of a series; descriptions are drawn from the SKILL files with no hands-on results.

Learn GSAP — Complete Guide – DodaTech Tutorials

Principles in Motion

prefers-reduced-motion CSS media feature - MDN Web Docs

Reduced Motion Is Not No Motion | Luis Vargas

Remotion Was My First Agentic Video Love. Then HyperFrames Stole Me. /last30days for both

A launch-video maker compares Remotion and HyperFrames by summarising a month of community posts. He concludes each tool wins different jobs: typed React and scale for Remotion, HTML that agents write easily for HyperFrames. He collects prompting habits for both and says the same skills run in Claude Code, Codex, Cursor and Hermes.

Disclosure Says Hermes ships Remotion as a built-in skill, but the Hermes repo and bundled catalog have no Remotion skill (checked 2026-11-05). X Articles may need sign-in to read in full.

Login

The 12 Principles of Animation Explained

Kinetic Typography in After Effects: A Step-by-Step Tutorial for Beginners - Studio 7mm

Claude Code + HyperFrames Hands-On: Running the Full AI Video Asset Generation Workflow Locally

Hands-on comparison of rendering a HyperFrames video through the Codex app plugin and through Claude Code with the skills, covering hyperframes doctor setup, troubleshooting and render times from a single run per route.

Disclosure Third-party API reseller (NiceCloud LLC) that promotes its own Claude API gateway; says it has no affiliation with Anthropic.

GSAP Timelines: Build Complex Animation Sequences

How to Create Motion Graphics & Animation With Claude Code (Full Workflow)

A motion designer describes briefing Claude like a remote motion designer using a video transcript and brand details, approving static HTML previews of each graphic in the browser, then rendering approved animations with HyperFrames in Claude Code as MP4 and ProRes with alpha and dropping them into Premiere without masking. Links a YouTube walkthrough.

Goal

Explainer videos

Route

Claude desktop app + Claude Code + HyperFrames + Premiere

Disclosure Promotes the author's Creative Haven studio services (free strategy call CTA)