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

package/examples/README.md

@@ -0,0 +1,43 @@
+<br/>
+<p align="center">
+  <a href="https://re.video">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="./logo_dark.svg">
+      <img width="360" alt="Revideo logo" src="./logo.svg">
+    </picture>
+  </a>
+</p>
+
+
+# Revideo Code Examples
+
+This repository contains example projects built with [Revideo](https://github.com/redotvideo/revideo). If you prefer to learn by looking at code examples rather than reading through docs, this is a great place to get started with Revideo.
+
+## List of Projects
+
+Below you can find a list of Revideo projects along with a quick summary, focused on teaching different aspects (deployment, animations, etc.). All the individual project folders have a README to help you get started.
+
+- **SaaS Template (Default Project + NextJS):** This is a NextJS project that demonstrates how to include Revideo in a SaaS application. If this is your first time using Revideo, this is probably what you're looking for. - ([project folder](https://github.com/redotvideo/revideo-examples/tree/main/saas-template))
+
+- **Default Project:** This is a simple project that demonstrates the basic structure of a Revideo project. It includes an audio file and a background video - ([project folder](https://github.com/redotvideo/revideo-examples/tree/main/default))
+
+### Animations
+
+- **Transparent AI avatar with background image:** This is a very simple example of a video of an AI avatar speaking with a background image. It is mainly meant to demonstrate how to use transparent videos in Revideo ([project folder](https://github.com/redotvideo/revideo-examples/tree/main/github-stars-celebration))
+
+- **Marketing Templates**: A template for a post on social media advertising black friday discounts. ([project folder](https://github.com/redotvideo/examples/tree/main/marketing-templates))
+
+- **Stitching together videos:** This is a simple project that demonstrates how you can append videos one after another. It also includes an animation for a transition between videos - ([project folder](https://github.com/redotvideo/revideo-examples/tree/main/stitching-videos))
+
+- **Youtube shorts with animated subtitles:** This example project generates Youtube Shorts with AI. It generates scripts with ChatGPT, voiceovers with Elevenlabs, and background images with Dall-E. **This project has a heavy emphasis on animating subtitles** - ([project folder](https://github.com/redotvideo/revideo-examples/tree/main/youtube-shorts))
+
+- **Animation for 1,000 Github Stars:** A fun animation celebrating 1,000 Github stars for Revideo - ([project folder](https://github.com/redotvideo/revideo-examples/tree/main/youtube-shorts))
+
+- **Code Explainer Video for Rive Animations:** An explainer video showcasing how you can use Rive animations inside of Revideo. Worth taking a look at to learn about our `<Code/>` and `<Rive/>` component. ([project folder](https://github.com/redotvideo/examples/tree/main/rive-explanation-video))
+  
+### Deployment
+
+- **Parallelized Rendering with Cloud Functions:** This example project also uses Cloud Run, but enables faster rendering by distributing the rendering work across a large number of cloud functions - ([project folder](https://github.com/redotvideo/revideo-examples/tree/main/google-cloud-run-parallelized))
+
+- **Parallelized Rendering with AWS Lambda:** This example project shows you how you can do parallelized rendering with AWS Lambda - ([project folder](https://github.com/redotvideo/revideo-examples/tree/main/parallelized-aws-lambda))
+

package/examples/avatar-with-background/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "avatar-with-background",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "start": "vite",
+    "serve": "vite",
+    "build": "tsc && vite build",
+    "render": "tsc && node dist/render.js"
+  },
+  "dependencies": {
+    "@deepgram/sdk": "^3.3.0",
+    "@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",
+    "dotenv": "^16.4.5",
+    "openai": "^4.39.0"
+  },
+  "devDependencies": {
+    "@revideo/ui": "0.5.10",
+    "typescript": "5.5.4",
+    "vite": "^4.5"
+  }
+}

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

@@ -0,0 +1,31 @@
+{
+  "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

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

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

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

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

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

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

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

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

@@ -0,0 +1,28 @@
+import { Img, Video, makeScene2D } from '@revideo/2d';
+import { waitFor, createRef, useScene } from '@revideo/core'
+
+export default makeScene2D(function* (view) {
+  const avatarRef = createRef<Video>();
+  const backgroundRef = createRef<Img>();
+
+  yield view.add(
+    <>
+      <Img
+        src={'https://revideo-example-assets.s3.amazonaws.com/mountains.jpg'}
+        height={'100%'}
+        ref={backgroundRef}
+      />
+      <Video
+        src={'https://revideo-example-assets.s3.amazonaws.com/avatar.webm'}
+        play={true}
+        width={'100%'}
+        ref={avatarRef}
+        decoder={"slow"} // we need to use the slow decoder to support transparency
+      />
+    </>,
+  );
+
+  avatarRef().position.y(useScene().getSize().y / 2 - avatarRef().height() / 2);
+
+  yield* waitFor(avatarRef().getDuration());
+});

package/examples/avatar-with-background/tsconfig.json

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

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

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

package/examples/default/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "revideo-app",
+  "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.6.0",
+    "@revideo/2d": "0.6.0",
+    "@revideo/renderer": "0.6.0"
+  },
+  "devDependencies": {
+    "@revideo/ui": "0.6.0",
+    "@revideo/cli": "0.6.0",
+    "typescript": "5.5.4",
+    "vite": "^4.5"
+  }
+}

package/examples/default/src/project.tsx

@@ -0,0 +1,56 @@
+import {makeProject, Vector2} from '@revideo/core';
+
+import {Audio, Img, makeScene2D, Video} from '@revideo/2d';
+import {all, chain, createRef, waitFor} from '@revideo/core';
+
+/**
+ * The Revideo scene
+ */
+const scene = makeScene2D('scene', function* (view) {
+  const logoRef = createRef<Img>();
+
+  yield view.add(
+    <>
+      <Video
+        src={'https://revideo-example-assets.s3.amazonaws.com/stars.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(
+    <Img
+      width={'1%'}
+      ref={logoRef}
+      src={
+        'https://revideo-example-assets.s3.amazonaws.com/revideo-logo-white.png'
+      }
+    />,
+  );
+
+  yield* chain(
+    all(logoRef().scale(40, 2), logoRef().rotation(360, 2)),
+    logoRef().scale(60, 1),
+  );
+});
+
+/**
+ * The final revideo project
+ */
+export default makeProject({
+  scenes: [scene],
+  settings: {
+    // Example settings:
+    shared: {
+      size: new Vector2(1920, 1080),
+    },
+  },
+});

package/examples/default/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.tsx',
+    settings: {logProgress: true},
+  });
+
+  console.log(`Rendered video to ${file}`);
+}
+
+render();

package/examples/default/tsconfig.json

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