@revideo/create 0.5.11-beta.1106 → 0.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/examples/avatar-with-background/package.json +7 -14
- package/examples/avatar-with-background/src/{scenes/example.tsx → project.tsx} +19 -3
- package/examples/avatar-with-background/src/render.ts +4 -3
- package/examples/avatar-with-background/tsconfig.json +2 -1
- package/examples/default/package.json +6 -6
- package/examples/default/src/project.tsx +2 -2
- package/examples/github-stars-celebration/package.json +7 -11
- package/examples/github-stars-celebration/src/{scenes/example.tsx → project.tsx} +24 -4
- package/examples/github-stars-celebration/src/render.ts +1 -1
- package/examples/github-stars-celebration/tsconfig.json +2 -1
- package/examples/marketing-templates/marketing-template/README.md +19 -0
- package/examples/marketing-templates/marketing-template/package.json +7 -11
- package/examples/marketing-templates/marketing-template/src/{scenes/example.tsx → project.tsx} +23 -3
- package/examples/marketing-templates/marketing-template/src/render.ts +1 -1
- package/examples/marketing-templates/marketing-template/tsconfig.json +2 -1
- package/examples/marketing-templates/multiple-videos-in-one/README.md +19 -0
- package/examples/marketing-templates/multiple-videos-in-one/package.json +7 -11
- package/examples/marketing-templates/multiple-videos-in-one/src/{scenes/example.tsx → project.tsx} +21 -3
- package/examples/marketing-templates/multiple-videos-in-one/src/render.ts +1 -1
- package/examples/marketing-templates/multiple-videos-in-one/tsconfig.json +2 -1
- package/examples/minimal-drag-drop/README.md +14 -18
- package/examples/minimal-drag-drop/{next/app → app}/page.tsx +51 -39
- package/examples/minimal-drag-drop/{next/next-env.d.ts → next-env.d.ts} +1 -1
- package/examples/minimal-drag-drop/{next/package.json → package.json} +9 -4
- package/examples/minimal-drag-drop/revideo/project.tsx +54 -0
- package/examples/parallelized-aws-lambda/Dockerfile +0 -2
- package/examples/parallelized-aws-lambda/README.md +331 -100
- package/examples/parallelized-aws-lambda/revideo-project/package.json +9 -11
- package/examples/parallelized-aws-lambda/revideo-project/src/lambda.ts +2 -3
- package/examples/parallelized-aws-lambda/revideo-project/src/{scenes/example.tsx → project.tsx} +9 -5
- package/examples/parallelized-aws-lambda/revideo-project/src/render.ts +1 -1
- package/examples/parallelized-aws-lambda/revideo-project/tsconfig.json +1 -0
- package/examples/rive-explanation-video/README.md +0 -3
- package/examples/rive-explanation-video/package.json +8 -12
- package/examples/rive-explanation-video/src/project.tsx +234 -0
- package/examples/rive-explanation-video/src/render.ts +1 -1
- package/examples/rive-explanation-video/tsconfig.json +2 -1
- package/examples/saas-template/package.json +39 -39
- package/examples/stitching-videos/README.md +15 -3
- package/examples/stitching-videos/package.json +7 -10
- package/examples/stitching-videos/src/{scenes/example.tsx → project.tsx} +36 -3
- package/examples/stitching-videos/src/render.ts +4 -16
- package/examples/stitching-videos/tsconfig.json +2 -1
- package/examples/three-js-example/package.json +10 -13
- package/examples/three-js-example/src/project.tsx +105 -0
- package/examples/three-js-example/src/render.ts +1 -1
- package/examples/three-js-example/tsconfig.json +2 -1
- package/examples/youtube-shorts/README.md +14 -60
- package/examples/youtube-shorts/package.json +8 -12
- package/examples/youtube-shorts/src/{scenes/example.tsx → project.tsx} +20 -3
- package/examples/youtube-shorts/src/render.ts +11 -8
- package/examples/youtube-shorts/src/utils.ts +1 -1
- package/examples/youtube-shorts/tsconfig.json +2 -1
- package/index.js +2 -26
- package/package.json +9 -9
- package/examples/avatar-with-background/src/project.meta +0 -31
- package/examples/avatar-with-background/src/project.ts +0 -6
- package/examples/avatar-with-background/src/revideo.d.ts +0 -1
- package/examples/avatar-with-background/src/scenes/example.meta +0 -5
- package/examples/avatar-with-background/vite.config.ts +0 -8
- package/examples/github-stars-celebration/src/project.meta +0 -28
- package/examples/github-stars-celebration/src/project.ts +0 -8
- package/examples/github-stars-celebration/src/revideo.d.ts +0 -1
- package/examples/github-stars-celebration/src/scenes/example.meta +0 -5
- package/examples/github-stars-celebration/vite.config.ts +0 -8
- package/examples/google-cloud-run-parallelized/README.md +0 -127
- package/examples/google-cloud-run-parallelized/render-orchestrator/Dockerfile +0 -56
- package/examples/google-cloud-run-parallelized/render-orchestrator/package.json +0 -22
- package/examples/google-cloud-run-parallelized/render-orchestrator/src/index.ts +0 -72
- package/examples/google-cloud-run-parallelized/render-orchestrator/src/revideo.d.ts +0 -1
- package/examples/google-cloud-run-parallelized/render-orchestrator/tsconfig.json +0 -10
- package/examples/google-cloud-run-parallelized/render-worker/.gcloudignore +0 -17
- package/examples/google-cloud-run-parallelized/render-worker/.puppeteerrc.cjs +0 -9
- package/examples/google-cloud-run-parallelized/render-worker/package.json +0 -30
- package/examples/google-cloud-run-parallelized/render-worker/src/index.ts +0 -45
- package/examples/google-cloud-run-parallelized/render-worker/src/project.meta +0 -31
- package/examples/google-cloud-run-parallelized/render-worker/src/project.ts +0 -6
- package/examples/google-cloud-run-parallelized/render-worker/src/render.ts +0 -14
- package/examples/google-cloud-run-parallelized/render-worker/src/revideo.d.ts +0 -1
- package/examples/google-cloud-run-parallelized/render-worker/src/scenes/example.tsx +0 -30
- package/examples/google-cloud-run-parallelized/render-worker/tsconfig.json +0 -13
- package/examples/google-cloud-run-parallelized/render-worker/vite.config.ts +0 -9
- package/examples/marketing-templates/marketing-template/src/globals.css +0 -0
- package/examples/marketing-templates/marketing-template/src/project.meta +0 -28
- package/examples/marketing-templates/marketing-template/src/project.ts +0 -9
- package/examples/marketing-templates/marketing-template/src/revideo.d.ts +0 -1
- package/examples/marketing-templates/marketing-template/src/scenes/example.meta +0 -5
- package/examples/marketing-templates/marketing-template/vite.config.ts +0 -9
- package/examples/marketing-templates/multiple-videos-in-one/src/project.meta +0 -28
- package/examples/marketing-templates/multiple-videos-in-one/src/project.ts +0 -9
- package/examples/marketing-templates/multiple-videos-in-one/src/revideo.d.ts +0 -1
- package/examples/marketing-templates/multiple-videos-in-one/src/scenes/example.meta +0 -5
- package/examples/marketing-templates/multiple-videos-in-one/vite.config.ts +0 -9
- package/examples/minimal-drag-drop/next/package-lock.json +0 -5577
- package/examples/minimal-drag-drop/next/public/favicon.ico +0 -0
- package/examples/minimal-drag-drop/next/public/next.svg +0 -1
- package/examples/minimal-drag-drop/next/public/vercel.svg +0 -1
- package/examples/minimal-drag-drop/revideo/package-lock.json +0 -3771
- package/examples/minimal-drag-drop/revideo/package.json +0 -24
- package/examples/minimal-drag-drop/revideo/src/project.meta +0 -28
- package/examples/minimal-drag-drop/revideo/src/project.ts +0 -9
- package/examples/minimal-drag-drop/revideo/src/render.ts +0 -15
- package/examples/minimal-drag-drop/revideo/src/revideo.d.ts +0 -1
- package/examples/minimal-drag-drop/revideo/src/scenes/example.meta +0 -5
- package/examples/minimal-drag-drop/revideo/src/scenes/example.tsx +0 -44
- package/examples/minimal-drag-drop/revideo/tsconfig.json +0 -9
- package/examples/minimal-drag-drop/revideo/vite.config.ts +0 -6
- package/examples/parallelized-aws-lambda/revideo-project/.puppeteerrc.cjs +0 -9
- package/examples/parallelized-aws-lambda/revideo-project/src/project.meta +0 -28
- package/examples/parallelized-aws-lambda/revideo-project/src/project.ts +0 -7
- package/examples/parallelized-aws-lambda/revideo-project/src/revideo.d.ts +0 -1
- package/examples/parallelized-aws-lambda/revideo-project/src/scenes/example.meta +0 -5
- package/examples/parallelized-aws-lambda/revideo-project/vite.config.ts +0 -9
- package/examples/reddit-post-video/README.md +0 -84
- package/examples/reddit-post-video/package-lock.json +0 -2941
- package/examples/reddit-post-video/package.json +0 -27
- package/examples/reddit-post-video/src/global.css +0 -1
- package/examples/reddit-post-video/src/metadata.json +0 -576
- package/examples/reddit-post-video/src/project.meta +0 -31
- package/examples/reddit-post-video/src/project.ts +0 -9
- package/examples/reddit-post-video/src/render.ts +0 -157
- package/examples/reddit-post-video/src/revideo.d.ts +0 -1
- package/examples/reddit-post-video/src/scenes/example.meta +0 -5
- package/examples/reddit-post-video/src/scenes/example.tsx +0 -74
- package/examples/reddit-post-video/tsconfig.json +0 -9
- package/examples/reddit-post-video/vite.config.ts +0 -6
- package/examples/rive-explanation-video/src/project.meta +0 -31
- package/examples/rive-explanation-video/src/project.ts +0 -8
- package/examples/rive-explanation-video/src/revideo.d.ts +0 -1
- package/examples/rive-explanation-video/src/scenes/example.meta +0 -5
- package/examples/rive-explanation-video/src/scenes/example.tsx +0 -218
- package/examples/rive-explanation-video/vite.config.ts +0 -8
- package/examples/stitching-videos/src/project.meta +0 -28
- package/examples/stitching-videos/src/project.ts +0 -20
- package/examples/stitching-videos/src/revideo.d.ts +0 -1
- package/examples/stitching-videos/vite.config.ts +0 -8
- package/examples/three-js-example/README.md +0 -8
- package/examples/three-js-example/src/project.meta +0 -31
- package/examples/three-js-example/src/project.ts +0 -8
- package/examples/three-js-example/src/revideo.d.ts +0 -1
- package/examples/three-js-example/src/scenes/basic3D.meta +0 -5
- package/examples/three-js-example/src/scenes/basic3D.tsx +0 -89
- package/examples/three-js-example/vite.config.ts +0 -6
- package/examples/youtube-shorts/src/project.meta +0 -28
- package/examples/youtube-shorts/src/project.ts +0 -9
- package/examples/youtube-shorts/src/revideo.d.ts +0 -1
- package/examples/youtube-shorts/vite.config.ts +0 -8
- /package/examples/minimal-drag-drop/{next/app → app}/api/render/route.ts +0 -0
- /package/examples/minimal-drag-drop/{next/app → app}/globals.css +0 -0
- /package/examples/minimal-drag-drop/{next/app → app}/layout.tsx +0 -0
- /package/examples/minimal-drag-drop/{next/next.config.mjs → next.config.mjs} +0 -0
- /package/examples/minimal-drag-drop/{next/postcss.config.js → postcss.config.js} +0 -0
- /package/examples/minimal-drag-drop/revideo/{src/global.css → global.css} +0 -0
- /package/examples/minimal-drag-drop/{next/tailwind.config.ts → tailwind.config.ts} +0 -0
- /package/examples/minimal-drag-drop/{next/tsconfig.json → tsconfig.json} +0 -0
- /package/examples/minimal-drag-drop/{next/utils → utils}/parse.ts +0 -0
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "revideo",
|
|
3
|
-
"private": true,
|
|
4
|
-
"version": "0.0.0",
|
|
5
|
-
"scripts": {
|
|
6
|
-
"start": "vite",
|
|
7
|
-
"serve": "vite",
|
|
8
|
-
"build": "tsc && vite build",
|
|
9
|
-
"render": "tsc && node dist/render.js"
|
|
10
|
-
},
|
|
11
|
-
"dependencies": {
|
|
12
|
-
"@revideo/core": "0.5.10",
|
|
13
|
-
"@revideo/2d": "0.5.10",
|
|
14
|
-
"@revideo/renderer": "0.5.10",
|
|
15
|
-
"@revideo/vite-plugin": "0.5.10",
|
|
16
|
-
"@revideo/ffmpeg": "0.5.10"
|
|
17
|
-
},
|
|
18
|
-
"devDependencies": {
|
|
19
|
-
"@revideo/ui": "0.5.10",
|
|
20
|
-
"@revideo/cli": "0.5.10",
|
|
21
|
-
"typescript": "5.5.4",
|
|
22
|
-
"vite": "^4.5"
|
|
23
|
-
}
|
|
24
|
-
}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 0,
|
|
3
|
-
"shared": {
|
|
4
|
-
"background": null,
|
|
5
|
-
"range": [
|
|
6
|
-
0,
|
|
7
|
-
null
|
|
8
|
-
],
|
|
9
|
-
"size": {
|
|
10
|
-
"x": 1920,
|
|
11
|
-
"y": 1080
|
|
12
|
-
},
|
|
13
|
-
"audioOffset": 0
|
|
14
|
-
},
|
|
15
|
-
"preview": {
|
|
16
|
-
"fps": 30,
|
|
17
|
-
"resolutionScale": 1
|
|
18
|
-
},
|
|
19
|
-
"rendering": {
|
|
20
|
-
"fps": 30,
|
|
21
|
-
"resolutionScale": 1,
|
|
22
|
-
"colorSpace": "srgb",
|
|
23
|
-
"exporter": {
|
|
24
|
-
"name": "@revideo/core/wasm",
|
|
25
|
-
"options": {}
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import {renderVideo} from '@revideo/renderer';
|
|
2
|
-
|
|
3
|
-
async function render() {
|
|
4
|
-
console.log('Rendering video...');
|
|
5
|
-
|
|
6
|
-
// This is the main function that renders the video
|
|
7
|
-
const file = await renderVideo({
|
|
8
|
-
projectFile: './src/project.ts',
|
|
9
|
-
settings: { logProgress: true }
|
|
10
|
-
});
|
|
11
|
-
|
|
12
|
-
console.log(`Rendered video to ${file}`);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
render();
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
/// <reference types="@revideo/core/project" />
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import {Video, Txt, makeScene2D} from '@revideo/2d';
|
|
2
|
-
import {
|
|
3
|
-
createRef,
|
|
4
|
-
Reference,
|
|
5
|
-
useScene, chain,
|
|
6
|
-
waitFor,
|
|
7
|
-
} from '@revideo/core';
|
|
8
|
-
|
|
9
|
-
export default makeScene2D(function* (view) {
|
|
10
|
-
const nodesObj = useScene().variables.get("nodes", {})() as Record<string, any>;
|
|
11
|
-
const nodes = new Map(Object.entries(nodesObj));
|
|
12
|
-
|
|
13
|
-
yield view.add(
|
|
14
|
-
<Video
|
|
15
|
-
src="https://revideo-example-assets.s3.amazonaws.com/stars.mp4"
|
|
16
|
-
size={"100%"}
|
|
17
|
-
key={'data-video'}
|
|
18
|
-
play={true}
|
|
19
|
-
/>
|
|
20
|
-
);
|
|
21
|
-
|
|
22
|
-
const refs: Array<Reference<Txt>> = [];
|
|
23
|
-
if (nodes.size > 0) {
|
|
24
|
-
for (const [key, node] of nodes) {
|
|
25
|
-
const ref = createRef<Txt>();
|
|
26
|
-
yield view.add(
|
|
27
|
-
<Txt
|
|
28
|
-
key={key}
|
|
29
|
-
text={node.text}
|
|
30
|
-
fontSize={100}
|
|
31
|
-
fontWeight={800}
|
|
32
|
-
fontFamily={"Roboto"}
|
|
33
|
-
fill={"white"}
|
|
34
|
-
x={() => node.x}
|
|
35
|
-
y={() => node.y}
|
|
36
|
-
ref={ref}
|
|
37
|
-
/>
|
|
38
|
-
)
|
|
39
|
-
refs.push(ref);
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
yield* waitFor(5);
|
|
44
|
-
});
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 0,
|
|
3
|
-
"shared": {
|
|
4
|
-
"background": null,
|
|
5
|
-
"range": [
|
|
6
|
-
0,
|
|
7
|
-
null
|
|
8
|
-
],
|
|
9
|
-
"size": {
|
|
10
|
-
"x": 1920,
|
|
11
|
-
"y": 1080
|
|
12
|
-
},
|
|
13
|
-
"audioOffset": 0
|
|
14
|
-
},
|
|
15
|
-
"preview": {
|
|
16
|
-
"fps": 30,
|
|
17
|
-
"resolutionScale": 1
|
|
18
|
-
},
|
|
19
|
-
"rendering": {
|
|
20
|
-
"fps": 30,
|
|
21
|
-
"resolutionScale": 1,
|
|
22
|
-
"colorSpace": "srgb",
|
|
23
|
-
"exporter": {
|
|
24
|
-
"name": "@revideo/core/wasm",
|
|
25
|
-
"options": {}
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
/// <reference types="@revideo/core/project" />
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
# Create Short Videos from Reddit Posts 🪄
|
|
2
|
-
|
|
3
|
-
This project uses [Revideo](https://github.com/redotvideo/revideo) to automatically generate short videos from Reddit Post urls. Here is a (low resolution) example generated from this [Reddit Post](https://www.reddit.com/r/careeradvice/comments/1bn9do3/how_do_i_leave_a_job_i_hate_but_its_comfortable/):
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
https://github.com/user-attachments/assets/485df630-7862-4862-affe-7f510279f1fa
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
<br/>
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
<br/>
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
Two code files do most of the heavy lifting here:
|
|
18
|
-
|
|
19
|
-
- `src/render.ts` is a node process that fetches the contents of the provided Reddit post url, generates a voiceover using [ElevenLabs](https://elevenlabs.io/), gets timestamps for the voiceover and organizes all of this metadata in `./metadata.json`. Finally, it calls `renderVideo` to render & export the project using a headless browser.
|
|
20
|
-
- `src/scenes/example.tsx` defines the animation flow and audio of our video
|
|
21
|
-
<br/>
|
|
22
|
-
<br/>
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
## Getting Started
|
|
27
|
-
|
|
28
|
-
First, you should clone the repository and install all dependencies:
|
|
29
|
-
|
|
30
|
-
```bash
|
|
31
|
-
git clone https://github.com/redotvideo/examples.git
|
|
32
|
-
cd reddit-post-video
|
|
33
|
-
npm install
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
You can now look at the example project using the editor:
|
|
37
|
-
|
|
38
|
-
```bash
|
|
39
|
-
npm start
|
|
40
|
-
```
|
|
41
|
-
<br/>
|
|
42
|
-
<br/>
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
## Create your own video
|
|
46
|
-
|
|
47
|
-
To create your own video, you should first set up API keys for ElevenLabs (to generate voiceovers) and Deepgram (to get timestamps for subtitles):
|
|
48
|
-
|
|
49
|
-
```
|
|
50
|
-
export ELEVEN_API_KEY=<your-elevenlabs-key>
|
|
51
|
-
export DEEPGRAM_API_KEY=<your-deepgram-key>
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
You now have two options: You can either directly render and export a video, or first generate its metadata and voiceover and preview in the editor before exporting.
|
|
56
|
-
|
|
57
|
-
#### Option 1: Generate metadata, preview and render in editor
|
|
58
|
-
|
|
59
|
-
To generate metadata, run the following command:
|
|
60
|
-
|
|
61
|
-
```bash
|
|
62
|
-
tsc && node dist/render.js --post <reddit-post-url> --onlyMetadata
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
This saves the voiceover to `./output/audio.wav` and your metadata to `./metadata.json`. You can now preview your video by starting the editor, and export your video by clicking the "Render" button in the browser:
|
|
66
|
-
|
|
67
|
-
```bash
|
|
68
|
-
npm start
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
#### Option 2: Render video through function call
|
|
72
|
-
|
|
73
|
-
If you don't want to preview, but render directly, you can omit the `--onlyMetadata` flag. This will call the `renderVideo` function:
|
|
74
|
-
|
|
75
|
-
```bash
|
|
76
|
-
tsc && node dist/src/renderScript.js --post <reddit-post-url>
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
#### Additional parameters
|
|
80
|
-
|
|
81
|
-
You can modify the text color and voice of your video using the following flags:
|
|
82
|
-
|
|
83
|
-
- `--voice Daniel`: default is Sarah
|
|
84
|
-
- `--textcolor yellow`: default is red
|