WebGPU Powered

Motion

Create stunning motion graphics with code. GPU-accelerated rendering, declarative XML syntax, and real-time preview.

Get StartedLive Preview

WebGPU Powered

Hardware-accelerated rendering with blur, glow, and drop shadow effects.

Declarative XML

Write animations in clean, readable syntax with split-file organization.

Claude Code Ready

Built-in skill enables AI-assisted motion graphics creation.

Hot Reload

Real-time preview updates as you edit. See changes instantly.

Get Started

1

Install the CLI

npm install -g @aifme/motion-cli
2

Initialize a project

motion init my-animation
3

Start the preview

cd my-animation && motion preview

Example

motion.xml
<motion version="1.0">
  <project title="Hello World" />

  <comp id="main" width="1920" height="1080"
        duration="3" frameRate="60">

    <solid id="bg" color="0.1,0.1,0.15,1">
      <size>1920,1080</size>
    </solid>

    <text id="title"
          text="Hello, Motion!"
          fontSize="120"
          fontFamily="Inter"
          color="1,1,1,1">
      <transform>
        <position>
          <keyframe time="0" value="960,600" />
          <keyframe time="1" value="960,540"
                    easing="easeOutBack" />
        </position>
        <opacity>
          <keyframe time="0" value="0" />
          <keyframe time="0.5" value="100" />
        </opacity>
      </transform>
    </text>

  </comp>
</motion>

Capabilities

  • Keyframe animations with easing
  • Text layers with custom fonts
  • Shape layers (rect, ellipse, polygon)
  • Image and video layers
  • Groups and masks
  • Effects (blur, glow, shadow)
  • 3D camera support
  • Multi-composition projects

Claude Code Integration

Motion includes a built-in skill for Claude Code. Simply ask Claude to create motion graphics, and it will generate XML files following best practices.

# In Claude Code, just ask: "Create a 10-second motion graphic introducing our new product. Use blue and white colors, smooth animations, and modern typography."

CLI Commands

motion init [dir]

Initialize a new motion project

-t, --template <name>--width / --height--duration / --fps
motion preview [input]

Start live preview with hot reload

-p, --port <number>--no-open--no-watch
motion compile [input]

Compile to unified MotionJSON

-o, --output <path>-w, --watch--pretty
motion validate [input]

Validate motion files

--strict--json