@revideo/create 0.5.11-alpha.1102 → 0.5.11-alpha.1103

package/examples/google-cloud-run-parallelized/render-worker/vite.config.ts

@@ -0,0 +1,9 @@
+import {defineConfig} from 'vite';
+import motionCanvas from '@revideo/vite-plugin';
+
+
+export default defineConfig({
+  plugins: [
+    motionCanvas(),
+  ],
+});

package/examples/logo.svg

@@ -0,0 +1,6 @@
+<svg width="1498" height="363" viewBox="0 0 1498 363" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M444.3 294V134.7H489.9L492 186.6L483 176.7C485.4 168.1 489.3 160.4 494.7 153.6C500.3 146.8 506.8 141.4 514.2 137.4C521.6 133.4 529.5 131.4 537.9 131.4C541.5 131.4 544.8 131.7 547.8 132.3C551 132.9 553.9 133.6 556.5 134.4L543.3 187.5C541.1 186.1 538.1 185 534.3 184.2C530.7 183.2 526.9 182.7 522.9 182.7C518.5 182.7 514.4 183.5 510.6 185.1C506.8 186.5 503.6 188.6 501 191.4C498.4 194.2 496.3 197.5 494.7 201.3C493.3 205.1 492.6 209.4 492.6 214.2V294H444.3ZM637.985 297C620.385 297 605.085 293.5 592.085 286.5C579.085 279.3 568.985 269.6 561.785 257.4C554.585 245 550.985 230.9 550.985 215.1C550.985 202.9 552.985 191.7 556.985 181.5C560.985 171.3 566.585 162.5 573.785 155.1C580.985 147.5 589.485 141.7 599.285 137.7C609.285 133.5 620.185 131.4 631.985 131.4C643.185 131.4 653.385 133.4 662.585 137.4C671.985 141.4 680.085 147 686.885 154.2C693.685 161.4 698.885 169.9 702.485 179.7C706.085 189.5 707.685 200.2 707.285 211.8L706.985 224.7H580.085L573.185 197.7H667.985L662.885 203.4V197.4C662.485 192.4 660.885 188 658.085 184.2C655.485 180.2 651.985 177.1 647.585 174.9C643.185 172.7 638.185 171.6 632.585 171.6C624.785 171.6 618.085 173.2 612.485 176.4C607.085 179.4 602.985 183.9 600.185 189.9C597.385 195.7 595.985 202.9 595.985 211.5C595.985 220.3 597.785 228 601.385 234.6C605.185 241 610.585 246 617.585 249.6C624.785 253.2 633.285 255 643.085 255C649.885 255 655.885 254 661.085 252C666.485 250 672.285 246.6 678.485 241.8L700.985 273.6C694.785 279 688.185 283.4 681.185 286.8C674.185 290.2 666.985 292.7 659.585 294.3C652.385 296.1 645.185 297 637.985 297ZM771.837 294L705.237 134.7H758.337L797.937 253.8L786.237 255L827.037 134.7H879.537L809.637 294H771.837ZM895.277 294V134.7H943.277V294H895.277ZM919.277 103.2C910.277 103.2 903.177 101.1 897.977 96.9C892.977 92.5 890.477 86.3 890.477 78.3C890.477 71.1 893.077 65.2 898.277 60.6C903.477 56 910.477 53.7 919.277 53.7C928.277 53.7 935.277 55.9 940.277 60.3C945.277 64.5 947.777 70.5 947.777 78.3C947.777 85.7 945.177 91.7 939.977 96.3C934.977 100.9 928.077 103.2 919.277 103.2ZM1036.68 297.3C1022.88 297.3 1010.58 293.8 999.778 286.8C989.178 279.6 980.778 269.8 974.578 257.4C968.378 244.8 965.278 230.5 965.278 214.5C965.278 198.5 968.378 184.3 974.578 171.9C980.778 159.3 989.278 149.4 1000.08 142.2C1010.88 135 1023.28 131.4 1037.28 131.4C1044.48 131.4 1051.38 132.5 1057.98 134.7C1064.58 136.9 1070.58 139.9 1075.98 143.7C1081.38 147.5 1085.78 151.9 1089.18 156.9C1092.58 161.7 1094.58 166.7 1095.18 171.9L1083.78 174.6V72H1132.08V294H1087.38L1084.68 257.7L1094.28 259.2C1093.68 264.2 1091.68 269 1088.28 273.6C1085.08 278.2 1080.88 282.3 1075.68 285.9C1070.48 289.3 1064.48 292 1057.68 294C1051.08 296.2 1044.08 297.3 1036.68 297.3ZM1048.98 257.4C1056.38 257.4 1062.78 255.6 1068.18 252C1073.58 248.4 1077.68 243.4 1080.48 237C1083.48 230.6 1084.98 223.1 1084.98 214.5C1084.98 205.7 1083.48 198.1 1080.48 191.7C1077.68 185.3 1073.58 180.3 1068.18 176.7C1062.78 173.1 1056.38 171.3 1048.98 171.3C1041.58 171.3 1035.18 173.1 1029.78 176.7C1024.58 180.3 1020.48 185.3 1017.48 191.7C1014.48 198.1 1012.98 205.7 1012.98 214.5C1012.98 223.1 1014.48 230.6 1017.48 237C1020.48 243.4 1024.58 248.4 1029.78 252C1035.18 255.6 1041.58 257.4 1048.98 257.4ZM1236.57 297C1218.97 297 1203.67 293.5 1190.67 286.5C1177.67 279.3 1167.57 269.6 1160.37 257.4C1153.17 245 1149.57 230.9 1149.57 215.1C1149.57 202.9 1151.57 191.7 1155.57 181.5C1159.57 171.3 1165.17 162.5 1172.37 155.1C1179.57 147.5 1188.07 141.7 1197.87 137.7C1207.87 133.5 1218.77 131.4 1230.57 131.4C1241.77 131.4 1251.97 133.4 1261.17 137.4C1270.57 141.4 1278.67 147 1285.47 154.2C1292.27 161.4 1297.47 169.9 1301.07 179.7C1304.67 189.5 1306.27 200.2 1305.87 211.8L1305.57 224.7H1178.67L1171.77 197.7H1266.57L1261.47 203.4V197.4C1261.07 192.4 1259.47 188 1256.67 184.2C1254.07 180.2 1250.57 177.1 1246.17 174.9C1241.77 172.7 1236.77 171.6 1231.17 171.6C1223.37 171.6 1216.67 173.2 1211.07 176.4C1205.67 179.4 1201.57 183.9 1198.77 189.9C1195.97 195.7 1194.57 202.9 1194.57 211.5C1194.57 220.3 1196.37 228 1199.97 234.6C1203.77 241 1209.17 246 1216.17 249.6C1223.37 253.2 1231.87 255 1241.67 255C1248.47 255 1254.47 254 1259.67 252C1265.07 250 1270.87 246.6 1277.07 241.8L1299.57 273.6C1293.37 279 1286.77 283.4 1279.77 286.8C1272.77 290.2 1265.57 292.7 1258.17 294.3C1250.97 296.1 1243.77 297 1236.57 297ZM1399.45 297C1382.85 297 1368.05 293.4 1355.05 286.2C1342.25 279 1332.05 269.2 1324.45 256.8C1317.05 244.4 1313.35 230.2 1313.35 214.2C1313.35 198.2 1317.05 184 1324.45 171.6C1332.05 159.2 1342.25 149.4 1355.05 142.2C1368.05 135 1382.85 131.4 1399.45 131.4C1416.05 131.4 1430.75 135 1443.55 142.2C1456.55 149.4 1466.75 159.2 1474.15 171.6C1481.55 184 1485.25 198.2 1485.25 214.2C1485.25 230.2 1481.55 244.4 1474.15 256.8C1466.75 269.2 1456.55 279 1443.55 286.2C1430.75 293.4 1416.05 297 1399.45 297ZM1399.45 255.6C1406.65 255.6 1413.05 253.8 1418.65 250.2C1424.25 246.6 1428.65 241.7 1431.85 235.5C1435.05 229.3 1436.55 222.2 1436.35 214.2C1436.55 206.2 1435.05 199.1 1431.85 192.9C1428.65 186.5 1424.25 181.5 1418.65 177.9C1413.05 174.3 1406.65 172.5 1399.45 172.5C1392.25 172.5 1385.75 174.3 1379.95 177.9C1374.35 181.5 1369.95 186.5 1366.75 192.9C1363.55 199.1 1362.05 206.2 1362.25 214.2C1362.05 222.2 1363.55 229.3 1366.75 235.5C1369.95 241.7 1374.35 246.6 1379.95 250.2C1385.75 253.8 1392.25 255.6 1399.45 255.6Z" fill="#101010"/>
+<rect y="74" width="180" height="59.7841" rx="9.34127" fill="#101010"/>
+<path d="M70 163.341C70 158.182 74.1822 154 79.3413 154H240.659C245.818 154 250 158.182 250 163.341V204.659C250 209.818 245.818 214 240.659 214H79.3413C74.1822 214 70 209.818 70 204.659V163.341Z" fill="#101010"/>
+<rect x="140" y="234" width="180" height="60.2381" rx="9.34127" fill="#101010"/>
+</svg>

package/examples/logo_dark.svg

@@ -0,0 +1,6 @@
+<svg width="1498" height="363" viewBox="0 0 1498 363" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M444.3 294V134.7H489.9L492 186.6L483 176.7C485.4 168.1 489.3 160.4 494.7 153.6C500.3 146.8 506.8 141.4 514.2 137.4C521.6 133.4 529.5 131.4 537.9 131.4C541.5 131.4 544.8 131.7 547.8 132.3C551 132.9 553.9 133.6 556.5 134.4L543.3 187.5C541.1 186.1 538.1 185 534.3 184.2C530.7 183.2 526.9 182.7 522.9 182.7C518.5 182.7 514.4 183.5 510.6 185.1C506.8 186.5 503.6 188.6 501 191.4C498.4 194.2 496.3 197.5 494.7 201.3C493.3 205.1 492.6 209.4 492.6 214.2V294H444.3ZM637.985 297C620.385 297 605.085 293.5 592.085 286.5C579.085 279.3 568.985 269.6 561.785 257.4C554.585 245 550.985 230.9 550.985 215.1C550.985 202.9 552.985 191.7 556.985 181.5C560.985 171.3 566.585 162.5 573.785 155.1C580.985 147.5 589.485 141.7 599.285 137.7C609.285 133.5 620.185 131.4 631.985 131.4C643.185 131.4 653.385 133.4 662.585 137.4C671.985 141.4 680.085 147 686.885 154.2C693.685 161.4 698.885 169.9 702.485 179.7C706.085 189.5 707.685 200.2 707.285 211.8L706.985 224.7H580.085L573.185 197.7H667.985L662.885 203.4V197.4C662.485 192.4 660.885 188 658.085 184.2C655.485 180.2 651.985 177.1 647.585 174.9C643.185 172.7 638.185 171.6 632.585 171.6C624.785 171.6 618.085 173.2 612.485 176.4C607.085 179.4 602.985 183.9 600.185 189.9C597.385 195.7 595.985 202.9 595.985 211.5C595.985 220.3 597.785 228 601.385 234.6C605.185 241 610.585 246 617.585 249.6C624.785 253.2 633.285 255 643.085 255C649.885 255 655.885 254 661.085 252C666.485 250 672.285 246.6 678.485 241.8L700.985 273.6C694.785 279 688.185 283.4 681.185 286.8C674.185 290.2 666.985 292.7 659.585 294.3C652.385 296.1 645.185 297 637.985 297ZM771.837 294L705.237 134.7H758.337L797.937 253.8L786.237 255L827.037 134.7H879.537L809.637 294H771.837ZM895.277 294V134.7H943.277V294H895.277ZM919.277 103.2C910.277 103.2 903.177 101.1 897.977 96.9C892.977 92.5 890.477 86.3 890.477 78.3C890.477 71.1 893.077 65.2 898.277 60.6C903.477 56 910.477 53.7 919.277 53.7C928.277 53.7 935.277 55.9 940.277 60.3C945.277 64.5 947.777 70.5 947.777 78.3C947.777 85.7 945.177 91.7 939.977 96.3C934.977 100.9 928.077 103.2 919.277 103.2ZM1036.68 297.3C1022.88 297.3 1010.58 293.8 999.778 286.8C989.178 279.6 980.778 269.8 974.578 257.4C968.378 244.8 965.278 230.5 965.278 214.5C965.278 198.5 968.378 184.3 974.578 171.9C980.778 159.3 989.278 149.4 1000.08 142.2C1010.88 135 1023.28 131.4 1037.28 131.4C1044.48 131.4 1051.38 132.5 1057.98 134.7C1064.58 136.9 1070.58 139.9 1075.98 143.7C1081.38 147.5 1085.78 151.9 1089.18 156.9C1092.58 161.7 1094.58 166.7 1095.18 171.9L1083.78 174.6V72H1132.08V294H1087.38L1084.68 257.7L1094.28 259.2C1093.68 264.2 1091.68 269 1088.28 273.6C1085.08 278.2 1080.88 282.3 1075.68 285.9C1070.48 289.3 1064.48 292 1057.68 294C1051.08 296.2 1044.08 297.3 1036.68 297.3ZM1048.98 257.4C1056.38 257.4 1062.78 255.6 1068.18 252C1073.58 248.4 1077.68 243.4 1080.48 237C1083.48 230.6 1084.98 223.1 1084.98 214.5C1084.98 205.7 1083.48 198.1 1080.48 191.7C1077.68 185.3 1073.58 180.3 1068.18 176.7C1062.78 173.1 1056.38 171.3 1048.98 171.3C1041.58 171.3 1035.18 173.1 1029.78 176.7C1024.58 180.3 1020.48 185.3 1017.48 191.7C1014.48 198.1 1012.98 205.7 1012.98 214.5C1012.98 223.1 1014.48 230.6 1017.48 237C1020.48 243.4 1024.58 248.4 1029.78 252C1035.18 255.6 1041.58 257.4 1048.98 257.4ZM1236.57 297C1218.97 297 1203.67 293.5 1190.67 286.5C1177.67 279.3 1167.57 269.6 1160.37 257.4C1153.17 245 1149.57 230.9 1149.57 215.1C1149.57 202.9 1151.57 191.7 1155.57 181.5C1159.57 171.3 1165.17 162.5 1172.37 155.1C1179.57 147.5 1188.07 141.7 1197.87 137.7C1207.87 133.5 1218.77 131.4 1230.57 131.4C1241.77 131.4 1251.97 133.4 1261.17 137.4C1270.57 141.4 1278.67 147 1285.47 154.2C1292.27 161.4 1297.47 169.9 1301.07 179.7C1304.67 189.5 1306.27 200.2 1305.87 211.8L1305.57 224.7H1178.67L1171.77 197.7H1266.57L1261.47 203.4V197.4C1261.07 192.4 1259.47 188 1256.67 184.2C1254.07 180.2 1250.57 177.1 1246.17 174.9C1241.77 172.7 1236.77 171.6 1231.17 171.6C1223.37 171.6 1216.67 173.2 1211.07 176.4C1205.67 179.4 1201.57 183.9 1198.77 189.9C1195.97 195.7 1194.57 202.9 1194.57 211.5C1194.57 220.3 1196.37 228 1199.97 234.6C1203.77 241 1209.17 246 1216.17 249.6C1223.37 253.2 1231.87 255 1241.67 255C1248.47 255 1254.47 254 1259.67 252C1265.07 250 1270.87 246.6 1277.07 241.8L1299.57 273.6C1293.37 279 1286.77 283.4 1279.77 286.8C1272.77 290.2 1265.57 292.7 1258.17 294.3C1250.97 296.1 1243.77 297 1236.57 297ZM1399.45 297C1382.85 297 1368.05 293.4 1355.05 286.2C1342.25 279 1332.05 269.2 1324.45 256.8C1317.05 244.4 1313.35 230.2 1313.35 214.2C1313.35 198.2 1317.05 184 1324.45 171.6C1332.05 159.2 1342.25 149.4 1355.05 142.2C1368.05 135 1382.85 131.4 1399.45 131.4C1416.05 131.4 1430.75 135 1443.55 142.2C1456.55 149.4 1466.75 159.2 1474.15 171.6C1481.55 184 1485.25 198.2 1485.25 214.2C1485.25 230.2 1481.55 244.4 1474.15 256.8C1466.75 269.2 1456.55 279 1443.55 286.2C1430.75 293.4 1416.05 297 1399.45 297ZM1399.45 255.6C1406.65 255.6 1413.05 253.8 1418.65 250.2C1424.25 246.6 1428.65 241.7 1431.85 235.5C1435.05 229.3 1436.55 222.2 1436.35 214.2C1436.55 206.2 1435.05 199.1 1431.85 192.9C1428.65 186.5 1424.25 181.5 1418.65 177.9C1413.05 174.3 1406.65 172.5 1399.45 172.5C1392.25 172.5 1385.75 174.3 1379.95 177.9C1374.35 181.5 1369.95 186.5 1366.75 192.9C1363.55 199.1 1362.05 206.2 1362.25 214.2C1362.05 222.2 1363.55 229.3 1366.75 235.5C1369.95 241.7 1374.35 246.6 1379.95 250.2C1385.75 253.8 1392.25 255.6 1399.45 255.6Z" fill="#F5F5F5"/>
+<rect y="74" width="180" height="59.7841" rx="9.34127" fill="#F5F5F5"/>
+<path d="M70 163.341C70 158.182 74.1822 154 79.3413 154H240.659C245.818 154 250 158.182 250 163.341V204.659C250 209.818 245.818 214 240.659 214H79.3413C74.1822 214 70 209.818 70 204.659V163.341Z" fill="#F5F5F5"/>
+<rect x="140" y="234" width="180" height="60.2381" rx="9.34127" fill="#F5F5F5"/>
+</svg>

package/examples/marketing-templates/README.md

@@ -0,0 +1,10 @@
+# Marketing Templates
+
+This project contains the implementation of a template for a social media post advertising Black Friday discounts. The implementation can be found in `/marketing-template`.
+
+https://github.com/redotvideo/examples/assets/122226645/e0b8ef10-737e-4ea7-8a1e-cc2edca676eb
+
+The folder `multiple-videos-in-one` contains the following variation:
+
+https://github.com/redotvideo/examples/assets/122226645/52b5c42d-ffd3-4bb4-bb08-bfb5c8283e03
+

package/examples/marketing-templates/marketing-template/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "veed-template",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "start": "vite",
+    "serve": "vite",
+    "build": "tsc && vite build",
+    "render": "tsc && node dist/render.js"
+  },
+  "dependencies": {
+    "@revideo/core": "0.5.10",
+    "@revideo/2d": "0.5.10",
+    "@revideo/renderer": "0.5.10",
+    "@revideo/vite-plugin": "0.5.10",
+    "@revideo/ffmpeg": "0.5.10"
+  },
+  "devDependencies": {
+    "@revideo/ui": "0.5.10",
+    "@revideo/cli": "0.5.10",
+    "typescript": "5.5.4",
+    "vite": "^4.5"
+  }
+}

package/examples/marketing-templates/marketing-template/src/project.meta

@@ -0,0 +1,28 @@
+{
+  "version": 0,
+  "shared": {
+    "background": null,
+    "range": [
+      0,
+      null
+    ],
+    "size": {
+      "x": 1920,
+      "y": 1080
+    },
+    "audioOffset": 0
+  },
+  "preview": {
+    "fps": 30,
+    "resolutionScale": 1
+  },
+  "rendering": {
+    "fps": 30,
+    "resolutionScale": 1,
+    "colorSpace": "srgb",
+    "exporter": {
+      "name": "@revideo/core/wasm",
+      "options": {}
+    }
+  }
+}

package/examples/marketing-templates/marketing-template/src/project.ts

@@ -0,0 +1,9 @@
+import {makeProject} from '@revideo/core';
+
+import example from './scenes/example?scene';
+
+
+export default makeProject({
+  scenes: [example],
+  variables: { backgroundColor: "#FDCFE5", texts: ["gift cards", "discounts", "+ more!!"]} // ["gift cards", "discounts", "+ more!!"] ["events", "special offers", "and more..."]
+});

package/examples/marketing-templates/marketing-template/src/render.ts

@@ -0,0 +1,15 @@
+import {renderVideo} from '@revideo/renderer';
+
+async function render() {
+  console.log('Rendering video...');
+
+  // This is the main function that renders the video
+  const file = await renderVideo({
+    projectFile: "./src/project.ts",
+    settings: {logProgress: true},
+  });
+
+  console.log(`Rendered video to ${file}`);
+}
+
+render();

package/examples/marketing-templates/marketing-template/src/revideo.d.ts

@@ -0,0 +1 @@
+/// <reference types="@revideo/core/project" />

package/examples/marketing-templates/marketing-template/src/scenes/example.meta

@@ -0,0 +1,5 @@
+{
+  "version": 0,
+  "timeEvents": [],
+  "seed": 2008807484
+}

package/examples/marketing-templates/marketing-template/src/scenes/example.tsx

@@ -0,0 +1,67 @@
+import {Grid, Img, Rect, Txt, View2D, makeScene2D} from '@revideo/2d';
+import {all, chain, useScene, createRef, waitFor} from '@revideo/core';
+
+export default makeScene2D(function* (view) {
+  const logoRef = createRef<Img>();
+  const grid = createRef<Grid>();
+  const headingRef = createRef<Txt>()
+
+
+  view.add(
+    <>
+      <Rect
+        fill={useScene().variables.get("backgroundColor", "#E2FF31")()}
+        size={['100%', '100%']}
+      />
+    </>
+  );
+
+  view.add(
+    <Grid
+      ref={grid}
+      width={'100%'}
+      height={'100%'}
+      stroke={'#999'}
+      end={0}
+      spacing={150}
+    />,
+  );
+
+  yield* all(
+    grid().end(0.5, 0.5).to(1, 0.5).wait(0.1),
+    grid().start(0.5, 0.5).to(0, 0.5).wait(0.1),
+  );
+
+  view.add(<Txt fontSize={1} fontWeight={600} ref={headingRef} position={[-700, -100]} opacity={0.2} textWrap={true} width={"1%"}  textAlign={"left"} fontFamily={"Sans-Serif"}>BLACK FRIDAY</Txt>)
+  yield* all(headingRef().fontSize(180, 0.5), headingRef().opacity(1, 0.5));
+
+  const txtRef = createRef<Txt>();
+  const subtitle = <Txt fontSize={60} ref={txtRef} fill={useScene().variables.get("backgroundColor", useScene().variables.get("backgroundColor", "#E2FF31")())()}  zIndex={1} fontFamily={"Sans-Serif"}>Up to 95% off</Txt>
+
+  const textBoxRef = createRef<Txt>();
+
+  view.add(<Rect left={[headingRef().left().x, 180]} ref={textBoxRef} width={txtRef().width()+60} height={100} zIndex={0} fill={"black"}/>);
+  view.add(<Txt position={textBoxRef().position} width={textBoxRef().width()} paddingLeft={20} textAlign={"left"} fontSize={60} ref={txtRef} fill={useScene().variables.get("backgroundColor", "#E2FF31")()} zIndex={1} fontFamily={"Sans-Serif"}></Txt>)
+
+  yield* txtRef().text("Up to 95% off", 1)
+  yield* addItems(view, useScene().variables.get("texts", ["events", "gift cards", "and more..."])());
+
+  yield* waitFor(1);
+});
+
+function* addItems(view: View2D, texts: string[]){
+  let yPos = 0;
+  for(let i=0; i< texts.length; i++){
+    const txtRef1 = createRef<Txt>();
+    const subtitle1 = <Txt fontSize={90} ref={txtRef1} fill={useScene().variables.get("backgroundColor", "#E2FF31")()}  zIndex={1} fontFamily={"Sans-Serif"}>{texts[i]}</Txt>
+  
+    const textBoxRef1 = createRef<Txt>();
+  
+    view.add(<Rect left={[100, yPos]} lineWidth={2} radius={30} stroke={"black"} ref={textBoxRef1} width={txtRef1().width()+150} height={100} zIndex={0} padding={70} fill={"white"}/>);
+    view.add(<Txt position={textBoxRef1().position} width={textBoxRef1().width()} textAlign={"center"} fontSize={90} fill={"black"} zIndex={1} fontFamily={"Sans-Serif"}>{texts[i]}</Txt>)
+    yPos = textBoxRef1().y() + textBoxRef1().height()-10;
+    yield* waitFor(0.5);
+
+  }
+
+}

package/examples/marketing-templates/marketing-template/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@revideo/2d/tsconfig.project.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "noEmit": false,
+    "outDir": "dist",
+    "module": "CommonJS"
+  }
+}

package/examples/marketing-templates/marketing-template/vite.config.ts

@@ -0,0 +1,9 @@
+import {defineConfig} from 'vite';
+import motionCanvas from '@revideo/vite-plugin';
+
+
+export default defineConfig({
+  plugins: [
+    motionCanvas(),
+  ],
+});

package/examples/marketing-templates/multiple-videos-in-one/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "veed-template",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "start": "vite",
+    "serve": "vite",
+    "build": "tsc && vite build",
+    "render": "tsc && node dist/render.js"
+  },
+  "dependencies": {
+    "@revideo/core": "0.5.10",
+    "@revideo/2d": "0.5.10",
+    "@revideo/renderer": "0.5.10",
+    "@revideo/vite-plugin": "0.5.10",
+    "@revideo/ffmpeg": "0.5.10"
+  },
+  "devDependencies": {
+    "@revideo/ui": "0.5.10",
+    "@revideo/cli": "0.5.10",
+    "typescript": "5.5.4",
+    "vite": "^4.5"
+  }
+}

package/examples/marketing-templates/multiple-videos-in-one/src/project.meta

@@ -0,0 +1,28 @@
+{
+  "version": 0,
+  "shared": {
+    "background": "rgb(255,255,255)",
+    "range": [
+      0,
+      null
+    ],
+    "size": {
+      "x": 1920,
+      "y": 1080
+    },
+    "audioOffset": 0
+  },
+  "preview": {
+    "fps": 30,
+    "resolutionScale": 1
+  },
+  "rendering": {
+    "fps": 30,
+    "resolutionScale": 1,
+    "colorSpace": "srgb",
+    "exporter": {
+      "name": "@revideo/core/wasm",
+      "options": {}
+    }
+  }
+}

package/examples/marketing-templates/multiple-videos-in-one/src/project.ts

@@ -0,0 +1,9 @@
+import {makeProject} from '@revideo/core';
+
+import example from './scenes/example?scene';
+
+
+export default makeProject({
+  scenes: [example],
+  variables: { backgroundColor: "#FDCFE5", texts: ["gift cards", "discounts", "+ more!!"]} // ["gift cards", "discounts", "+ more!!"] ["events", "special offers", "and more..."]
+});

package/examples/marketing-templates/multiple-videos-in-one/src/render.ts

@@ -0,0 +1,15 @@
+import {renderVideo} from '@revideo/renderer';
+
+async function render() {
+  console.log('Rendering video...');
+
+  // This is the main function that renders the video
+  const file = await renderVideo({
+    projectFile: './src/project.ts',
+    settings: {logProgress: true},
+  });
+
+  console.log(`Rendered video to ${file}`);
+}
+
+render();

package/examples/marketing-templates/multiple-videos-in-one/src/revideo.d.ts

@@ -0,0 +1 @@
+/// <reference types="@revideo/core/project" />

package/examples/marketing-templates/multiple-videos-in-one/src/scenes/example.meta

@@ -0,0 +1,5 @@
+{
+  "version": 0,
+  "timeEvents": [],
+  "seed": 2008807484
+}

package/examples/marketing-templates/multiple-videos-in-one/src/scenes/example.tsx

@@ -0,0 +1,122 @@
+import {Grid, Img, Rect, Txt, View2D, makeScene2D} from '@revideo/2d';
+import {all, chain, useScene, createRef, waitFor, Reference} from '@revideo/core';
+
+export default makeScene2D(function* (view) {
+
+
+  const backgroundRef = createRef<Rect>();
+
+  yield view.add(
+    <>
+      <Rect
+        fill={"#9accf2"}
+        position={[useScene().getSize().x*0.25-1920*0.5, useScene().getSize().y*0.25-1080*0.5]}
+        size={['40%', '40%']}
+        ref={backgroundRef}
+      />
+    </>
+  );
+
+  yield* video(view, backgroundRef, "#9accf2", ["gift cards", "discounts", "+ more!!"]);
+
+  const topRight = createRef<Rect>();
+  const bottomLeft = createRef<Rect>();
+  const bottomRight = createRef<Rect>();
+
+
+  view.add(
+    <>
+      <Rect
+        fill={"#FDCFE5"}
+        position={[useScene().getSize().x*0.25-1920*0.5, useScene().getSize().y*0.25-1080*0.5]}
+        size={['40%', '40%']}
+        ref={topRight}
+        zIndex={-1}
+      />
+      <Rect
+        fill={"#FDB827"}
+        position={[useScene().getSize().x*0.25-1920*0.5, useScene().getSize().y*0.25-1080*0.5]}
+        size={['40%', '40%']}
+        ref={bottomLeft}
+        zIndex={-1}
+      />
+      <Rect
+        fill={"#8BF8A7"}
+        position={[useScene().getSize().x*0.25-1920*0.5, useScene().getSize().y*0.25-1080*0.5]}
+        size={['40%', '40%']}
+        ref={bottomRight}
+        zIndex={-1}
+      />
+
+    </>
+  );
+
+  yield* all(
+    bottomLeft().y(useScene().getSize().y*0.75-1080*0.5, 1), 
+    topRight().x(useScene().getSize().x*0.75-1920*0.5, 1), 
+    bottomRight().position([useScene().getSize().x*0.75-1920*0.5, useScene().getSize().y*0.75-1080*0.5], 1)
+  );
+
+  yield* all(
+    video(view, bottomLeft, "#FDB827", ["gift cards", "discounts", "+ more!!"]),
+    video(view, topRight, "#FDCFE5", ["gift cards", "discounts", "+ more!!"]),
+    video(view, bottomRight, "#8BF8A7", ["gift cards", "discounts", "+ more!!"]),
+  )
+
+});
+
+function* video(view: View2D, backgroundRef: Reference<Rect>, backgroundColor: string, texts: string[]){
+  const grid = createRef<Grid>();
+  const headingRef = createRef<Txt>()
+
+
+  backgroundRef().add(
+    <Grid
+      ref={grid}
+      width={backgroundRef().width()}
+      height={backgroundRef().height()}
+      stroke={'#999'}
+      end={0}
+      spacing={150*0.4}
+    />,
+  );
+
+  yield* all(
+    grid().end(0.5, 0.5).to(1, 0.5).wait(0.1),
+    grid().start(0.5, 0.5).to(0, 0.5).wait(0.1),
+  );
+
+  backgroundRef().add(<Txt fontSize={1*0.40} fontWeight={600} ref={headingRef} position={[-backgroundRef().width()*0.3645, -backgroundRef().width()*0.05208]} opacity={0.2} textWrap={true} width={"1%"}  textAlign={"left"} fontFamily={"Sans-Serif"}>BLACK FRIDAY</Txt>)
+  yield* all(headingRef().fontSize(180*0.40, 0.5), headingRef().opacity(1, 0.5));
+
+  const txtRef = createRef<Txt>();
+  const subtitle = <Txt fontSize={60*0.40} ref={txtRef} fill={backgroundColor}  zIndex={1} fontFamily={"Sans-Serif"}>Up to 95% off</Txt>
+
+  const textBoxRef = createRef<Txt>();
+
+  backgroundRef().add(<Rect left={[headingRef().left().x, 180*0.40]} ref={textBoxRef} width={txtRef().width()+60*0.40} height={40} zIndex={0} fill={"black"}/>);
+  backgroundRef().add(<Txt position={textBoxRef().position} width={textBoxRef().width()} paddingLeft={5} textAlign={"left"} fontSize={60*0.40} ref={txtRef} fill={backgroundColor} zIndex={1} fontFamily={"Sans-Serif"}></Txt>)
+
+  yield* txtRef().text("Up to 95% off", 1)
+  yield* addItems(backgroundRef, backgroundColor, texts);
+
+  yield* waitFor(1);
+
+}
+
+function* addItems(background: Reference<Rect>, backgroundColor: string, texts: string[]){
+  let yPos = 0;
+  for(let i=0; i< texts.length; i++){
+    const txtRef1 = createRef<Txt>();
+    const subtitle1 = <Txt fontSize={90*0.40} ref={txtRef1} fill={backgroundColor}  zIndex={1} fontFamily={"Sans-Serif"}>{texts[i]}</Txt>
+  
+    const textBoxRef1 = createRef<Txt>();
+  
+    background().add(<Rect left={[50, yPos]} height={30*0.40} lineWidth={2} radius={30*0.40} stroke={"black"} ref={textBoxRef1} width={txtRef1().width()+150*0.40} zIndex={0} padding={70*0.40} fill={"white"}/>);
+    background().add(<Txt position={textBoxRef1().position} width={textBoxRef1().width()} textAlign={"center"} fontSize={90*0.40} fill={"black"} zIndex={1} fontFamily={"Sans-Serif"}>{texts[i]}</Txt>)
+    yPos = textBoxRef1().y() + textBoxRef1().height()-2.5;
+    yield* waitFor(0.5);
+
+  }
+
+}

package/examples/marketing-templates/multiple-videos-in-one/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@revideo/2d/tsconfig.project.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "noEmit": false,
+    "outDir": "dist",
+    "module": "CommonJS"
+  }
+}

package/examples/marketing-templates/multiple-videos-in-one/vite.config.ts

@@ -0,0 +1,9 @@
+import {defineConfig} from 'vite';
+import motionCanvas from '@revideo/vite-plugin';
+
+
+export default defineConfig({
+  plugins: [
+    motionCanvas(),
+  ],
+});

package/examples/minimal-drag-drop/README.md

@@ -0,0 +1,29 @@
+# Minimal Drag-and-Drop Example
+
+This is an adapted version of the [Revideo](https://github.com/redotvideo/revideo) [NextJS SaaS template](https://github.com/redotvideo/examples/saas-template), demonstrating how you can build drag-and-drop editing functionality with Revideo.
+
+https://github.com/user-attachments/assets/347cea86-a849-4938-9143-892134bc3276
+
+## Getting Started
+
+First, install the dependencies both in the next/ and the revideo/ directories:
+
+```bash
+(cd next && npm install) &&
+(cd revideo && npm install)
+```
+
+Then, serve the Revideo project using the CLI:
+
+```bash
+(cd revideo && npx revideo serve)
+```
+
+Now you can start your NextJS app using the following command:
+
+```bash
+(cd next && npm run dev)
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the
+result. Happy developing!

package/examples/minimal-drag-drop/next/app/api/render/route.ts

@@ -0,0 +1,22 @@
+const RENDER_URL = 'http://localhost:4000/render';
+
+async function getResponse(body: string) {
+	return await fetch(RENDER_URL, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json',
+		},
+		body,
+	});
+}
+
+export async function POST(request: Request) {
+	const body = await request.json();
+
+	const response = await getResponse(JSON.stringify(body));
+	if (!response.ok) {
+		return new Response('Failed to render', {status: 500});
+	}
+
+	return new Response(response.body, {status: 200});
+}

package/examples/minimal-drag-drop/next/app/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/examples/minimal-drag-drop/next/app/layout.tsx

@@ -0,0 +1,25 @@
+import type {Metadata} from 'next';
+import {Inter} from 'next/font/google';
+import './globals.css';
+
+const inter = Inter({subsets: ['latin']});
+
+export const metadata: Metadata = {
+	title: 'Create Next App',
+	description: 'Generated by create next app',
+};
+
+export default function RootLayout({
+	children,
+}: Readonly<{
+	children: React.ReactNode;
+}>) {
+	return (
+		<html lang="en">
+			<head>
+				<link rel="stylesheet" href="http://localhost:4000/player/project.css" />
+			</head>
+			<body className={inter.className}>{children}</body>
+		</html>
+	);
+}