@revideo/create 0.5.11-beta.1106 → 0.10.1-alpha.1114

package/examples/reddit-post-video/src/render.ts

@@ -1,157 +0,0 @@
-import { createClient } from "@deepgram/sdk";
-import { renderVideo } from "@revideo/renderer";
-import axios from "axios";
-import * as fs from "fs";
-import yargs from "yargs";
-import { hideBin } from "yargs/helpers";
-
-export interface Word {
-  punctuated_word: string;
-  start: number;
-  end: number;
-}
-
-export interface MetaData {
-  audioFile: string;
-  text: Word[];
-  textColor: string;
-}
-
-export const deepgramClient = createClient(
-  process.env.DEEPGRAM_API_KEY,
-);
-
-async function getPostText(postUrl: string) {
-  const response = await axios.get(postUrl + ".json");
-  const responseData = response.data;
-
-  return (
-    responseData[0].data.children[0].data.title +
-    ".\n" +
-    responseData[0].data.children[0].data.selftext
-  );
-}
-
-async function voiceNameToId(voiceName: string): Promise<string | null> {
-  const url = "https://api.elevenlabs.io/v1/voices";
-  const headers = {
-    "Content-Type": "application/json",
-    "xi-api-key": process.env.ELEVEN_API_KEY,
-  };
-
-  try {
-    const response = await axios.get(url, { headers });
-    const voices = response.data.voices;
-    const voice = voices.find((v: any) => v.name === voiceName);
-    return voice ? voice.voice_id : null;
-  } catch (error) {
-    console.error("Error fetching voices:", error);
-    throw error;
-  }
-}
-
-async function textToSpeech(post: string, voiceId: string, modelId: string) {
-  const url = `https://api.elevenlabs.io/v1/text-to-speech/${voiceId}`;
-  const headers = {
-    "Content-Type": "application/json",
-    "xi-api-key": process.env.ELEVEN_API_KEY,
-  };
-  const data = {
-    model_id: modelId,
-    text: post,
-  };
-
-  try {
-    const response = await axios.post(url, data, {
-      headers,
-      responseType: "arraybuffer",
-    });
-    return response.data;
-  } catch (error) {
-    console.error("Error making text-to-speech request:", error);
-    throw error;
-  }
-}
-
-export async function speechToText(filePath: string) {
-  const { result } = await deepgramClient.listen.prerecorded.transcribeFile(
-    fs.readFileSync(filePath),
-    {
-      model: "nova-2",
-      smart_format: true,
-    },
-  );
-
-  return result;
-}
-
-async function main() {
-  const argv = await yargs(hideBin(process.argv)).options({
-    voice: {
-      alias: "v",
-      describe: "The name of the eleven labs voice to use",
-      type: "string",
-      default: "Sarah",
-    },
-    post: {
-      alias: "p",
-      describe: "The Reddit post URL",
-      type: "string",
-      default:
-        "https://www.reddit.com/r/TrueOffMyChest/comments/1bllfgk/i_hate_having_old_parents/",
-    },
-    textcolor: {
-      alias: "c",
-      describe: "color of the text",
-      type: "string",
-      default: "red",
-    },
-    onlyMetadata: {
-      alias: "m",
-      describe: "only save metadata and do not render the video",
-      type: "boolean",
-      default: false,
-    },
-  }).argv;
-
-  const url = argv.post;
-  const voiceName = argv.voice;
-  const textColor = argv.textcolor;
-
-  const post = await getPostText(url);
-  const voiceId = await voiceNameToId(voiceName);
-  const ttsRes = await textToSpeech(post, voiceId, "eleven_multilingual_v2");
-
-  await fs.writeFileSync("./output/audio.wav", ttsRes);
-
-  const transcriptionResponse = await speechToText("./output/audio.wav");
-  const words =
-    transcriptionResponse.results.channels[0].alternatives[0].words.map(
-      (word: any) => ({
-        punctuated_word: word.punctuated_word,
-        start: word.start,
-        end: word.end,
-      }),
-    );
-
-  const metaData: MetaData = {
-    audioFile: "./output/audio.wav",
-    text: words,
-    textColor: textColor,
-  };
-
-  fs.writeFileSync("./metadata.json", JSON.stringify(metaData, null, 2));
-  console.log("saved metadata to ./metadata.json");
-
-  if (!argv.onlyMetadata) {
-    const file = renderVideo({
-      projectFile: "./vite.config.ts", 
-      variables: { data: metaData },
-      settings: { logProgress: true }
-    });
-
-    console.log(`rendered video to ${file}`)
-  }
-}
-
-main();

package/examples/reddit-post-video/src/revideo.d.ts

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

package/examples/reddit-post-video/src/scenes/example.meta

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

package/examples/reddit-post-video/src/scenes/example.tsx

@@ -1,74 +0,0 @@
-import { Audio, Txt, Video, View2D, makeScene2D } from "@revideo/2d";
-import { createRef, useScene, waitFor } from "@revideo/core";
-import { MetaData, Word } from "../render";
-
-export default makeScene2D(function* (view) {
-  const videoRef = createRef<Video>();
-  const data: MetaData = useScene().variables.get("data", {
-    audioFile: "hi",
-    text: [],
-    textColor: "red",
-  })();
-
-  yield view.add(
-    <>
-      <Video
-        ref={videoRef}
-        volume={0}
-        src={"https://revideo-example-assets.s3.amazonaws.com/minecraft.mp4"}
-        play={true}
-        size={"100%"}
-      />
-      <Audio src={data.audioFile} play={true} />
-    </>,
-  );
-
-  let waitBefore = data.text[0].start;
-
-  for (let i = 0; i < data.text.length; i++) {
-    const currentClip = data.text[i];
-    const nextClipStart =
-      i < data.text.length - 1 ? data.text[i + 1].start : null;
-    const isLastClip = i === data.text.length - 1;
-    const waitAfter = isLastClip ? 1 : 0;
-    yield* displayTextClip(
-      currentClip,
-      waitBefore,
-      waitAfter,
-      view,
-      data.textColor,
-    );
-    waitBefore = nextClipStart !== null ? nextClipStart - currentClip.end : 0;
-  }
-});
-
-function* displayTextClip(
-  textClip: Word,
-  waitBefore: number,
-  waitAfter: number,
-  view: View2D,
-  textColor: string,
-) {
-  const textRef = createRef<Txt>();
-  yield* waitFor(waitBefore);
-  view.add(
-    <Txt
-      fontSize={100}
-      fontWeight={800}
-      ref={textRef}
-      fontFamily={"Raleway"}
-      textWrap={true}
-      textAlign={"center"}
-      fill={textColor}
-      width={"70%"}
-      lineWidth={2}
-      shadowOffset={10}
-      shadowBlur={30}
-      shadowColor={"black"}
-    >
-      {textClip.punctuated_word}
-    </Txt>,
-  );
-  yield* waitFor(textClip.end - textClip.start + waitAfter);
-  textRef().remove();
-}

package/examples/reddit-post-video/tsconfig.json

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

package/examples/reddit-post-video/vite.config.ts

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

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

@@ -1,31 +0,0 @@
-{
-  "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": {
-        "fastStart": true,
-        "includeAudio": true
-      }
-    }
-  }
-}

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

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

package/examples/rive-explanation-video/src/revideo.d.ts

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

package/examples/rive-explanation-video/src/scenes/example.meta

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

package/examples/rive-explanation-video/src/scenes/example.tsx

@@ -1,218 +0,0 @@
-import { waitFor, createRef, 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';
-
-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
-);
-  
-
-export default makeScene2D(function* (view) {
-
-    const textRef = createRef<Txt>();
-    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);
-}

package/examples/rive-explanation-video/vite.config.ts

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

package/examples/stitching-videos/src/project.meta

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

@@ -1,20 +0,0 @@
-import {makeProject} from '@revideo/core';
-import example from './scenes/example?scene';
-
-export default makeProject({
-  scenes: [example],
-  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
-      }
-    ]
-  }
-});

package/examples/stitching-videos/src/revideo.d.ts

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

package/examples/stitching-videos/vite.config.ts

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

package/examples/three-js-example/README.md

@@ -1,8 +0,0 @@
-# 3D Animations with Three JS
-
-This example project demonstrates how you can build render 3d animations with [three.js](https://threejs.org/) Revideo.
-
-The animation itself in this project is not very complex - its main purpose is to demonstrate how you can use three.js together with Revideo and make use of concepts such as [tweening](https://docs.re.video/tweening/) in 3D.
-
-https://github.com/user-attachments/assets/41af8137-e16a-43b3-a3e1-01b9cc9b700b
-

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

@@ -1,31 +0,0 @@
-{
-  "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": 60,
-    "resolutionScale": 1,
-    "colorSpace": "srgb",
-    "exporter": {
-      "name": "@revideo/core/wasm",
-      "options": {
-        "fastStart": true,
-        "includeAudio": true
-      }
-    }
-  }
-}

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

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

package/examples/three-js-example/src/revideo.d.ts

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

package/examples/three-js-example/src/scenes/basic3D.meta

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