devrel-toolkit 0.1.1 → 0.1.3
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 +6 -0
- package/dist/cli/render.js.map +1 -1
- package/dist/compositor/DemoVideo.d.ts.map +1 -1
- package/dist/compositor/DemoVideo.js +7 -5
- package/dist/compositor/DemoVideo.js.map +1 -1
- package/dist/compositor/components/BrowserFrame.d.ts.map +1 -1
- package/dist/compositor/components/BrowserFrame.js +6 -4
- package/dist/compositor/components/BrowserFrame.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 +195 -49
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
|
@@ -28,6 +28,9 @@ async function doRender(opts) {
|
|
|
28
28
|
missingFiles.push(`Avatar clip: ${scene.avatarClipPath} (scene: ${scene.id})`);
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
|
+
if (inputProps.avatarClipPath && !existsSync(inputProps.avatarClipPath)) {
|
|
32
|
+
missingFiles.push(`Avatar clip: ${inputProps.avatarClipPath}`);
|
|
33
|
+
}
|
|
31
34
|
if (inputProps.backgroundMusic && !existsSync(inputProps.backgroundMusic)) {
|
|
32
35
|
missingFiles.push(`Background music: ${inputProps.backgroundMusic}`);
|
|
33
36
|
}
|
|
@@ -73,6 +76,9 @@ async function doRender(opts) {
|
|
|
73
76
|
scene.avatarClipPath = copyAsset(scene.avatarClipPath);
|
|
74
77
|
}
|
|
75
78
|
}
|
|
79
|
+
if (inputProps.avatarClipPath) {
|
|
80
|
+
inputProps.avatarClipPath = copyAsset(inputProps.avatarClipPath);
|
|
81
|
+
}
|
|
76
82
|
if (inputProps.backgroundMusic) {
|
|
77
83
|
inputProps.backgroundMusic = copyAsset(inputProps.backgroundMusic);
|
|
78
84
|
}
|
package/dist/cli/render.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"render.js","sourceRoot":"","sources":["../../src/cli/render.ts"],"names":[],"mappings":"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"}
|
|
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"}
|
|
@@ -5,6 +5,7 @@ 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.
|
|
@@ -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,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC3F,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,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":"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,
|
|
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,CAoJpD,CAAC"}
|
|
@@ -3,8 +3,8 @@ import { AbsoluteFill, Img, staticFile, interpolate, spring, useCurrentFrame, us
|
|
|
3
3
|
export const BrowserFrame = ({ screenshotPath, url, zoom, durationFrames, }) => {
|
|
4
4
|
const frame = useCurrentFrame();
|
|
5
5
|
const { fps, width, height } = useVideoConfig();
|
|
6
|
-
// Chrome bar height
|
|
7
|
-
const chromeHeight =
|
|
6
|
+
// Chrome bar height (0 when chrome is hidden)
|
|
7
|
+
const chromeHeight = 0;
|
|
8
8
|
// Calculate zoom animation
|
|
9
9
|
let scale = 1;
|
|
10
10
|
let translateX = 0;
|
|
@@ -44,7 +44,9 @@ export const BrowserFrame = ({ screenshotPath, url, zoom, durationFrames, }) =>
|
|
|
44
44
|
extrapolateRight: "clamp",
|
|
45
45
|
});
|
|
46
46
|
}
|
|
47
|
-
|
|
47
|
+
// Skip browser chrome — it wastes vertical space and causes black bars
|
|
48
|
+
const showChrome = false;
|
|
49
|
+
return (_jsxs(AbsoluteFill, { style: { backgroundColor: "#0a0a0a" }, children: [showChrome && _jsxs("div", { style: {
|
|
48
50
|
height: chromeHeight,
|
|
49
51
|
backgroundColor: "#e8e8e8",
|
|
50
52
|
display: "flex",
|
|
@@ -91,7 +93,7 @@ export const BrowserFrame = ({ screenshotPath, url, zoom, durationFrames, }) =>
|
|
|
91
93
|
}, children: _jsx(Img, { src: staticFile(screenshotPath), style: {
|
|
92
94
|
width: "100%",
|
|
93
95
|
height: "100%",
|
|
94
|
-
objectFit: "
|
|
96
|
+
objectFit: "contain",
|
|
95
97
|
} }) }) })] }));
|
|
96
98
|
};
|
|
97
99
|
//# sourceMappingURL=BrowserFrame.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BrowserFrame.js","sourceRoot":"","sources":["../../../src/compositor/components/BrowserFrame.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,YAAY,EACZ,GAAG,EACH,UAAU,EACV,WAAW,EACX,MAAM,EACN,eAAe,EACf,cAAc,GACf,MAAM,UAAU,CAAC;AAYlB,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EACxD,cAAc,EACd,GAAG,EACH,IAAI,EACJ,cAAc,GACf,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,cAAc,EAAE,CAAC;IAEhD,
|
|
1
|
+
{"version":3,"file":"BrowserFrame.js","sourceRoot":"","sources":["../../../src/compositor/components/BrowserFrame.tsx"],"names":[],"mappings":"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"}
|
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
|
@@ -40,7 +40,19 @@ npx devrel-toolkit doctor
|
|
|
40
40
|
|
|
41
41
|
If any checks fail, run `npx devrel-toolkit setup`.
|
|
42
42
|
|
|
43
|
-
**Browser automation**: You MUST use `browser-use` CLI for all browser interactions
|
|
43
|
+
**Browser automation**: You MUST use `browser-use` CLI for all browser interactions. It is a standalone Python CLI binary, NOT an npm package. Try running `browser-use` first. If not found in PATH, use the full path `~/.browser-use-env/bin/browser-use`. Never use `npx browser-use`.
|
|
44
|
+
|
|
45
|
+
If browser-use is not installed at all, install it:
|
|
46
|
+
```bash
|
|
47
|
+
curl -fsSL https://browser-use.com/cli/install.sh | bash
|
|
48
|
+
```
|
|
49
|
+
Then use `~/.browser-use-env/bin/browser-use` for all commands.
|
|
50
|
+
|
|
51
|
+
If browser-use fails with timeout errors on `open` (even after 120s), the machine likely has an enterprise policy blocking Chrome DevTools remote debugging (CDP). Browser-use depends on CDP and cannot work in this environment. Use Playwright instead — it ships its own Chromium binary that bypasses enterprise policies:
|
|
52
|
+
```bash
|
|
53
|
+
npx playwright install chromium # one-time setup
|
|
54
|
+
```
|
|
55
|
+
Then use Playwright's Node.js API — write a small `.mjs` script for each capture task using `chromium.launch()`, `page.goto()`, `page.screenshot()`, `page.locator().boundingBox()`.
|
|
44
56
|
|
|
45
57
|
**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
58
|
- 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?"
|
|
@@ -60,13 +72,14 @@ If any checks fail, run `npx devrel-toolkit setup`.
|
|
|
60
72
|
|
|
61
73
|
### Step 2: Plan the Demo
|
|
62
74
|
|
|
63
|
-
|
|
75
|
+
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.
|
|
76
|
+
|
|
77
|
+
You have two tools for creating scenes — use whichever makes sense for each part of the video:
|
|
64
78
|
|
|
65
|
-
-
|
|
66
|
-
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
- Choose **transitions** between scenes (`fade` for most, `slide` for page changes, `cut` for quick switches)
|
|
79
|
+
- **App footage** — capture screenshots of the real app UI via browser-use. Good for showing the actual product.
|
|
80
|
+
- **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.
|
|
81
|
+
|
|
82
|
+
You decide the scene count, scene types, narration, zoom targets, and pacing. Mix app footage and custom animations however best serves the demo.
|
|
70
83
|
|
|
71
84
|
Produce a `demo-script.json` file:
|
|
72
85
|
|
|
@@ -86,9 +99,7 @@ Produce a `demo-script.json` file:
|
|
|
86
99
|
{ "action": "goto", "target": "http://localhost:3000" },
|
|
87
100
|
{ "action": "wait", "value": "2000" }
|
|
88
101
|
],
|
|
89
|
-
"highlights": [
|
|
90
|
-
{ "selector": ".cta-button", "style": "glow", "color": "#4A90D9" }
|
|
91
|
-
],
|
|
102
|
+
"highlights": [],
|
|
92
103
|
"zoom": { "selector": ".hero-section", "level": 1.5 },
|
|
93
104
|
"transition": "fade"
|
|
94
105
|
}
|
|
@@ -104,58 +115,187 @@ mkdir -p ./demo-work-$(date +%s)/screenshots
|
|
|
104
115
|
mkdir -p ./demo-work-$(date +%s)/avatars
|
|
105
116
|
```
|
|
106
117
|
|
|
107
|
-
|
|
118
|
+
Use `~/.browser-use-env/bin/browser-use` (full path) if `browser-use` is not in PATH.
|
|
108
119
|
|
|
120
|
+
**First command — open the URL** (use a long timeout, the first browser launch is slow):
|
|
109
121
|
```bash
|
|
110
|
-
browser-use
|
|
122
|
+
~/.browser-use-env/bin/browser-use open <url>
|
|
123
|
+
```
|
|
111
124
|
|
|
112
|
-
|
|
113
|
-
|
|
125
|
+
Do NOT use `--headed` or `--profile` flags — headed mode times out in Claude Code's bash, and `--profile` causes macOS permission errors on Chrome cookies. Use plain headless mode. The built-in Chromium works fine for screenshots.
|
|
126
|
+
|
|
127
|
+
After the first `open`, subsequent commands are fast (~50ms) because the daemon stays alive:
|
|
128
|
+
|
|
129
|
+
```bash
|
|
130
|
+
browser-use state # See available elements with indices
|
|
114
131
|
browser-use click <index> # Click elements
|
|
115
132
|
browser-use input <index> "text" # Fill forms
|
|
116
133
|
browser-use scroll down # Scroll
|
|
117
134
|
browser-use wait text "loaded" # Wait for content
|
|
118
135
|
|
|
119
|
-
# Take screenshot —
|
|
136
|
+
# Take screenshot — viewport only, NOT full page
|
|
120
137
|
browser-use screenshot ./demo-work/screenshots/scene-<id>.png
|
|
121
|
-
browser-use screenshot --full ./demo-work/screenshots/scene-<id>.png # full page
|
|
122
138
|
|
|
123
|
-
# Get bounding boxes for
|
|
139
|
+
# Get bounding boxes for zoom targets
|
|
124
140
|
browser-use get bbox <index> # Returns { x, y, width, height }
|
|
141
|
+
|
|
142
|
+
# When done
|
|
143
|
+
browser-use close
|
|
125
144
|
```
|
|
126
145
|
|
|
127
|
-
Save all screenshots and record bounding box data for
|
|
146
|
+
Save all screenshots and record bounding box data for zoom targets.
|
|
147
|
+
|
|
148
|
+
**Screenshots must show content, not empty space.** Before taking each screenshot, scroll to the section you want to capture so it fills the viewport. If the page has a hero at the top, take the screenshot there. If you need to show a section further down, `browser-use scroll down` first until that section is visible, then screenshot. Never capture black/empty space above or below the content — the video frame should be filled with the actual UI.
|
|
149
|
+
|
|
150
|
+
**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 }`.
|
|
151
|
+
|
|
152
|
+
**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.
|
|
153
|
+
|
|
154
|
+
**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.
|
|
128
155
|
|
|
129
156
|
**Important**: Use `browser-use state` after each navigation to see the current element indices. Element indices change between pages.
|
|
130
157
|
|
|
131
158
|
**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.
|
|
132
159
|
|
|
133
|
-
### Step
|
|
160
|
+
### Step 3b: Create Custom Animation Scenes (if planned)
|
|
134
161
|
|
|
135
|
-
|
|
162
|
+
For scenes that need animated explainers, flow diagrams, or motion graphics instead of static screenshots:
|
|
163
|
+
|
|
164
|
+
1. Create a temporary Remotion project in the working directory:
|
|
165
|
+
```bash
|
|
166
|
+
cd ./demo-work
|
|
167
|
+
npx create-video@latest --blank --no-tailwind --no-install custom-animations
|
|
168
|
+
cd custom-animations && npm install
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
2. Write a React component for each animation scene. **Animations MUST have motion** — elements appearing one by one, arrows drawing in, labels fading in sequentially. A static diagram rendered as a video is NOT an animation. Every element should animate in using `spring()` or `interpolate()` with staggered delays.
|
|
172
|
+
|
|
173
|
+
Example — a flow diagram where each step appears one after another:
|
|
174
|
+
```tsx
|
|
175
|
+
import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
|
|
176
|
+
|
|
177
|
+
export const FlowDiagram: React.FC = () => {
|
|
178
|
+
const frame = useCurrentFrame();
|
|
179
|
+
const { fps } = useVideoConfig();
|
|
180
|
+
|
|
181
|
+
// Each step appears sequentially with spring animation
|
|
182
|
+
const step1 = spring({ frame, fps, config: { damping: 200 } });
|
|
183
|
+
const step2 = spring({ frame: frame - 20, fps, config: { damping: 200 } });
|
|
184
|
+
const step3 = spring({ frame: frame - 40, fps, config: { damping: 200 } });
|
|
185
|
+
const step4 = spring({ frame: frame - 60, fps, config: { damping: 200 } });
|
|
186
|
+
|
|
187
|
+
// Arrow draws in between steps
|
|
188
|
+
const arrow1Width = interpolate(step2, [0, 1], [0, 300]);
|
|
189
|
+
const arrow2Width = interpolate(step3, [0, 1], [0, 300]);
|
|
190
|
+
|
|
191
|
+
return (
|
|
192
|
+
<AbsoluteFill style={{ backgroundColor: "#0a0a0a", padding: 80 }}>
|
|
193
|
+
{/* Step 1 fades/scales in */}
|
|
194
|
+
<div style={{ opacity: step1, transform: `scale(${step1})` }}>
|
|
195
|
+
Client → GET /api/random
|
|
196
|
+
</div>
|
|
197
|
+
{/* Arrow draws from left to right */}
|
|
198
|
+
<div style={{ width: arrow1Width, height: 2, backgroundColor: "#4A90D9" }} />
|
|
199
|
+
{/* Step 2 appears after arrow */}
|
|
200
|
+
<div style={{ opacity: step2, transform: `translateY(${(1-step2)*20}px)` }}>
|
|
201
|
+
Server → 402 + config
|
|
202
|
+
</div>
|
|
203
|
+
{/* etc. — each step has a staggered delay */}
|
|
204
|
+
</AbsoluteFill>
|
|
205
|
+
);
|
|
206
|
+
};
|
|
207
|
+
```
|
|
136
208
|
|
|
137
|
-
|
|
209
|
+
The key pattern: `spring({ frame: frame - DELAY, fps })` where DELAY increases for each element. This creates the sequential reveal effect.
|
|
210
|
+
|
|
211
|
+
3. Register it as a composition in `src/Root.tsx` and render to MP4:
|
|
138
212
|
```bash
|
|
139
|
-
npx
|
|
213
|
+
npx remotion render FlowDiagram ./demo-work/screenshots/scene-flow-diagram.mp4
|
|
140
214
|
```
|
|
141
215
|
|
|
142
|
-
|
|
216
|
+
4. Use the rendered MP4 as the `screenshotPath` for that scene in render-props.json.
|
|
217
|
+
|
|
218
|
+
**Animation rules**:
|
|
219
|
+
- **Every element must animate in** — nothing should just "be there" from frame 1
|
|
220
|
+
- Use staggered delays (20-30 frames apart) so elements appear one by one
|
|
221
|
+
- Arrows should draw in (width/height animating from 0 to full)
|
|
222
|
+
- Labels should fade + slide in (opacity 0→1 + translateY)
|
|
223
|
+
- Match the resolution (1920x1080) and dark background (#0a0a0a)
|
|
224
|
+
- Use the app's color scheme for visual consistency
|
|
225
|
+
|
|
226
|
+
### Step 4: Generate Avatar Video
|
|
227
|
+
|
|
228
|
+
Skip this step if `--no-avatar` or `--preview` was specified.
|
|
229
|
+
|
|
230
|
+
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.
|
|
231
|
+
|
|
232
|
+
**D-ID has two APIs — try Expressives first, fall back to Talks:**
|
|
233
|
+
|
|
234
|
+
**Option A: Expressives API (V4 avatars — via toolkit) — preferred**
|
|
235
|
+
|
|
236
|
+
1. Use this avatar by default: `public_oliver_sport_elegant@avt_VVIQYg` (Oliver — professional male presenter). Concatenate all narrations into one script:
|
|
143
237
|
```json
|
|
144
238
|
[
|
|
145
|
-
{
|
|
146
|
-
|
|
239
|
+
{
|
|
240
|
+
"id": "full-narration",
|
|
241
|
+
"narration": "Welcome to our platform. ... And that's it — you're ready to go.",
|
|
242
|
+
"avatarId": "public_oliver_sport_elegant@avt_VVIQYg"
|
|
243
|
+
}
|
|
147
244
|
]
|
|
148
245
|
```
|
|
149
|
-
|
|
150
|
-
3. Generate avatar clips:
|
|
246
|
+
2. Generate:
|
|
151
247
|
```bash
|
|
152
248
|
npx devrel-toolkit d-id generate \
|
|
153
249
|
--script ./demo-work/avatar-script.json \
|
|
154
250
|
--output ./demo-work/avatars/ \
|
|
155
|
-
--avatar "
|
|
251
|
+
--avatar "public_oliver_sport_elegant@avt_VVIQYg"
|
|
156
252
|
```
|
|
253
|
+
3. If that avatar fails, list available ones with `npx devrel-toolkit d-id avatars` and pick another.
|
|
157
254
|
|
|
158
|
-
|
|
255
|
+
**Option B: Talks API (works on all plans including free — via curl)**
|
|
256
|
+
|
|
257
|
+
If Expressives fails (subscription error, no avatars available), use the Talks API directly. It takes a source photo URL instead of an avatar ID:
|
|
258
|
+
|
|
259
|
+
```bash
|
|
260
|
+
DID_KEY=$(grep DID_API_KEY .env.local | cut -d= -f2)
|
|
261
|
+
|
|
262
|
+
# Concatenate all narration into one string
|
|
263
|
+
NARRATION="Welcome to our platform. ... And that's it."
|
|
264
|
+
|
|
265
|
+
# Create the talk
|
|
266
|
+
RESPONSE=$(curl -s -X POST "https://api.d-id.com/talks" \
|
|
267
|
+
-H "Authorization: Basic $DID_KEY" \
|
|
268
|
+
-H "Content-Type: application/json" \
|
|
269
|
+
-d "{
|
|
270
|
+
\"source_url\": \"https://d-id-public-bucket.s3.us-west-2.amazonaws.com/alice.jpg\",
|
|
271
|
+
\"script\": {
|
|
272
|
+
\"type\": \"text\",
|
|
273
|
+
\"input\": \"$NARRATION\",
|
|
274
|
+
\"provider\": { \"type\": \"microsoft\", \"voice_id\": \"en-US-JennyNeural\" }
|
|
275
|
+
}
|
|
276
|
+
}")
|
|
277
|
+
|
|
278
|
+
TALK_ID=$(echo "$RESPONSE" | python3 -c "import json,sys; print(json.load(sys.stdin)['id'])")
|
|
279
|
+
|
|
280
|
+
# Poll until done, then download
|
|
281
|
+
for i in $(seq 1 60); do
|
|
282
|
+
RESULT=$(curl -s "https://api.d-id.com/talks/$TALK_ID" -H "Authorization: Basic $DID_KEY")
|
|
283
|
+
STATUS=$(echo "$RESULT" | python3 -c "import json,sys; print(json.load(sys.stdin).get('status','unknown'))")
|
|
284
|
+
if [ "$STATUS" = "done" ]; then
|
|
285
|
+
RESULT_URL=$(echo "$RESULT" | python3 -c "import json,sys; print(json.load(sys.stdin).get('result_url',''))")
|
|
286
|
+
curl -sL "$RESULT_URL" -o ./demo-work/avatars/full-narration.mp4
|
|
287
|
+
echo "Downloaded avatar video!"
|
|
288
|
+
break
|
|
289
|
+
fi
|
|
290
|
+
if [ "$STATUS" = "error" ] || [ "$STATUS" = "rejected" ]; then
|
|
291
|
+
echo "FAILED: $RESULT"
|
|
292
|
+
break
|
|
293
|
+
fi
|
|
294
|
+
sleep 5
|
|
295
|
+
done
|
|
296
|
+
```
|
|
297
|
+
|
|
298
|
+
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.
|
|
159
299
|
|
|
160
300
|
### Step 5: Assemble Render Props
|
|
161
301
|
|
|
@@ -165,36 +305,41 @@ Combine screenshots, avatar clips, bounding boxes, and timing into `render-props
|
|
|
165
305
|
{
|
|
166
306
|
"resolution": { "width": 1920, "height": 1080 },
|
|
167
307
|
"fps": 30,
|
|
308
|
+
"avatarClipPath": "/absolute/path/to/demo-work/avatars/full-narration.mp4",
|
|
309
|
+
"avatarPosition": "bottom-right",
|
|
310
|
+
"avatarSize": 280,
|
|
311
|
+
"showSubtitles": true,
|
|
168
312
|
"scenes": [
|
|
169
313
|
{
|
|
170
314
|
"id": "scene-1-landing",
|
|
171
315
|
"screenshotPath": "/absolute/path/to/demo-work/screenshots/scene-1-landing.png",
|
|
172
|
-
"
|
|
173
|
-
"avatarDuration": 4.5,
|
|
316
|
+
"avatarDuration": 5.0,
|
|
174
317
|
"narration": "Welcome to our platform. Let me show you how easy it is to get started.",
|
|
175
|
-
"highlights": [
|
|
176
|
-
{
|
|
177
|
-
"bbox": { "x": 500, "y": 300, "width": 200, "height": 50 },
|
|
178
|
-
"style": "glow",
|
|
179
|
-
"color": "#4A90D9"
|
|
180
|
-
}
|
|
181
|
-
],
|
|
318
|
+
"highlights": [],
|
|
182
319
|
"zoom": {
|
|
183
|
-
"bbox": { "x":
|
|
184
|
-
"level": 1.
|
|
320
|
+
"bbox": { "x": 150, "y": 80, "width": 900, "height": 500 },
|
|
321
|
+
"level": 1.4
|
|
185
322
|
},
|
|
186
323
|
"transition": "fade"
|
|
324
|
+
},
|
|
325
|
+
{
|
|
326
|
+
"id": "scene-2-flow",
|
|
327
|
+
"screenshotPath": "/absolute/path/to/demo-work/screenshots/scene-2-flow.mp4",
|
|
328
|
+
"avatarDuration": 6.0,
|
|
329
|
+
"narration": "The server verifies your wallet and checks the on-chain balance.",
|
|
330
|
+
"highlights": [],
|
|
331
|
+
"transition": "fade"
|
|
187
332
|
}
|
|
188
|
-
]
|
|
189
|
-
"avatarPosition": "bottom-right",
|
|
190
|
-
"avatarSize": 280,
|
|
191
|
-
"showSubtitles": true
|
|
333
|
+
]
|
|
192
334
|
}
|
|
193
335
|
```
|
|
194
336
|
|
|
195
|
-
**Important**:
|
|
196
|
-
|
|
197
|
-
|
|
337
|
+
**Important**:
|
|
338
|
+
- All file paths must be **absolute paths**
|
|
339
|
+
- `avatarClipPath` at the top level is the single continuous avatar video — it plays across all scenes
|
|
340
|
+
- 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)
|
|
341
|
+
- `screenshotPath` can be a PNG (app screenshot) or MP4 (custom animation from Step 3b)
|
|
342
|
+
- Get the total avatar duration from `manifest.json`. Divide it across scenes based on word count.
|
|
198
343
|
|
|
199
344
|
### Step 6: Render the Video
|
|
200
345
|
|
|
@@ -230,9 +375,10 @@ Wait for the render to complete. This may take a few minutes.
|
|
|
230
375
|
## Error Handling
|
|
231
376
|
|
|
232
377
|
**browser-use not found:**
|
|
233
|
-
-
|
|
378
|
+
- Install it: `curl -fsSL https://browser-use.com/cli/install.sh | bash`
|
|
379
|
+
- Or run `npx devrel-toolkit setup` which handles the installation
|
|
234
380
|
- Do NOT use `pip install browser-use` — that installs the Python SDK, not the CLI
|
|
235
|
-
-
|
|
381
|
+
- Do NOT fall back to Playwright — install browser-use
|
|
236
382
|
|
|
237
383
|
**Browser navigation fails:**
|
|
238
384
|
- Retry the action once
|