devrel-toolkit 0.1.0 → 0.1.2
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/dist/cli/render.d.ts.map +1 -1
- package/dist/cli/render.js +46 -4
- package/dist/cli/render.js.map +1 -1
- package/dist/compositor/DemoVideo.d.ts.map +1 -1
- package/dist/compositor/DemoVideo.js +9 -7
- package/dist/compositor/DemoVideo.js.map +1 -1
- package/dist/compositor/components/AvatarPiP.d.ts.map +1 -1
- package/dist/compositor/components/AvatarPiP.js +2 -2
- package/dist/compositor/components/AvatarPiP.js.map +1 -1
- package/dist/compositor/components/BrowserFrame.d.ts.map +1 -1
- package/dist/compositor/components/BrowserFrame.js +2 -2
- package/dist/compositor/components/BrowserFrame.js.map +1 -1
- package/dist/compositor/components/IntroOutro.d.ts.map +1 -1
- package/dist/compositor/components/IntroOutro.js +2 -2
- package/dist/compositor/components/IntroOutro.js.map +1 -1
- package/dist/utils/schema.d.ts +1 -0
- package/dist/utils/schema.d.ts.map +1 -1
- package/dist/utils/schema.js +1 -0
- package/dist/utils/schema.js.map +1 -1
- package/package.json +1 -1
- package/skills/make-demo/SKILL.md +101 -59
package/dist/cli/render.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/cli/render.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/cli/render.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AA6KzC,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAoB5D;AAED,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAa7D"}
|
package/dist/cli/render.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { readFileSync, existsSync } from "node:fs";
|
|
2
|
-
import { resolve, dirname } from "node:path";
|
|
1
|
+
import { readFileSync, existsSync, mkdirSync, copyFileSync, rmSync } from "node:fs";
|
|
2
|
+
import { resolve, dirname, basename, join } from "node:path";
|
|
3
3
|
import { fileURLToPath } from "node:url";
|
|
4
|
+
import { tmpdir } from "node:os";
|
|
4
5
|
import { RenderPropsSchema } from "../utils/schema.js";
|
|
5
6
|
const __dirname = dirname(fileURLToPath(import.meta.url));
|
|
6
7
|
async function doRender(opts) {
|
|
@@ -27,6 +28,9 @@ async function doRender(opts) {
|
|
|
27
28
|
missingFiles.push(`Avatar clip: ${scene.avatarClipPath} (scene: ${scene.id})`);
|
|
28
29
|
}
|
|
29
30
|
}
|
|
31
|
+
if (inputProps.avatarClipPath && !existsSync(inputProps.avatarClipPath)) {
|
|
32
|
+
missingFiles.push(`Avatar clip: ${inputProps.avatarClipPath}`);
|
|
33
|
+
}
|
|
30
34
|
if (inputProps.backgroundMusic && !existsSync(inputProps.backgroundMusic)) {
|
|
31
35
|
missingFiles.push(`Background music: ${inputProps.backgroundMusic}`);
|
|
32
36
|
}
|
|
@@ -54,11 +58,42 @@ async function doRender(opts) {
|
|
|
54
58
|
const outputPath = resolve(opts.output);
|
|
55
59
|
const isTransparent = opts.transparent === true;
|
|
56
60
|
const codec = isTransparent ? "prores" : (opts.codec ?? "h264");
|
|
57
|
-
|
|
58
|
-
//
|
|
61
|
+
// Copy all referenced assets (screenshots, avatar clips, music) into a temp
|
|
62
|
+
// public directory. Remotion serves assets from publicDir — absolute filesystem
|
|
63
|
+
// paths don't work in the browser-based renderer.
|
|
64
|
+
const publicDir = join(tmpdir(), `devrel-toolkit-assets-${Date.now()}`);
|
|
65
|
+
mkdirSync(publicDir, { recursive: true });
|
|
66
|
+
let fileCounter = 0;
|
|
67
|
+
function copyAsset(absolutePath) {
|
|
68
|
+
const name = `${fileCounter++}-${basename(absolutePath)}`;
|
|
69
|
+
copyFileSync(absolutePath, join(publicDir, name));
|
|
70
|
+
return name; // just the filename — Remotion resolves it from publicDir
|
|
71
|
+
}
|
|
72
|
+
console.log("\nCopying assets...");
|
|
73
|
+
for (const scene of inputProps.scenes) {
|
|
74
|
+
scene.screenshotPath = copyAsset(scene.screenshotPath);
|
|
75
|
+
if (scene.avatarClipPath) {
|
|
76
|
+
scene.avatarClipPath = copyAsset(scene.avatarClipPath);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
if (inputProps.avatarClipPath) {
|
|
80
|
+
inputProps.avatarClipPath = copyAsset(inputProps.avatarClipPath);
|
|
81
|
+
}
|
|
82
|
+
if (inputProps.backgroundMusic) {
|
|
83
|
+
inputProps.backgroundMusic = copyAsset(inputProps.backgroundMusic);
|
|
84
|
+
}
|
|
85
|
+
if (inputProps.intro?.logoPath) {
|
|
86
|
+
inputProps.intro.logoPath = copyAsset(inputProps.intro.logoPath);
|
|
87
|
+
}
|
|
88
|
+
if (inputProps.outro?.logoPath) {
|
|
89
|
+
inputProps.outro.logoPath = copyAsset(inputProps.outro.logoPath);
|
|
90
|
+
}
|
|
91
|
+
console.log("Bundling Remotion project...");
|
|
92
|
+
// Bundle the compositor entry point with the temp publicDir
|
|
59
93
|
const entryPoint = resolve(__dirname, "../compositor/index.js");
|
|
60
94
|
const bundleLocation = await bundle({
|
|
61
95
|
entryPoint,
|
|
96
|
+
publicDir,
|
|
62
97
|
webpackOverride: (config) => config,
|
|
63
98
|
});
|
|
64
99
|
console.log("Selecting composition...");
|
|
@@ -94,6 +129,13 @@ async function doRender(opts) {
|
|
|
94
129
|
},
|
|
95
130
|
});
|
|
96
131
|
console.log(`\r Rendering: 100%`);
|
|
132
|
+
// Clean up temp assets directory
|
|
133
|
+
try {
|
|
134
|
+
rmSync(publicDir, { recursive: true, force: true });
|
|
135
|
+
}
|
|
136
|
+
catch {
|
|
137
|
+
// Ignore cleanup errors
|
|
138
|
+
}
|
|
97
139
|
console.log(`\nOutput: ${outputPath}\n`);
|
|
98
140
|
}
|
|
99
141
|
export function registerRenderCommand(program) {
|
package/dist/cli/render.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"render.js","sourceRoot":"","sources":["../../src/cli/render.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"render.js","sourceRoot":"","sources":["../../src/cli/render.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DemoVideo.d.ts","sourceRoot":"","sources":["../../src/compositor/DemoVideo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAuBtD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,
|
|
1
|
+
{"version":3,"file":"DemoVideo.d.ts","sourceRoot":"","sources":["../../src/compositor/DemoVideo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAuBtD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmG3C,CAAC"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React from "react";
|
|
3
|
-
import { AbsoluteFill, interpolate, useVideoConfig } from "remotion";
|
|
3
|
+
import { AbsoluteFill, staticFile, interpolate, useVideoConfig } from "remotion";
|
|
4
4
|
import { Audio } from "@remotion/media";
|
|
5
5
|
import { TransitionSeries, linearTiming } from "@remotion/transitions";
|
|
6
6
|
import { fade } from "@remotion/transitions/fade";
|
|
7
7
|
import { slide } from "@remotion/transitions/slide";
|
|
8
|
+
import { calculateTotalFrames } from "./timing.js";
|
|
8
9
|
import { BrowserFrame } from "./components/BrowserFrame.js";
|
|
9
10
|
import { Highlight } from "./components/Highlight.js";
|
|
10
11
|
import { AvatarPiP } from "./components/AvatarPiP.js";
|
|
@@ -24,7 +25,7 @@ function getPresentation(type) {
|
|
|
24
25
|
}
|
|
25
26
|
}
|
|
26
27
|
export const DemoVideo = (props) => {
|
|
27
|
-
const { scenes, fps, avatarPosition = "bottom-right", avatarSize = 280, showSubtitles = true, intro, outro, backgroundMusic, } = props;
|
|
28
|
+
const { scenes, fps, avatarPosition = "bottom-right", avatarSize = 280, avatarClipPath, showSubtitles = true, intro, outro, backgroundMusic, } = props;
|
|
28
29
|
if (scenes.length === 0 && !intro && !outro) {
|
|
29
30
|
return _jsx(AbsoluteFill, { style: { backgroundColor: "#000" } });
|
|
30
31
|
}
|
|
@@ -35,17 +36,18 @@ export const DemoVideo = (props) => {
|
|
|
35
36
|
? Math.ceil((outro.durationSeconds ?? INTRO_OUTRO_DEFAULT_SECONDS) * fps)
|
|
36
37
|
: 0;
|
|
37
38
|
const transitionFrames = Math.ceil(TRANSITION_DURATION_FRAMES * (fps / 30));
|
|
39
|
+
const totalFrames = introFrames + calculateTotalFrames(props) + outroFrames;
|
|
38
40
|
return (_jsxs(AbsoluteFill, { style: { backgroundColor: "#000" }, children: [backgroundMusic && _jsx(BackgroundMusic, { src: backgroundMusic }), _jsxs(TransitionSeries, { children: [intro && (_jsxs(_Fragment, { children: [_jsx(TransitionSeries.Sequence, { durationInFrames: introFrames, premountFor: Math.ceil(fps * 0.5), children: _jsx(IntroOutroCard, { data: intro, type: "intro", durationFrames: introFrames }) }), scenes.length > 0 && (_jsx(TransitionSeries.Transition, { presentation: fade(), timing: linearTiming({ durationInFrames: transitionFrames }) }))] })), scenes.map((scene, index) => {
|
|
39
41
|
const sceneDurationFrames = Math.ceil(scene.avatarDuration * fps);
|
|
40
42
|
const nextScene = scenes[index + 1];
|
|
41
|
-
return (_jsxs(React.Fragment, { children: [_jsx(TransitionSeries.Sequence, { durationInFrames: sceneDurationFrames, premountFor: Math.ceil(fps * 0.5), children: _jsx(SceneContent, { scene: scene, durationFrames: sceneDurationFrames, avatarPosition: avatarPosition, avatarSize: avatarSize, showSubtitles: showSubtitles }) }), (nextScene || outro) && scene.transition !== "cut" && nextScene?.transition !== "cut" && (_jsx(TransitionSeries.Transition, { presentation: getPresentation(nextScene?.transition ?? "fade") ?? fade(), timing: linearTiming({ durationInFrames: transitionFrames }) }))] }, scene.id));
|
|
42
|
-
}), outro && (_jsx(TransitionSeries.Sequence, { durationInFrames: outroFrames, premountFor: Math.ceil(fps * 0.5), children: _jsx(IntroOutroCard, { data: outro, type: "outro", durationFrames: outroFrames }) }))] })] }));
|
|
43
|
+
return (_jsxs(React.Fragment, { children: [_jsx(TransitionSeries.Sequence, { durationInFrames: sceneDurationFrames, premountFor: Math.ceil(fps * 0.5), children: _jsx(SceneContent, { scene: scene, durationFrames: sceneDurationFrames, avatarPosition: avatarPosition, avatarSize: avatarSize, showSubtitles: showSubtitles, compositionHasAvatar: !!avatarClipPath }) }), (nextScene || outro) && scene.transition !== "cut" && nextScene?.transition !== "cut" && (_jsx(TransitionSeries.Transition, { presentation: getPresentation(nextScene?.transition ?? "fade") ?? fade(), timing: linearTiming({ durationInFrames: transitionFrames }) }))] }, scene.id));
|
|
44
|
+
}), outro && (_jsx(TransitionSeries.Sequence, { durationInFrames: outroFrames, premountFor: Math.ceil(fps * 0.5), children: _jsx(IntroOutroCard, { data: outro, type: "outro", durationFrames: outroFrames }) }))] }), avatarClipPath && (_jsx(AvatarPiP, { clipPath: avatarClipPath, position: avatarPosition, size: avatarSize, durationFrames: totalFrames }))] }));
|
|
43
45
|
};
|
|
44
46
|
/**
|
|
45
47
|
* Scene content — renders all layers for a single scene.
|
|
46
48
|
*/
|
|
47
|
-
const SceneContent = ({ scene, durationFrames, avatarPosition, avatarSize, showSubtitles }) => {
|
|
48
|
-
return (_jsxs(AbsoluteFill, { children: [_jsx(BrowserFrame, { screenshotPath: scene.screenshotPath, url: scene.url, zoom: scene.zoom, durationFrames: durationFrames }), scene.highlights.length > 0 && (_jsx(Highlight, { highlights: scene.highlights, durationFrames: durationFrames })), scene.cursorPath && scene.cursorPath.length > 0 && (_jsx(Cursor, { cursorPath: scene.cursorPath, durationFrames: durationFrames })), scene.avatarClipPath && (_jsx(AvatarPiP, { clipPath: scene.avatarClipPath, position: avatarPosition, size: avatarSize, durationFrames: durationFrames })), showSubtitles && scene.narration && (_jsx(Subtitles, { text: scene.narration, durationFrames: durationFrames, visible: true }))] }));
|
|
49
|
+
const SceneContent = ({ scene, durationFrames, avatarPosition, avatarSize, showSubtitles, compositionHasAvatar }) => {
|
|
50
|
+
return (_jsxs(AbsoluteFill, { children: [_jsx(BrowserFrame, { screenshotPath: scene.screenshotPath, url: scene.url, zoom: scene.zoom, durationFrames: durationFrames }), scene.highlights.length > 0 && (_jsx(Highlight, { highlights: scene.highlights, durationFrames: durationFrames })), scene.cursorPath && scene.cursorPath.length > 0 && (_jsx(Cursor, { cursorPath: scene.cursorPath, durationFrames: durationFrames })), scene.avatarClipPath && !compositionHasAvatar && (_jsx(AvatarPiP, { clipPath: scene.avatarClipPath, position: avatarPosition, size: avatarSize, durationFrames: durationFrames })), showSubtitles && scene.narration && (_jsx(Subtitles, { text: scene.narration, durationFrames: durationFrames, visible: true }))] }));
|
|
49
51
|
};
|
|
50
52
|
/**
|
|
51
53
|
* Background music with fade in/out and low volume.
|
|
@@ -56,7 +58,7 @@ const BackgroundMusic = ({ src }) => {
|
|
|
56
58
|
const fadeIn = Math.ceil(2 * fps);
|
|
57
59
|
const fadeOut = Math.ceil(2 * fps);
|
|
58
60
|
const total = durationInFrames;
|
|
59
|
-
return (_jsx(Audio, { src: src, volume: (f) => interpolate(f, [0, fadeIn, total - fadeOut, total], [0, 0.15, 0.15, 0], {
|
|
61
|
+
return (_jsx(Audio, { src: staticFile(src), volume: (f) => interpolate(f, [0, fadeIn, total - fadeOut, total], [0, 0.15, 0.15, 0], {
|
|
60
62
|
extrapolateLeft: "clamp",
|
|
61
63
|
extrapolateRight: "clamp",
|
|
62
64
|
}) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DemoVideo.js","sourceRoot":"","sources":["../../src/compositor/DemoVideo.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAY,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"DemoVideo.js","sourceRoot":"","sources":["../../src/compositor/DemoVideo.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarPiP.d.ts","sourceRoot":"","sources":["../../../src/compositor/components/AvatarPiP.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"AvatarPiP.d.ts","sourceRoot":"","sources":["../../../src/compositor/components/AvatarPiP.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,UAAU,cAAc;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,CAAC;IACpE,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,EAAE,MAAM,CAAC;CACxB;AA0BD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoD9C,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { interpolate, spring, useCurrentFrame, useVideoConfig, } from "remotion";
|
|
2
|
+
import { staticFile, interpolate, spring, useCurrentFrame, useVideoConfig, } from "remotion";
|
|
3
3
|
import { Video } from "@remotion/media";
|
|
4
4
|
const MARGIN = 24;
|
|
5
5
|
function getPositionStyle(position, size) {
|
|
@@ -43,7 +43,7 @@ export const AvatarPiP = ({ clipPath, position, size, durationFrames, }) => {
|
|
|
43
43
|
opacity,
|
|
44
44
|
boxShadow: "0 4px 20px rgba(0, 0, 0, 0.3)",
|
|
45
45
|
border: "3px solid rgba(255, 255, 255, 0.8)",
|
|
46
|
-
}, children: _jsx(Video, { src: clipPath, style: {
|
|
46
|
+
}, children: _jsx(Video, { src: staticFile(clipPath), style: {
|
|
47
47
|
width: "100%",
|
|
48
48
|
height: "100%",
|
|
49
49
|
objectFit: "cover",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarPiP.js","sourceRoot":"","sources":["../../../src/compositor/components/AvatarPiP.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,WAAW,EACX,MAAM,EACN,eAAe,EACf,cAAc,GACf,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AASxC,MAAM,MAAM,GAAG,EAAE,CAAC;AAElB,SAAS,gBAAgB,CACvB,QAAoC,EACpC,IAAY;IAEZ,MAAM,IAAI,GAAwB;QAChC,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,IAAI;KACb,CAAC;IAEF,QAAQ,QAAQ,EAAE,CAAC;QACjB,KAAK,cAAc;YACjB,OAAO,EAAE,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QACpD,KAAK,aAAa;YAChB,OAAO,EAAE,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;QACnD,KAAK,WAAW;YACd,OAAO,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,yBAAyB;QAChF,KAAK,UAAU;YACb,OAAO,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;IACvD,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAA6B,CAAC,EAClD,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,cAAc,GACf,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,EAAE,GAAG,EAAE,GAAG,cAAc,EAAE,CAAC;IAEjC,IAAI,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE3B,yCAAyC;IACzC,MAAM,aAAa,GAAG,MAAM,CAAC;QAC3B,GAAG;QACH,KAAK,EAAE,KAAK,GAAG,CAAC;QAChB,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE;QACvC,gBAAgB,EAAE,EAAE;KACrB,CAAC,CAAC;IAEH,mCAAmC;IACnC,MAAM,WAAW,GAAG,WAAW,CAC7B,KAAK,EACL,CAAC,cAAc,GAAG,EAAE,EAAE,cAAc,CAAC,EACrC,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,EAAE,eAAe,EAAE,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,CACxD,CAAC;IAEF,MAAM,OAAO,GAAG,WAAW,CAAC;IAC5B,MAAM,KAAK,GAAG,aAAa,CAAC;IAE5B,OAAO,CACL,cACE,KAAK,EAAE;YACL,GAAG,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC;YACnC,YAAY,EAAE,EAAE;YAChB,QAAQ,EAAE,QAAQ;YAClB,SAAS,EAAE,SAAS,KAAK,GAAG;YAC5B,OAAO;YACP,SAAS,EAAE,+BAA+B;YAC1C,MAAM,EAAE,oCAAoC;SAC7C,YAED,KAAC,KAAK,IACJ,GAAG,EAAE,QAAQ,
|
|
1
|
+
{"version":3,"file":"AvatarPiP.js","sourceRoot":"","sources":["../../../src/compositor/components/AvatarPiP.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,UAAU,EACV,WAAW,EACX,MAAM,EACN,eAAe,EACf,cAAc,GACf,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AASxC,MAAM,MAAM,GAAG,EAAE,CAAC;AAElB,SAAS,gBAAgB,CACvB,QAAoC,EACpC,IAAY;IAEZ,MAAM,IAAI,GAAwB;QAChC,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,IAAI;KACb,CAAC;IAEF,QAAQ,QAAQ,EAAE,CAAC;QACjB,KAAK,cAAc;YACjB,OAAO,EAAE,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QACpD,KAAK,aAAa;YAChB,OAAO,EAAE,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;QACnD,KAAK,WAAW;YACd,OAAO,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,yBAAyB;QAChF,KAAK,UAAU;YACb,OAAO,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;IACvD,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAA6B,CAAC,EAClD,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,cAAc,GACf,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,EAAE,GAAG,EAAE,GAAG,cAAc,EAAE,CAAC;IAEjC,IAAI,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE3B,yCAAyC;IACzC,MAAM,aAAa,GAAG,MAAM,CAAC;QAC3B,GAAG;QACH,KAAK,EAAE,KAAK,GAAG,CAAC;QAChB,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE;QACvC,gBAAgB,EAAE,EAAE;KACrB,CAAC,CAAC;IAEH,mCAAmC;IACnC,MAAM,WAAW,GAAG,WAAW,CAC7B,KAAK,EACL,CAAC,cAAc,GAAG,EAAE,EAAE,cAAc,CAAC,EACrC,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,EAAE,eAAe,EAAE,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,CACxD,CAAC;IAEF,MAAM,OAAO,GAAG,WAAW,CAAC;IAC5B,MAAM,KAAK,GAAG,aAAa,CAAC;IAE5B,OAAO,CACL,cACE,KAAK,EAAE;YACL,GAAG,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC;YACnC,YAAY,EAAE,EAAE;YAChB,QAAQ,EAAE,QAAQ;YAClB,SAAS,EAAE,SAAS,KAAK,GAAG;YAC5B,OAAO;YACP,SAAS,EAAE,+BAA+B;YAC1C,MAAM,EAAE,oCAAoC;SAC7C,YAED,KAAC,KAAK,IACJ,GAAG,EAAE,UAAU,CAAC,QAAQ,CAAC,EACzB,KAAK,EAAE;gBACL,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,SAAS,EAAE,OAAO;aACnB,GACD,GACE,CACP,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BrowserFrame.d.ts","sourceRoot":"","sources":["../../../src/compositor/components/BrowserFrame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"BrowserFrame.d.ts","sourceRoot":"","sources":["../../../src/compositor/components/BrowserFrame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,UAAU,iBAAiB;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE;QACL,IAAI,EAAE;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,CAAC;QAC9D,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAiJpD,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { AbsoluteFill, Img, interpolate, spring, useCurrentFrame, useVideoConfig, } from "remotion";
|
|
2
|
+
import { AbsoluteFill, Img, staticFile, interpolate, spring, useCurrentFrame, useVideoConfig, } from "remotion";
|
|
3
3
|
export const BrowserFrame = ({ screenshotPath, url, zoom, durationFrames, }) => {
|
|
4
4
|
const frame = useCurrentFrame();
|
|
5
5
|
const { fps, width, height } = useVideoConfig();
|
|
@@ -88,7 +88,7 @@ export const BrowserFrame = ({ screenshotPath, url, zoom, durationFrames, }) =>
|
|
|
88
88
|
height: "100%",
|
|
89
89
|
transform: `scale(${scale}) translate(${translateX / scale}px, ${translateY / scale}px)`,
|
|
90
90
|
transformOrigin: "center center",
|
|
91
|
-
}, children: _jsx(Img, { src: screenshotPath, style: {
|
|
91
|
+
}, children: _jsx(Img, { src: staticFile(screenshotPath), style: {
|
|
92
92
|
width: "100%",
|
|
93
93
|
height: "100%",
|
|
94
94
|
objectFit: "cover",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BrowserFrame.js","sourceRoot":"","sources":["../../../src/compositor/components/BrowserFrame.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"BrowserFrame.js","sourceRoot":"","sources":["../../../src/compositor/components/BrowserFrame.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IntroOutro.d.ts","sourceRoot":"","sources":["../../../src/compositor/components/IntroOutro.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"IntroOutro.d.ts","sourceRoot":"","sources":["../../../src/compositor/components/IntroOutro.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAExD,UAAU,eAAe;IACvB,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,OAAO,GAAG,OAAO,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAiFpD,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { AbsoluteFill, Img, interpolate, spring, useCurrentFrame, useVideoConfig, } from "remotion";
|
|
2
|
+
import { AbsoluteFill, Img, staticFile, interpolate, spring, useCurrentFrame, useVideoConfig, } from "remotion";
|
|
3
3
|
export const IntroOutroCard = ({ data, type, durationFrames }) => {
|
|
4
4
|
const frame = useCurrentFrame();
|
|
5
5
|
const { fps } = useVideoConfig();
|
|
@@ -22,7 +22,7 @@ export const IntroOutroCard = ({ data, type, durationFrames }) => {
|
|
|
22
22
|
justifyContent: "center",
|
|
23
23
|
alignItems: "center",
|
|
24
24
|
opacity: exitOpacity,
|
|
25
|
-
}, children: [data.logoPath && (_jsx(Img, { src: data.logoPath, style: {
|
|
25
|
+
}, children: [data.logoPath && (_jsx(Img, { src: staticFile(data.logoPath), style: {
|
|
26
26
|
width: 80,
|
|
27
27
|
height: 80,
|
|
28
28
|
marginBottom: 24,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IntroOutro.js","sourceRoot":"","sources":["../../../src/compositor/components/IntroOutro.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,YAAY,EACZ,GAAG,EACH,WAAW,EACX,MAAM,EACN,eAAe,EACf,cAAc,GACf,MAAM,UAAU,CAAC;AASlB,MAAM,CAAC,MAAM,cAAc,GAA8B,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE,EAAE;IAC1F,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,EAAE,GAAG,EAAE,GAAG,cAAc,EAAE,CAAC;IAEjC,iBAAiB;IACjB,MAAM,UAAU,GAAG,MAAM,CAAC;QACxB,GAAG;QACH,KAAK,EAAE,KAAK,GAAG,EAAE;QACjB,MAAM,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;QACxB,gBAAgB,EAAE,EAAE;KACrB,CAAC,CAAC;IAEH,mBAAmB;IACnB,MAAM,eAAe,GAAG,WAAW,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE;QAC3D,eAAe,EAAE,OAAO;QACxB,gBAAgB,EAAE,OAAO;KAC1B,CAAC,CAAC;IAEH,iFAAiF;IACjF,MAAM,WAAW,GAAG,WAAW,CAC7B,KAAK,EACL,CAAC,cAAc,GAAG,EAAE,EAAE,cAAc,CAAC,EACrC,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,EAAE,eAAe,EAAE,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,CACxD,CAAC;IAEF,OAAO,CACL,MAAC,YAAY,IACX,KAAK,EAAE;YACL,eAAe,EAAE,SAAS;YAC1B,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,WAAW;SACrB,aAGA,IAAI,CAAC,QAAQ,IAAI,CAChB,KAAC,GAAG,IACF,GAAG,EAAE,IAAI,CAAC,QAAQ,
|
|
1
|
+
{"version":3,"file":"IntroOutro.js","sourceRoot":"","sources":["../../../src/compositor/components/IntroOutro.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,YAAY,EACZ,GAAG,EACH,UAAU,EACV,WAAW,EACX,MAAM,EACN,eAAe,EACf,cAAc,GACf,MAAM,UAAU,CAAC;AASlB,MAAM,CAAC,MAAM,cAAc,GAA8B,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE,EAAE;IAC1F,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,EAAE,GAAG,EAAE,GAAG,cAAc,EAAE,CAAC;IAEjC,iBAAiB;IACjB,MAAM,UAAU,GAAG,MAAM,CAAC;QACxB,GAAG;QACH,KAAK,EAAE,KAAK,GAAG,EAAE;QACjB,MAAM,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;QACxB,gBAAgB,EAAE,EAAE;KACrB,CAAC,CAAC;IAEH,mBAAmB;IACnB,MAAM,eAAe,GAAG,WAAW,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE;QAC3D,eAAe,EAAE,OAAO;QACxB,gBAAgB,EAAE,OAAO;KAC1B,CAAC,CAAC;IAEH,iFAAiF;IACjF,MAAM,WAAW,GAAG,WAAW,CAC7B,KAAK,EACL,CAAC,cAAc,GAAG,EAAE,EAAE,cAAc,CAAC,EACrC,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,EAAE,eAAe,EAAE,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,CACxD,CAAC;IAEF,OAAO,CACL,MAAC,YAAY,IACX,KAAK,EAAE;YACL,eAAe,EAAE,SAAS;YAC1B,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,WAAW;SACrB,aAGA,IAAI,CAAC,QAAQ,IAAI,CAChB,KAAC,GAAG,IACF,GAAG,EAAE,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,EAC9B,KAAK,EAAE;oBACL,KAAK,EAAE,EAAE;oBACT,MAAM,EAAE,EAAE;oBACV,YAAY,EAAE,EAAE;oBAChB,OAAO,EAAE,eAAe;iBACzB,GACD,CACH,EAGD,cACE,KAAK,EAAE;oBACL,QAAQ,EAAE,EAAE;oBACZ,UAAU,EAAE,GAAG;oBACf,KAAK,EAAE,MAAM;oBACb,UAAU,EAAE,sCAAsC;oBAClD,SAAS,EAAE,SAAS,UAAU,GAAG;oBACjC,SAAS,EAAE,QAAQ;oBACnB,QAAQ,EAAE,KAAK;iBAChB,YAEA,IAAI,CAAC,KAAK,GACP,EAGL,IAAI,CAAC,QAAQ,IAAI,CAChB,cACE,KAAK,EAAE;oBACL,QAAQ,EAAE,EAAE;oBACZ,KAAK,EAAE,0BAA0B;oBACjC,UAAU,EAAE,sCAAsC;oBAClD,SAAS,EAAE,EAAE;oBACb,OAAO,EAAE,eAAe;oBACxB,SAAS,EAAE,QAAQ;oBACnB,QAAQ,EAAE,KAAK;iBAChB,YAEA,IAAI,CAAC,QAAQ,GACV,CACP,IACY,CAChB,CAAC;AACJ,CAAC,CAAC"}
|
package/dist/utils/schema.d.ts
CHANGED
|
@@ -244,6 +244,7 @@ export declare const RenderPropsSchema: z.ZodObject<{
|
|
|
244
244
|
"top-left": "top-left";
|
|
245
245
|
}>>;
|
|
246
246
|
avatarSize: z.ZodOptional<z.ZodNumber>;
|
|
247
|
+
avatarClipPath: z.ZodOptional<z.ZodString>;
|
|
247
248
|
showSubtitles: z.ZodOptional<z.ZodBoolean>;
|
|
248
249
|
intro: z.ZodOptional<z.ZodObject<{
|
|
249
250
|
title: z.ZodString;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../src/utils/schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAIxB,eAAO,MAAM,oBAAoB;;;;;;;;;;;;iBAK/B,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;iBAI1B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;iBAG3B,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAQtB,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAU3B,CAAC;AAIH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;iBAShC,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;iBAQ3B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;iBAI5B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAY5B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;iBAK3B,CAAC;AAEH,eAAO,MAAM,iBAAiB
|
|
1
|
+
{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../src/utils/schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAIxB,eAAO,MAAM,oBAAoB;;;;;;;;;;;;iBAK/B,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;iBAI1B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;iBAG3B,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAQtB,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAU3B,CAAC;AAIH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;iBAShC,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;iBAQ3B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;iBAI5B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAY5B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;iBAK3B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAgB5B,CAAC;AAIH,MAAM,MAAM,cAAc,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAClE,MAAM,MAAM,SAAS,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,eAAe,CAAC,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC1D,MAAM,MAAM,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,WAAW,CAAC,CAAC;AAChD,MAAM,MAAM,UAAU,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE1D,MAAM,MAAM,eAAe,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACpE,MAAM,MAAM,UAAU,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC5D,MAAM,MAAM,WAAW,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC5D,MAAM,MAAM,UAAU,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,iBAAiB,CAAC,CAAC"}
|
package/dist/utils/schema.js
CHANGED
|
@@ -90,6 +90,7 @@ export const RenderPropsSchema = z.object({
|
|
|
90
90
|
.enum(["bottom-right", "bottom-left", "top-right", "top-left"])
|
|
91
91
|
.optional(),
|
|
92
92
|
avatarSize: z.number().optional(),
|
|
93
|
+
avatarClipPath: z.string().optional(),
|
|
93
94
|
showSubtitles: z.boolean().optional(),
|
|
94
95
|
intro: IntroOutroSchema.optional(),
|
|
95
96
|
outro: IntroOutroSchema.optional(),
|
package/dist/utils/schema.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../src/utils/schema.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../src/utils/schema.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: make-demo
|
|
3
|
-
description:
|
|
3
|
+
description: >
|
|
4
|
+
Create professional product demo videos with AI avatar presenter.
|
|
5
|
+
Use when the user wants to record a product demo, create a video walkthrough,
|
|
6
|
+
showcase app features, or generate a DevRel-style demo video. Analyzes your
|
|
7
|
+
codebase, captures browser screenshots, generates D-ID avatar narration, and
|
|
8
|
+
composites everything into a polished MP4.
|
|
4
9
|
---
|
|
5
10
|
|
|
6
11
|
# /make-demo — Product Demo Video Creator
|
|
@@ -29,28 +34,17 @@ Parse the invocation:
|
|
|
29
34
|
|
|
30
35
|
### Step 0: Verify Dependencies
|
|
31
36
|
|
|
32
|
-
Run the toolkit's setup check first:
|
|
33
|
-
|
|
34
37
|
```bash
|
|
35
38
|
npx devrel-toolkit doctor
|
|
36
39
|
```
|
|
37
40
|
|
|
38
|
-
If any checks fail, run
|
|
39
|
-
|
|
40
|
-
```bash
|
|
41
|
-
npx devrel-toolkit setup
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
This installs browser-use CLI (via its official installer), FFmpeg, and validates your D-ID API key.
|
|
41
|
+
If any checks fail, run `npx devrel-toolkit setup`.
|
|
45
42
|
|
|
46
|
-
**
|
|
47
|
-
```bash
|
|
48
|
-
curl -fsSL https://browser-use.com/cli/install.sh | bash
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
Do NOT use `pip install browser-use` — that is NOT the CLI. The pip package is the Python SDK, not the command-line tool.
|
|
43
|
+
**Browser automation**: You MUST use `browser-use` CLI for all browser interactions (screenshots, clicks, element detection). Do NOT use Playwright, Puppeteer, or write custom browser scripts. browser-use CLI is the required tool. Only fall back to Playwright if browser-use is genuinely not installed and cannot be installed.
|
|
52
44
|
|
|
53
|
-
If
|
|
45
|
+
**D-ID API key**: Check if `DID_API_KEY` is set (in `.env.local` or environment). If it is NOT set and the user did NOT pass `--no-avatar`:
|
|
46
|
+
- Ask the user: "I need a D-ID API key to generate the avatar presenter. You can get one at https://studio.d-id.com. Would you like to provide your key, or should I skip the avatar and create a video without a presenter?"
|
|
47
|
+
- Do NOT silently skip avatar generation. Always ask.
|
|
54
48
|
|
|
55
49
|
### Step 1: Understand the App
|
|
56
50
|
|
|
@@ -66,13 +60,14 @@ If browser-use is unavailable after setup, fall back to Playwright for browser a
|
|
|
66
60
|
|
|
67
61
|
### Step 2: Plan the Demo
|
|
68
62
|
|
|
69
|
-
|
|
63
|
+
Plan the demo based on the user's prompt. If the user gave a detailed description of what they want, build on top of it — improve pacing, narration, and structure, but don't discard their intent. If the prompt is brief, use your codebase knowledge to decide what to show and how.
|
|
64
|
+
|
|
65
|
+
You have two tools for creating scenes — use whichever makes sense for each part of the video:
|
|
66
|
+
|
|
67
|
+
- **App footage** — capture screenshots of the real app UI via browser-use. Good for showing the actual product.
|
|
68
|
+
- **Custom Remotion animations** — write React components for motion graphics, flow diagrams, explainers, or anything that communicates better with animation than a static screenshot. Render them to MP4 clips.
|
|
70
69
|
|
|
71
|
-
|
|
72
|
-
- Write **natural, conversational narration** for each scene (30–60 words per scene)
|
|
73
|
-
- Determine **navigation steps** for each scene (which pages to visit, what to click, what to type)
|
|
74
|
-
- Identify **elements to highlight** (buttons, forms, charts) and **zoom targets**
|
|
75
|
-
- Choose **transitions** between scenes (`fade` for most, `slide` for page changes, `cut` for quick switches)
|
|
70
|
+
You decide the scene count, scene types, narration, zoom targets, and pacing. Mix app footage and custom animations however best serves the demo.
|
|
76
71
|
|
|
77
72
|
Produce a `demo-script.json` file:
|
|
78
73
|
|
|
@@ -92,9 +87,7 @@ Produce a `demo-script.json` file:
|
|
|
92
87
|
{ "action": "goto", "target": "http://localhost:3000" },
|
|
93
88
|
{ "action": "wait", "value": "2000" }
|
|
94
89
|
],
|
|
95
|
-
"highlights": [
|
|
96
|
-
{ "selector": ".cta-button", "style": "glow", "color": "#4A90D9" }
|
|
97
|
-
],
|
|
90
|
+
"highlights": [],
|
|
98
91
|
"zoom": { "selector": ".hero-section", "level": 1.5 },
|
|
99
92
|
"transition": "fade"
|
|
100
93
|
}
|
|
@@ -130,34 +123,78 @@ browser-use screenshot --full ./demo-work/screenshots/scene-<id>.png # full pag
|
|
|
130
123
|
browser-use get bbox <index> # Returns { x, y, width, height }
|
|
131
124
|
```
|
|
132
125
|
|
|
133
|
-
Save all screenshots and record bounding box data for
|
|
126
|
+
Save all screenshots and record bounding box data for zoom targets.
|
|
127
|
+
|
|
128
|
+
**CRITICAL — Bounding boxes**: You MUST use `browser-use get bbox <index>` to get exact bounding box coordinates for every zoom target. NEVER guess or estimate bbox values. Wrong coordinates cause the zoom to frame empty space or cut off content. Run `browser-use state` to find the element index, then `browser-use get bbox <index>` to get the precise `{ x, y, width, height }`.
|
|
129
|
+
|
|
130
|
+
**Zoom framing**: The zoom bbox should include some padding around the target element (add ~50px on each side) so content isn't clipped at the edges. The zoom `level` controls magnification — use 1.3-1.5 for sections, 1.8-2.0 for small elements.
|
|
131
|
+
|
|
132
|
+
**Sync zoom with narration**: Each scene's zoom should target what the avatar is currently talking about. If the avatar says "the server checks the balance", the zoom should be on the balance check element, not the whole page.
|
|
134
133
|
|
|
135
134
|
**Important**: Use `browser-use state` after each navigation to see the current element indices. Element indices change between pages.
|
|
136
135
|
|
|
137
|
-
**Playwright
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
136
|
+
**Do NOT use Playwright, Puppeteer, or custom scripts.** Use `browser-use` CLI commands above. If a command fails, retry it — do not switch to a different browser automation tool.
|
|
137
|
+
|
|
138
|
+
### Step 3b: Create Custom Animation Scenes (if planned)
|
|
139
|
+
|
|
140
|
+
For scenes that need animated explainers, flow diagrams, or motion graphics instead of static screenshots:
|
|
141
|
+
|
|
142
|
+
1. Create a temporary Remotion project in the working directory:
|
|
143
|
+
```bash
|
|
144
|
+
cd ./demo-work
|
|
145
|
+
npx create-video@latest --blank --no-tailwind --no-install custom-animations
|
|
146
|
+
cd custom-animations && npm install
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
2. Write a React component for each animation scene. You have the Remotion best-practices skill — use it. Example for a flow diagram:
|
|
150
|
+
```tsx
|
|
151
|
+
// src/FlowDiagram.tsx
|
|
152
|
+
import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate, spring } from "remotion";
|
|
153
|
+
|
|
154
|
+
export const FlowDiagram: React.FC = () => {
|
|
155
|
+
const frame = useCurrentFrame();
|
|
156
|
+
const { fps } = useVideoConfig();
|
|
157
|
+
// Animate arrows, labels, flow steps using interpolate/spring
|
|
158
|
+
// ...
|
|
159
|
+
};
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
3. Register it as a composition in `src/Root.tsx` and render to MP4:
|
|
163
|
+
```bash
|
|
164
|
+
npx remotion render FlowDiagram ./demo-work/screenshots/scene-flow-diagram.mp4
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
4. Use the rendered MP4 as the `screenshotPath` for that scene in render-props.json. The toolkit will include it in the final video alongside the app screenshot scenes.
|
|
142
168
|
|
|
143
|
-
|
|
169
|
+
**Tips for custom animations**:
|
|
170
|
+
- Match the resolution (1920x1080) and dark background (#0a0a0a) for consistency
|
|
171
|
+
- Keep animations 3-8 seconds — they should complement the narration, not replace it
|
|
172
|
+
- Use the app's color scheme for visual consistency
|
|
173
|
+
- Prefer simple, clean motion graphics over complex 3D or particle effects
|
|
174
|
+
|
|
175
|
+
### Step 4: Generate Avatar Video
|
|
144
176
|
|
|
145
177
|
Skip this step if `--no-avatar` or `--preview` was specified.
|
|
146
178
|
|
|
147
|
-
|
|
179
|
+
Generate **one single continuous avatar video** with all the narration combined. Do NOT generate separate clips per scene — separate clips create jarring cuts between sentences. One continuous video gives natural speech flow.
|
|
180
|
+
|
|
181
|
+
1. Check available avatars:
|
|
148
182
|
```bash
|
|
149
183
|
npx devrel-toolkit d-id avatars
|
|
150
184
|
```
|
|
151
185
|
|
|
152
|
-
2.
|
|
186
|
+
2. Concatenate ALL scene narrations into one text, in order, with natural pauses between sections. Use `npx devrel-toolkit d-id generate` with a single-scene script:
|
|
153
187
|
```json
|
|
154
188
|
[
|
|
155
|
-
{
|
|
156
|
-
|
|
189
|
+
{
|
|
190
|
+
"id": "full-narration",
|
|
191
|
+
"narration": "Welcome to our platform. Let me show you how easy it is to get started. ... Signing up is simple. Just click the button and fill in your details. ... And that's it — you're ready to go.",
|
|
192
|
+
"avatarId": "<chosen-avatar-id>"
|
|
193
|
+
}
|
|
157
194
|
]
|
|
158
195
|
```
|
|
159
196
|
|
|
160
|
-
3. Generate
|
|
197
|
+
3. Generate:
|
|
161
198
|
```bash
|
|
162
199
|
npx devrel-toolkit d-id generate \
|
|
163
200
|
--script ./demo-work/avatar-script.json \
|
|
@@ -165,7 +202,7 @@ Skip this step if `--no-avatar` or `--preview` was specified.
|
|
|
165
202
|
--avatar "<avatar-id>"
|
|
166
203
|
```
|
|
167
204
|
|
|
168
|
-
4. This takes 1–5 minutes
|
|
205
|
+
4. This takes 1–5 minutes. The output includes a `manifest.json` with the clip path and total duration. Use this single avatar clip as `avatarClipPath` for the **first scene only** — the PiP will play continuously across all scenes.
|
|
169
206
|
|
|
170
207
|
### Step 5: Assemble Render Props
|
|
171
208
|
|
|
@@ -175,36 +212,41 @@ Combine screenshots, avatar clips, bounding boxes, and timing into `render-props
|
|
|
175
212
|
{
|
|
176
213
|
"resolution": { "width": 1920, "height": 1080 },
|
|
177
214
|
"fps": 30,
|
|
215
|
+
"avatarClipPath": "/absolute/path/to/demo-work/avatars/full-narration.mp4",
|
|
216
|
+
"avatarPosition": "bottom-right",
|
|
217
|
+
"avatarSize": 280,
|
|
218
|
+
"showSubtitles": true,
|
|
178
219
|
"scenes": [
|
|
179
220
|
{
|
|
180
221
|
"id": "scene-1-landing",
|
|
181
222
|
"screenshotPath": "/absolute/path/to/demo-work/screenshots/scene-1-landing.png",
|
|
182
|
-
"
|
|
183
|
-
"avatarDuration": 4.5,
|
|
223
|
+
"avatarDuration": 5.0,
|
|
184
224
|
"narration": "Welcome to our platform. Let me show you how easy it is to get started.",
|
|
185
|
-
"highlights": [
|
|
186
|
-
{
|
|
187
|
-
"bbox": { "x": 500, "y": 300, "width": 200, "height": 50 },
|
|
188
|
-
"style": "glow",
|
|
189
|
-
"color": "#4A90D9"
|
|
190
|
-
}
|
|
191
|
-
],
|
|
225
|
+
"highlights": [],
|
|
192
226
|
"zoom": {
|
|
193
|
-
"bbox": { "x":
|
|
194
|
-
"level": 1.
|
|
227
|
+
"bbox": { "x": 150, "y": 80, "width": 900, "height": 500 },
|
|
228
|
+
"level": 1.4
|
|
195
229
|
},
|
|
196
230
|
"transition": "fade"
|
|
231
|
+
},
|
|
232
|
+
{
|
|
233
|
+
"id": "scene-2-flow",
|
|
234
|
+
"screenshotPath": "/absolute/path/to/demo-work/screenshots/scene-2-flow.mp4",
|
|
235
|
+
"avatarDuration": 6.0,
|
|
236
|
+
"narration": "The server verifies your wallet and checks the on-chain balance.",
|
|
237
|
+
"highlights": [],
|
|
238
|
+
"transition": "fade"
|
|
197
239
|
}
|
|
198
|
-
]
|
|
199
|
-
"avatarPosition": "bottom-right",
|
|
200
|
-
"avatarSize": 280,
|
|
201
|
-
"showSubtitles": true
|
|
240
|
+
]
|
|
202
241
|
}
|
|
203
242
|
```
|
|
204
243
|
|
|
205
|
-
**Important**:
|
|
206
|
-
|
|
207
|
-
|
|
244
|
+
**Important**:
|
|
245
|
+
- All file paths must be **absolute paths**
|
|
246
|
+
- `avatarClipPath` at the top level is the single continuous avatar video — it plays across all scenes
|
|
247
|
+
- Each scene still needs `avatarDuration` — this controls how long that scene lasts (divide the total avatar duration across scenes proportionally based on narration word count)
|
|
248
|
+
- `screenshotPath` can be a PNG (app screenshot) or MP4 (custom animation from Step 3b)
|
|
249
|
+
- Get the total avatar duration from `manifest.json`. Divide it across scenes based on word count.
|
|
208
250
|
|
|
209
251
|
### Step 6: Render the Video
|
|
210
252
|
|
|
@@ -278,5 +320,5 @@ This opens a browser preview where you can scrub through the timeline, inspect i
|
|
|
278
320
|
- **DemoScript schema** (Step 2 output): see `references/demo-script-schema.md`
|
|
279
321
|
- **RenderProps schema** (Step 5 output): see `references/render-props-schema.md`
|
|
280
322
|
- **Toolkit CLI commands**: see `references/toolkit-commands.md`
|
|
281
|
-
- **Browser-Use CLI**:
|
|
282
|
-
- **Remotion best practices**:
|
|
323
|
+
- **Browser-Use CLI**: refer to the browser-use skill for full command reference. Key commands used: `state`, `click`, `input`, `screenshot`, `get bbox`, `scroll`, `wait text`, `close`.
|
|
324
|
+
- **Remotion best practices**: refer to the Remotion agent skills for animation patterns, spring configs, and composition best practices.
|