@revideo/create 0.3.7-blue.987 → 0.4.0

package/examples/google-cloud-run-parallelized/README.md

@@ -0,0 +1,127 @@
+# Parallel Rendering with Cloud Functions
+
+This project shows you how you can parallelize rendering across multiple Google Cloud functions to get much faster rendering speeds. Instead of rendering, say, 60 seconds of video in one process, we can also use 30 cloud functions to render 2s of video each, and afterwards stitch together the resulting partial videos.
+
+In this example, we are going to deploy two services to Google Cloud:
+
+- `/render-worker`: This is a Google Cloud Function that is responsible for rendering a partial video. It has access to your video template (`/render-worker/src/scenes`) and receives the number of total workers as well as its worker ID as an input. It accordingly exports the audio and visuals of the partial video.
+  
+- `/render-orchestrator`: This is a minimal Google Cloud Run service that manages the render workers and is your entrypoint to start rendering jobs. It receives rendering requests along with the number of desired workers, accordingly sends partial render requests to the render workers and merges their results together to obtain the final video
+  
+## Getting Started
+
+To get started, clone the `revideo-examples` repository and navigate to the `google-cloud-run-parallelized` directory.
+
+### Enable gcloud services
+
+To set up your Google Cloud services, ensure that you have the gcloud CLI installed ([guide](https://cloud.google.com/sdk/docs/install)). Then, enable the required services to deploy Cloud Functions:
+
+```
+gcloud services enable run.googleapis.com
+gcloud services enable cloudfunctions.googleapis.com
+gcloud services enable storage.googleapis.com
+gcloud services enable cloudbuild.googleapis.com
+```
+
+### Create Storage Bucket
+
+You'll need a storage bucket to save your videos as well as partial videos to. To create one, run the following command and replace `<your-region>` with your desired region (e.g. `us-east1`):
+
+```
+gsutil mb -l <your-region> gs://<your-bucket-name>/
+```
+
+Now enable public read access by running the following command:
+
+```
+gsutil iam ch allUsers:objectViewer gs://<your-bucket-name>/
+```
+
+Finally, you need to modify the CORS settings of your bucket. To do so, create the following file `cors_config.json`:
+
+```
+[
+  {
+    "origin": ["*"],
+    "responseHeader": ["Content-Type"],
+    "method": ["GET", "HEAD", "DELETE"],
+    "maxAgeSeconds": 3600
+  }
+]
+```
+
+Now run:
+
+```
+gsutil cors set cors_config.json gs://<your-bucket-name>/
+```
+
+Now you can deploy your render worker cloud function.
+
+
+### Deploy Render Worker Cloud Function
+
+To deploy the render worker cloud function, navigate to `/render-worker` and run `npm install`. Now run the following command:
+
+🚨 **Note:** In the commands below, make sure to select the same region (<your-region>) as the bucket you just created. Otherwise, your render jobs will run much slower.
+
+```
+gcloud functions deploy render-worker \
+--runtime nodejs18 \
+--trigger-http \
+--allow-unauthenticated \
+--gen2 \
+--memory 4Gi \
+--cpu 2 \
+--concurrency=1 \
+--timeout=3600s \
+--region=<your-region> \
+--set-env-vars=FFMPEG_PATH=ffmpeg,FFPROBE_PATH=ffprobe,GCP_BUCKET_NAME=<your-bucket-name>
+```
+
+You'll now have to wait some time for the deployment. Once your cloud function is deployed, its URL will be logged to the terminal (we will reference it as `<your-render-function-url>`). You will need this URL to configure your cloud run service that calls the cloud function you just deployed.
+
+
+### Deploy Render Orchestrator Cloud Run Service
+
+To deploy the service that orchestrates the cloud functions, navigate to `/render-orchestrator`, then run `npm install` and the following command:
+
+```
+gcloud run deploy render-orchestrator \
+--source . \
+--memory 8Gi \
+--cpu 4 \
+--allow-unauthenticated \
+--concurrency=1 \
+--timeout=3600s \
+--region <your-region> \
+--set-env-vars=FFMPEG_PATH=ffmpeg,FFPROBE_PATH=ffprobe,GCP_BUCKET_NAME=<your-bucket-name>,RENDER_WORKER_URL=<your-render-function-url>
+```
+
+Again, you'll have to wait a bit for the service to be deployed. Once that is done, you can send a request to its url `<your-render-orchestrator-url>`.
+
+### Sending a Request
+
+Once the render worker and orchestrator are running, you can send a render request as follows:
+
+```
+curl -X POST <your-render-orchestrator-url>/render \
+-H "Content-Type: application/json" \
+-d '{"variables": {"username": "John"}, "numWorkers": 5}'
+```
+
+This will distribute the rendering work across five cloud functions. You can check out the logs and rendering progress in the Google Cloud Function logs.
+
+
+## Usage Notes
+
+Some useful information, as well as considerations on what parameters to use:
+
+**Cold Start times:**
+Depending on your previous usage, your Google Cloud account & project might not be prioritized for cold start times, and thus the bottleneck of your render speeds might be cold start tiems. You can check the logs of your render worker function to see how fast the render workers spin up after sending the request. For example, we have noticed that after creating a new Google Cloud project, we sometimes had to wait for 30s+ for a render worker to spin up, whereas cold start times were very fast on a project that we had been using for a lot of time already.
+
+**Video Duration:**
+Parallel rendering is especially effective for longer videos (>1 min). For short videos, the overhead of waiting for a bunch of cloud functions to cold boot may not be worth it
+
+**Choosing the number of workers:**
+Depending on the length of the video you're going to render, you might want to adjust the `numWorkers` parameter. A single worker should not render less than a second of video

package/examples/google-cloud-run-parallelized/render-orchestrator/Dockerfile

@@ -0,0 +1,56 @@
+FROM node:18-bullseye
+
+RUN apt-get update && apt-get install -y \
+    nscd \
+    libnss3 \
+    libdbus-1-3 \
+    libatk1.0-0 \
+    libatk-bridge2.0-0 \
+    libcups2 \
+    libxkbcommon0 \
+    libxcomposite1 \
+    libxdamage1 \
+    libxrandr2 \
+    libgbm1 \
+    libpango-1.0-0 \
+    libcairo2 \
+    libasound2 \
+    libatspi2.0-0 
+
+RUN apt-get install -y libxfixes3
+
+WORKDIR /usr/src/app
+
+RUN wget https://github.com/eugeneware/ffmpeg-static/releases/download/b6.0/ffmpeg-linux-x64
+
+RUN chmod +x ffmpeg-linux-x64
+
+RUN mv ffmpeg-linux-x64 ffmpeg
+
+RUN mv ffmpeg /usr/local/bin/
+
+ENV FFMPEG_PATH=ffmpeg
+
+RUN wget https://github.com/eugeneware/ffmpeg-static/releases/download/b6.0/ffprobe-linux-x64
+
+RUN chmod +x ffprobe-linux-x64
+
+RUN mv ffprobe-linux-x64 ffprobe
+
+RUN mv ffprobe /usr/local/bin/
+
+ENV FFPROBE_PATH=ffprobe
+
+COPY package*.json ./
+
+COPY . ./
+
+RUN npm install
+
+RUN npx puppeteer browsers install chrome
+
+RUN apt-get update && apt-get install -y nscd libnss3
+
+RUN ffmpeg -version
+
+CMD service nscd start && npm run serve

package/examples/google-cloud-run-parallelized/render-orchestrator/package.json

@@ -0,0 +1,22 @@
+{
+    "name": "google-cloud-run",
+    "private": true,
+    "version": "0.0.0",
+    "scripts": {
+        "start": "tsc && node dist/index.js"
+    },
+    "dependencies": {
+        "@google-cloud/storage": "^7.11.0",
+        "@revideo/2d": "0.3.6",
+        "@revideo/core": "0.3.6",
+        "@revideo/ffmpeg": "0.3.6",
+        "express": "^4.19.2",
+        "uuid": "^9.0.1"
+    },
+    "devDependencies": {
+        "@types/express": "^4.17.21",
+        "@types/uuid": "^9.0.8",
+        "typescript": "^5.4.5",
+        "vite": "^4.5"
+    }
+}

package/examples/google-cloud-run-parallelized/render-orchestrator/src/index.ts

@@ -0,0 +1,72 @@
+import { mergeAudioWithVideo, concatenateMedia } from '@revideo/ffmpeg';
+import { Storage } from '@google-cloud/storage';
+import * as express from 'express';
+import * as fs from 'fs';
+import axios from 'axios';
+import { v4 as uuidv4 } from 'uuid';
+
+const storage = new Storage();
+
+const app = express();
+app.use(express.json());
+
+app.get('/', (req, res) => {
+  res.status(200).send(`Hello World!`);
+});
+
+app.post('/render', async (req, res) => {
+  try {
+    const { variables, numWorkers } = req.body;
+    const jobId = uuidv4();
+
+    const renderPromises = [];
+    for (let i = 0; i < numWorkers; i++) {
+      renderPromises.push(makeRenderRequest(variables, i, numWorkers));
+    }
+
+    const results = await Promise.all(renderPromises);
+    const audios = results.map(result => result.audioUrl);
+    const videos = results.map(result => result.videoUrl);
+
+    await Promise.all([
+      concatenateMedia(audios, `${jobId}-audio.wav`),
+      concatenateMedia(videos, `${jobId}-visuals.mp4`)
+    ]);
+  
+    await mergeAudioWithVideo(`${jobId}-audio.wav`, `${jobId}-visuals.mp4`, `${jobId}.mp4`);
+
+    const resultFileBuffer = fs.readFileSync(`${jobId}.mp4`);
+    await storage.bucket(process.env.GCP_BUCKET_NAME).file(`${jobId}.mp4`).save(resultFileBuffer);
+
+    res.status(200).json({
+      file: `https://storage.googleapis.com/${process.env.GCP_BUCKET_NAME}/${`${jobId}.mp4`}`
+    });
+  } catch (err) {
+    console.error('Error rendering video:', err);
+    res.status(500).send(`Error rendering video: ${err}`);
+  }
+});
+
+const port = parseInt(process.env.PORT) || 8080;
+app.listen(port, () => {
+  console.log(`listening on port ${port}`);
+});
+
+async function makeRenderRequest(variables: any, workerId: number, numWorkers: number) {
+    try {
+      const response = await axios.post(`${process.env.RENDER_WORKER_URL}`, {
+        variables,
+        workerId,
+        numWorkers
+      }, {
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      });
+  
+      return response.data;
+    } catch (error) {
+      console.error('Error making render request:', error);
+    }
+  }
+  

package/examples/google-cloud-run-parallelized/render-orchestrator/src/revideo.d.ts

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

package/examples/google-cloud-run-parallelized/render-orchestrator/tsconfig.json

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

package/examples/google-cloud-run-parallelized/render-worker/.gcloudignore

@@ -0,0 +1,17 @@
+# This file specifies files that are *not* uploaded to Google Cloud
+# using gcloud. It follows the same syntax as .gitignore, with the addition of
+# "#!include" directives (which insert the entries of the given .gitignore-style
+# file at that point).
+#
+# For more information, run:
+#   $ gcloud topic gcloudignore
+#
+.gcloudignore
+# If you would like to upload your .git directory, .gitignore file or files
+# from your .gitignore file, remove the corresponding line
+# below:
+.git
+.gitignore
+
+node_modules
+#!include:.gitignore

package/examples/google-cloud-run-parallelized/render-worker/.puppeteerrc.cjs

@@ -0,0 +1,9 @@
+const { join } = require('path');
+
+/**
+ * @type {import("puppeteer").Configuration}
+ */
+module.exports = {
+  cacheDirectory: join(__dirname, '.cache', 'puppeteer'),
+};
+// [END monitoring_synthetic_monitoring_custom_puppeteer_cjs]

package/examples/google-cloud-run-parallelized/render-worker/package.json

@@ -0,0 +1,30 @@
+{
+  "main": "dist/index.js",
+  "scripts": {
+    "editor": "vite",
+    "build": "tsc",
+    "start": "functions-framework --target=TypescriptFunction",
+    "prestart": "npm run build",
+    "gcp-build": "node node_modules/puppeteer/install.mjs && npm run build"
+  },
+  "dependencies": {
+    "@ffmpeg-installer/ffmpeg": "^1.1.0",
+    "@ffprobe-installer/ffprobe": "^2.1.2",
+    "@google-cloud/functions-framework": "^3.4.0",
+    "@google-cloud/storage": "^7.11.0",
+    "@revideo/2d": "0.3.6",
+    "@revideo/cli": "^0.3.6",
+    "@revideo/core": "0.3.6",
+    "@revideo/ffmpeg": "0.3.6",
+    "@revideo/renderer": "0.3.6",
+    "@revideo/ui": "0.3.6",
+    "@revideo/vite-plugin": "0.3.6",
+    "@types/express": "^4.17.21",
+    "@types/uuid": "^9.0.8",
+    "express": "^4.19.2",
+    "puppeteer": "^22.9.0",
+    "typescript": "^5.2.2",
+    "uuid": "^9.0.1",
+    "vite": "^4.5"
+  }
+}

package/examples/google-cloud-run-parallelized/render-worker/src/index.ts

@@ -0,0 +1,39 @@
+import * as ff from '@google-cloud/functions-framework';
+import { renderPartialVideo } from '@revideo/renderer';
+import { Storage } from '@google-cloud/storage';
+import { v4 as uuidv4 } from 'uuid';
+import * as fs from 'fs';
+
+const storage = new Storage();  
+
+ff.http('render-worker', async (req: ff.Request, res: ff.Response) => {
+    try {
+        const { workerId, numWorkers, variables } = req.body;
+        const jobId = uuidv4();
+            
+        console.log("Rendering video...")
+        const {audioFile, videoFile} = await renderPartialVideo("./vite.config.ts", workerId, numWorkers, variables, () => {}, { name: jobId, logProgress: true, puppeteer: { args: ['--no-sandbox', '--disable-setuid-sandbox'] }});
+        
+        const audioFileName = `${jobId}-audio.mp3`;
+        const audioFileBuffer = fs.readFileSync(audioFile);
+        const audioFileUploadPromise = storage.bucket(process.env.GCP_BUCKET_NAME || "").file(audioFileName).save(audioFileBuffer);
+        
+        const videoFileName = `${jobId}-video.mp4`;
+        const videoFileBuffer = fs.readFileSync(videoFile);
+        const videoFileUploadPromise = storage.bucket(process.env.GCP_BUCKET_NAME || "").file(videoFileName).save(videoFileBuffer);
+
+        await Promise.all([audioFileUploadPromise, videoFileUploadPromise]);
+        const audioFileUrl = `https://storage.googleapis.com/${process.env.GCP_BUCKET_NAME || ""}/${audioFileName}`;
+        const videoFileUrl = `https://storage.googleapis.com/${process.env.GCP_BUCKET_NAME || ""}/${videoFileName}`;    
+        
+        console.log("done");
+        res.status(200).json({
+          audioUrl: audioFileUrl,
+          videoUrl: videoFileUrl
+        });
+    
+      } catch (err) {
+        console.error('Error rendering video:', err);
+        res.status(500).send(`Error rendering video: ${err}`);
+      }
+});

package/examples/google-cloud-run-parallelized/render-worker/src/project.ts

@@ -0,0 +1,6 @@
+import {makeProject} from '@revideo/core';
+import example from './scenes/example?scene';
+
+export default makeProject({
+  scenes: [example],
+});

package/examples/google-cloud-run-parallelized/render-worker/src/revideo.d.ts

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

package/examples/google-cloud-run-parallelized/render-worker/src/scenes/example.tsx

@@ -0,0 +1,30 @@
+import {Audio, Txt, Video, makeScene2D} from '@revideo/2d';
+import {all, chain, createRef, waitFor, useScene} from '@revideo/core';
+
+export default makeScene2D(function* (view) {
+  const textRef = createRef<Txt>();
+
+  yield view.add(
+    <>
+      <Video
+        src={'https://revideo-example-assets.s3.amazonaws.com/beach-3.mp4'}
+        size={['100%', '100%']}
+        play={true}
+      />
+      <Audio
+        src={'https://revideo-example-assets.s3.amazonaws.com/chill-beat.mp3'}
+        play={true}
+        time={17.0}
+      />
+    </>,
+  );
+
+  yield* waitFor(1);
+
+  view.add(
+    <Txt fontFamily={"Sans-Serif"} fill={"white"} fontSize={10} ref={textRef}>Hello {useScene().variables.get("username", "user")()}</Txt>
+  );
+
+  yield* textRef().scale(10, 1);
+  yield* waitFor(30);
+});

package/examples/google-cloud-run-parallelized/render-worker/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "@revideo/2d/tsconfig.project.json",
+    "compilerOptions": {
+      "target": "es2016",
+      "module": "commonjs",
+      "esModuleInterop": true,
+      "strict": true,
+      "outDir": "dist",
+      "noEmit": false
+    },
+    "include": ["src/**/*"],
+    "exclude": ["node_modules"]
+  }

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
+