Video examples | OverlayMotion

Examples

Proof that the system composes.

Three complete edits, real footage in, polished video out: sequential overlays, a captioned talking head, and a screen demo with camera highlights. Change the look beside each player; the spec below is exactly what renders it.

Loading footage…

Four overlays. One sequential spec.

A presenter, social CTA, quote, and bulleted list each get a complete entrance, hold, and exit over a mirrored native-ratio clip. Start with the custom glass system, then try any preset.

Template · 4 sequential overlaysCamera · face punch-in + asymmetric quote/list focus zoomsFootage · mirrored video, native 3:2

The exact spec this player runs

{
  "version": 1,
  "format": "landscape",
  "fps": 60,
  "durationSec": 41.5,
  "source": {
    "type": "video",
    "src": "/previews/sequential-overlays.mp4",
    "flipHorizontal": true,
    "camera": {
      "preset": "push-in-out",
      "amount": 0.32,
      "focus": {
        "x": 50,
        "y": 50
      },
      "frequency": 2.4,
      "seed": 0,
      "time": {
        "start": "2s",
        "duration": "10s"
      },
      "easing": "ease-in-out"
    }
  },
  "camera": [
    {
      "preset": "push-in-fast-out",
      "amount": 0.55,
      "focus": {
        "x": 10,
        "y": 8
      },
      "frequency": 2.4,
      "seed": 0,
      "time": {
        "start": "22s",
        "duration": "10s"
      },
      "easing": "linear"
    },
    {
      "preset": "push-in-fast-out",
      "amount": 0.5,
      "focus": {
        "x": 94,
        "y": 88
      },
      "frequency": 2.4,
      "seed": 0,
      "time": {
        "start": "32s",
        "duration": "9.4s"
      },
      "easing": "linear"
    }
  ],
  "sound": {
    "enabled": true,
    "volume": 1,
    "sounds": {
      "swoop": false
    }
  },
  "overlays": [
    {
      "template": "speaker-card",
      "region": {
        "x": 31,
        "y": 70,
        "w": 38,
        "h": 18
      },
      "scale": 0.8,
      "time": {
        "start": "2s",
        "duration": "9s",
        "appear": 0.7
      },
      "camera": {
        "preset": "pull-out",
        "amount": 0.05,
        "frequency": 2.4,
        "seed": 0,
        "time": {
          "start": "0.7s",
          "duration": "1.4s"
        },
        "easing": "ease-out"
      },
      "props": {
        "name": "Ricardo Metring",
        "role": "Creator of OverlayMotion",
        "photo": "/demo/avatar.png",
        "variant": "compact",
        "exit": "blur-out",
        "sound": true,
        "outSound": true
      }
    },
    {
      "template": "like-subscribe",
      "region": {
        "x": 2,
        "y": 80,
        "w": 43,
        "h": 18
      },
      "scale": 0.8,
      "time": {
        "start": "12s",
        "duration": "9s"
      },
      "props": {
        "variant": "compact"
      }
    },
    {
      "template": "quote-card",
      "region": {
        "x": 4,
        "y": 5,
        "w": 32,
        "h": 32
      },
      "scale": 0.8,
      "time": {
        "start": "22s",
        "duration": "9s",
        "appear": 3.7
      },
      "camera": {
        "preset": "handheld",
        "amount": 0.006,
        "frequency": 1.7,
        "seed": 5,
        "time": {
          "start": "0s",
          "duration": "9s"
        },
        "easing": "ease-in-out"
      },
      "exit": "blur-out",
      "props": {
        "quote": "The best ideas become real when courage is matched by consistent action.",
        "author": "Studio note",
        "animateIn": "blur-in",
        "revealDurationSec": 3.2,
        "variant": "compact"
      }
    },
    {
      "template": "bullet-steps",
      "region": {
        "x": 71,
        "y": 55,
        "w": 25,
        "h": 38
      },
      "scale": 0.8,
      "time": {
        "start": "32s",
        "duration": "9s"
      },
      "camera": {
        "preset": "pull-out",
        "amount": 0.05,
        "frequency": 2.4,
        "seed": 0,
        "time": {
          "start": "4s",
          "duration": "1.4s"
        },
        "easing": "ease-out"
      },
      "exit": "blur-out",
      "props": {
        "steps": [
          "Think clearly",
          "Build boldly",
          "Test early",
          "Learn quickly",
          "Refine details",
          "Ship often"
        ],
        "secondsPerStep": 0.65,
        "variant": "compact"
      }
    }
  ]
}

Footage: web-optimized 1280×854 H.264 preview, mirrored horizontally; focused camera tracks add intentional punch-in crop.

Loading footage…

A talking head becomes a captioned edit.

Real transcript, real karaoke captions: each Whisper segment drives one caption window while the speaker card introduces the face and a spring CTA lands after the last line. The footage camera pushes in while the intro plays.

Template · captions + speaker card + CTACamera · footage push-in on the introFootage · square talking head, real audio

The exact spec this player runs

{
  "version": 1,
  "format": "square",
  "fps": 60,
  "durationSec": 12.1,
  "source": {
    "type": "video",
    "src": "/previews/talking-head.mp4",
    "camera": {
      "preset": "push-in",
      "amount": 0.08,
      "frequency": 2.4,
      "seed": 0,
      "time": {
        "start": "0s",
        "duration": "3s"
      },
      "easing": "ease-out"
    }
  },
  "sound": {
    "enabled": true,
    "volume": 1,
    "sounds": {}
  },
  "overlays": [
    {
      "template": "caption-classic",
      "region": "caption-zone",
      "time": {
        "start": "0s",
        "duration": "1.9s"
      },
      "props": {
        "lines": [
          {
            "text": "Welcome to OverlayMotion."
          }
        ]
      }
    },
    {
      "template": "caption-classic",
      "region": "caption-zone",
      "time": {
        "start": "2.2s",
        "duration": "2.9s"
      },
      "props": {
        "lines": [
          {
            "text": "Here you can browse motion templates"
          }
        ]
      }
    },
    {
      "template": "caption-classic",
      "region": "caption-zone",
      "time": {
        "start": "5.2s",
        "duration": "2.3s"
      },
      "props": {
        "lines": [
          {
            "text": "for social media, marketing and product videos."
          }
        ]
      }
    },
    {
      "template": "caption-classic",
      "region": "caption-zone",
      "time": {
        "start": "7.6s",
        "duration": "1.3s"
      },
      "props": {
        "lines": [
          {
            "text": "Let's make good videos."
          }
        ]
      }
    },
    {
      "template": "speaker-card",
      "region": "upper-third",
      "scale": 0.72,
      "time": {
        "start": "1s",
        "duration": "4.6s",
        "appear": 0.7
      },
      "props": {
        "name": "Alex Carter",
        "role": "Product walkthrough",
        "photo": "/demo/avatar.png",
        "variant": "compact",
        "exit": "blur-out"
      }
    },
    {
      "template": "like-subscribe",
      "region": "center",
      "scale": 0.9,
      "time": {
        "start": "9.2s",
        "duration": "2.8s"
      },
      "enter": "spring",
      "props": {
        "variant": "compact"
      }
    }
  ]
}

Footage: web-optimized 960×960 H.264 preview with audio; captions follow the source transcript. durationSec is a fallback, the player measures the real file.

Loading footage…

A screen recording, narrated by the camera.

A raw capture of this very site gets recording chrome, a title, and a step list that slides in; two scene-camera pushes act as automatic highlights, leaning into the toolbar and the template grid exactly when the steps mention them.

Template · recording chrome + title + stepsCamera · two scene pushes as auto highlightsFootage · screen capture, native 3:2

The exact spec this player runs

{
  "version": 1,
  "format": "landscape",
  "fps": 60,
  "durationSec": 19.3,
  "source": {
    "type": "video",
    "src": "/previews/site-demo.mp4",
    "muted": true
  },
  "camera": [
    {
      "preset": "push-in-out",
      "amount": 0.35,
      "focus": {
        "x": 50,
        "y": 40
      },
      "frequency": 2.4,
      "seed": 0,
      "time": {
        "start": "5s",
        "duration": "6s"
      },
      "easing": "ease-in-out"
    },
    {
      "preset": "push-in-fast-out",
      "amount": 0.4,
      "focus": {
        "x": 26,
        "y": 55
      },
      "frequency": 2.4,
      "seed": 0,
      "time": {
        "start": "12s",
        "duration": "5.5s"
      },
      "easing": "linear"
    }
  ],
  "sound": {
    "enabled": true,
    "volume": 1,
    "sounds": {}
  },
  "overlays": [
    {
      "template": "recording-frame",
      "region": "fullscreen",
      "time": {},
      "props": {
        "label": "REC"
      }
    },
    {
      "template": "hero-title",
      "region": "center",
      "scale": 0.85,
      "time": {
        "start": "0.6s",
        "appear": 1,
        "hold": 2.4
      },
      "exit": "shrink",
      "props": {
        "kicker": "OverlayMotion",
        "title": "Your product tour, automated",
        "subtitle": "One spec, rendered by an agent"
      }
    },
    {
      "template": "bullet-steps",
      "region": "left-panel",
      "scale": 0.8,
      "time": {
        "start": "6s",
        "duration": "9.5s"
      },
      "enter": "slide-left",
      "exit": "fade-down",
      "props": {
        "steps": [
          "Browse the gallery",
          "Pick your brand theme",
          "Copy the spec",
          "Render with your agent"
        ],
        "secondsPerStep": 0.7,
        "variant": "compact"
      }
    }
  ]
}

Footage: site-demo.mp4, a 1620×1080 Playwright capture of the OverlayMotion home, transcoded to H.264 at 30 fps, no audio.