@revideo/create 0.5.11-beta.1106 → 0.10.0

package/examples/parallelized-aws-lambda/revideo-project/src/{scenes/example.tsx → project.tsx}

@@ -1,7 +1,7 @@
-import {Audio, Img, Txt, Video, makeScene2D} from '@revideo/2d';
-import {createRef, createSignal, useScene, waitFor} from '@revideo/core';
+import {Audio, Txt, Video, makeScene2D} from '@revideo/2d';
+import {createSignal, useScene, waitFor, makeProject} from '@revideo/core';
 
-export default makeScene2D(function* (view) {
+const scene = makeScene2D("scene", function* (view) {
   const fontSize = createSignal(50);
 
   yield view.add(
@@ -10,7 +10,7 @@ export default makeScene2D(function* (view) {
         src={'https://revideo-example-assets.s3.amazonaws.com/beach-4.mp4'}
         size={['100%', '100%']}
         play={true}
-        decoder={"ffmpeg"} // ffmpeg is more reliable than webcodecs decoder
+        decoder={useScene().variables.get("decoder", "ffmpeg")} // ffmpeg is more reliable than webcodecs decoder
       />
       <Audio
         src={'https://revideo-example-assets.s3.amazonaws.com/chill-beat-2.mp3'}
@@ -26,5 +26,9 @@ export default makeScene2D(function* (view) {
   yield* fontSize(100, 4); // increase font size to 100 in 4 seconds
 
   yield* waitFor(25); // wait for 25 seconds more
-  
+});
+
+
+export default makeProject({
+  scenes: [scene],
 });

package/examples/parallelized-aws-lambda/revideo-project/src/render.ts

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

package/examples/parallelized-aws-lambda/revideo-project/tsconfig.json

@@ -6,5 +6,6 @@
     "outDir": "dist",
     "module": "CommonJS",
     "esModuleInterop": true,
+    "skipLibCheck": true
   }
 }

package/examples/rive-explanation-video/README.md

@@ -4,6 +4,3 @@ This is the code for a small video showing how you can use Rive animations in Re
 
 
 https://github.com/user-attachments/assets/0302a3c2-65e4-4392-8b6c-90c4a505d23d
-
-
-

package/examples/rive-explanation-video/package.json

@@ -1,24 +1,20 @@
 {
-  "name": "rive-explanation-docs",
+  "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": {
-    "@lezer/javascript": "^1.4.17",
-    "@revideo/2d": "0.5.10",
-    "@revideo/core": "0.5.10",
-    "@revideo/ffmpeg": "0.5.10",
-    "@revideo/renderer": "0.5.10",
-    "@revideo/vite-plugin": "0.5.10"
+    "@lezer/javascript": "^1.4.18",
+    "@revideo/2d": "0.10.0",
+    "@revideo/core": "0.10.0",
+    "@revideo/renderer": "0.10.0"
   },
   "devDependencies": {
-    "@revideo/cli": "0.5.10",
-    "@revideo/ui": "0.5.10",
+    "@revideo/cli": "0.10.0",
+    "@revideo/ui": "0.10.0",
     "typescript": "5.5.4",
     "vite": "^4.5"
   }

package/examples/rive-explanation-video/src/project.tsx

@@ -0,0 +1,234 @@
+import { waitFor, createRef, makeProject, all, Reference, chain } from '@revideo/core';
+import {
+  Img, 
+  makeScene2D,
+  Rive,
+  Txt,
+  Layout,
+  LezerHighlighter, Code, word, lines, Rect,
+  View2D,
+} from '@revideo/2d';
+import {parser} from '@lezer/javascript';
+import {tags} from '@lezer/highlight';
+import {HighlightStyle} from '@codemirror/language';
+import './global.css';
+
+const MyStyle = HighlightStyle.define([
+    {
+      tag: tags.comment,
+      color: '#8E908C',
+    },
+    {
+      tag: [tags.variableName, tags.self, tags.propertyName, tags.attributeName, tags.regexp],
+      color: '#C82829',
+    },
+    {
+      tag: [tags.number, tags.bool, tags.null],
+      color: '#F5871F',
+    },
+    {
+      tag: [tags.className, tags.typeName, tags.definition(tags.typeName)],
+      color: '#C99E00',
+    },
+    {
+      tag: [tags.string, tags.special(tags.brace)],
+      color: '#718C00',
+    },
+    {
+      tag: tags.operator,
+      color: '#3E999F',
+    },
+    {
+      tag: [tags.definition(tags.propertyName), tags.function(tags.variableName)],
+      color: '#4271AE',
+    },
+    {
+      tag: tags.keyword,
+      color: '#8959A8',
+    },
+    {
+      tag: tags.derefOperator,
+      color: '#4D4D4C',
+    },
+    {
+      tag: tags.bracket,
+      color: "grey"
+    },
+    {
+      tag: tags.separator,
+      color: "grey"
+    },
+    {
+      tag: tags.punctuation,
+      color: "grey"
+    },
+    {
+      tag: tags.typeOperator,
+      color: "grey"
+    }
+  ]);
+
+Code.defaultHighlighter = new LezerHighlighter(
+  parser.configure({
+    dialect: 'jsx ts',
+  }),
+  MyStyle
+);
+
+/**
+ * The Revideo scene
+ */
+const scene = makeScene2D('scene', function* (view) {
+
+  const textRef = createRef<Txt>();
+  yield view.add(
+    <Txt fontFamily={"Lexend"} fontSize={100} fontWeight={600} ref={textRef}/>
+  );
+
+  yield* all(textRef().text("Rive Animations in Revideo", 1.25))
+  yield* all(
+      textRef().scale(0.75, 0.75),
+      textRef().position.y(-400, 0.75)
+  )
+  yield* waitFor(0.25);
+
+  const codeRef= createRef<Code>();
+  const videoBoxRef = createRef<Layout>();
+  view.add(<Layout opacity={0} position={[550, 100]} size={[600, 600]} ref={videoBoxRef} />);
+  view.add(
+    <Code
+    ref={codeRef}
+    textAlign={"left"}
+    fontSize={35}
+    x={-400}
+    y={100}
+    opacity={0}
+    fontFamily={'JetBrains Mono, monospace'}
+    code={
+`export default makeScene2D(function* (view){
+  yield view.add(
+      <Img 
+        src={"/sf.png"} 
+        size={["100%", "100%"]} 
+      />
+  );
+
+});
+`
+}/>);
+
+videoBoxRef().add(
+  <Img 
+    src={"https://revideo-example-assets.s3.amazonaws.com/sf.png"} 
+    size={[videoBoxRef().width(), videoBoxRef().height()]} 
+  />
+);
+
+yield* all(
+  codeRef().opacity(1, 0.75),
+  videoBoxRef().opacity(1, 0.75)
+);
+yield* waitFor(0.5);
+
+const riveRef = createRef<Rive>();
+videoBoxRef().add(
+    <Rive
+      src={"https://revideo-example-assets.s3.amazonaws.com/emoji.riv"}
+      animationId={1}
+      size={[600, 600]} 
+      opacity={0}
+      ref={riveRef}
+    />
+);
+yield* all(codeRef().code.insert([8, 0],
+  `\n   yield view.add(
+      <Rive
+        src={"/emoji.riv"}
+        animationId={1}
+        size={[600, 600]} 
+      />
+  );\n`, 1),
+  riveRef().opacity(1, 1)
+);
+
+yield* waitFor(1);
+
+yield* codeRef().selection(lines(11, 13), 1),
+yield replaceRive(videoBoxRef, riveRef)
+yield* all(
+  codeRef().code.replace(word(11, 17, 5), "dog", 2),
+  codeRef().code.replace(word(13, 17, 3), "900", 2),
+);
+
+yield* codeRef().selection(lines(0, 17), 1);
+
+yield* waitFor(1);
+yield* all(
+  codeRef().opacity(0, 1),
+  videoBoxRef().opacity(0, 1),
+  textRef().opacity(0, 1)
+);
+
+yield* waitFor(0.5);
+yield* logoAnimation(view);
+});
+
+function* replaceRive(box: Reference<Layout>, rive: Reference<Rive>){
+yield* rive().opacity(0, 1);
+rive().remove();
+
+const riveRef = createRef<Rive>();
+box().add(
+    <Rive
+      src={"https://revideo-example-assets.s3.amazonaws.com/dog.riv"}
+      size={[1000, 600]} 
+      opacity={0}
+      animationId={1}
+      ref={riveRef}
+    />
+);
+
+yield* riveRef().opacity(1, 1);
+yield* waitFor(5);
+}
+
+function* logoAnimation(view: View2D){
+const block1 = createRef<Rect>()
+const block2 = createRef<Rect>()
+const block3 = createRef<Rect>()
+const blocks = createRef<Layout>();
+const logoText = createRef<Txt>();
+view.add(
+  <>
+  <Layout ref={blocks} x={-600}>
+    <Rect fill={"#151515"} height={60} y={-80} x={-620} width={180} radius={9.3} ref={block1} />
+    <Rect fill={"#151515"} height={60} width={180} x={-540} radius={9.3} ref={block2} />
+    <Rect fill={"#151515"} height={60} width={180} x={-460} y={80} radius={9.3} ref={block3} />
+    <Txt ref={logoText} fontFamily={"Lexend"} x={53+757.5} y={20} fontSize={300} letterSpacing={-4} fontWeight={700} text={""}/>
+  </Layout>
+  </>
+);
+
+yield* all(
+  block1().position.x(-80, 0.5),
+  chain(waitFor(0.1), block2().position.x(0, 0.4)),
+  chain(waitFor(0.2), block3().position.x(80, 0.3)),
+)
+
+yield* logoText().text("revideo", 1);
+
+yield* waitFor(1);
+}
+
+/**
+ * The final revideo project
+ */
+export default makeProject({
+  scenes: [scene],
+  settings: {
+    // Example settings:
+    shared: {
+      size: {x: 1920, 1080},
+    },
+  },
+});

package/examples/rive-explanation-video/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/rive-explanation-video/tsconfig.json

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

package/examples/saas-template/package.json

@@ -1,40 +1,40 @@
 {
-	"name": "next",
-	"version": "0.1.0",
-	"private": true,
-	"scripts": {
-		"dev": "next dev",
-		"build": "next build",
-		"start": "next start",
-		"lint": "next lint",
-		"revideo:serve": "revideo serve --projectFile ./revideo/project.ts",
-		"revideo:editor": "revideo editor --projectFile ./revideo/project.ts"
-	},
-	"dependencies": {
-		"@radix-ui/react-navigation-menu": "^1.1.4",
-		"@revideo/2d": "^0.6.0",
-		"@revideo/core": "^0.6.0",
-		"@revideo/player-react": "^0.6.0",
-		"class-variance-authority": "^0.7.0",
-		"lucide-react": "^0.378.0",
-		"next": "^14.2.13",
-		"p-limit": "^3",
-		"react": "^18",
-		"react-dom": "^18",
-		"tailwind-merge": "^2.3.0",
-		"tailwindcss-animate": "^1.0.7"
-	},
-	"devDependencies": {
-		"@revideo/cli": "^0.6.0",
-		"@revideo/ui": "^0.6.0",
-		"@types/node": "^20",
-		"@types/react": "^18",
-		"@types/react-dom": "^18",
-		"autoprefixer": "^10.4.19",
-		"eslint": "^8",
-		"eslint-config-next": "14.2.3",
-		"postcss": "^8",
-		"tailwindcss": "^3.4.3",
-		"typescript": "^5"
-	}
-}
+  "name": "next",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "revideo:serve": "revideo serve --projectFile ./revideo/project.ts",
+    "revideo:editor": "revideo editor --projectFile ./revideo/project.ts"
+  },
+  "dependencies": {
+    "@radix-ui/react-navigation-menu": "^1.1.4",
+    "@revideo/2d": "0.10.0",
+    "@revideo/core": "0.10.0",
+    "@revideo/player-react": "0.10.0",
+    "class-variance-authority": "^0.7.0",
+    "lucide-react": "^0.378.0",
+    "next": "^14.2.13",
+    "p-limit": "^3",
+    "react": "^18",
+    "react-dom": "^18",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@revideo/cli": "0.10.0",
+    "@revideo/ui": "0.10.0",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.3",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5"
+  }
+}

package/examples/stitching-videos/README.md

@@ -1,7 +1,19 @@
-# Stitching Together Videos
+# Revideo Minimal Starter Template
 
-This is a very simple example demonstrating how you can stitch together multiple videos into one. It also includes a transition animation between the videos.
+This is a minimal Revideo starter project. It can be bootstrapped using
+`npm init @revideo@latest` and selecting the minimal template.
 
+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.
 
-https://github.com/redotvideo/revideo-examples/assets/122226645/6ec23514-e699-4a17-a9a5-02e7e14b207e
+You can run the Revideo editor using `npm start` and render the final video
+using `npm run render`.
 
+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).
+
+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/stitching-videos/package.json

@@ -1,22 +1,19 @@
 {
-  "name": "stitching-videos",
+  "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": {
-    "@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"
+    "@revideo/core": "0.10.0",
+    "@revideo/2d": "0.10.0",
+    "@revideo/renderer": "0.10.0"
   },
   "devDependencies": {
-    "@revideo/ui": "0.5.10",
+    "@revideo/ui": "0.10.0",
+    "@revideo/cli": "0.10.0",
     "typescript": "5.5.4",
     "vite": "^4.5"
   }

package/examples/stitching-videos/src/{scenes/example.tsx → project.tsx}

@@ -1,5 +1,7 @@
-import { makeScene2D, Video } from '@revideo/2d';
-import {createRef, waitFor, useScene} from '@revideo/core';
+import {makeProject} from '@revideo/core';
+
+import {makeScene2D, Video} from '@revideo/2d';
+import {useScene, createRef, waitFor} from '@revideo/core';
 
 interface VideoObject {
   src: string;
@@ -7,7 +9,10 @@ interface VideoObject {
   duration: number;
 }
 
-export default makeScene2D(function* (view) {
+/**
+ * The Revideo scene
+ */
+const scene = makeScene2D('scene', function* (view) {
   const videos: VideoObject[] = useScene().variables.get('videos', [])();
 
   for(const vid of videos){
@@ -28,3 +33,31 @@ export default makeScene2D(function* (view) {
     videoRef().remove();
   }
 });
+
+
+/**
+ * The final revideo project
+ */
+export default makeProject({
+  scenes: [scene],
+  variables: {
+    videos: [
+      {
+        src: "https://revideo-example-assets.s3.amazonaws.com/beach-3.mp4",
+        start: 1,
+        duration: 6
+      },
+      {
+        src: "https://revideo-example-assets.s3.amazonaws.com/beach-2.mp4",
+        start: 2,
+        duration: 10
+      }
+    ]
+  },
+  settings: {
+    // Example settings:
+    shared: {
+      size: {x: 1920, y: 1080},
+    },
+  },
+});

package/examples/stitching-videos/src/render.ts

@@ -2,24 +2,12 @@ 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',
-    variables: {
-      videos: [
-        {
-          src: "https://revideo-example-assets.s3.amazonaws.com/beach-3.mp4",
-          start: 1,
-          duration: 6
-        },
-        {
-          src: "https://revideo-example-assets.s3.amazonaws.com/beach-2.mp4",
-          start: 2,
-          duration: 10
-        }
-      ]},
-      settings: {logProgress: true}
-    });
+    projectFile: './src/project.tsx',
+    settings: {logProgress: true},
+  });
 
   console.log(`Rendered video to ${file}`);
 }

package/examples/stitching-videos/tsconfig.json

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

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

@@ -1,25 +1,22 @@
 {
-  "name": "3d-testing",
+  "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": {
-    "@revideo/2d": "0.5.10",
-    "@revideo/core": "0.5.10",
-    "@revideo/renderer": "0.5.10",
-    "@revideo/ffmpeg": "0.5.10",
-    "three": "^0.167.1"
+    "@revideo/2d": "0.10.0",
+    "@revideo/core": "0.10.0",
+    "@revideo/renderer": "0.10.0",
+    "three": "^0.169.0"
   },
   "devDependencies": {
-    "@revideo/ui": "0.5.10",
-    "@revideo/vite-plugin": "0.5.10",
-    "@types/three": "^0.167.1",
+    "@revideo/cli": "0.10.0",
+    "@revideo/ui": "0.10.0",
+    "@types/three": "^0.169.0",
     "typescript": "5.5.4",
-    "vite": "^4.0.0"
+    "vite": "^4.5"
   }
 }