@vibeo/cli 0.4.6 → 0.5.0
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/commands/create.d.ts.map +1 -1
- package/dist/commands/create.js +84 -0
- package/dist/commands/create.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/commands/create.ts +85 -0
- package/src/index.ts +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.d.ts","sourceRoot":"","sources":["../../src/commands/create.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"create.d.ts","sourceRoot":"","sources":["../../src/commands/create.ts"],"names":[],"mappings":"AAmTA,eAAO,MAAM,cAAc,UAAyB,CAAC;AAErD,wBAAsB,aAAa,CACjC,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,GACf,OAAO,CAAC;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC,CAiEjE"}
|
package/dist/commands/create.js
CHANGED
|
@@ -206,8 +206,92 @@ export function Root() {
|
|
|
206
206
|
}
|
|
207
207
|
`;
|
|
208
208
|
// ---------------------------------------------------------------------------
|
|
209
|
+
const TEMPLATE_TIKTOK = `import React from "react";
|
|
210
|
+
import {
|
|
211
|
+
Composition, Sequence, VibeoRoot,
|
|
212
|
+
useCurrentFrame, useVideoConfig, interpolate, easeOut, easeInOut,
|
|
213
|
+
} from "@vibeo/core";
|
|
214
|
+
|
|
215
|
+
const SCENES = {
|
|
216
|
+
hook: { from: 0, duration: 90 },
|
|
217
|
+
content: { from: 90, duration: 270 },
|
|
218
|
+
cta: { from: 360, duration: 90 },
|
|
219
|
+
} as const;
|
|
220
|
+
const TOTAL = 450;
|
|
221
|
+
|
|
222
|
+
function HookScene() {
|
|
223
|
+
const frame = useCurrentFrame();
|
|
224
|
+
const { width, height } = useVideoConfig();
|
|
225
|
+
const scale = interpolate(frame, [0, 15], [0.5, 1], { easing: easeOut, extrapolateRight: "clamp" });
|
|
226
|
+
const opacity = interpolate(frame, [0, 10], [0, 1], { extrapolateRight: "clamp" });
|
|
227
|
+
const glow = interpolate(frame % 30, [0, 15, 30], [0, 15, 0]);
|
|
228
|
+
|
|
229
|
+
return (
|
|
230
|
+
<div style={{ width, height, display: "flex", justifyContent: "center", alignItems: "center", background: "linear-gradient(180deg, #0a0a0a, #1a0a2e)", padding: "100px 60px 150px" }}>
|
|
231
|
+
<h1 style={{ fontSize: 80, fontWeight: 900, color: "white", textAlign: "center", lineHeight: 1.2, opacity, transform: \`scale(\${scale})\`, textShadow: \`0 0 \${glow}px rgba(138, 92, 246, 0.8)\` }}>
|
|
232
|
+
Your Hook Text Here
|
|
233
|
+
</h1>
|
|
234
|
+
</div>
|
|
235
|
+
);
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
function ContentScene() {
|
|
239
|
+
const frame = useCurrentFrame();
|
|
240
|
+
const { width, height } = useVideoConfig();
|
|
241
|
+
const points = ["Point one goes here", "Point two goes here", "Point three goes here"];
|
|
242
|
+
|
|
243
|
+
return (
|
|
244
|
+
<div style={{ width, height, display: "flex", flexDirection: "column", justifyContent: "center", padding: "100px 60px 150px", background: "#0a0a0a", gap: 24 }}>
|
|
245
|
+
{points.map((point, i) => {
|
|
246
|
+
const delay = 15 + i * 20;
|
|
247
|
+
const opacity = interpolate(frame, [delay, delay + 15], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
|
|
248
|
+
const x = interpolate(frame, [delay, delay + 15], [-40, 0], { easing: easeOut, extrapolateLeft: "clamp", extrapolateRight: "clamp" });
|
|
249
|
+
return (
|
|
250
|
+
<div key={i} style={{ opacity, transform: \`translateX(\${x}px)\`, display: "flex", alignItems: "center", gap: 16 }}>
|
|
251
|
+
<div style={{ width: 48, height: 48, borderRadius: 12, background: "linear-gradient(135deg, #8b5cf6, #06b6d4)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 24, fontWeight: 700, color: "white" }}>{i + 1}</div>
|
|
252
|
+
<span style={{ fontSize: 40, color: "white", fontWeight: 600 }}>{point}</span>
|
|
253
|
+
</div>
|
|
254
|
+
);
|
|
255
|
+
})}
|
|
256
|
+
</div>
|
|
257
|
+
);
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
function CTAScene() {
|
|
261
|
+
const frame = useCurrentFrame();
|
|
262
|
+
const { width, height } = useVideoConfig();
|
|
263
|
+
const scale = interpolate(frame, [0, 20], [0.8, 1], { easing: easeOut, extrapolateRight: "clamp" });
|
|
264
|
+
const btnScale = interpolate(frame % 30, [0, 15, 30], [1, 1.05, 1]);
|
|
265
|
+
|
|
266
|
+
return (
|
|
267
|
+
<div style={{ width, height, display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", background: "linear-gradient(180deg, #0a0a0a, #1a0a2e)", padding: "100px 60px 150px", transform: \`scale(\${scale})\` }}>
|
|
268
|
+
<h1 style={{ fontSize: 72, fontWeight: 900, color: "white", textAlign: "center" }}>Follow for more</h1>
|
|
269
|
+
<div style={{ marginTop: 40, padding: "20px 60px", borderRadius: 50, background: "linear-gradient(135deg, #8b5cf6, #06b6d4)", fontSize: 36, fontWeight: 700, color: "white", transform: \`scale(\${btnScale})\` }}>Like & Share</div>
|
|
270
|
+
</div>
|
|
271
|
+
);
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
function TikTokVideo() {
|
|
275
|
+
return (
|
|
276
|
+
<>
|
|
277
|
+
<Sequence from={SCENES.hook.from} durationInFrames={SCENES.hook.duration}><HookScene /></Sequence>
|
|
278
|
+
<Sequence from={SCENES.content.from} durationInFrames={SCENES.content.duration}><ContentScene /></Sequence>
|
|
279
|
+
<Sequence from={SCENES.cta.from} durationInFrames={SCENES.cta.duration}><CTAScene /></Sequence>
|
|
280
|
+
</>
|
|
281
|
+
);
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
export function Root() {
|
|
285
|
+
return (
|
|
286
|
+
<VibeoRoot>
|
|
287
|
+
<Composition id="TikTokVideo" component={TikTokVideo} width={1080} height={1920} fps={30} durationInFrames={TOTAL} />
|
|
288
|
+
</VibeoRoot>
|
|
289
|
+
);
|
|
290
|
+
}
|
|
291
|
+
`;
|
|
209
292
|
const TEMPLATES = {
|
|
210
293
|
basic: { description: "Minimal composition with text animation and two scenes", source: TEMPLATE_BASIC },
|
|
294
|
+
tiktok: { description: "Vertical 1080x1920 short-form video (TikTok/Shorts/Reels)", source: TEMPLATE_TIKTOK },
|
|
211
295
|
"audio-reactive": { description: "Audio visualization with frequency bars", source: TEMPLATE_AUDIO_REACTIVE },
|
|
212
296
|
transitions: { description: "Scene transitions (fade, slide)", source: TEMPLATE_TRANSITIONS },
|
|
213
297
|
subtitles: { description: "Video with SRT subtitle overlay", source: TEMPLATE_SUBTITLES },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.js","sourceRoot":"","sources":["../../src/commands/create.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"create.js","sourceRoot":"","sources":["../../src/commands/create.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -25,7 +25,7 @@ cli.command("create", {
|
|
|
25
25
|
}),
|
|
26
26
|
options: z.object({
|
|
27
27
|
template: z
|
|
28
|
-
.enum(["basic", "audio-reactive", "transitions", "subtitles"])
|
|
28
|
+
.enum(["basic", "tiktok", "audio-reactive", "transitions", "subtitles"])
|
|
29
29
|
.default("basic")
|
|
30
30
|
.describe("Template to scaffold from"),
|
|
31
31
|
}),
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,MAAM,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC,OAAO,EAAE;IAC9B,WAAW,EAAE,8CAA8C;IAC3D,IAAI,EAAE;QACJ,WAAW,EAAE;YACX,4BAA4B;YAC5B,sCAAsC;YACtC,+BAA+B;YAC/B,kCAAkC;SACnC;KACF;CACF,CAAC,CAAC;AAEH,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE;IACpB,WAAW,EAAE,4CAA4C;IACzD,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC;QACb,IAAI,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,wBAAwB,CAAC;KACpD,CAAC;IACF,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC;QAChB,QAAQ,EAAE,CAAC;aACR,IAAI,CAAC,CAAC,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,WAAW,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/commands/create.ts
CHANGED
|
@@ -213,8 +213,93 @@ export function Root() {
|
|
|
213
213
|
|
|
214
214
|
// ---------------------------------------------------------------------------
|
|
215
215
|
|
|
216
|
+
const TEMPLATE_TIKTOK = `import React from "react";
|
|
217
|
+
import {
|
|
218
|
+
Composition, Sequence, VibeoRoot,
|
|
219
|
+
useCurrentFrame, useVideoConfig, interpolate, easeOut, easeInOut,
|
|
220
|
+
} from "@vibeo/core";
|
|
221
|
+
|
|
222
|
+
const SCENES = {
|
|
223
|
+
hook: { from: 0, duration: 90 },
|
|
224
|
+
content: { from: 90, duration: 270 },
|
|
225
|
+
cta: { from: 360, duration: 90 },
|
|
226
|
+
} as const;
|
|
227
|
+
const TOTAL = 450;
|
|
228
|
+
|
|
229
|
+
function HookScene() {
|
|
230
|
+
const frame = useCurrentFrame();
|
|
231
|
+
const { width, height } = useVideoConfig();
|
|
232
|
+
const scale = interpolate(frame, [0, 15], [0.5, 1], { easing: easeOut, extrapolateRight: "clamp" });
|
|
233
|
+
const opacity = interpolate(frame, [0, 10], [0, 1], { extrapolateRight: "clamp" });
|
|
234
|
+
const glow = interpolate(frame % 30, [0, 15, 30], [0, 15, 0]);
|
|
235
|
+
|
|
236
|
+
return (
|
|
237
|
+
<div style={{ width, height, display: "flex", justifyContent: "center", alignItems: "center", background: "linear-gradient(180deg, #0a0a0a, #1a0a2e)", padding: "100px 60px 150px" }}>
|
|
238
|
+
<h1 style={{ fontSize: 80, fontWeight: 900, color: "white", textAlign: "center", lineHeight: 1.2, opacity, transform: \`scale(\${scale})\`, textShadow: \`0 0 \${glow}px rgba(138, 92, 246, 0.8)\` }}>
|
|
239
|
+
Your Hook Text Here
|
|
240
|
+
</h1>
|
|
241
|
+
</div>
|
|
242
|
+
);
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
function ContentScene() {
|
|
246
|
+
const frame = useCurrentFrame();
|
|
247
|
+
const { width, height } = useVideoConfig();
|
|
248
|
+
const points = ["Point one goes here", "Point two goes here", "Point three goes here"];
|
|
249
|
+
|
|
250
|
+
return (
|
|
251
|
+
<div style={{ width, height, display: "flex", flexDirection: "column", justifyContent: "center", padding: "100px 60px 150px", background: "#0a0a0a", gap: 24 }}>
|
|
252
|
+
{points.map((point, i) => {
|
|
253
|
+
const delay = 15 + i * 20;
|
|
254
|
+
const opacity = interpolate(frame, [delay, delay + 15], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
|
|
255
|
+
const x = interpolate(frame, [delay, delay + 15], [-40, 0], { easing: easeOut, extrapolateLeft: "clamp", extrapolateRight: "clamp" });
|
|
256
|
+
return (
|
|
257
|
+
<div key={i} style={{ opacity, transform: \`translateX(\${x}px)\`, display: "flex", alignItems: "center", gap: 16 }}>
|
|
258
|
+
<div style={{ width: 48, height: 48, borderRadius: 12, background: "linear-gradient(135deg, #8b5cf6, #06b6d4)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 24, fontWeight: 700, color: "white" }}>{i + 1}</div>
|
|
259
|
+
<span style={{ fontSize: 40, color: "white", fontWeight: 600 }}>{point}</span>
|
|
260
|
+
</div>
|
|
261
|
+
);
|
|
262
|
+
})}
|
|
263
|
+
</div>
|
|
264
|
+
);
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
function CTAScene() {
|
|
268
|
+
const frame = useCurrentFrame();
|
|
269
|
+
const { width, height } = useVideoConfig();
|
|
270
|
+
const scale = interpolate(frame, [0, 20], [0.8, 1], { easing: easeOut, extrapolateRight: "clamp" });
|
|
271
|
+
const btnScale = interpolate(frame % 30, [0, 15, 30], [1, 1.05, 1]);
|
|
272
|
+
|
|
273
|
+
return (
|
|
274
|
+
<div style={{ width, height, display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", background: "linear-gradient(180deg, #0a0a0a, #1a0a2e)", padding: "100px 60px 150px", transform: \`scale(\${scale})\` }}>
|
|
275
|
+
<h1 style={{ fontSize: 72, fontWeight: 900, color: "white", textAlign: "center" }}>Follow for more</h1>
|
|
276
|
+
<div style={{ marginTop: 40, padding: "20px 60px", borderRadius: 50, background: "linear-gradient(135deg, #8b5cf6, #06b6d4)", fontSize: 36, fontWeight: 700, color: "white", transform: \`scale(\${btnScale})\` }}>Like & Share</div>
|
|
277
|
+
</div>
|
|
278
|
+
);
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
function TikTokVideo() {
|
|
282
|
+
return (
|
|
283
|
+
<>
|
|
284
|
+
<Sequence from={SCENES.hook.from} durationInFrames={SCENES.hook.duration}><HookScene /></Sequence>
|
|
285
|
+
<Sequence from={SCENES.content.from} durationInFrames={SCENES.content.duration}><ContentScene /></Sequence>
|
|
286
|
+
<Sequence from={SCENES.cta.from} durationInFrames={SCENES.cta.duration}><CTAScene /></Sequence>
|
|
287
|
+
</>
|
|
288
|
+
);
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
export function Root() {
|
|
292
|
+
return (
|
|
293
|
+
<VibeoRoot>
|
|
294
|
+
<Composition id="TikTokVideo" component={TikTokVideo} width={1080} height={1920} fps={30} durationInFrames={TOTAL} />
|
|
295
|
+
</VibeoRoot>
|
|
296
|
+
);
|
|
297
|
+
}
|
|
298
|
+
`;
|
|
299
|
+
|
|
216
300
|
const TEMPLATES: Record<string, { description: string; source: string }> = {
|
|
217
301
|
basic: { description: "Minimal composition with text animation and two scenes", source: TEMPLATE_BASIC },
|
|
302
|
+
tiktok: { description: "Vertical 1080x1920 short-form video (TikTok/Shorts/Reels)", source: TEMPLATE_TIKTOK },
|
|
218
303
|
"audio-reactive": { description: "Audio visualization with frequency bars", source: TEMPLATE_AUDIO_REACTIVE },
|
|
219
304
|
transitions: { description: "Scene transitions (fade, slide)", source: TEMPLATE_TRANSITIONS },
|
|
220
305
|
subtitles: { description: "Video with SRT subtitle overlay", source: TEMPLATE_SUBTITLES },
|
package/src/index.ts
CHANGED
|
@@ -27,7 +27,7 @@ cli.command("create", {
|
|
|
27
27
|
}),
|
|
28
28
|
options: z.object({
|
|
29
29
|
template: z
|
|
30
|
-
.enum(["basic", "audio-reactive", "transitions", "subtitles"])
|
|
30
|
+
.enum(["basic", "tiktok", "audio-reactive", "transitions", "subtitles"])
|
|
31
31
|
.default("basic")
|
|
32
32
|
.describe("Template to scaffold from"),
|
|
33
33
|
}),
|