@revideo/create 0.5.11-beta.1106 → 0.10.0

package/examples/three-js-example/src/project.tsx

@@ -0,0 +1,105 @@
+import {Three} from './components/Three';
+import { makeScene2D, Txt } from '@revideo/2d';
+import { makeProject, tween, waitFor, delay, createRef, all, chain, linear} from '@revideo/core';
+import * as THREE from 'three';
+import './global.css';
+
+function setup3DScene() {
+    const threeScene = new THREE.Scene();
+
+    const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
+    const material = new THREE.MeshNormalMaterial();
+
+    const mesh = new THREE.Mesh( geometry, material );
+    threeScene.add(mesh);
+
+    const camera = new THREE.PerspectiveCamera(90);
+
+    mesh.position.set(0, 0, 0);
+    mesh.scale.set(1, 1, 1);
+    camera.rotation.set(0, 0, 0);
+    camera.position.set(0, 0, 0.5);
+
+    return {threeScene, camera, mesh};
+}
+
+/**
+ * The Revideo scene
+ */
+const scene = makeScene2D('scene', function* (view) {
+  const {threeScene, camera, mesh} = setup3DScene();
+
+  const threeRef = createRef<Three>();
+  const txtRef = createRef<Txt>();
+
+  yield view.add(
+      <>
+          <Three
+              width={1920}
+              height={1080}
+              camera={camera}
+              scene={threeScene}
+              opacity={0}
+              fontWeight={900}
+              ref={threeRef}
+          />
+      </>
+  );
+
+  yield view.add(<Txt fill={"black"} fontFamily={"Lexend"} ref={txtRef} fontSize={80}/>)
+
+  yield* chain(
+      txtRef().text("Revideo x 3D with Three.js", 1),
+      all(
+        txtRef().position.y(-300, 1),
+        delay(0.5, threeRef().opacity(1, 0.5))
+      )
+  )
+
+  yield tween(4, value => {
+      mesh.rotation.set(
+          0,
+          linear(value, 0, 2*3.14),
+          0
+      );
+  });
+
+  yield* waitFor(2);
+
+  yield addRotatingCube(threeRef().scene(), 0.1, 0.3, -0.2, 0.1);
+  yield addRotatingCube(threeRef().scene(), 0.1, -0.3, -0.2, 0.1);
+
+  yield* waitFor(2);
+});
+
+function* addRotatingCube(threeScene: THREE.Scene, size: number, x: number, y: number, z: number){
+  const geometry = new THREE.BoxGeometry( size, size, size );
+  const material = new THREE.MeshNormalMaterial();
+  const mesh = new THREE.Mesh( geometry, material );
+
+  mesh.position.set(x, y, z);
+  mesh.scale.set(1, 1, 1);
+
+  threeScene.add(mesh);
+
+  yield* tween(4, value => {
+      mesh.rotation.set(
+          0,
+          linear(value, 0, 2*3.14),
+          0
+      );
+  });
+}
+
+/**
+ * The final revideo project
+ */
+export default makeProject({
+  scenes: [scene],
+  settings: {
+    // Example settings:
+    shared: {
+      size: {x: 1920, y: 1080}
+    },
+  },
+});

package/examples/three-js-example/src/render.ts

@@ -5,7 +5,7 @@ async function render() {
 
   // This is the main function that renders the video
   const file = await renderVideo({
-    projectFile: './src/project.ts',
+    projectFile: './src/project.tsx',
     settings: {logProgress: true},
   });
 

package/examples/three-js-example/tsconfig.json

@@ -4,6 +4,7 @@
   "compilerOptions": {
     "noEmit": false,
     "outDir": "dist",
-    "module": "CommonJS"
+    "module": "CommonJS",
+    "skipLibCheck": true
   }
 }

package/examples/youtube-shorts/README.md

@@ -1,65 +1,19 @@
-# Youtube Shorts with Subtitles
+# Revideo Minimal Starter Template
 
-This example project lets you generate Youtube Shorts with AI.
+This is a minimal Revideo starter project. It can be bootstrapped using
+`npm init @revideo@latest` and selecting the minimal template.
 
-https://github.com/redotvideo/revideo-examples/assets/122226645/98bc202d-6b7d-4b8a-9a7f-c41533d8c760
+It includes a simple scene with a background video, music and the Revideo logo.
+You can get started by editing the `project.tsx` file in the `src` folder.
 
+You can run the Revideo editor using `npm start` and render the final video
+using `npm run render`.
 
-## Project Structure
+If you want to see what's possible with Revideo, check out the other templates
+in the [Revideo Examples repository](https://github.com/redotvideo/examples), or
+the [Revideo documentation](https://docs.re.video).
 
-There are three main files you should look at in this project:
-
-- `src/scenes/example.tsx`: This file defines the flow of the video and its animations. It accepts variables such as a list of background images, a voiceover audio file, as well as a list of words along with their timestamps to display the video captions.
-- `src/get-assets.ts`: This is a node.js process which generates assets (script, voiceover, etc.) using AI services and writes them to a json file storing your video variables 
-- `src/render.ts`: This code calls `renderVideo()` with variables from a metadata file to export the final video.
-
-
-## Getting Started
-
-After cloning the repo, go inside the project folder and install all dependencies using `npm install`. Now you can preview an example video.
-
-### Preview Video
-
-You can start the editor using the following command:
-
-```
-npm start
-```
-
-The editor preview uses example assets (images and voiceovers) specified in `src/metadata.json` which are located in an AWS bucket we own. This way, you can test the template without having to generate your own assets. To render the video with the example asseets, click the render button in the UI or run `npm run render`.
-
-When previewing the video in the editor, your browser will first have to load the assets, which can cause a bit of a lag - you might have to wait a few seconds.
-
-## Rendering Videos with your own AI assets
-If you want to render your own videos using ChatGPT, Dall-E and Elevenlabs voiceovers, you need to create a `.env` file in the project root directory and add the following environment variables:
-
-```
-OPENAI_API_KEY=<your-openai-key>
-ELEVEN_API_KEY=<your-elevenlabs-key>
-DEEPGRAM_API_KEY=<your-deepgram-key>
-```
-
-Now you can run `tsc && node dist/get-assets.ts`, which will create a new metadata file that you can use in `render.ts` and `project.ts`.
-
-
-## Animating Subtitles
-
-This project has a heavy emphasis on animating subtitles. It provides the option to stream subtitles word-by-word, to highlight the currently spoken word, or to let words fade into the image as they appear. To play around with the different caption animation options, you can modify the `textSettings` object in `src/scenes/example.tsx`:
-
-```ts
-const textSettings: captionSettings = {
-  fontSize: 80,
-  numSimultaneousWords: 4, // how many words are shown at most simultaneously
-  textColor: "white",
-  fontWeight: 800,
-  fontFamily: "Mulish",
-  stream: false, // if true, words appear one by one
-  textAlign: "center",
-  textBoxWidthInPercent: 70,
-  fadeInAnimation: true,
-  currentWordColor: "cyan",
-  currentWordBackgroundColor: "red", // adds a colored box to the word currently spoken
-  shadowColor: "black",
-  shadowBlur: 30
-}
-```
+If you want to include your Revideo project in a website, you can use the
+Next.js template. It can be found in the Revideo Examples repository or
+bootstrapped using `npm init @revideo@latest` and selecting the Next.js
+template.

package/examples/youtube-shorts/package.json

@@ -1,29 +1,25 @@
 {
-  "name": "revideo",
+  "name": "revideo-app",
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "start": "vite",
-    "serve": "vite",
-    "build": "tsc && vite build",
+    "start": "revideo editor --projectFile ./src/project.tsx",
     "render": "tsc && node dist/render.js"
   },
   "dependencies": {
     "@deepgram/sdk": "^3.3.1",
-    "@revideo/2d": "0.5.10",
-    "@revideo/cli": "0.5.10",
-    "@revideo/core": "0.5.10",
-    "@revideo/ffmpeg": "0.5.10",
-    "@revideo/renderer": "0.5.10",
-    "@revideo/vite-plugin": "0.5.10",
+    "@revideo/2d": "0.10.0",
+    "@revideo/core": "0.10.0",
+    "@revideo/renderer": "0.10.0",
     "dotenv": "^16.4.5",
     "express": "^4.19.2",
     "openai": "^4.40.2",
     "uuid": "^9.0.1"
   },
   "devDependencies": {
-    "@revideo/ui": "0.5.10",
-    "@types/uuid": "^9.0.8",
+    "@revideo/cli": "0.10.0",
+    "@revideo/ui": "0.10.0",
+    "@types/uuid": "^10.0.0",
     "typescript": "5.5.4",
     "vite": "^4.5"
   }

package/examples/youtube-shorts/src/{scenes/example.tsx → project.tsx}

@@ -1,5 +1,7 @@
 import {Audio, Img, makeScene2D, Txt, Rect, Layout} from '@revideo/2d';
-import {all, createRef, waitFor, useScene, Reference, createSignal} from '@revideo/core';
+import {all, createRef, waitFor, useScene, Reference, createSignal, makeProject} from '@revideo/core';
+import metadata from './metadata.json';
+import './global.css';
 
 interface Word {
   punctuated_word: string;
@@ -41,8 +43,10 @@ const textSettings: captionSettings = {
   shadowBlur: 30
 }
 
-
-export default makeScene2D(function* (view) {
+/**
+ * The Revideo scene
+ */
+const scene = makeScene2D('scene', function* (view) {
   const images = useScene().variables.get('images', [])();
   const audioUrl = useScene().variables.get('audioUrl', 'none')();
   const words = useScene().variables.get('words', [])();
@@ -222,3 +226,16 @@ function* highlightCurrentWord(container: Reference<Layout>, currentBatch: Word[
     }
   }
 }
+
+/**
+ * The final revideo project
+ */
+export default makeProject({
+  scenes: [scene],
+  variables: metadata,
+  settings: {
+    shared: {
+      size: {x: 1920, y: 1080},
+    },
+  },
+});

package/examples/youtube-shorts/src/render.ts

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

package/examples/youtube-shorts/src/utils.ts

@@ -1,4 +1,4 @@
-import OpenAI from 'openai';
+import OpenAI from 'openai/index.mjs';
 import axios from "axios";
 import * as fs from "fs";
 import { createClient } from "@deepgram/sdk";

package/examples/youtube-shorts/tsconfig.json

@@ -4,6 +4,7 @@
   "compilerOptions": {
     "noEmit": false,
     "outDir": "dist",
-    "module": "CommonJS"
+    "module": "CommonJS",
+    "skipLibCheck": true
   }
 }

package/index.js

@@ -21,7 +21,7 @@ const templates = [
     title: 'Revideo with Next.js',
     description: 'A minimal web app built with Revideo and Next.js.',
     recommended: true,
-    startCommands: 'next',
+    startcommands: 'readme',
   },
   {
     value: 'avatar-with-background',
@@ -35,12 +35,6 @@ const templates = [
     description: 'Animate a celebration of GitHub repository stars.',
     startcommands: 'default',
   },
-  {
-    value: 'google-cloud-run-parallelized',
-    title: 'Google Cloud Run Parallelized',
-    description: 'Example of parallelized rendering using Google Cloud Run.',
-    startcommands: 'readme',
-  },
   {
     value: 'marketing-templates',
     title: 'Marketing Templates',
@@ -52,7 +46,7 @@ const templates = [
     title: 'Drag and Drop Example',
     description:
       'A minimal example of an editor with drag-and-drop editing functionality.',
-    startcommands: 'next',
+    startcommands: 'readme',
   },
   {
     value: 'parallelized-aws-lambda',
@@ -60,12 +54,6 @@ const templates = [
     description: 'Example of parallelized rendering using AWS Lambda.',
     startcommands: 'readme',
   },
-  {
-    value: 'reddit-post-video',
-    title: 'Reddit Post Video',
-    description: 'Generate a video from a Reddit post.',
-    startcommands: 'default',
-  },
   {
     value: 'rive-explanation-video',
     title: 'Rive Explanation Video',
@@ -226,18 +214,6 @@ async function run() {
   if (selectedTemplate.startcommands === 'default') {
     console.log(installCommand);
     console.log(`  ${boldManager} start`);
-  } else if (selectedTemplate.startcommands === 'next') {
-    console.log(kleur.blue('\n√ Start the NextJS server:'));
-    console.log(`  ${kleur.bold('cd')} next`);
-    console.log(installCommand);
-    console.log(`  ${boldManager} run dev`);
-
-    console.log(
-      kleur.blue('\nIn another terminal, serve your revideo project:'),
-    );
-    console.log(`  ${kleur.bold('cd')} revideo`);
-    console.log(installCommand);
-    console.log(`  ${kleur.bold('npx')} revideo serve`);
   } else {
     console.log(kleur.blue('\nNow find the setup instructions in README.md'));
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revideo/create",
-  "version": "0.5.11-beta.1106+9c3bdcff",
+  "version": "0.10.0",
   "description": "Quickly scaffold revideo projects",
   "main": "index.js",
   "author": "revideo",
@@ -20,17 +20,17 @@
     "url": "https://github.com/havenhq/revideo.git"
   },
   "devDependencies": {
-    "@revideo/2d": "^0.5.11-beta.1106+9c3bdcff",
-    "@revideo/core": "^0.5.11-beta.1106+9c3bdcff",
-    "@revideo/ffmpeg": "^0.5.11-beta.1106+9c3bdcff",
-    "@revideo/renderer": "^0.5.11-beta.1106+9c3bdcff",
-    "@revideo/ui": "^0.5.11-beta.1106+9c3bdcff",
-    "@revideo/vite-plugin": "^0.5.11-beta.1106+9c3bdcff"
+    "@revideo/2d": "0.10.0",
+    "@revideo/core": "0.10.0",
+    "@revideo/ffmpeg": "0.10.0",
+    "@revideo/renderer": "0.10.0",
+    "@revideo/ui": "0.10.0",
+    "@revideo/vite-plugin": "0.10.0"
   },
   "dependencies": {
-    "@revideo/telemetry": "^0.5.11-beta.1106+9c3bdcff",
+    "@revideo/telemetry": "0.10.0",
     "minimist": "^1.2.8",
     "prompts": "^2.4.2"
   },
-  "gitHead": "9c3bdcff4698b09821a624dfa2b3efdf39599dc6"
+  "gitHead": "5ce6d551d46a072f27a35c8df46c5a466bd739bc"
 }

package/examples/avatar-with-background/src/project.meta

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

package/examples/avatar-with-background/src/project.ts

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

package/examples/avatar-with-background/src/revideo.d.ts

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

package/examples/avatar-with-background/src/scenes/example.meta

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

package/examples/avatar-with-background/vite.config.ts

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

package/examples/github-stars-celebration/src/project.meta

@@ -1,28 +0,0 @@
-{
-  "version": 0,
-  "shared": {
-    "background": "rgb(20,20,20)",
-    "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/github-stars-celebration/src/project.ts

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

package/examples/github-stars-celebration/src/revideo.d.ts

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

package/examples/github-stars-celebration/src/scenes/example.meta

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

package/examples/github-stars-celebration/vite.config.ts

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

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

@@ -1,127 +0,0 @@
-# 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