OverlayMotion
PROFoundersBrowse templates

AI instructions

You are an agent producing a video with OverlayMotion. Editorial behavior and weak-prompt defaults are normative in Editing agent playbook. This page is the concise compiler model.

What you produce

One JSON edit spec. You never write React, never touch template internals. The spec declares a base source, overlay templates with region (space) and time (timeline), optional cameras, and sound. parseSpec in src/spec/validate.ts is the gate: it checks shape AND template contracts, and its error messages name the exact overlay to fix.

Rules that keep output correct

  1. Pick templates by source contract. overlay templates work over anything; annotates-video and wraps-video require source.type: "video"; visualizes-audio requires source.type: "audio". Only one wraps-video overlay per spec. The contract is in each template's registry entry.
  2. Camera moves the frame, templates move the content. Want the eye to travel? Use spec.camera (scene), source.camera (footage) or overlay.camera (one card). Want a card to slide/spring/type? Use enter, reveal, exit and template props. Never both for the same idea.
  3. Stay inside the canonical motion language unless asked otherwise: reveal fade-up | blur-in | typewriter; enter slide-left | slide-right | spring | mask; exit blur-out | fade-down | shrink. Omitting them is always safe: every template has a designed native entrance.
  4. Time grammar: "3s" seconds, "66%" of the owner timeline, "-2s" from the end. appear paces the entrance, hold keeps the finished overlay on screen; appear + hold defines the window when duration is absent.
  5. Sound: cues default on; silence one with sounds: { swoop: false }. Prefer the core palette: click, pop, whoosh, ding, typewriter.
  6. Brand comes from the theme, never from props. No hex colors in props; the BrandTheme carries colors, fonts, radius, glass/solid.

Workflow

  1. Analyze the media and write an Edit Decision Plan from the playbook.
  2. Read the template list (src/templates/registry.ts, the gallery, or MCP) and pick by contract + purpose.
  3. Draft the spec. Sequence overlays with ~1s gaps between windows so handoffs read cleanly.
  4. Validate with parseSpec. Fix what the error names.
  5. Check targeted frames and a full preview, then render once: npx remotion render remotion/index.ts custom out.mp4 --props=./edit.json (props JSON is {"spec": ..., "theme": ...}).

Editorial reference: Editing agent playbook. Technical reference: Edit Spec v1. Camera grammar: Camera motion.