motionrender 0.2.1 → 0.2.3

package/studio/index.html

@@ -7,8 +7,8 @@
     <script>try{var t=localStorage.getItem('ove-theme')||'dark';if(t==='system')t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.dataset.theme=t}catch(e){document.documentElement.dataset.theme='dark'}</script>
     <title>OVE AI studio</title>
     <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 22 21H2z' fill='%23ededed'/%3E%3C/svg%3E" />
-    <script type="module" crossorigin src="/assets/index-J_fvKgng.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CzOvWv9w.css">
+    <script type="module" crossorigin src="/assets/index-n3DJI_GV.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DmZj9wTZ.css">
   </head>
   <body>
     <div id="root"></div>

package/templates/case-study/composition.json

@@ -38,6 +38,11 @@
       "name": "Client and promise",
       "startFrame": 0,
       "durationFrames": 180,
+      "camera": {
+        "animations": [
+          { "property": "zoom", "keyframes": [{ "frame": 0, "value": 1 }, { "frame": 180, "value": 1.08, "easing": "drift" }] }
+        ]
+      },
       "transitionIn": { "type": "fade", "durationFrames": 12 },
       "transitionOut": { "type": "fade", "durationFrames": 12 },
       "layers": [
@@ -132,6 +137,11 @@
       "name": "Results",
       "startFrame": 180,
       "durationFrames": 240,
+      "camera": {
+        "animations": [
+          { "property": "zoom", "keyframes": [{ "frame": 0, "value": 1 }, { "frame": 240, "value": 1.08, "easing": "drift" }] }
+        ]
+      },
       "transitionIn": { "type": "slide", "direction": "left", "durationFrames": 18 },
       "transitionOut": { "type": "fade", "durationFrames": 12 },
       "layers": [
@@ -194,13 +204,13 @@
           "type": "text",
           "content": "{{stat2}}",
           "x": 730,
-          "y": 330,
-          "fontSize": 150,
+          "y": 384,
+          "fontSize": 60,
           "fontWeight": 800,
-          "letterSpacing": -6,
+          "letterSpacing": -3,
           "maxWidth": 520,
           "maxLines": 1,
-          "minFontSize": 86,
+          "minFontSize": 40,
           "color": "#ecfdf5",
           "animations": [
             { "property": "opacity", "keyframes": [{ "frame": 28, "value": 0 }, { "frame": 48, "value": 1 }] },
@@ -227,13 +237,13 @@
           "type": "text",
           "content": "{{stat3}}",
           "x": 1310,
-          "y": 330,
-          "fontSize": 150,
+          "y": 384,
+          "fontSize": 60,
           "fontWeight": 800,
-          "letterSpacing": -6,
+          "letterSpacing": -3,
           "maxWidth": 520,
           "maxLines": 1,
-          "minFontSize": 86,
+          "minFontSize": 40,
           "color": "#ecfdf5",
           "animations": [
             { "property": "opacity", "keyframes": [{ "frame": 42, "value": 0 }, { "frame": 62, "value": 1 }] },
@@ -271,6 +281,11 @@
       "name": "Quote",
       "startFrame": 420,
       "durationFrames": 180,
+      "camera": {
+        "animations": [
+          { "property": "zoom", "keyframes": [{ "frame": 0, "value": 1 }, { "frame": 180, "value": 1.08, "easing": "drift" }] }
+        ]
+      },
       "transitionIn": { "type": "fade", "durationFrames": 14 },
       "transitionOut": { "type": "fade", "durationFrames": 12 },
       "layers": [
@@ -320,7 +335,7 @@
           "content": "{{quoteBy}}",
           "x": 150,
           "y": 760,
-          "fontSize": 34,
+          "fontSize": 40,
           "fontWeight": 600,
           "maxWidth": 900,
           "maxLines": 1,
@@ -335,7 +350,7 @@
           "content": "{{cta}} →",
           "x": 150,
           "y": 860,
-          "fontSize": 38,
+          "fontSize": 40,
           "fontWeight": 700,
           "color": "#d1fae5",
           "animations": [

package/templates/event-invite/composition.json

@@ -32,6 +32,11 @@
       "name": "Invitation",
       "startFrame": 0,
       "durationFrames": 240,
+      "camera": {
+        "animations": [
+          { "property": "zoom", "keyframes": [{ "frame": 0, "value": 1 }, { "frame": 240, "value": 1.08, "easing": "drift" }] }
+        ]
+      },
       "transitionIn": { "type": "fade", "durationFrames": 12 },
       "transitionOut": { "type": "fade", "durationFrames": 12 },
       "layers": [
@@ -134,7 +139,7 @@
           "content": "{{detail}}",
           "x": 92,
           "y": 1050,
-          "fontSize": 32,
+          "fontSize": 34,
           "lineHeight": 1.5,
           "maxWidth": 820,
           "maxLines": 4,
@@ -162,6 +167,11 @@
       "name": "Save your seat",
       "startFrame": 240,
       "durationFrames": 120,
+      "camera": {
+        "animations": [
+          { "property": "zoom", "keyframes": [{ "frame": 0, "value": 1 }, { "frame": 120, "value": 1.08, "easing": "drift" }] }
+        ]
+      },
       "transitionIn": { "type": "zoom", "durationFrames": 16 },
       "transitionOut": { "type": "fade", "durationFrames": 12 },
       "layers": [
@@ -233,7 +243,7 @@
           "content": "{{place}}",
           "x": 540,
           "y": 970,
-          "fontSize": 30,
+          "fontSize": 28,
           "textAlign": "center",
           "maxWidth": 820,
           "maxLines": 2,

package/templates/explainer-square/composition.json

@@ -1040,7 +1040,7 @@
                           "id": "v-{{index}}",
                           "type": "text",
                           "content": "{{st.value}}",
-                          "fontSize": "{{round(min(min(canvas.width, canvas.height) * 0.08, (canvas.width * 0.84 / max(count, 1) - min(canvas.width, canvas.height) * 0.04) * 0.3))}}",
+                          "fontSize": "{{round(min(min(canvas.width, canvas.height) * 0.0575, (canvas.width * 0.84 / max(count, 1) - min(canvas.width, canvas.height) * 0.04) * 0.3))}}",
                           "color": "{{accent}}",
                           "fontWeight": 900,
                           "maxWidth": "{{round(canvas.width * 0.84 / max(count, 1) - min(canvas.width, canvas.height) * 0.04)}}",

package/templates/keynote-wide/composition.json

@@ -665,7 +665,7 @@
               "id": "quote",
               "type": "text",
               "content": "{{quote}}",
-              "fontSize": "{{round(min(canvas.width, canvas.height) * 0.06)}}",
+              "fontSize": "{{round(min(canvas.width, canvas.height) * 0.0667)}}",
               "color": "{{text}}",
               "fontWeight": 700,
               "lineHeight": 1.15,
@@ -1163,7 +1163,7 @@
                           "id": "v-{{index}}",
                           "type": "text",
                           "content": "{{st.value}}",
-                          "fontSize": "{{round(min(min(canvas.width, canvas.height) * 0.08, (canvas.width * 0.84 / max(count, 1) - min(canvas.width, canvas.height) * 0.04) * 0.3))}}",
+                          "fontSize": "{{round(min(min(canvas.width, canvas.height) * 0.0575, (canvas.width * 0.84 / max(count, 1) - min(canvas.width, canvas.height) * 0.04) * 0.3))}}",
                           "color": "{{accent}}",
                           "fontWeight": 900,
                           "maxWidth": "{{round(canvas.width * 0.84 / max(count, 1) - min(canvas.width, canvas.height) * 0.04)}}",

package/templates/kinetic-reel/composition.json

@@ -0,0 +1,73 @@
+{
+  "$schema": "./composition.schema.json",
+  "version": "1.0",
+  "id": "kinetic-reel",
+  "name": "Viral Motion Graphics Reel (9:16)",
+  "width": 1080,
+  "height": 1920,
+  "fps": 30,
+  "durationFrames": 180,
+  "background": "#070a12",
+  "scenes": [
+    {
+      "id": "main",
+      "name": "Main",
+      "startFrame": 0,
+      "durationFrames": 180,
+      "layers": [
+        {
+          "id": "react",
+          "type": "react",
+          "src": "video.bundle.js",
+          "width": 1080,
+          "height": 1920,
+          "durationInFrames": 180,
+          "props": {
+            "kicker": "CLAUDE MOTION GRAPHICS",
+            "headline": "Stop Making Boring Videos",
+            "subtitle": "Code-driven motion graphics with real spring physics, glassmorphism, and instant rendering.",
+            "metric": 10,
+            "metricUnit": "x",
+            "metricLabel": "Higher Audience Retention",
+            "codeSnippet": "const reel = await ove.render();",
+            "ctaText": "Start Building in React",
+            "handle": "@openvideo.dev"
+          }
+        },
+        {
+          "id": "audio-1",
+          "type": "audio",
+          "startFrame": 0,
+          "endFrame": 65,
+          "src": "sfx:whoosh",
+          "trimStart": 0,
+          "volume": 0.65,
+          "playbackRate": 1,
+          "loop": false
+        },
+        {
+          "id": "audio-2",
+          "type": "audio",
+          "startFrame": 65,
+          "endFrame": 125,
+          "src": "sfx:pop",
+          "trimStart": 0,
+          "volume": 0.6,
+          "playbackRate": 1,
+          "loop": false
+        },
+        {
+          "id": "audio-3",
+          "type": "audio",
+          "startFrame": 125,
+          "endFrame": 180,
+          "src": "sfx:ding",
+          "trimStart": 0,
+          "volume": 0.65,
+          "playbackRate": 1,
+          "loop": false
+        }
+      ]
+    }
+  ]
+}