motionrender 0.2.8 → 0.2.9

package/blocks/fx-paper-collage.json

@@ -0,0 +1,212 @@
+{
+  "id": "fx-paper-collage",
+  "name": "Paper collage",
+  "category": "effect",
+  "kind": "scene",
+  "durationFrames": 150,
+  "transition": {
+    "type": "fade",
+    "durationFrames": 12
+  },
+  "description": "Editorial paper-collage B-roll: stop-motion cutouts drop and slide over cardstock backing with tape strips and punchy label tags.",
+  "params": {
+    "subject": {
+      "type": "string",
+      "default": "",
+      "description": "Subject cutout image (asset id or path)"
+    },
+    "label": {
+      "type": "string",
+      "default": "KEY TAKEAWAY",
+      "description": "Punchy kicker on tape tag"
+    },
+    "headline": {
+      "type": "string",
+      "default": "Visual metaphor in motion",
+      "description": "Editorial caption text"
+    }
+  },
+  "layers": [
+    {
+      "id": "bg",
+      "type": "rect",
+      "x": 0,
+      "y": 0,
+      "width": "{{canvas.width}}",
+      "height": "{{canvas.height}}",
+      "fill": "{{bg}}"
+    },
+    {
+      "id": "backing-paper",
+      "type": "rect",
+      "x": "{{round(canvas.width * 0.5)}}",
+      "y": "{{round(canvas.height * 0.48)}}",
+      "width": "{{round(min(canvas.width, canvas.height) * 0.76)}}",
+      "height": "{{round(min(canvas.width, canvas.height) * 0.95)}}",
+      "rotation": -2.5,
+      "fill": "{{surface}}",
+      "radius": 4,
+      "shadow": {
+        "color": "rgba(0,0,0,0.2)",
+        "blur": 26,
+        "offsetX": 6,
+        "offsetY": 12
+      },
+      "animations": [
+        {
+          "property": "y",
+          "keyframes": [
+            { "frame": 0, "value": "{{canvas.height + 200}}", "easing": "easeOutBack" },
+            { "frame": 18, "value": "{{round(canvas.height * 0.48)}}" }
+          ]
+        }
+      ]
+    },
+    {
+      "if": "{{subject}}",
+      "id": "subject-image",
+      "type": "image",
+      "src": "{{subject}}",
+      "x": "{{round(canvas.width * 0.5)}}",
+      "y": "{{round(canvas.height * 0.45)}}",
+      "width": "{{round(min(canvas.width, canvas.height) * 0.62)}}",
+      "height": "{{round(min(canvas.width, canvas.height) * 0.62)}}",
+      "rotation": 3,
+      "filter": "grayscale(1) contrast(1.75) brightness(1.05)",
+      "shadow": {
+        "color": "rgba(0,0,0,0.25)",
+        "blur": 18,
+        "offsetX": 5,
+        "offsetY": 9
+      },
+      "animations": [
+        {
+          "property": "scale",
+          "keyframes": [
+            { "frame": 10, "value": 0.4, "easing": "easeOutBack" },
+            { "frame": 24, "value": 1.0 }
+          ]
+        }
+      ]
+    },
+    {
+      "if": "{{!subject}}",
+      "id": "subject-placeholder",
+      "type": "rect",
+      "x": "{{round(canvas.width * 0.5)}}",
+      "y": "{{round(canvas.height * 0.45)}}",
+      "width": "{{round(min(canvas.width, canvas.height) * 0.58)}}",
+      "height": "{{round(min(canvas.width, canvas.height) * 0.58)}}",
+      "rotation": 2,
+      "fill": "{{muted}}",
+      "radius": 8,
+      "shadow": {
+        "color": "rgba(0,0,0,0.2)",
+        "blur": 16,
+        "offsetX": 4,
+        "offsetY": 8
+      },
+      "animations": [
+        {
+          "property": "scale",
+          "keyframes": [
+            { "frame": 10, "value": 0.4, "easing": "easeOutBack" },
+            { "frame": 24, "value": 1.0 }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "tape-strip",
+      "type": "rect",
+      "x": "{{round(canvas.width * 0.38)}}",
+      "y": "{{round(canvas.height * 0.48 - min(canvas.width, canvas.height) * 0.45)}}",
+      "width": "{{round(min(canvas.width, canvas.height) * 0.24)}}",
+      "height": "{{round(min(canvas.width, canvas.height) * 0.055)}}",
+      "rotation": -16,
+      "fill": "rgba(240, 230, 210, 0.85)",
+      "startFrame": 20,
+      "shadow": {
+        "color": "rgba(0,0,0,0.1)",
+        "blur": 4,
+        "offsetX": 1,
+        "offsetY": 2
+      }
+    },
+    {
+      "id": "label-tag",
+      "type": "text",
+      "content": "{{label}}",
+      "fontFamily": "Inter",
+      "fontWeight": 900,
+      "fontSize": "{{round(min(canvas.width, canvas.height) * 0.042)}}",
+      "color": "#111111",
+      "background": "{{accent}}",
+      "padding": "{{round(min(canvas.width, canvas.height) * 0.015)}}",
+      "rotation": -3.5,
+      "x": "{{round(canvas.width * 0.5)}}",
+      "y": "{{round(canvas.height * 0.72)}}",
+      "startFrame": 28,
+      "shadow": {
+        "color": "rgba(0,0,0,0.2)",
+        "blur": 12,
+        "offsetX": 4,
+        "offsetY": 6
+      },
+      "animations": [
+        {
+          "property": "y",
+          "keyframes": [
+            { "frame": 28, "value": "{{round(canvas.height * 0.78)}}", "easing": "easeOutCubic" },
+            { "frame": 38, "value": "{{round(canvas.height * 0.72)}}" }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "headline-text",
+      "type": "text",
+      "content": "{{headline}}",
+      "fontFamily": "Inter",
+      "fontWeight": 700,
+      "fontSize": "{{round(min(canvas.width, canvas.height) * 0.038)}}",
+      "color": "{{text}}",
+      "maxWidth": "{{round(min(canvas.width, canvas.height) * 0.75)}}",
+      "textAlign": "center",
+      "x": "{{round(canvas.width * 0.5)}}",
+      "y": "{{round(canvas.height * 0.81)}}",
+      "startFrame": 36,
+      "animations": [
+        {
+          "property": "opacity",
+          "keyframes": [
+            { "frame": 36, "value": 0 },
+            { "frame": 46, "value": 1 }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "sfx-paper-drop",
+      "type": "audio",
+      "src": "sfx:thump",
+      "startFrame": 14,
+      "volume": 0.85
+    },
+    {
+      "id": "sfx-subject-slide",
+      "type": "audio",
+      "src": "sfx:whoosh",
+      "startFrame": 18,
+      "volume": 0.6
+    },
+    {
+      "id": "sfx-tag-snap",
+      "type": "audio",
+      "src": "sfx:pop",
+      "startFrame": 28,
+      "volume": 0.65
+    }
+  ]
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motionrender",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "description": "JSON-first, frame-deterministic motion graphics video engine: render compositions to MP4, WebM, ProRes, GIF or PNG frames from Node or the command line.",
   "license": "MIT",
   "type": "module",

package/skills/ove-effects/SKILL.md

@@ -49,6 +49,7 @@ Effects are blocks named `fx-*`. `ove blocks` lists them under "Effects". They a
 | 34 Split reveal | `fx-split-reveal` | overlay |
 | 35 Gallery | `fx-gallery` | scene |
 | 36 CTA end card | `fx-cta-card` | scene; footage in a rounded window, not a cut-out |
+| 37 Paper collage | `fx-paper-collage` | scene; editorial halftone cutout with cardstock backing and tape |
 
 ## Effects that need a matte
 

package/skills/ove-paper-collage/SKILL.md

@@ -0,0 +1,78 @@
+---
+name: ove-paper-collage
+description: Create editorial halftone paper-collage B-roll videos, stop-motion cutouts, torn-paper backgrounds, masking tape strips, and visual metaphors in MotionRender (openvideo). Use when the user wants editorial collage explainers, video essay b-roll, or Vox / Johnny Harris style visual cutouts.
+---
+
+# Editorial Halftone Paper Collage B-roll
+
+Create premium 5-second editorial stop-motion paper-collage B-roll clips (inspired by channels like Vox, Johnny Harris, MagnatesMedia, and the `gbro-collage-broll` workflow).
+
+## Core Aesthetic Identity
+1. **Paper Background**: Solid cardstock color (e.g. warm cream `#e8e0d5`, kraft brown, terracotta, olive green) with procedural film grain (`"grain": 0.12`).
+2. **Halftone Subject Cutouts**: High-contrast black-and-white photograph cutouts with CSS filters:
+   `"filter": "grayscale(1) contrast(1.75) brightness(1.05)"`
+   and drop shadows (`"shadow": { "color": "rgba(0,0,0,0.22)", "blur": 18, "offsetX": 5, "offsetY": 9 }`).
+3. **Paper Tape & Accents**: Translucent off-white or kraft tape strips (`rgba(240, 230, 210, 0.85)`) pinned at dynamic angles (`rotation: -15`).
+4. **Cardstock Backing Plate**: Rotated backing card (`rotation: -2.5`) sliding in with spring bounce (`easing: "easeOutBack"`).
+5. **Bold Label Kicker**: High-contrast highlight card (`#facc15` or theme accent) snapping in place over the subject.
+6. **Procedural SFX**: Synchronized sound design (`sfx:thump` on paper landing, `sfx:whoosh` on slide, `sfx:pop` on tape snap).
+
+---
+
+## 3-Gate Creation Workflow
+
+To maintain high visual quality and editorial relevance:
+
+### Gate 1: Visual Metaphor Alignment
+Identify the core message of the voiceover line and translate it into a physical paper object metaphor:
+- Example: *"Interest rates soared overnight"* $\rightarrow$ A torn 1970s bank ledger with a soaring red paper arrow taped over it.
+- Example: *"Silicon Valley poured billions into AI"* $\rightarrow$ A halftone vintage microchip cutout surrounded by stacked dollar band strips.
+
+### Gate 2: Asset Prep
+- Ensure subject images have transparent backgrounds (using `rembg` or cutout masks).
+- Apply high-contrast black-and-white halftone filter via layer `filter`.
+
+### Gate 3: MotionRender Assembly
+Scaffold the project or add the effect block:
+
+```bash
+# 1. Initialize a standalone 5-second collage B-roll project
+mr init my-broll --template collage-broll
+
+# 2. Or insert into an existing video composition
+mr add fx-paper-collage video/composition.json --at 120 --frames 150 --set label="BREAKTHROUGH" --set headline="The inflection point"
+```
+
+---
+
+## Example Composition Snippet
+
+```json
+{
+  "id": "subject-cutout",
+  "type": "image",
+  "src": "assets/statue-head.png",
+  "x": 540,
+  "y": 860,
+  "width": 640,
+  "height": 640,
+  "rotation": 3,
+  "filter": "grayscale(1) contrast(1.75) brightness(1.05)",
+  "shadow": { "color": "rgba(0,0,0,0.25)", "blur": 20, "offsetX": 6, "offsetY": 10 },
+  "animations": [
+    {
+      "property": "scale",
+      "keyframes": [
+        { "frame": 10, "value": 0.4, "easing": "easeOutBack" },
+        { "frame": 24, "value": 1.0 }
+      ]
+    }
+  ]
+}
+```
+
+Validate and review the result with:
+```bash
+mr review video/composition.json --show-safe-zones --output review.png
+```
+

package/templates/collage-broll/composition.json

@@ -0,0 +1,213 @@
+{
+  "$schema": "./composition.schema.json",
+  "version": "1.0",
+  "id": "collage-broll",
+  "name": "Editorial Collage B-roll",
+  "width": 1080,
+  "height": 1920,
+  "fps": 30,
+  "durationFrames": 150,
+  "background": "#e8e0d5",
+  "grain": 0.12,
+  "variables": {
+    "label": {
+      "type": "string",
+      "default": "CRITICAL INSIGHT",
+      "description": "Punchy tag on paper tape"
+    },
+    "headline": {
+      "type": "string",
+      "default": "Built frame by frame",
+      "description": "Main editorial takeaway"
+    },
+    "accent": {
+      "type": "color",
+      "default": "#facc15",
+      "description": "Highlight tape colour"
+    }
+  },
+  "scenes": [
+    {
+      "id": "collage",
+      "name": "Collage",
+      "startFrame": 0,
+      "durationFrames": 150,
+      "camera": {
+        "zoom": 1.0,
+        "keyframes": [
+          { "frame": 0, "zoom": 1.0 },
+          { "frame": 150, "zoom": 1.05, "easing": "drift" }
+        ]
+      },
+      "transitionIn": { "type": "fade", "durationFrames": 12 },
+      "transitionOut": { "type": "fade", "durationFrames": 12 },
+      "layers": [
+        {
+          "id": "cardstock",
+          "type": "rect",
+          "x": 540,
+          "y": 920,
+          "width": 820,
+          "height": 1100,
+          "rotation": -2.5,
+          "fill": "#fcfbf7",
+          "radius": 4,
+          "shadow": {
+            "color": "rgba(0,0,0,0.18)",
+            "blur": 28,
+            "offsetX": 8,
+            "offsetY": 14
+          },
+          "animations": [
+            {
+              "property": "y",
+              "keyframes": [
+                { "frame": 0, "value": 2100, "easing": "easeOutBack" },
+                { "frame": 18, "value": 920 }
+              ]
+            }
+          ]
+        },
+        {
+          "id": "photo-plate",
+          "type": "rect",
+          "x": 540,
+          "y": 860,
+          "width": 640,
+          "height": 640,
+          "rotation": 2.5,
+          "fill": "#18181b",
+          "radius": 6,
+          "stroke": "#ffffff",
+          "strokeWidth": 12,
+          "shadow": {
+            "color": "rgba(0,0,0,0.24)",
+            "blur": 20,
+            "offsetX": 6,
+            "offsetY": 10
+          },
+          "animations": [
+            {
+              "property": "scale",
+              "keyframes": [
+                { "frame": 10, "value": 0.4, "easing": "easeOutBack" },
+                { "frame": 24, "value": 1.0 }
+              ]
+            }
+          ]
+        },
+        {
+          "id": "photo-cutout-symbol",
+          "type": "text",
+          "content": "✂",
+          "fontSize": 180,
+          "color": "#facc15",
+          "x": 540,
+          "y": 830,
+          "rotation": 15,
+          "animations": [
+            {
+              "property": "scale",
+              "keyframes": [
+                { "frame": 12, "value": 0 },
+                { "frame": 26, "value": 1, "easing": "easeOutBack" }
+              ]
+            }
+          ]
+        },
+        {
+          "id": "tape-top",
+          "type": "rect",
+          "x": 400,
+          "y": 420,
+          "width": 240,
+          "height": 65,
+          "rotation": -15,
+          "fill": "rgba(240, 230, 210, 0.85)",
+          "startFrame": 20,
+          "shadow": {
+            "color": "rgba(0,0,0,0.08)",
+            "blur": 4,
+            "offsetX": 1,
+            "offsetY": 2
+          }
+        },
+        {
+          "id": "label-badge",
+          "type": "text",
+          "content": "{{label}}",
+          "fontFamily": "Inter",
+          "fontWeight": 900,
+          "fontSize": 44,
+          "color": "#111111",
+          "background": "{{accent}}",
+          "padding": 16,
+          "rotation": -3.5,
+          "x": 540,
+          "y": 1260,
+          "startFrame": 28,
+          "shadow": {
+            "color": "rgba(0,0,0,0.2)",
+            "blur": 12,
+            "offsetX": 4,
+            "offsetY": 6
+          },
+          "animations": [
+            {
+              "property": "y",
+              "keyframes": [
+                { "frame": 28, "value": 1380, "easing": "easeOutCubic" },
+                { "frame": 38, "value": 1260 }
+              ]
+            }
+          ]
+        },
+        {
+          "id": "headline-text",
+          "type": "text",
+          "content": "{{headline}}",
+          "fontFamily": "Inter",
+          "fontWeight": 700,
+          "fontSize": 48,
+          "color": "#18181b",
+          "maxWidth": 720,
+          "textAlign": "center",
+          "x": 540,
+          "y": 1380,
+          "startFrame": 36,
+          "animations": [
+            {
+              "property": "opacity",
+              "keyframes": [
+                { "frame": 36, "value": 0 },
+                { "frame": 46, "value": 1 }
+              ]
+            }
+          ]
+        },
+        {
+          "id": "sfx-paper-drop",
+          "type": "audio",
+          "src": "sfx:thump",
+          "startFrame": 14,
+          "volume": 0.85
+        },
+        {
+          "id": "sfx-subject-slide",
+          "type": "audio",
+          "src": "sfx:whoosh",
+          "startFrame": 18,
+          "volume": 0.6
+        },
+        {
+          "id": "sfx-tag-snap",
+          "type": "audio",
+          "src": "sfx:pop",
+          "startFrame": 28,
+          "volume": 0.65
+        }
+      ]
+    }
+  ]
+}
+

package/templates/collage-broll/template.json

@@ -0,0 +1,9 @@
+{
+  "name": "Editorial Collage B-roll",
+  "description": "A 5-second vertical stop-motion paper-collage B-roll scene: cardstock backing, halftone subject, tape strip, bold label tag, and procedural sound effects.",
+  "tags": ["collage", "9:16", "b-roll", "halftone", "editorial", "stop-motion", "social"],
+  "order": 14,
+  "previewFrame": 60,
+  "brief": "A 5-second 9:16 editorial paper-collage B-roll video: warm paper background with grain, cardstock backing, black-and-white halftone photograph cutout, masking tape accent, label tag, and sound effects."
+}
+