How to Use Claude Opus 5.5 High in Claude Code for Motion Design

Claude Code writes animation code, and through MCP servers it can also work inside some motion tools.

Unlike a regular chat, Claude Code can:

• Write animation timelines in GSAP and CSS
• Animate SVG, text, and whole layouts
• Build 3D scenes in Three.js
• Render motion to video through code-based frameworks
• Drive supported design tools over MCP
• Inspect rendered frames as image files
• Package a motion style as reusable presets

Claude supplies precision and speed. You supply taste, timing, and the final call.

GSAP

A JavaScript animation library. It has been 100% free since April 2025, including the formerly paid plugins and commercial use.

HyperFrames

An open-source HTML-to-video framework from HeyGen. It supports GSAP, CSS animations, Lottie, Three.js, Anime.js, and the Web Animations API.

Remotion

Builds animated video with React. Free for individuals and for organizations of up to three people.

Lottie Creator MCP

An official server that lets an AI assistant build and edit animations in LottieFiles Creator.

Rive MCP

An official server bundled with the Rive Editor Early Access app for Mac, built for interactive animations and state machines.

Blender MCP

An official server from Blender Lab. It needs Blender 5.1 or newer.

Community-built MCP servers also exist for apps like After Effects. Vet any unofficial server carefully before you install it.

claude --model opus --effort high

Or run /model opus and /effort high within a session. Opus 5.5 needs Claude Code v2.1.280 or later.

Motion work juggles many timing relationships at once. High effort gives Claude room to plan sequences and catch conflicts. Switch to medium for small value tweaks.

Decide where the motion will run:

Video

An MP4 for social posts, ads, and presentations. Use HyperFrames or Remotion.

Website

Animation that runs live in the browser. Use GSAP or CSS.

App interface

Light vector animation. Use Lottie or Rive.

Interactive

Animation that responds to input. Use Rive state machines.

3D

Product shots and full scenes. Use Blender or Three.js.

Let the output pick the tool. Never pick the tool first.

Write a short motion.md file and point to it from CLAUDE.md. Cover:

• Your brand personality in three words
• Standard easing curves
• Standard durations
• Stagger timing for list items
• Entrance and exit directions
• Transition styles
• Color and type rules
• Motion you never use

A shared motion language makes every animation feel like part of the same brand.

Claude responds well to named principles. Cite them by name:

• Timing: how long each move lasts
• Easing: slow in and slow out rather than linear motion
• Anticipation: a small move ahead of a big one
• Follow-through: motion that settles rather than stopping dead
• Overlapping action: parts that move at slightly different times
• Arcs: natural curved paths rather than straight lines
• Staging: a single clear focal point at a time
• Hierarchy: the key element moves before the rest

For example: “Stagger the cards by 0.08 seconds with an ease-out and a slight overshoot.”

Split the animation into beats before any code exists:

• What appears
• When it appears
• How it moves
• How long it holds
• How it exits
• What pulls the eye next

Prompt:

Turn this idea into a beat sheet that lists the timestamp, elements, motion, easing, and duration of each beat. Wait for my approval before you write code.

Have Claude build each sequence as one timeline, such as a GSAP timeline, with a label for every beat.

With timelines, you can easily:

• Shift an entire sequence
• Change one beat without breaking the rest
• Reuse sequences
• Render to video deterministically
• Explain the timing in plain language

Use one timeline per sequence. Never scatter timers.

Have Claude animate text by line, word, or character, timed to a voiceover or a music beat.

• Split the text into lines, words, or characters
• Use a single entrance style per video
• Stress keywords with color or scale
• Hold text on screen long enough to read
• Line the beats up with the audio

Readable beats clever. Text that moves too fast to read has failed at its job.

Hand Claude your logo as an SVG and ask it to:

• Split the logo into meaningful parts
• Propose three distinct animation concepts
• Build the concept you choose
• Produce short and long versions
• Finish on the exact static logo

Never redraw or distort an official logo. Animate the actual file.

Claude can turn numbers into animated charts and counters. Request:

• Count-up numbers
• Bars and lines that grow in sequence
• A highlight on the key data point
• Labels that appear once the motion settles
• A clear source line

Verify every number against its source. Motion makes wrong data look convincing.

For product and website motion, have Claude prototype:

• Page transitions
• Hover and press feedback
• Loading states
• Menu and modal transitions
• Scroll-based reveals
• Success and error states

Tell it to honor the prefers-reduced-motion setting, so people who are sensitive to motion get a calmer experience.

Once the official Lottie Creator MCP is connected, Claude can build and edit animations in a live LottieFiles Creator document from plain-language instructions.

Use it for light animations in apps and websites. Ask Claude to name layers clearly so you can tweak the result by hand.

The official Rive MCP runs inside the Rive Editor Early Access app for Mac, and only while the editor is open.

Claude can help you build:

• Shapes and layouts
• State machines
• View models
• Interactive buttons and icons

Choose Rive for motion that has to react to clicks, hovers, or app data.

The official MCP server from Blender Lab gives Claude access to the Blender Python API, scene information, and viewport screenshots. It needs Blender 5.1 or newer.

• Set up cameras and lights
• Animate product turntables
• Batch-apply changes to many objects
• Debug complex scenes
• Automate repetitive setup work

Save your .blend file and a backup copy before any agent touches a scene.

Have Claude render or snapshot key frames, such as the start, middle, and end of every beat, then check them for:

• Overlapping elements
• Clipped text
• Weak contrast
• Elements outside the safe zones
• Uneven spacing

Then watch the whole animation yourself at full speed. You can only judge timing in motion.

For motion in the browser, ask Claude to:

• Animate transform and opacity whenever possible
• Avoid animating layout properties on big elements
• Limit how many elements move at once
• Keep Lottie files light
• Test the result on a mid-range phone

Simple motion that runs smoothly beats complex motion that stutters.

• Respect reduced-motion settings
• Never flash more than three times a second
• Keep moving text easy to read
• Avoid motion that hides content
• Give looping website animations a way to stop

The three-flash rule comes from WCAG, the leading web accessibility guideline.

When a style works, ask Claude to package it as:

• Easing and duration tokens
• Entrance and exit presets you can reuse
• Component templates
• A motion.md style guide
• A Claude Code skill for future projects

Your motion style gets faster to apply and harder to break.

Social video

H.264 MP4

Transparent overlay

A format with an alpha channel, such as ProRes 4444 or WebM with VP9

App animation

Lottie or Rive files

Website

Code that runs directly in the page

3D

Frames or video rendered in Blender

Have Claude confirm the exported file’s resolution, frame rate, duration, and, when needed, its alpha channel.

Output

Pick where the motion will run.

Language

Set the easing, timing, and style.

Beats

Plan each move with timestamps.

Timeline

Build every sequence in one timeline.

Frames

Inspect key frames as images.

Motion

Watch it at full speed.

Polish

Refine the timing and easing.

System

Save presets to reuse.

Copy and paste it, then fill in the brackets:

Act as my senior motion designer and creative developer. Create [type of animation] for [platform or output] with [GSAP / HyperFrames / Remotion / Lottie / Rive / Blender]. Follow the motion language in motion.md and the brand rules in CLAUDE.md. First, write a beat sheet with timestamps, elements, motion, easing, and duration. Wait for my approval. Then build each sequence as one labeled timeline. Use transform and opacity whenever possible, respect reduced-motion settings, and never flash more than three times per second. Render key frames and check them for overlaps, clipped text, and contrast problems. Export [format] and confirm its resolution, frame rate, duration, and transparency where needed. Explain any timing choices I should review.

• Animation code
• Timeline structure
• Easing and timing values
• Repetitive keyframing
• Variations and sizes
• Frame checks
• Exports
• Reusable presets

• Concept and taste
• Brand approval
• Final timing decisions
• Accessibility review
• Asset licensing
• Watching the final result in motion