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

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

Unlike a normal chat, Claude Code can:

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

Claude brings precision and speed. You bring taste, timing, and the final call.

GSAP

A JavaScript animation library. 100% free since April 2025, including former paid plugins and commercial use.

HyperFrames

Open-source HTML-to-video framework from HeyGen. Supports GSAP, CSS animations, Lottie, Three.js, Anime.js, and the Web Animations API.

Remotion

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

Lottie Creator MCP

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

Rive MCP

Official server bundled in the Rive Editor Early Access app for Mac, for interactive animations and state machines.

Blender MCP

Official server from Blender Lab. Requires Blender 5.1 or newer.

Community-built MCP servers also exist for apps such as After Effects. Review any unofficial server carefully before installing it.

claude --model opus --effort high

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

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

Decide where the motion will live:

Video

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

Website

Live animation in the browser. Use GSAP or CSS.

App interface

Lightweight vector animation. Use Lottie or Rive.

Interactive

Animations that react to input. Use Rive state machines.

3D

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

The output decides the tool. Do not choose the tool first.

Write a short motion.md file and reference it from CLAUDE.md. Include:

• Brand personality in three words
• Standard easing curves
• Standard durations
• Stagger timing for lists
• Entrance and exit directions
• Transition styles
• Colors and type rules
• Motion you never use

A motion language makes every animation feel like it belongs to the same brand.

Claude follows named principles well. Reference them directly:

• Timing: how long each move takes
• Easing: slow in and slow out instead of linear motion
• Anticipation: a small move before a big one
• Follow-through: motion that settles instead of stopping dead
• Overlapping action: parts move at slightly different times
• Arcs: natural paths instead of straight lines
• Staging: one clear focal point at a time
• Hierarchy: the most important element moves first

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

Break the animation into beats before writing code:

• What appears
• When it appears
• How it moves
• How long it holds
• How it leaves
• What draws the eye next

Prompt:

Turn this idea into a beat sheet with timestamps, elements, motion, easing, and duration for each beat. Wait for my approval before writing code.

Ask Claude to build each sequence as a single timeline, such as a GSAP timeline, with labels for each beat.

Timelines make it easy to:

• Shift a whole sequence
• Change one beat without breaking others
• Reuse sequences
• Render deterministically to video
• Explain timing in plain language

One timeline per sequence. No scattered timers.

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

• Split text into lines, words, or characters
• Use one entrance style per video
• Emphasize keywords with color or scale
• Keep text on screen long enough to read
• Align beats to the audio

Readable beats clever. Text that moves too fast to read fails its job.

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

• Separate the logo into meaningful parts
• Propose three animation concepts
• Build the chosen concept
• Create short and long versions
• End on the exact static logo

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

Claude can turn numbers into animated charts and counters. Ask for:

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

Check every number against your source. Motion makes wrong data look convincing.

For product and website motion, ask Claude to prototype:

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

Ask it to respect the prefers-reduced-motion setting so people who are sensitive to motion get a calmer experience.

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

Use it for lightweight animations in apps and websites. Ask Claude to keep layer names clear so you can adjust the result by hand.

Rive’s official MCP runs inside the Rive Editor Early Access app for Mac, and the editor must be open.

Claude can help create:

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

Rive suits motion that must respond to clicks, hovers, or app data.

Blender Lab’s official MCP server gives Claude access to Blender’s Python API, scene information, and viewport screenshots. It requires Blender 5.1 or newer.

• Set up cameras and lighting
• Animate product turntables
• Batch-apply changes across objects
• Debug complex scenes
• Automate repetitive setup

Save your .blend file and a backup before letting any agent change a scene.

Ask Claude to render or snapshot key frames, such as the start, middle, and end of each beat, then inspect them for:

• Overlapping elements
• Text that is cut off
• Weak contrast
• Elements leaving safe zones
• Inconsistent spacing

Then watch the full animation yourself at real speed. Timing can only be judged in motion.

For browser motion, ask Claude to:

• Animate transform and opacity where possible
• Avoid animating layout properties on large elements
• Limit how many things move at once
• Keep Lottie files small
• Test on a mid-range phone

Smooth simple motion beats complex motion that stutters.

• Respect reduced-motion settings
• Never flash more than three times per second
• Keep text readable while moving
• Avoid motion that blocks content
• Give looping animations a way to stop on websites

The three-flashes rule comes from WCAG, the main web accessibility guideline.

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

• Easing and duration tokens
• Reusable entrance and exit presets
• Component templates
• A motion.md style guide
• A Claude Code skill for new projects

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

Social video

H.264 MP4

Transparent overlay

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

App animation

Lottie or Rive files

Website

Code that runs in the page

3D

Rendered frames or video from Blender

Ask Claude to verify the exported file’s resolution, frame rate, duration, and alpha channel where needed.

Output

Choose where the motion will live.

Language

Define easing, timing, and style.

Beats

Plan every move with timestamps.

Timeline

Build each sequence in one timeline.

Frames

Check key frames as images.

Motion

Watch it at real speed.

Polish

Refine timing and easing.

System

Save presets for reuse.

Copy, paste, and fill in the brackets:

Act as my senior motion designer and creative developer. Create [type of animation] for [platform or output] using [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 a single labeled timeline. Use transform and opacity where possible, respect reduced-motion settings, and never flash more than three times per second. Render key frames and inspect them for overlaps, cut-off text, and contrast problems. Export [format] and confirm its resolution, frame rate, duration, and transparency if 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 result in motion