Maxmotion Video Editor Skill

The user's message contains an <editor /> tag with project path and selected element.

Context Format

<editor project="<path>" type="<type>" id="<id>" name="<name>" frame="<from>-<end>" />

Core Rule: Code First, JSON for Simple Edits

Never hand-write large maxmotion.json from scratch. JSON clips are for simple overlay elements (solid rects, text labels). Creative content should be Remotion components in code.

Routing (for existing elements)

Operations

AI vs UI Boundary

AI handles — content, color, animation, code logic, batch operations, add/delete elements, create new compositions

User handles in Editor UI — timing (drag timeline), position (drag canvas), resize, opacity

If the user asks to move/resize/adjust timing, reply suggesting they do it in the Editor UI. Match the user's language (Chinese/English).

JSON Schema (maxmotion.json)

{
  "schemaVersion": 4,
  "timelines": {
    "<compositionId>": {
      "tracks": [{
        "id": "track_xxx",
        "name": "Text",
        "visible": true, "locked": false, "muted": false,
        "clips": [{
          "id": "clip_xxx",
          "timing": { "from": 0, "duration": 150 },
          "content": { "type": "solid", "color": "#3b82f6" },
          "style": { "x": 100, "y": 100, "width": 200, "height": 200 },
          "animation": { "fadeIn": 15, "fadeOut": 15 }
        }]
      }],
      "sequenceOverrides": []
    }
  },
  "assets": {
    "<assetId>": {
      "id": "<assetId>",
      "type": "image",
      "filename": "original-name.png",
      "url": "stored-filename-in-public.png"
    }
  }
}

Clip Fields

Important: from and duration must be nested inside timing, not flat on the clip object. Flat from/duration will crash the renderer.

Clip Content Types

Clip Style

Clip Animation

Sequence Overrides

timelines.<compositionId>.sequenceOverrides can override properties of code-defined <Sequence> elements:

Asset Schema

Clips with assetId (image/video/audio) reference entries in assets. Each asset key is the asset ID.

Important: Use url (not src) and filename (not name). Wrong field names will crash the renderer.

Timing

All values are frames. Get fps from <project>/src/Root.tsx:

<Composition id="Main" fps={30} width={1920} height={1080} ... />

Convert: seconds * fps = frames

Remotion Code Pattern

import { AbsoluteFill, Sequence, useCurrentFrame, interpolate } from 'remotion';

export const MyComp = () => (
  <AbsoluteFill>
    <Sequence from={0} durationInFrames={90} name="intro">
      <h1 style={{ fontSize: 60 }}>Title</h1>
    </Sequence>
  </AbsoluteFill>
);

When creating new content, write proper Remotion components using Sequence, AbsoluteFill, useCurrentFrame, interpolate, spring, etc. Register in Root.tsx via <Composition>.

Remotion Quick Reference

Project Structure

video/
├── src/
│   ├── index.ts          # registerRoot(RemotionRoot)
│   ├── Root.tsx           # <Composition> registration
│   └── MyComp.tsx         # Component implementation
├── public/                # Static assets (images, fonts, videos)
├── remotion.config.ts     # Remotion config
└── maxmotion.json         # Editor timeline data

Core Components

Core Hooks

Animation Utilities

import { interpolate, spring, Easing } from 'remotion';

// Linear interpolation
const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: 'clamp' });

// Spring animation
const scale = spring({ frame, fps, config: { damping: 12, stiffness: 200 } });

// With easing
const x = interpolate(frame, [0, 60], [0, 500], { easing: Easing.bezier(0.25, 0.1, 0.25, 1) });

Static Assets

import { staticFile } from 'remotion';
// References files in public/ directory
<Img src={staticFile('logo.png')} />
<Video src={staticFile('intro.mp4')} />

Validation

After editing maxmotion.json, always run validation to catch schema errors:

cd <project> && npx maxmotion validate

If validation fails, fix the errors before telling the user the edit is done.

Notes

• After editing JSON: user needs to refresh Editor. After editing .tsx: HMR auto-updates.
• New clip IDs: clip_<base36-timestamp>_<random6>. Keep 2-space JSON indent.
• The first <Composition> in Root.tsx is selected by default in the Editor. After creating a new composition, remove empty/unused ones (e.g. components returning null) to avoid a black screen.