Your story starts here
STEP 01
Drop in your content
An article, a script, a spark of an idea. Start with the words you already have.
CLAUDE MOTION SKILLS · 2026 · FOR CLAUDE CODE & CODEX
Claude Motion Skills 2026
Words into motion.
ARTICLE → SCRIPT → NOTES → IDEA → YOUR NEXT VIDEO
Turn articles and scripts into editable HTML motion graphics with your own Claude Code or Codex. Preview original styles, refine the story, and render MP4 locally with cm-skills and HyperFrames.
CLAUDE MOTION SKILLSA STUDY IN MOVEMENT ↗
✳
FROM A SINGLE IDEAMake something
worth watching.
worth watching.
Words. Rhythm. A new perspective.
ORIGINAL MOTION STUDY
HTML → MOTIONWORKS WITH
✳ Claude Code CodexOpenCodeCursorKimiAnd your favorite agent
Right inside the tools you love.
Claude Code · Workflow preview
Install our CLI
curl -fsSL https://claudemontiondesignskills.org/downloads/install.sh -o /tmp/cm-skills-install.sh sh /tmp/cm-skills-install.sh export PATH="$HOME/.local/bin:$PATH" cm-skills setup
Install cm-skills, sign in with a device code, then create in Claude Code or Codex.
HOW IT WORKS
Three steps. One good story.
Bring your content. Pick your direction. Give your story the movement it deserves.
Make it your own
STEP 02
Choose a visual style
Bold typography, quiet keynotes, paper collage. Find the right feel for your story.
Ready when you are
STEP 03
Preview, refine, share
Edit your storyboard, preview the motion, and take the whole project with you.
PRACTICAL WORKFLOWS · 2026
Choose the right path from content to video.
Start with an article, rebuild a presentation, or create browser slides. Each guide explains the files, tools and review steps involved.
MOTION · BUILT ON HYPERFRAMES
HTML in. A moving story out.
An open canvas, a precise timeline, and a project you can keep.
YOUR COMPOSITION
Small ideas.
Beautifully told.
Your agentBeautifully told.
Your headline · Scene 01
Layers & motion
The story, word by word
Add your own audio
Readable by design
Editable HTML. Every word, color and moment is yours.
Made for iteration
Refine the same composition in your coding agent.
Keep the whole project
Download source files and render locally with HyperFrames.
Your own creative partner
Works with the coding tools you already know.
Powered by the open-source HyperFrames engine by HeyGen (Apache-2.0). Independently built.
FROM DRAFT TO DONE
Everything your story needs.
Start simple. Make it personal. Keep the creative control.
Make it move.
TYPE ↗Kinetic typography
Words that land with a little more feeling.
A clear perspective.
VISUALS ↗Visual storytelling
Make an idea easier to see and understand.
Scene 01 → 02
STORY ↗Editable storyboards
Adjust the order, copy and pace of every scene.
Your next story.
WORKSPACE ↗A workspace of your own
Keep local drafts or save projects to your account.
Ready to share.
SHARE ↗Share a preview
Create a public link when you are ready.
From HTML to MP4.
EXPORT ↗Local video export
Take the source kit from HTML to MP4 on your computer.
CLAUDE CODE / CODEX
Your agent. Your creative process.
Make a first draft here, then open the project in your coding agent. Describe the changes you want: a slower reveal, a stronger opening, a different rhythm. Every project stays editable.
| START HERE | CONTINUE LOCALLY |
|---|---|
| Article or script | Your coding agent |
| Editable scenes | Refined motion design |
| Animated HTML preview | MP4 via HyperFrames |
| Your subscription | Your own tools & plan |
MOTION / PPT
Choose your visual language.
Choose a visual direction. Every style opens a working original composition.
Match my content
Describe your subject, audience or mood. Matching uses style keywords; you can select more than one.
67 styles & resources
Choose a visual direction. Every style opens a working original composition.
Match and createAll styles
Motion
- Kinetic Type
- Paper Collage
- Quiet Keynote
- Data Story
- Frosted Product
- Thoughtful Paper
- Blueprint
- Soft Clay
- Watercolor Story
- Tool Focus
- Shared Paper
- Airy Signal
- Playful Selection
- Electric Layer
- Evidence Board
- Cutout Explainer
- Newsprint
- Product Brief
- Picture Book
- Purposeful Motion
- Retro Cutout
- Directors Board
- Whiteboard
- Canvas Principles
- Ink Press
- Brand Rhythm
- Geometric Proof
- Painted World
- Poster Press
- Measured Beat
- Naturalist Sketch
- Starfield Launch
- Inkline Stories
- Storyboard Studio
- Dimensional Launch
- Neon Reel
- Nordic Gouache
- Spring Captions
- Refraction Launch
- Annotated Comic
- Colorful Recap
- Single Line
- Word Cadence
- Story Route
- Motion Framework
- Geometry Lab
- Painted Verse
- Spring Stickers
- HTML Story
- Motion Recipes
- Research Reel
- Canvas Sequence
- SaaS Clay
- Inkline HUD
- Connected Build
- Precision Glow
- Pixel Warmth
- Document Clear
- Sage Order
- Connected Answers
- Red Diagonal
- Dark Material
- Conversation
- Spectrum Ribbon
- Mint System
- Monochrome Engine
- Expanding Modules
PPT
- Academic Argument
- Acid Agency
- Apricot Ink
- Aqua Campus
- Architectural Project
- Article Brief
- Blue Block Company
- Blue Lime Ledger
- Botanical Quiet
- Brand Story
- Brush Paper
- Chromatic Futures
- Cinematic Wilds
- Citrus Loop
- Cobalt Dark Pitch
- Cobalt Growth
- Cobalt Ribbon
- Cobalt Serif
- Cobalt System
- Confetti Gathering
- Consulting Storyline
- Cozy Island
- Visual Framework
- Electric Studio
- Field Notes
- Gallery Catalogue
- Golden Market
- Image Narrative
- Inclusive Cutpaper
- Ink Landscape
- Lavender Editorial
- Learning Loop
- Lilac Pitch
- Lime Endurance
- Mint Marker
- Mono Acid
- Navy Glass
- Neon Makers
- Ochre Editorial
- Orbital Workshop
- Pastel Cutout
- Primary Classroom
- Pop Motion
- Primary Doodle
- Prismatic Fashion
- Red Black Zine
- Research Paper
- Research Talk
- Sky Glass
- Slate Social Report
- Soft Gradient
- Sorbet Window
- Spectrum Strategy
- Starlit
- Steel Curve
- Storybook Margin
- Sunlit Structure
- Tidal Playbook
- Visual Canvas
- Yellow Balance
- Yellow Sketchnote
BUILT FOR
For people with something to say.
Creators
Make the next story your audience saves.
Educators
Give complicated ideas a clear visual form.
Indie makers
Show what makes your product different.
Storytellers
Find a new rhythm for the words you love.
PRICING
A simple place to start.
Motion, 61 PPT styles, and audio credits. Create with your own Claude Code or Codex; render on your computer.
Audio availability has not been confirmed. Checkout is paused until service status is verified. Reload this page to check before subscribing.
Original implementation
Creator
$19.90/ month
80,000 credits per month
- Motion + 61 original PPT styles
- HTML presentations and speaker notes
- Your agent plan and local MP4 rendering
Original implementation
Studio
$49.90/ month
240,000 credits per month
- Motion + 61 original PPT styles
- HTML presentations and speaker notes
- Your agent plan and local MP4 rendering
Cancel at the end of your paid period. Downloaded work remains yours. AI model subscriptions are separate.
FAQ
A few good questions.
Is this an official Anthropic product?+
No. Claude Motion Skills is independently operated. The names Claude Code and Codex describe compatible tools, not an affiliation.
What can I make here?+
Create an editable storyboard from your article or script, preview an animated HTML composition, and download a project kit for local video rendering.
Do I need an AI subscription?+
The browser storyboard and templates work without AI. To refine the result with a coding agent, use your own agent and its plan. We do not include model credits.
Your subscription+
Cancel at the end of your paid period. Downloaded work remains yours. AI model subscriptions are separate.
Where are my projects stored?+
Drafts stay in this browser. When you sign in and choose Save to cloud, the project is stored in your account. A share link is public only after you create it.
Can I export MP4?+
Download the project kit, install its dependencies, and run the included HyperFrames render command on your computer. The browser exports HTML and the complete source kit.
Your next story starts here.
Claude Code · Workflow preview
Install our CLI
curl -fsSL https://claudemontiondesignskills.org/downloads/install.sh -o /tmp/cm-skills-install.sh sh /tmp/cm-skills-install.sh export PATH="$HOME/.local/bin:$PATH" cm-skills setup
Install cm-skills, sign in with a device code, then create in Claude Code or Codex.