motionrender 0.0.0-stage → 0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Open Video Engine contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,62 @@
-# Temporary Holding Version
+# motionrender
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A JSON-first, frame-deterministic motion graphics video engine. A video is one JSON composition: layers, animation, transitions, video and audio, text, drawing and templates with variables, lists and components. MotionRender renders it in headless Chromium and encodes it with FFmpeg to MP4 (H.264/H.265), WebM (VP9, with transparency), MOV (ProRes), GIF or a folder of PNG frames.
+
+## Requirements
+
+- Node.js 22 or later.
+- FFmpeg with ffprobe, on `PATH` (or set `OVE_FFMPEG_PATH` and `OVE_FFPROBE_PATH`).
+- Chromium for Playwright: `npx playwright install chromium`. On Windows an installed Google Chrome is used if present; `OVE_CHROMIUM_EXECUTABLE` picks a specific browser.
+
+## Command line
+
+```sh
+npm install motionrender
+npx motionrender init my-video
+npx motionrender dev my-video/composition.json
+npx motionrender render my-video/composition.json --output out.mp4
+```
+
+You can use `motionrender`, `mr`, or `ove` interchangeably:
+`npx motionrender` lists every command: `init`, `schema`, `doctor`, `browser install`, `dev` (live preview with audio), `render` (formats, codecs, transparency, frame ranges, batch rendering), `ai` and `ai studio` (`motionrender ai studio`).
+
+## Node API
+
+```js
+import { loadCompositionFile, renderMedia, renderStill } from 'motionrender';
+
+const { composition, baseDir } = await loadCompositionFile('my-video/composition.json', { title: 'Hello from Node' });
+
+await renderMedia(composition, {
+  baseDir,
+  output: 'out/hello.webm',          // format follows the extension: .mp4 .webm .mov .gif, or no extension for PNG frames
+  transparent: true,                 // webm, mov and png only
+  frameRange: [0, 89],               // optional, inclusive
+  onProgress: ({ rendered, total }) => console.log(`${rendered}/${total}`),
+  signal: AbortSignal.timeout(60_000),
+});
+
+const png = await renderStill(composition, { baseDir, frame: 45 }); // a Buffer
+```
+
+## React Videos & Builder
+
+```js
+import { AbsoluteFill, Series, interpolate, spring, useCurrentFrame, useVideoConfig } from 'motionrender/react';
+import { createVideo, text, rect, sample } from 'motionrender/builder';
+```
+
+## Player (browser)
+
+```js
+import { createPlayer } from 'motionrender/player';
+const player = await createPlayer(document.querySelector('#video'), { composition, assetBase: '/media/', controls: true });
+```
+
+Plays a composition live in any page with sound, drawn by the same code as the renderer. `play`, `pause`, `seek`, `setValues`, `destroy`, and `frame`/`play`/`pause`/`ended`/`error` events.
+
+## Writing compositions
+
+`ove init` creates a starter project with `composition.schema.json` for editor checks and an agent skill (`.claude/skills/ove/SKILL.md`) that documents the whole format for coding agents and people alike.
+
+MIT licensed.

package/blocks/badge.json

@@ -0,0 +1,68 @@
+{
+  "id": "badge",
+  "name": "Badge",
+  "category": "overlay",
+  "kind": "overlay",
+  "durationFrames": 90,
+  "description": "A small highlighted label in the top left corner, such as NEW or LIVE.",
+  "params": {
+    "label": {
+      "type": "string",
+      "default": "NEW"
+    }
+  },
+  "layers": [
+    {
+      "id": "tag",
+      "type": "text",
+      "spans": [
+        {
+          "text": "  {{label}}  ",
+          "background": "{{accent}}",
+          "color": "{{bg}}",
+          "fontWeight": 800
+        }
+      ],
+      "x": "{{round(canvas.width * 0.06)}}",
+      "y": "{{round(canvas.height * 0.05)}}",
+      "fontSize": "{{round(min(canvas.width, canvas.height) * 0.032)}}",
+      "letterSpacing": "{{round(min(canvas.width, canvas.height) * 0.003)}}",
+      "animations": [
+        {
+          "property": "opacity",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0
+            },
+            {
+              "frame": 10,
+              "value": 1
+            }
+          ]
+        },
+        {
+          "property": "scale",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0.8,
+              "easing": "pop"
+            },
+            {
+              "frame": 14,
+              "value": 1
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "sfx-in",
+      "type": "audio",
+      "src": "sfx:pop",
+      "startFrame": 0,
+      "volume": 0.3
+    }
+  ]
+}

package/blocks/big-stat.json

@@ -0,0 +1,240 @@
+{
+  "id": "big-stat",
+  "name": "Big stat",
+  "category": "data",
+  "kind": "scene",
+  "durationFrames": 90,
+  "transition": {
+    "type": "push",
+    "durationFrames": 16,
+    "direction": "left",
+    "easing": "glide"
+  },
+  "description": "One huge number with a line of context.",
+  "params": {
+    "value": {
+      "type": "string",
+      "default": "87%"
+    },
+    "label": {
+      "type": "string",
+      "default": "of viewers keep watching until the end"
+    }
+  },
+  "layers": [
+    {
+      "id": "bg",
+      "type": "rect",
+      "x": 0,
+      "y": 0,
+      "width": "{{canvas.width}}",
+      "height": "{{canvas.height}}",
+      "fill": "{{bg}}"
+    },
+    {
+      "id": "glow",
+      "type": "circle",
+      "x": "{{round(canvas.width * 0.1)}}",
+      "y": "{{round(canvas.height * 0.5)}}",
+      "width": "{{round(min(canvas.width, canvas.height) * 1.1)}}",
+      "fill": "{{accent}}",
+      "opacity": 0.12,
+      "blur": 120,
+      "animations": [
+        {
+          "property": "scale",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0.9
+            },
+            {
+              "frame": 150,
+              "value": 1.1,
+              "easing": "drift"
+            }
+          ]
+        },
+        {
+          "property": "x",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": "{{round(canvas.width * 0.1)}}"
+            },
+            {
+              "frame": 180,
+              "value": "{{round(canvas.width * 0)}}",
+              "easing": "drift"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "glow2",
+      "type": "circle",
+      "x": "{{round(canvas.width * 0.9)}}",
+      "y": "{{round(canvas.height * 0.5)}}",
+      "width": "{{round(min(canvas.width, canvas.height) * 0.8)}}",
+      "fill": "{{accent2}}",
+      "opacity": 0.072,
+      "blur": 140,
+      "animations": [
+        {
+          "property": "y",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": "{{round(canvas.height * 0.5)}}"
+            },
+            {
+              "frame": 180,
+              "value": "{{round(canvas.height * 0.4)}}",
+              "easing": "drift"
+            }
+          ]
+        },
+        {
+          "property": "scale",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 1.1
+            },
+            {
+              "frame": 150,
+              "value": 0.9,
+              "easing": "drift"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "stack",
+      "type": "group",
+      "x": 0,
+      "y": 0,
+      "width": "{{canvas.width}}",
+      "height": "{{canvas.height}}",
+      "layout": {
+        "direction": "column",
+        "gap": "{{round(min(canvas.width, canvas.height) * 0.03)}}",
+        "align": "center",
+        "justify": "center"
+      },
+      "children": [
+        {
+          "id": "value",
+          "type": "text",
+          "content": "{{value}}",
+          "fontSize": "{{round(min(canvas.width, canvas.height) * 0.3)}}",
+          "color": "{{accent}}",
+          "fontWeight": 900,
+          "textAlign": "center",
+          "maxWidth": "{{round(canvas.width * 0.9)}}",
+          "lineHeight": 1,
+          "animations": [
+            {
+              "property": "scale",
+              "keyframes": [
+                {
+                  "frame": 0,
+                  "value": 0.8,
+                  "easing": "pop"
+                },
+                {
+                  "frame": 22,
+                  "value": 1
+                }
+              ]
+            },
+            {
+              "property": "opacity",
+              "keyframes": [
+                {
+                  "frame": 0,
+                  "value": 0
+                },
+                {
+                  "frame": 10,
+                  "value": 1
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "id": "label",
+          "type": "text",
+          "content": "{{label}}",
+          "fontSize": "{{round(min(canvas.width, canvas.height) * 0.05)}}",
+          "color": "{{text}}",
+          "textAlign": "center",
+          "maxWidth": "{{round(canvas.width * 0.72)}}",
+          "maxLines": 3,
+          "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.032)}}",
+          "startFrame": 14,
+          "animations": [
+            {
+              "property": "opacity",
+              "keyframes": [
+                {
+                  "frame": 0,
+                  "value": 0
+                },
+                {
+                  "frame": 14,
+                  "value": 1,
+                  "easing": "glide"
+                }
+              ]
+            },
+            {
+              "property": "y",
+              "keyframes": [
+                {
+                  "frame": 0,
+                  "value": 24,
+                  "easing": "land"
+                },
+                {
+                  "frame": 18,
+                  "value": 0
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "sfx-hit",
+      "type": "audio",
+      "src": "sfx:pop",
+      "startFrame": 4,
+      "volume": 0.5
+    }
+  ],
+  "scene": {
+    "camera": {
+      "animations": [
+        {
+          "property": "zoom",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 1.1
+            },
+            {
+              "frame": 90,
+              "value": 1,
+              "easing": "drift"
+            }
+          ]
+        }
+      ]
+    }
+  }
+}

package/blocks/cta-end.json

@@ -0,0 +1,283 @@
+{
+  "id": "cta-end",
+  "name": "Call to action",
+  "category": "cta",
+  "kind": "scene",
+  "durationFrames": 120,
+  "transition": {
+    "type": "push",
+    "durationFrames": 16,
+    "direction": "left",
+    "easing": "glide"
+  },
+  "description": "Closing scene: a headline, a button and a web address.",
+  "params": {
+    "headline": {
+      "type": "string",
+      "default": "Ready to start?"
+    },
+    "button": {
+      "type": "string",
+      "default": "Get started"
+    },
+    "url": {
+      "type": "string",
+      "default": "example.com"
+    }
+  },
+  "layers": [
+    {
+      "id": "bg",
+      "type": "rect",
+      "x": 0,
+      "y": 0,
+      "width": "{{canvas.width}}",
+      "height": "{{canvas.height}}",
+      "fill": "{{bg}}"
+    },
+    {
+      "id": "glow",
+      "type": "circle",
+      "x": "{{round(canvas.width * 0.5)}}",
+      "y": "{{round(canvas.height * 0.4)}}",
+      "width": "{{round(min(canvas.width, canvas.height) * 1.1)}}",
+      "fill": "{{accent}}",
+      "opacity": 0.16,
+      "blur": 120,
+      "animations": [
+        {
+          "property": "scale",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0.9
+            },
+            {
+              "frame": 150,
+              "value": 1.1,
+              "easing": "drift"
+            }
+          ]
+        },
+        {
+          "property": "x",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": "{{round(canvas.width * 0.5)}}"
+            },
+            {
+              "frame": 180,
+              "value": "{{round(canvas.width * 0.4)}}",
+              "easing": "drift"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "glow2",
+      "type": "circle",
+      "x": "{{round(canvas.width * 0.5)}}",
+      "y": "{{round(canvas.height * 0.6)}}",
+      "width": "{{round(min(canvas.width, canvas.height) * 0.8)}}",
+      "fill": "{{accent2}}",
+      "opacity": 0.096,
+      "blur": 140,
+      "animations": [
+        {
+          "property": "y",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": "{{round(canvas.height * 0.6)}}"
+            },
+            {
+              "frame": 180,
+              "value": "{{round(canvas.height * 0.5)}}",
+              "easing": "drift"
+            }
+          ]
+        },
+        {
+          "property": "scale",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 1.1
+            },
+            {
+              "frame": 150,
+              "value": 0.9,
+              "easing": "drift"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "stack",
+      "type": "group",
+      "x": 0,
+      "y": 0,
+      "width": "{{canvas.width}}",
+      "height": "{{canvas.height}}",
+      "layout": {
+        "direction": "column",
+        "gap": "{{round(min(canvas.width, canvas.height) * 0.05)}}",
+        "align": "center",
+        "justify": "center"
+      },
+      "children": [
+        {
+          "id": "headline",
+          "type": "text",
+          "content": "{{headline}}",
+          "fontSize": "{{round(min(canvas.width, canvas.height) * 0.1)}}",
+          "color": "{{text}}",
+          "fontWeight": "{{headWeight}}",
+          "textAlign": "center",
+          "maxWidth": "{{round(canvas.width * 0.84)}}",
+          "maxLines": 3,
+          "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.06)}}",
+          "lineHeight": 1.05,
+          "split": {
+            "by": "words",
+            "stagger": 4,
+            "preset": "rise",
+            "duration": 18
+          }
+        },
+        {
+          "id": "btn",
+          "type": "group",
+          "width": "{{round(canvas.width * 0.42)}}",
+          "height": "{{round(min(canvas.width, canvas.height) * 0.13)}}",
+          "startFrame": 24,
+          "animations": [
+            {
+              "property": "scale",
+              "keyframes": [
+                {
+                  "frame": 0,
+                  "value": 0.85,
+                  "easing": "pop"
+                },
+                {
+                  "frame": 16,
+                  "value": 1
+                }
+              ]
+            },
+            {
+              "property": "opacity",
+              "keyframes": [
+                {
+                  "frame": 0,
+                  "value": 0
+                },
+                {
+                  "frame": 8,
+                  "value": 1
+                }
+              ]
+            }
+          ],
+          "children": [
+            {
+              "id": "pill",
+              "type": "rect",
+              "x": 0,
+              "y": 0,
+              "width": "{{round(canvas.width * 0.42)}}",
+              "height": "{{round(min(canvas.width, canvas.height) * 0.13)}}",
+              "radius": "{{round(min(canvas.width, canvas.height) * 0.065)}}",
+              "fill": "{{accent}}"
+            },
+            {
+              "id": "label",
+              "type": "text",
+              "content": "{{button}}",
+              "x": "{{round(canvas.width * 0.21)}}",
+              "y": "{{round(min(canvas.width, canvas.height) * 0.065 - min(canvas.width, canvas.height) * 0.03)}}",
+              "fontSize": "{{round(min(canvas.width, canvas.height) * 0.05)}}",
+              "fontWeight": 800,
+              "color": "{{bg}}",
+              "textAlign": "center",
+              "maxWidth": "{{round(canvas.width * 0.38)}}",
+              "maxLines": 1,
+              "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.032)}}"
+            }
+          ]
+        },
+        {
+          "id": "url",
+          "type": "text",
+          "content": "{{url}}",
+          "fontSize": "{{round(min(canvas.width, canvas.height) * 0.04)}}",
+          "color": "{{muted}}",
+          "textAlign": "center",
+          "maxWidth": "{{round(canvas.width * 0.8)}}",
+          "startFrame": 34,
+          "animations": [
+            {
+              "property": "opacity",
+              "keyframes": [
+                {
+                  "frame": 0,
+                  "value": 0
+                },
+                {
+                  "frame": 14,
+                  "value": 1,
+                  "easing": "glide"
+                }
+              ]
+            },
+            {
+              "property": "y",
+              "keyframes": [
+                {
+                  "frame": 0,
+                  "value": 16,
+                  "easing": "land"
+                },
+                {
+                  "frame": 18,
+                  "value": 0
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "sfx-btn",
+      "type": "audio",
+      "src": "sfx:ding",
+      "startFrame": 24,
+      "volume": 0.45
+    }
+  ],
+  "scene": {
+    "camera": {
+      "animations": [
+        {
+          "property": "zoom",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 1
+            },
+            {
+              "frame": 120,
+              "value": 1.06,
+              "easing": "drift"
+            }
+          ]
+        }
+      ]
+    }
+  }
+}