devrel-toolkit 0.1.2 → 0.1.4
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/d-id.d.ts.map +1 -1
- package/dist/cli/d-id.js +13 -10
- package/dist/cli/d-id.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/d-id/client.d.ts +3 -1
- package/dist/d-id/client.d.ts.map +1 -1
- package/dist/d-id/client.js +6 -8
- package/dist/d-id/client.js.map +1 -1
- package/package.json +1 -1
- package/skills/make-demo/SKILL.md +93 -27
package/dist/cli/d-id.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"d-id.d.ts","sourceRoot":"","sources":["../../src/cli/d-id.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAKzC,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,
|
|
1
|
+
{"version":3,"file":"d-id.d.ts","sourceRoot":"","sources":["../../src/cli/d-id.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAKzC,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CA4DzD"}
|
package/dist/cli/d-id.js
CHANGED
|
@@ -18,19 +18,22 @@ export function registerDidCommand(program) {
|
|
|
18
18
|
return;
|
|
19
19
|
}
|
|
20
20
|
// Print table header
|
|
21
|
-
const idWidth =
|
|
21
|
+
const idWidth = 45;
|
|
22
22
|
const nameWidth = 30;
|
|
23
|
-
console.log(`${"
|
|
24
|
-
console.log(`${"-".repeat(idWidth)} ${"-".repeat(nameWidth)} ${"-".repeat(
|
|
23
|
+
console.log(`${"PRESENTER ID".padEnd(idWidth)} ${"NAME".padEnd(nameWidth)} GENDER`);
|
|
24
|
+
console.log(`${"-".repeat(idWidth)} ${"-".repeat(nameWidth)} ${"-".repeat(10)}`);
|
|
25
|
+
// Deduplicate by name (many variants per presenter)
|
|
26
|
+
const seen = new Set();
|
|
25
27
|
for (const avatar of avatars) {
|
|
26
|
-
const
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
const
|
|
31
|
-
|
|
28
|
+
const name = avatar.name ?? "unknown";
|
|
29
|
+
if (seen.has(name))
|
|
30
|
+
continue;
|
|
31
|
+
seen.add(name);
|
|
32
|
+
const id = (avatar.presenter_id ?? avatar.id ?? "").padEnd(idWidth);
|
|
33
|
+
const gender = avatar.gender ?? "—";
|
|
34
|
+
console.log(`${id} ${name.padEnd(nameWidth)} ${gender}`);
|
|
32
35
|
}
|
|
33
|
-
console.log(`\n${
|
|
36
|
+
console.log(`\n${seen.size} presenter(s) found (${avatars.length} total variants).\n`);
|
|
34
37
|
});
|
|
35
38
|
did
|
|
36
39
|
.command("generate")
|
package/dist/cli/d-id.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"d-id.js","sourceRoot":"","sources":["../../src/cli/d-id.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAE1D,MAAM,UAAU,kBAAkB,CAAC,OAAgB;IACjD,MAAM,GAAG,GAAG,OAAO;SAChB,OAAO,CAAC,MAAM,CAAC;SACf,WAAW,CAAC,iCAAiC,CAAC,CAAC;IAElD,GAAG;SACA,OAAO,CAAC,SAAS,CAAC;SAClB,WAAW,CAAC,6BAA6B,CAAC;SAC1C,MAAM,CAAC,KAAK,IAAI,EAAE;QACjB,MAAM,MAAM,GAAG,gBAAgB,EAAE,CAAC;QAClC,MAAM,MAAM,GAAG,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC;QAErC,OAAO,CAAC,GAAG,CAAC,mCAAmC,CAAC,CAAC;QAEjD,MAAM,OAAO,GAAG,MAAM,MAAM,CAAC,WAAW,EAAE,CAAC;QAE3C,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACzB,OAAO,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;YACjC,OAAO;QACT,CAAC;QAED,qBAAqB;QACrB,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,MAAM,SAAS,GAAG,EAAE,CAAC;QACrB,OAAO,CAAC,GAAG,CACT,GAAG,
|
|
1
|
+
{"version":3,"file":"d-id.js","sourceRoot":"","sources":["../../src/cli/d-id.ts"],"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/d-id/client.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/d-id/client.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/d-id/client.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC7C;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE;QACP,aAAa,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;QACvC,iBAAiB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;KACtC,CAAC;IACF,UAAU,CAAC,EAAE;QACX,IAAI,EAAE,OAAO,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;CACH;AAED,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,CAAC;CAC/C;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,qBAAa,SAAS;IACpB,OAAO,CAAC,MAAM,CAAS;gBAEX,MAAM,EAAE,MAAM;IAI1B,OAAO,KAAK,OAAO,GAKlB;YAEa,OAAO;IAiEf,WAAW,IAAI,OAAO,CAAC,SAAS,EAAE,CAAC;IASnC,WAAW,CAAC,OAAO,EAAE,kBAAkB,GAAG,OAAO,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAkBjF,QAAQ,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,WAAW,CAAC;IAI1C,aAAa,CACjB,EAAE,EAAE,MAAM,EACV,OAAO,GAAE,WAAgB,GACxB,OAAO,CAAC,WAAW,CAAC;IA4BjB,aAAa,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;CAY1E"}
|
package/dist/d-id/client.js
CHANGED
|
@@ -56,30 +56,28 @@ export class DIDClient {
|
|
|
56
56
|
throw lastError ?? new Error("D-ID API request failed after retries");
|
|
57
57
|
}
|
|
58
58
|
async listAvatars() {
|
|
59
|
-
|
|
60
|
-
|
|
59
|
+
// /clips/presenters returns pre-built presenters available on all paid plans
|
|
60
|
+
const data = await this.request("GET", "/clips/presenters");
|
|
61
|
+
return data.presenters ?? data;
|
|
61
62
|
}
|
|
62
63
|
async createVideo(options) {
|
|
63
64
|
const body = {
|
|
64
|
-
|
|
65
|
+
presenter_id: options.avatarId,
|
|
65
66
|
script: {
|
|
66
67
|
type: "text",
|
|
67
68
|
input: options.script,
|
|
68
69
|
},
|
|
69
70
|
};
|
|
70
|
-
if (options.sentimentId) {
|
|
71
|
-
body.sentiment_id = options.sentimentId;
|
|
72
|
-
}
|
|
73
71
|
if (options.config) {
|
|
74
72
|
body.config = options.config;
|
|
75
73
|
}
|
|
76
74
|
if (options.background) {
|
|
77
75
|
body.background = options.background;
|
|
78
76
|
}
|
|
79
|
-
return this.request("POST", "/
|
|
77
|
+
return this.request("POST", "/clips", body);
|
|
80
78
|
}
|
|
81
79
|
async getVideo(id) {
|
|
82
|
-
return this.request("GET", `/
|
|
80
|
+
return this.request("GET", `/clips/${id}`, undefined, 1);
|
|
83
81
|
}
|
|
84
82
|
async pollUntilDone(id, options = {}) {
|
|
85
83
|
const interval = options.interval ?? 5000;
|
package/dist/d-id/client.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"client.js","sourceRoot":"","sources":["../../src/d-id/client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,QAAQ,GAAG,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"client.js","sourceRoot":"","sources":["../../src/d-id/client.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?"
|
|
@@ -103,28 +115,38 @@ mkdir -p ./demo-work-$(date +%s)/screenshots
|
|
|
103
115
|
mkdir -p ./demo-work-$(date +%s)/avatars
|
|
104
116
|
```
|
|
105
117
|
|
|
106
|
-
|
|
118
|
+
Use `~/.browser-use-env/bin/browser-use` (full path) if `browser-use` is not in PATH.
|
|
107
119
|
|
|
120
|
+
**First command — open the URL** (use a long timeout, the first browser launch is slow):
|
|
108
121
|
```bash
|
|
109
|
-
browser-use
|
|
122
|
+
~/.browser-use-env/bin/browser-use open <url>
|
|
123
|
+
```
|
|
124
|
+
|
|
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.
|
|
110
126
|
|
|
111
|
-
|
|
112
|
-
|
|
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
|
|
113
131
|
browser-use click <index> # Click elements
|
|
114
132
|
browser-use input <index> "text" # Fill forms
|
|
115
133
|
browser-use scroll down # Scroll
|
|
116
134
|
browser-use wait text "loaded" # Wait for content
|
|
117
135
|
|
|
118
|
-
# Take screenshot —
|
|
136
|
+
# Take screenshot — viewport only, NOT full page
|
|
119
137
|
browser-use screenshot ./demo-work/screenshots/scene-<id>.png
|
|
120
|
-
browser-use screenshot --full ./demo-work/screenshots/scene-<id>.png # full page
|
|
121
138
|
|
|
122
|
-
# Get bounding boxes for
|
|
139
|
+
# Get bounding boxes for zoom targets
|
|
123
140
|
browser-use get bbox <index> # Returns { x, y, width, height }
|
|
141
|
+
|
|
142
|
+
# When done
|
|
143
|
+
browser-use close
|
|
124
144
|
```
|
|
125
145
|
|
|
126
146
|
Save all screenshots and record bounding box data for zoom targets.
|
|
127
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
|
+
|
|
128
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 }`.
|
|
129
151
|
|
|
130
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.
|
|
@@ -137,7 +159,13 @@ Save all screenshots and record bounding box data for zoom targets.
|
|
|
137
159
|
|
|
138
160
|
### Step 3b: Create Custom Animation Scenes (if planned)
|
|
139
161
|
|
|
140
|
-
For scenes that need animated explainers, flow diagrams, or motion graphics instead of static screenshots
|
|
162
|
+
For scenes that need animated explainers, flow diagrams, or motion graphics instead of static screenshots.
|
|
163
|
+
|
|
164
|
+
**BEFORE writing any Remotion code, load the `remotion-best-practices` skill rules.** Read the rules for `timing`, `animations`, and `sequencing` — they contain the exact patterns for spring animations, interpolation, and staggered reveals. The key rules:
|
|
165
|
+
- ALL animations MUST be driven by `useCurrentFrame()` — CSS animations are FORBIDDEN
|
|
166
|
+
- Use `spring()` with staggered delays for sequential reveals: `spring({ frame: frame - 20, fps })`
|
|
167
|
+
- Use `interpolate()` to map spring values to visual properties (opacity, translateY, width)
|
|
168
|
+
- Every element must animate in over time — nothing should be visible at frame 0
|
|
141
169
|
|
|
142
170
|
1. Create a temporary Remotion project in the working directory:
|
|
143
171
|
```bash
|
|
@@ -146,31 +174,66 @@ For scenes that need animated explainers, flow diagrams, or motion graphics inst
|
|
|
146
174
|
cd custom-animations && npm install
|
|
147
175
|
```
|
|
148
176
|
|
|
149
|
-
2. Write a React component for each animation scene.
|
|
177
|
+
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.
|
|
178
|
+
|
|
179
|
+
Example — a flow diagram where each step appears one after another:
|
|
150
180
|
```tsx
|
|
151
|
-
|
|
152
|
-
import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate, spring } from "remotion";
|
|
181
|
+
import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
|
|
153
182
|
|
|
154
183
|
export const FlowDiagram: React.FC = () => {
|
|
155
184
|
const frame = useCurrentFrame();
|
|
156
185
|
const { fps } = useVideoConfig();
|
|
157
|
-
|
|
158
|
-
//
|
|
186
|
+
|
|
187
|
+
// Each step appears sequentially with spring animation
|
|
188
|
+
const step1 = spring({ frame, fps, config: { damping: 200 } });
|
|
189
|
+
const step2 = spring({ frame: frame - 20, fps, config: { damping: 200 } });
|
|
190
|
+
const step3 = spring({ frame: frame - 40, fps, config: { damping: 200 } });
|
|
191
|
+
const step4 = spring({ frame: frame - 60, fps, config: { damping: 200 } });
|
|
192
|
+
|
|
193
|
+
// Arrow draws in between steps
|
|
194
|
+
const arrow1Width = interpolate(step2, [0, 1], [0, 300]);
|
|
195
|
+
const arrow2Width = interpolate(step3, [0, 1], [0, 300]);
|
|
196
|
+
|
|
197
|
+
return (
|
|
198
|
+
<AbsoluteFill style={{ backgroundColor: "#0a0a0a", padding: 80 }}>
|
|
199
|
+
{/* Step 1 fades/scales in */}
|
|
200
|
+
<div style={{ opacity: step1, transform: `scale(${step1})` }}>
|
|
201
|
+
Client → GET /api/random
|
|
202
|
+
</div>
|
|
203
|
+
{/* Arrow draws from left to right */}
|
|
204
|
+
<div style={{ width: arrow1Width, height: 2, backgroundColor: "#4A90D9" }} />
|
|
205
|
+
{/* Step 2 appears after arrow */}
|
|
206
|
+
<div style={{ opacity: step2, transform: `translateY(${(1-step2)*20}px)` }}>
|
|
207
|
+
Server → 402 + config
|
|
208
|
+
</div>
|
|
209
|
+
{/* etc. — each step has a staggered delay */}
|
|
210
|
+
</AbsoluteFill>
|
|
211
|
+
);
|
|
159
212
|
};
|
|
160
213
|
```
|
|
161
214
|
|
|
162
|
-
|
|
215
|
+
The key pattern: `spring({ frame: frame - DELAY, fps })` where DELAY increases for each element. This creates the sequential reveal effect.
|
|
216
|
+
|
|
217
|
+
3. Register it as a composition in `src/Root.tsx`. The `durationInFrames` MUST be long enough for all animations to complete (e.g., if you have 5 elements with 20-frame stagger, you need at least 100+ frames):
|
|
218
|
+
```tsx
|
|
219
|
+
<Composition id="FlowDiagram" component={FlowDiagram}
|
|
220
|
+
durationInFrames={180} fps={30} width={1920} height={1080} />
|
|
221
|
+
```
|
|
222
|
+
Then render to MP4:
|
|
163
223
|
```bash
|
|
164
224
|
npx remotion render FlowDiagram ./demo-work/screenshots/scene-flow-diagram.mp4
|
|
165
225
|
```
|
|
226
|
+
**Test first**: run `npx remotion studio` and scrub through the timeline to verify elements animate in sequentially. If everything appears at once, your springs have no delays or your duration is too short.
|
|
166
227
|
|
|
167
|
-
4. Use the rendered MP4 as the `screenshotPath` for that scene in render-props.json.
|
|
228
|
+
4. Use the rendered MP4 as the `screenshotPath` for that scene in render-props.json.
|
|
168
229
|
|
|
169
|
-
**
|
|
170
|
-
-
|
|
171
|
-
-
|
|
230
|
+
**Animation rules**:
|
|
231
|
+
- **Every element must animate in** — nothing should just "be there" from frame 1
|
|
232
|
+
- Use staggered delays (20-30 frames apart) so elements appear one by one
|
|
233
|
+
- Arrows should draw in (width/height animating from 0 to full)
|
|
234
|
+
- Labels should fade + slide in (opacity 0→1 + translateY)
|
|
235
|
+
- Match the resolution (1920x1080) and dark background (#0a0a0a)
|
|
172
236
|
- Use the app's color scheme for visual consistency
|
|
173
|
-
- Prefer simple, clean motion graphics over complex 3D or particle effects
|
|
174
237
|
|
|
175
238
|
### Step 4: Generate Avatar Video
|
|
176
239
|
|
|
@@ -178,18 +241,20 @@ Skip this step if `--no-avatar` or `--preview` was specified.
|
|
|
178
241
|
|
|
179
242
|
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
243
|
|
|
181
|
-
|
|
244
|
+
**Use the D-ID Clips API** via the toolkit. It has 136+ professional presenters and works on all paid plans.
|
|
245
|
+
|
|
246
|
+
1. List available presenters:
|
|
182
247
|
```bash
|
|
183
248
|
npx devrel-toolkit d-id avatars
|
|
184
249
|
```
|
|
185
250
|
|
|
186
|
-
2.
|
|
251
|
+
2. Pick a presenter. Default: `v2_public_Adam@0GLJgELXjc` (Adam — professional male). Concatenate all narrations into one script:
|
|
187
252
|
```json
|
|
188
253
|
[
|
|
189
254
|
{
|
|
190
255
|
"id": "full-narration",
|
|
191
|
-
"narration": "
|
|
192
|
-
"avatarId": "
|
|
256
|
+
"narration": "Full concatenated narration text here...",
|
|
257
|
+
"avatarId": "v2_public_Adam@0GLJgELXjc"
|
|
193
258
|
}
|
|
194
259
|
]
|
|
195
260
|
```
|
|
@@ -199,7 +264,7 @@ Generate **one single continuous avatar video** with all the narration combined.
|
|
|
199
264
|
npx devrel-toolkit d-id generate \
|
|
200
265
|
--script ./demo-work/avatar-script.json \
|
|
201
266
|
--output ./demo-work/avatars/ \
|
|
202
|
-
--avatar "
|
|
267
|
+
--avatar "v2_public_Adam@0GLJgELXjc"
|
|
203
268
|
```
|
|
204
269
|
|
|
205
270
|
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.
|
|
@@ -282,9 +347,10 @@ Wait for the render to complete. This may take a few minutes.
|
|
|
282
347
|
## Error Handling
|
|
283
348
|
|
|
284
349
|
**browser-use not found:**
|
|
285
|
-
-
|
|
350
|
+
- Install it: `curl -fsSL https://browser-use.com/cli/install.sh | bash`
|
|
351
|
+
- Or run `npx devrel-toolkit setup` which handles the installation
|
|
286
352
|
- Do NOT use `pip install browser-use` — that installs the Python SDK, not the CLI
|
|
287
|
-
-
|
|
353
|
+
- Do NOT fall back to Playwright — install browser-use
|
|
288
354
|
|
|
289
355
|
**Browser navigation fails:**
|
|
290
356
|
- Retry the action once
|