@contractspec/lib.video-gen 2.7.6 → 2.7.7
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/README.md +67 -25
- package/dist/browser/compositions/api-overview.js +114 -114
- package/dist/browser/compositions/index.js +115 -115
- package/dist/browser/compositions/primitives/index.js +113 -113
- package/dist/browser/compositions/social-clip.js +114 -114
- package/dist/browser/compositions/terminal-demo.js +113 -113
- package/dist/browser/design/index.js +35 -35
- package/dist/browser/generators/index.js +94 -94
- package/dist/browser/generators/scene-planner.js +94 -94
- package/dist/browser/generators/script-generator.js +94 -94
- package/dist/browser/generators/video-generator.js +94 -94
- package/dist/browser/i18n/catalogs/index.js +74 -74
- package/dist/browser/i18n/index.js +94 -94
- package/dist/browser/i18n/locale.js +2 -2
- package/dist/browser/i18n/messages.js +74 -74
- package/dist/browser/index.js +212 -212
- package/dist/browser/player/demo-player.js +116 -116
- package/dist/browser/player/index.js +116 -116
- package/dist/browser/remotion/Root.js +115 -115
- package/dist/browser/remotion/index.js +115 -115
- package/dist/compositions/api-overview.js +114 -114
- package/dist/compositions/index.d.ts +4 -4
- package/dist/compositions/index.js +115 -115
- package/dist/compositions/primitives/animated-text.d.ts +1 -1
- package/dist/compositions/primitives/brand-frame.d.ts +1 -1
- package/dist/compositions/primitives/index.d.ts +8 -8
- package/dist/compositions/primitives/index.js +113 -113
- package/dist/compositions/primitives/transition.d.ts +1 -1
- package/dist/compositions/social-clip.js +114 -114
- package/dist/compositions/terminal-demo.js +113 -113
- package/dist/design/index.d.ts +2 -2
- package/dist/design/index.js +35 -35
- package/dist/generators/index.d.ts +2 -2
- package/dist/generators/index.js +94 -94
- package/dist/generators/scene-planner.d.ts +1 -1
- package/dist/generators/scene-planner.js +94 -94
- package/dist/generators/script-generator.d.ts +2 -2
- package/dist/generators/script-generator.js +94 -94
- package/dist/generators/video-generator.js +94 -94
- package/dist/i18n/catalogs/index.d.ts +1 -1
- package/dist/i18n/catalogs/index.js +74 -74
- package/dist/i18n/index.d.ts +7 -7
- package/dist/i18n/index.js +94 -94
- package/dist/i18n/locale.d.ts +1 -1
- package/dist/i18n/locale.js +2 -2
- package/dist/i18n/messages.js +74 -74
- package/dist/index.d.ts +3 -3
- package/dist/index.js +212 -212
- package/dist/node/compositions/api-overview.js +114 -114
- package/dist/node/compositions/index.js +115 -115
- package/dist/node/compositions/primitives/index.js +113 -113
- package/dist/node/compositions/social-clip.js +114 -114
- package/dist/node/compositions/terminal-demo.js +113 -113
- package/dist/node/design/index.js +35 -35
- package/dist/node/generators/index.js +94 -94
- package/dist/node/generators/scene-planner.js +94 -94
- package/dist/node/generators/script-generator.js +94 -94
- package/dist/node/generators/video-generator.js +94 -94
- package/dist/node/i18n/catalogs/index.js +74 -74
- package/dist/node/i18n/index.js +94 -94
- package/dist/node/i18n/locale.js +2 -2
- package/dist/node/i18n/messages.js +74 -74
- package/dist/node/index.js +212 -212
- package/dist/node/player/demo-player.js +116 -116
- package/dist/node/player/index.js +116 -116
- package/dist/node/remotion/Root.js +115 -115
- package/dist/node/remotion/index.js +115 -115
- package/dist/player/demo-player.js +116 -116
- package/dist/player/index.d.ts +1 -1
- package/dist/player/index.js +116 -116
- package/dist/remotion/Root.js +115 -115
- package/dist/remotion/index.js +115 -115
- package/dist/renderers/index.d.ts +2 -2
- package/dist/types.d.ts +6 -6
- package/package.json +15 -15
package/dist/remotion/Root.js
CHANGED
|
@@ -48,6 +48,109 @@ var defaultVideoTheme = {
|
|
|
48
48
|
video: defaultVideoColors
|
|
49
49
|
};
|
|
50
50
|
|
|
51
|
+
// src/design/typography.ts
|
|
52
|
+
var videoTypography = {
|
|
53
|
+
title: {
|
|
54
|
+
fontSize: 72,
|
|
55
|
+
lineHeight: 1.1,
|
|
56
|
+
fontWeight: 700,
|
|
57
|
+
letterSpacing: -1
|
|
58
|
+
},
|
|
59
|
+
heading: {
|
|
60
|
+
fontSize: 56,
|
|
61
|
+
lineHeight: 1.2,
|
|
62
|
+
fontWeight: 600,
|
|
63
|
+
letterSpacing: -0.5
|
|
64
|
+
},
|
|
65
|
+
subheading: {
|
|
66
|
+
fontSize: 40,
|
|
67
|
+
lineHeight: 1.25,
|
|
68
|
+
fontWeight: 500
|
|
69
|
+
},
|
|
70
|
+
body: {
|
|
71
|
+
fontSize: 32,
|
|
72
|
+
lineHeight: 1.5,
|
|
73
|
+
fontWeight: 400
|
|
74
|
+
},
|
|
75
|
+
code: {
|
|
76
|
+
fontSize: 28,
|
|
77
|
+
lineHeight: 1.6,
|
|
78
|
+
fontWeight: 400
|
|
79
|
+
},
|
|
80
|
+
caption: {
|
|
81
|
+
fontSize: 24,
|
|
82
|
+
lineHeight: 1.4,
|
|
83
|
+
fontWeight: 400
|
|
84
|
+
},
|
|
85
|
+
label: {
|
|
86
|
+
fontSize: 20,
|
|
87
|
+
lineHeight: 1.3,
|
|
88
|
+
fontWeight: 600,
|
|
89
|
+
letterSpacing: 1
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
function scaleTypography(style, targetWidth) {
|
|
93
|
+
const scale = targetWidth / 1920;
|
|
94
|
+
return {
|
|
95
|
+
...style,
|
|
96
|
+
fontSize: Math.round(style.fontSize * scale),
|
|
97
|
+
letterSpacing: style.letterSpacing ? Math.round(style.letterSpacing * scale * 10) / 10 : undefined
|
|
98
|
+
};
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
// src/compositions/primitives/animated-text.tsx
|
|
102
|
+
import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
|
|
103
|
+
import { jsxDEV } from "react/jsx-dev-runtime";
|
|
104
|
+
var AnimatedText = ({
|
|
105
|
+
text,
|
|
106
|
+
variant = "body",
|
|
107
|
+
style: styleOverride,
|
|
108
|
+
enterAt = 0,
|
|
109
|
+
exitAt,
|
|
110
|
+
color = "#ffffff",
|
|
111
|
+
align = "left"
|
|
112
|
+
}) => {
|
|
113
|
+
const frame = useCurrentFrame();
|
|
114
|
+
const { width } = useVideoConfig();
|
|
115
|
+
const baseStyle = videoTypography[variant];
|
|
116
|
+
const scaled = scaleTypography(baseStyle, width);
|
|
117
|
+
const finalStyle = { ...scaled, ...styleOverride };
|
|
118
|
+
const enterProgress = interpolate(frame, [enterAt, enterAt + videoDurations.textEntrance], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
|
|
119
|
+
const enterOpacity = interpolate(enterProgress, [0, 1], [0, 1], {
|
|
120
|
+
easing: videoEasing.entrance
|
|
121
|
+
});
|
|
122
|
+
const enterTranslateY = interpolate(enterProgress, [0, 1], [30, 0], {
|
|
123
|
+
easing: videoEasing.entrance
|
|
124
|
+
});
|
|
125
|
+
let exitOpacity = 1;
|
|
126
|
+
let exitTranslateY = 0;
|
|
127
|
+
if (exitAt !== undefined) {
|
|
128
|
+
const exitProgress = interpolate(frame, [exitAt, exitAt + videoDurations.textExit], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
|
|
129
|
+
exitOpacity = interpolate(exitProgress, [0, 1], [1, 0], {
|
|
130
|
+
easing: videoEasing.exit
|
|
131
|
+
});
|
|
132
|
+
exitTranslateY = interpolate(exitProgress, [0, 1], [0, -20], {
|
|
133
|
+
easing: videoEasing.exit
|
|
134
|
+
});
|
|
135
|
+
}
|
|
136
|
+
const opacity = enterOpacity * exitOpacity;
|
|
137
|
+
const translateY = enterTranslateY + exitTranslateY;
|
|
138
|
+
return /* @__PURE__ */ jsxDEV("div", {
|
|
139
|
+
style: {
|
|
140
|
+
fontSize: finalStyle.fontSize,
|
|
141
|
+
lineHeight: finalStyle.lineHeight,
|
|
142
|
+
fontWeight: finalStyle.fontWeight,
|
|
143
|
+
letterSpacing: finalStyle.letterSpacing,
|
|
144
|
+
color,
|
|
145
|
+
textAlign: align,
|
|
146
|
+
opacity,
|
|
147
|
+
transform: `translateY(${translateY}px)`,
|
|
148
|
+
willChange: "opacity, transform"
|
|
149
|
+
},
|
|
150
|
+
children: text
|
|
151
|
+
}, undefined, false, undefined, this);
|
|
152
|
+
};
|
|
153
|
+
|
|
51
154
|
// src/design/layouts.ts
|
|
52
155
|
import { VIDEO_FORMATS } from "@contractspec/lib.contracts-integrations/integrations/providers/video";
|
|
53
156
|
var DEFAULT_FPS = 30;
|
|
@@ -84,8 +187,8 @@ function getAllFormatVariants() {
|
|
|
84
187
|
}
|
|
85
188
|
|
|
86
189
|
// src/compositions/primitives/brand-frame.tsx
|
|
87
|
-
import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
|
|
88
|
-
import { jsxDEV } from "react/jsx-dev-runtime";
|
|
190
|
+
import { interpolate as interpolate2, useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig2 } from "remotion";
|
|
191
|
+
import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
|
|
89
192
|
var BrandFrame = ({
|
|
90
193
|
styleOverrides,
|
|
91
194
|
showBranding = true,
|
|
@@ -93,8 +196,8 @@ var BrandFrame = ({
|
|
|
93
196
|
variant = "gradient",
|
|
94
197
|
children
|
|
95
198
|
}) => {
|
|
96
|
-
const frame =
|
|
97
|
-
const { width, height } =
|
|
199
|
+
const frame = useCurrentFrame2();
|
|
200
|
+
const { width, height } = useVideoConfig2();
|
|
98
201
|
const theme = defaultVideoTheme;
|
|
99
202
|
const safeZone = scaleSafeZone({ type: "custom", width, height });
|
|
100
203
|
const primaryColor = styleOverrides?.primaryColor ?? theme.colors.primary;
|
|
@@ -112,16 +215,16 @@ var BrandFrame = ({
|
|
|
112
215
|
background = "#000000";
|
|
113
216
|
break;
|
|
114
217
|
}
|
|
115
|
-
const entranceOpacity = animateEntrance ?
|
|
218
|
+
const entranceOpacity = animateEntrance ? interpolate2(frame, [0, 15], [0, 1], {
|
|
116
219
|
extrapolateLeft: "clamp",
|
|
117
220
|
extrapolateRight: "clamp",
|
|
118
221
|
easing: videoEasing.entrance
|
|
119
222
|
}) : 1;
|
|
120
|
-
const brandOpacity = showBranding ?
|
|
223
|
+
const brandOpacity = showBranding ? interpolate2(frame, [videoDurations.brandReveal, videoDurations.brandReveal + 15], [0, 0.3], {
|
|
121
224
|
extrapolateLeft: "clamp",
|
|
122
225
|
extrapolateRight: "clamp"
|
|
123
226
|
}) : 0;
|
|
124
|
-
return /* @__PURE__ */
|
|
227
|
+
return /* @__PURE__ */ jsxDEV2("div", {
|
|
125
228
|
style: {
|
|
126
229
|
width,
|
|
127
230
|
height,
|
|
@@ -131,7 +234,7 @@ var BrandFrame = ({
|
|
|
131
234
|
opacity: entranceOpacity
|
|
132
235
|
},
|
|
133
236
|
children: [
|
|
134
|
-
variant === "gradient" && /* @__PURE__ */
|
|
237
|
+
variant === "gradient" && /* @__PURE__ */ jsxDEV2("div", {
|
|
135
238
|
style: {
|
|
136
239
|
position: "absolute",
|
|
137
240
|
top: "-20%",
|
|
@@ -143,7 +246,7 @@ var BrandFrame = ({
|
|
|
143
246
|
pointerEvents: "none"
|
|
144
247
|
}
|
|
145
248
|
}, undefined, false, undefined, this),
|
|
146
|
-
/* @__PURE__ */
|
|
249
|
+
/* @__PURE__ */ jsxDEV2("div", {
|
|
147
250
|
style: {
|
|
148
251
|
position: "absolute",
|
|
149
252
|
left: safeZone.horizontal,
|
|
@@ -155,7 +258,7 @@ var BrandFrame = ({
|
|
|
155
258
|
},
|
|
156
259
|
children
|
|
157
260
|
}, undefined, false, undefined, this),
|
|
158
|
-
showBranding && /* @__PURE__ */
|
|
261
|
+
showBranding && /* @__PURE__ */ jsxDEV2("div", {
|
|
159
262
|
style: {
|
|
160
263
|
position: "absolute",
|
|
161
264
|
bottom: safeZone.vertical / 2,
|
|
@@ -172,109 +275,6 @@ var BrandFrame = ({
|
|
|
172
275
|
}, undefined, true, undefined, this);
|
|
173
276
|
};
|
|
174
277
|
|
|
175
|
-
// src/design/typography.ts
|
|
176
|
-
var videoTypography = {
|
|
177
|
-
title: {
|
|
178
|
-
fontSize: 72,
|
|
179
|
-
lineHeight: 1.1,
|
|
180
|
-
fontWeight: 700,
|
|
181
|
-
letterSpacing: -1
|
|
182
|
-
},
|
|
183
|
-
heading: {
|
|
184
|
-
fontSize: 56,
|
|
185
|
-
lineHeight: 1.2,
|
|
186
|
-
fontWeight: 600,
|
|
187
|
-
letterSpacing: -0.5
|
|
188
|
-
},
|
|
189
|
-
subheading: {
|
|
190
|
-
fontSize: 40,
|
|
191
|
-
lineHeight: 1.25,
|
|
192
|
-
fontWeight: 500
|
|
193
|
-
},
|
|
194
|
-
body: {
|
|
195
|
-
fontSize: 32,
|
|
196
|
-
lineHeight: 1.5,
|
|
197
|
-
fontWeight: 400
|
|
198
|
-
},
|
|
199
|
-
code: {
|
|
200
|
-
fontSize: 28,
|
|
201
|
-
lineHeight: 1.6,
|
|
202
|
-
fontWeight: 400
|
|
203
|
-
},
|
|
204
|
-
caption: {
|
|
205
|
-
fontSize: 24,
|
|
206
|
-
lineHeight: 1.4,
|
|
207
|
-
fontWeight: 400
|
|
208
|
-
},
|
|
209
|
-
label: {
|
|
210
|
-
fontSize: 20,
|
|
211
|
-
lineHeight: 1.3,
|
|
212
|
-
fontWeight: 600,
|
|
213
|
-
letterSpacing: 1
|
|
214
|
-
}
|
|
215
|
-
};
|
|
216
|
-
function scaleTypography(style, targetWidth) {
|
|
217
|
-
const scale = targetWidth / 1920;
|
|
218
|
-
return {
|
|
219
|
-
...style,
|
|
220
|
-
fontSize: Math.round(style.fontSize * scale),
|
|
221
|
-
letterSpacing: style.letterSpacing ? Math.round(style.letterSpacing * scale * 10) / 10 : undefined
|
|
222
|
-
};
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
// src/compositions/primitives/animated-text.tsx
|
|
226
|
-
import { interpolate as interpolate2, useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig2 } from "remotion";
|
|
227
|
-
import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
|
|
228
|
-
var AnimatedText = ({
|
|
229
|
-
text,
|
|
230
|
-
variant = "body",
|
|
231
|
-
style: styleOverride,
|
|
232
|
-
enterAt = 0,
|
|
233
|
-
exitAt,
|
|
234
|
-
color = "#ffffff",
|
|
235
|
-
align = "left"
|
|
236
|
-
}) => {
|
|
237
|
-
const frame = useCurrentFrame2();
|
|
238
|
-
const { width } = useVideoConfig2();
|
|
239
|
-
const baseStyle = videoTypography[variant];
|
|
240
|
-
const scaled = scaleTypography(baseStyle, width);
|
|
241
|
-
const finalStyle = { ...scaled, ...styleOverride };
|
|
242
|
-
const enterProgress = interpolate2(frame, [enterAt, enterAt + videoDurations.textEntrance], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
|
|
243
|
-
const enterOpacity = interpolate2(enterProgress, [0, 1], [0, 1], {
|
|
244
|
-
easing: videoEasing.entrance
|
|
245
|
-
});
|
|
246
|
-
const enterTranslateY = interpolate2(enterProgress, [0, 1], [30, 0], {
|
|
247
|
-
easing: videoEasing.entrance
|
|
248
|
-
});
|
|
249
|
-
let exitOpacity = 1;
|
|
250
|
-
let exitTranslateY = 0;
|
|
251
|
-
if (exitAt !== undefined) {
|
|
252
|
-
const exitProgress = interpolate2(frame, [exitAt, exitAt + videoDurations.textExit], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
|
|
253
|
-
exitOpacity = interpolate2(exitProgress, [0, 1], [1, 0], {
|
|
254
|
-
easing: videoEasing.exit
|
|
255
|
-
});
|
|
256
|
-
exitTranslateY = interpolate2(exitProgress, [0, 1], [0, -20], {
|
|
257
|
-
easing: videoEasing.exit
|
|
258
|
-
});
|
|
259
|
-
}
|
|
260
|
-
const opacity = enterOpacity * exitOpacity;
|
|
261
|
-
const translateY = enterTranslateY + exitTranslateY;
|
|
262
|
-
return /* @__PURE__ */ jsxDEV2("div", {
|
|
263
|
-
style: {
|
|
264
|
-
fontSize: finalStyle.fontSize,
|
|
265
|
-
lineHeight: finalStyle.lineHeight,
|
|
266
|
-
fontWeight: finalStyle.fontWeight,
|
|
267
|
-
letterSpacing: finalStyle.letterSpacing,
|
|
268
|
-
color,
|
|
269
|
-
textAlign: align,
|
|
270
|
-
opacity,
|
|
271
|
-
transform: `translateY(${translateY}px)`,
|
|
272
|
-
willChange: "opacity, transform"
|
|
273
|
-
},
|
|
274
|
-
children: text
|
|
275
|
-
}, undefined, false, undefined, this);
|
|
276
|
-
};
|
|
277
|
-
|
|
278
278
|
// src/compositions/primitives/code-block.tsx
|
|
279
279
|
import { interpolate as interpolate3, useCurrentFrame as useCurrentFrame3, useVideoConfig as useVideoConfig3 } from "remotion";
|
|
280
280
|
import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
|
|
@@ -430,8 +430,8 @@ var ProgressBar = ({
|
|
|
430
430
|
// src/compositions/api-overview.tsx
|
|
431
431
|
import {
|
|
432
432
|
AbsoluteFill,
|
|
433
|
-
Sequence,
|
|
434
433
|
interpolate as interpolate4,
|
|
434
|
+
Sequence,
|
|
435
435
|
useCurrentFrame as useCurrentFrame5,
|
|
436
436
|
useVideoConfig as useVideoConfig5
|
|
437
437
|
} from "remotion";
|
|
@@ -797,8 +797,8 @@ var Terminal = ({
|
|
|
797
797
|
// src/compositions/social-clip.tsx
|
|
798
798
|
import {
|
|
799
799
|
AbsoluteFill as AbsoluteFill2,
|
|
800
|
-
Sequence as Sequence2,
|
|
801
800
|
interpolate as interpolate6,
|
|
801
|
+
Sequence as Sequence2,
|
|
802
802
|
useCurrentFrame as useCurrentFrame7,
|
|
803
803
|
useVideoConfig as useVideoConfig7
|
|
804
804
|
} from "remotion";
|
package/dist/remotion/index.js
CHANGED
|
@@ -48,6 +48,109 @@ var defaultVideoTheme = {
|
|
|
48
48
|
video: defaultVideoColors
|
|
49
49
|
};
|
|
50
50
|
|
|
51
|
+
// src/design/typography.ts
|
|
52
|
+
var videoTypography = {
|
|
53
|
+
title: {
|
|
54
|
+
fontSize: 72,
|
|
55
|
+
lineHeight: 1.1,
|
|
56
|
+
fontWeight: 700,
|
|
57
|
+
letterSpacing: -1
|
|
58
|
+
},
|
|
59
|
+
heading: {
|
|
60
|
+
fontSize: 56,
|
|
61
|
+
lineHeight: 1.2,
|
|
62
|
+
fontWeight: 600,
|
|
63
|
+
letterSpacing: -0.5
|
|
64
|
+
},
|
|
65
|
+
subheading: {
|
|
66
|
+
fontSize: 40,
|
|
67
|
+
lineHeight: 1.25,
|
|
68
|
+
fontWeight: 500
|
|
69
|
+
},
|
|
70
|
+
body: {
|
|
71
|
+
fontSize: 32,
|
|
72
|
+
lineHeight: 1.5,
|
|
73
|
+
fontWeight: 400
|
|
74
|
+
},
|
|
75
|
+
code: {
|
|
76
|
+
fontSize: 28,
|
|
77
|
+
lineHeight: 1.6,
|
|
78
|
+
fontWeight: 400
|
|
79
|
+
},
|
|
80
|
+
caption: {
|
|
81
|
+
fontSize: 24,
|
|
82
|
+
lineHeight: 1.4,
|
|
83
|
+
fontWeight: 400
|
|
84
|
+
},
|
|
85
|
+
label: {
|
|
86
|
+
fontSize: 20,
|
|
87
|
+
lineHeight: 1.3,
|
|
88
|
+
fontWeight: 600,
|
|
89
|
+
letterSpacing: 1
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
function scaleTypography(style, targetWidth) {
|
|
93
|
+
const scale = targetWidth / 1920;
|
|
94
|
+
return {
|
|
95
|
+
...style,
|
|
96
|
+
fontSize: Math.round(style.fontSize * scale),
|
|
97
|
+
letterSpacing: style.letterSpacing ? Math.round(style.letterSpacing * scale * 10) / 10 : undefined
|
|
98
|
+
};
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
// src/compositions/primitives/animated-text.tsx
|
|
102
|
+
import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
|
|
103
|
+
import { jsxDEV } from "react/jsx-dev-runtime";
|
|
104
|
+
var AnimatedText = ({
|
|
105
|
+
text,
|
|
106
|
+
variant = "body",
|
|
107
|
+
style: styleOverride,
|
|
108
|
+
enterAt = 0,
|
|
109
|
+
exitAt,
|
|
110
|
+
color = "#ffffff",
|
|
111
|
+
align = "left"
|
|
112
|
+
}) => {
|
|
113
|
+
const frame = useCurrentFrame();
|
|
114
|
+
const { width } = useVideoConfig();
|
|
115
|
+
const baseStyle = videoTypography[variant];
|
|
116
|
+
const scaled = scaleTypography(baseStyle, width);
|
|
117
|
+
const finalStyle = { ...scaled, ...styleOverride };
|
|
118
|
+
const enterProgress = interpolate(frame, [enterAt, enterAt + videoDurations.textEntrance], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
|
|
119
|
+
const enterOpacity = interpolate(enterProgress, [0, 1], [0, 1], {
|
|
120
|
+
easing: videoEasing.entrance
|
|
121
|
+
});
|
|
122
|
+
const enterTranslateY = interpolate(enterProgress, [0, 1], [30, 0], {
|
|
123
|
+
easing: videoEasing.entrance
|
|
124
|
+
});
|
|
125
|
+
let exitOpacity = 1;
|
|
126
|
+
let exitTranslateY = 0;
|
|
127
|
+
if (exitAt !== undefined) {
|
|
128
|
+
const exitProgress = interpolate(frame, [exitAt, exitAt + videoDurations.textExit], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
|
|
129
|
+
exitOpacity = interpolate(exitProgress, [0, 1], [1, 0], {
|
|
130
|
+
easing: videoEasing.exit
|
|
131
|
+
});
|
|
132
|
+
exitTranslateY = interpolate(exitProgress, [0, 1], [0, -20], {
|
|
133
|
+
easing: videoEasing.exit
|
|
134
|
+
});
|
|
135
|
+
}
|
|
136
|
+
const opacity = enterOpacity * exitOpacity;
|
|
137
|
+
const translateY = enterTranslateY + exitTranslateY;
|
|
138
|
+
return /* @__PURE__ */ jsxDEV("div", {
|
|
139
|
+
style: {
|
|
140
|
+
fontSize: finalStyle.fontSize,
|
|
141
|
+
lineHeight: finalStyle.lineHeight,
|
|
142
|
+
fontWeight: finalStyle.fontWeight,
|
|
143
|
+
letterSpacing: finalStyle.letterSpacing,
|
|
144
|
+
color,
|
|
145
|
+
textAlign: align,
|
|
146
|
+
opacity,
|
|
147
|
+
transform: `translateY(${translateY}px)`,
|
|
148
|
+
willChange: "opacity, transform"
|
|
149
|
+
},
|
|
150
|
+
children: text
|
|
151
|
+
}, undefined, false, undefined, this);
|
|
152
|
+
};
|
|
153
|
+
|
|
51
154
|
// src/design/layouts.ts
|
|
52
155
|
import { VIDEO_FORMATS } from "@contractspec/lib.contracts-integrations/integrations/providers/video";
|
|
53
156
|
var DEFAULT_FPS = 30;
|
|
@@ -84,8 +187,8 @@ function getAllFormatVariants() {
|
|
|
84
187
|
}
|
|
85
188
|
|
|
86
189
|
// src/compositions/primitives/brand-frame.tsx
|
|
87
|
-
import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
|
|
88
|
-
import { jsxDEV } from "react/jsx-dev-runtime";
|
|
190
|
+
import { interpolate as interpolate2, useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig2 } from "remotion";
|
|
191
|
+
import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
|
|
89
192
|
var BrandFrame = ({
|
|
90
193
|
styleOverrides,
|
|
91
194
|
showBranding = true,
|
|
@@ -93,8 +196,8 @@ var BrandFrame = ({
|
|
|
93
196
|
variant = "gradient",
|
|
94
197
|
children
|
|
95
198
|
}) => {
|
|
96
|
-
const frame =
|
|
97
|
-
const { width, height } =
|
|
199
|
+
const frame = useCurrentFrame2();
|
|
200
|
+
const { width, height } = useVideoConfig2();
|
|
98
201
|
const theme = defaultVideoTheme;
|
|
99
202
|
const safeZone = scaleSafeZone({ type: "custom", width, height });
|
|
100
203
|
const primaryColor = styleOverrides?.primaryColor ?? theme.colors.primary;
|
|
@@ -112,16 +215,16 @@ var BrandFrame = ({
|
|
|
112
215
|
background = "#000000";
|
|
113
216
|
break;
|
|
114
217
|
}
|
|
115
|
-
const entranceOpacity = animateEntrance ?
|
|
218
|
+
const entranceOpacity = animateEntrance ? interpolate2(frame, [0, 15], [0, 1], {
|
|
116
219
|
extrapolateLeft: "clamp",
|
|
117
220
|
extrapolateRight: "clamp",
|
|
118
221
|
easing: videoEasing.entrance
|
|
119
222
|
}) : 1;
|
|
120
|
-
const brandOpacity = showBranding ?
|
|
223
|
+
const brandOpacity = showBranding ? interpolate2(frame, [videoDurations.brandReveal, videoDurations.brandReveal + 15], [0, 0.3], {
|
|
121
224
|
extrapolateLeft: "clamp",
|
|
122
225
|
extrapolateRight: "clamp"
|
|
123
226
|
}) : 0;
|
|
124
|
-
return /* @__PURE__ */
|
|
227
|
+
return /* @__PURE__ */ jsxDEV2("div", {
|
|
125
228
|
style: {
|
|
126
229
|
width,
|
|
127
230
|
height,
|
|
@@ -131,7 +234,7 @@ var BrandFrame = ({
|
|
|
131
234
|
opacity: entranceOpacity
|
|
132
235
|
},
|
|
133
236
|
children: [
|
|
134
|
-
variant === "gradient" && /* @__PURE__ */
|
|
237
|
+
variant === "gradient" && /* @__PURE__ */ jsxDEV2("div", {
|
|
135
238
|
style: {
|
|
136
239
|
position: "absolute",
|
|
137
240
|
top: "-20%",
|
|
@@ -143,7 +246,7 @@ var BrandFrame = ({
|
|
|
143
246
|
pointerEvents: "none"
|
|
144
247
|
}
|
|
145
248
|
}, undefined, false, undefined, this),
|
|
146
|
-
/* @__PURE__ */
|
|
249
|
+
/* @__PURE__ */ jsxDEV2("div", {
|
|
147
250
|
style: {
|
|
148
251
|
position: "absolute",
|
|
149
252
|
left: safeZone.horizontal,
|
|
@@ -155,7 +258,7 @@ var BrandFrame = ({
|
|
|
155
258
|
},
|
|
156
259
|
children
|
|
157
260
|
}, undefined, false, undefined, this),
|
|
158
|
-
showBranding && /* @__PURE__ */
|
|
261
|
+
showBranding && /* @__PURE__ */ jsxDEV2("div", {
|
|
159
262
|
style: {
|
|
160
263
|
position: "absolute",
|
|
161
264
|
bottom: safeZone.vertical / 2,
|
|
@@ -172,109 +275,6 @@ var BrandFrame = ({
|
|
|
172
275
|
}, undefined, true, undefined, this);
|
|
173
276
|
};
|
|
174
277
|
|
|
175
|
-
// src/design/typography.ts
|
|
176
|
-
var videoTypography = {
|
|
177
|
-
title: {
|
|
178
|
-
fontSize: 72,
|
|
179
|
-
lineHeight: 1.1,
|
|
180
|
-
fontWeight: 700,
|
|
181
|
-
letterSpacing: -1
|
|
182
|
-
},
|
|
183
|
-
heading: {
|
|
184
|
-
fontSize: 56,
|
|
185
|
-
lineHeight: 1.2,
|
|
186
|
-
fontWeight: 600,
|
|
187
|
-
letterSpacing: -0.5
|
|
188
|
-
},
|
|
189
|
-
subheading: {
|
|
190
|
-
fontSize: 40,
|
|
191
|
-
lineHeight: 1.25,
|
|
192
|
-
fontWeight: 500
|
|
193
|
-
},
|
|
194
|
-
body: {
|
|
195
|
-
fontSize: 32,
|
|
196
|
-
lineHeight: 1.5,
|
|
197
|
-
fontWeight: 400
|
|
198
|
-
},
|
|
199
|
-
code: {
|
|
200
|
-
fontSize: 28,
|
|
201
|
-
lineHeight: 1.6,
|
|
202
|
-
fontWeight: 400
|
|
203
|
-
},
|
|
204
|
-
caption: {
|
|
205
|
-
fontSize: 24,
|
|
206
|
-
lineHeight: 1.4,
|
|
207
|
-
fontWeight: 400
|
|
208
|
-
},
|
|
209
|
-
label: {
|
|
210
|
-
fontSize: 20,
|
|
211
|
-
lineHeight: 1.3,
|
|
212
|
-
fontWeight: 600,
|
|
213
|
-
letterSpacing: 1
|
|
214
|
-
}
|
|
215
|
-
};
|
|
216
|
-
function scaleTypography(style, targetWidth) {
|
|
217
|
-
const scale = targetWidth / 1920;
|
|
218
|
-
return {
|
|
219
|
-
...style,
|
|
220
|
-
fontSize: Math.round(style.fontSize * scale),
|
|
221
|
-
letterSpacing: style.letterSpacing ? Math.round(style.letterSpacing * scale * 10) / 10 : undefined
|
|
222
|
-
};
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
// src/compositions/primitives/animated-text.tsx
|
|
226
|
-
import { interpolate as interpolate2, useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig2 } from "remotion";
|
|
227
|
-
import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
|
|
228
|
-
var AnimatedText = ({
|
|
229
|
-
text,
|
|
230
|
-
variant = "body",
|
|
231
|
-
style: styleOverride,
|
|
232
|
-
enterAt = 0,
|
|
233
|
-
exitAt,
|
|
234
|
-
color = "#ffffff",
|
|
235
|
-
align = "left"
|
|
236
|
-
}) => {
|
|
237
|
-
const frame = useCurrentFrame2();
|
|
238
|
-
const { width } = useVideoConfig2();
|
|
239
|
-
const baseStyle = videoTypography[variant];
|
|
240
|
-
const scaled = scaleTypography(baseStyle, width);
|
|
241
|
-
const finalStyle = { ...scaled, ...styleOverride };
|
|
242
|
-
const enterProgress = interpolate2(frame, [enterAt, enterAt + videoDurations.textEntrance], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
|
|
243
|
-
const enterOpacity = interpolate2(enterProgress, [0, 1], [0, 1], {
|
|
244
|
-
easing: videoEasing.entrance
|
|
245
|
-
});
|
|
246
|
-
const enterTranslateY = interpolate2(enterProgress, [0, 1], [30, 0], {
|
|
247
|
-
easing: videoEasing.entrance
|
|
248
|
-
});
|
|
249
|
-
let exitOpacity = 1;
|
|
250
|
-
let exitTranslateY = 0;
|
|
251
|
-
if (exitAt !== undefined) {
|
|
252
|
-
const exitProgress = interpolate2(frame, [exitAt, exitAt + videoDurations.textExit], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
|
|
253
|
-
exitOpacity = interpolate2(exitProgress, [0, 1], [1, 0], {
|
|
254
|
-
easing: videoEasing.exit
|
|
255
|
-
});
|
|
256
|
-
exitTranslateY = interpolate2(exitProgress, [0, 1], [0, -20], {
|
|
257
|
-
easing: videoEasing.exit
|
|
258
|
-
});
|
|
259
|
-
}
|
|
260
|
-
const opacity = enterOpacity * exitOpacity;
|
|
261
|
-
const translateY = enterTranslateY + exitTranslateY;
|
|
262
|
-
return /* @__PURE__ */ jsxDEV2("div", {
|
|
263
|
-
style: {
|
|
264
|
-
fontSize: finalStyle.fontSize,
|
|
265
|
-
lineHeight: finalStyle.lineHeight,
|
|
266
|
-
fontWeight: finalStyle.fontWeight,
|
|
267
|
-
letterSpacing: finalStyle.letterSpacing,
|
|
268
|
-
color,
|
|
269
|
-
textAlign: align,
|
|
270
|
-
opacity,
|
|
271
|
-
transform: `translateY(${translateY}px)`,
|
|
272
|
-
willChange: "opacity, transform"
|
|
273
|
-
},
|
|
274
|
-
children: text
|
|
275
|
-
}, undefined, false, undefined, this);
|
|
276
|
-
};
|
|
277
|
-
|
|
278
278
|
// src/compositions/primitives/code-block.tsx
|
|
279
279
|
import { interpolate as interpolate3, useCurrentFrame as useCurrentFrame3, useVideoConfig as useVideoConfig3 } from "remotion";
|
|
280
280
|
import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
|
|
@@ -430,8 +430,8 @@ var ProgressBar = ({
|
|
|
430
430
|
// src/compositions/api-overview.tsx
|
|
431
431
|
import {
|
|
432
432
|
AbsoluteFill,
|
|
433
|
-
Sequence,
|
|
434
433
|
interpolate as interpolate4,
|
|
434
|
+
Sequence,
|
|
435
435
|
useCurrentFrame as useCurrentFrame5,
|
|
436
436
|
useVideoConfig as useVideoConfig5
|
|
437
437
|
} from "remotion";
|
|
@@ -797,8 +797,8 @@ var Terminal = ({
|
|
|
797
797
|
// src/compositions/social-clip.tsx
|
|
798
798
|
import {
|
|
799
799
|
AbsoluteFill as AbsoluteFill2,
|
|
800
|
-
Sequence as Sequence2,
|
|
801
800
|
interpolate as interpolate6,
|
|
801
|
+
Sequence as Sequence2,
|
|
802
802
|
useCurrentFrame as useCurrentFrame7,
|
|
803
803
|
useVideoConfig as useVideoConfig7
|
|
804
804
|
} from "remotion";
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { LocalRenderer } from './local';
|
|
2
|
-
export { resolveRenderConfig, defaultRenderConfig, qualityPresets, codecFormatMap, } from './config';
|
|
3
1
|
export type { QualityPreset } from './config';
|
|
2
|
+
export { codecFormatMap, defaultRenderConfig, qualityPresets, resolveRenderConfig, } from './config';
|
|
3
|
+
export { LocalRenderer } from './local';
|
package/dist/types.d.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type { ModelSelector, ModelSelectionContext } from '@contractspec/lib.ai-providers/selector-types';
|
|
3
|
-
import type { VoiceSynthesizer } from '@contractspec/lib.voice/tts';
|
|
4
|
-
import type { Transcriber } from '@contractspec/lib.voice/stt';
|
|
1
|
+
import type { ModelSelectionContext, ModelSelector } from '@contractspec/lib.ai-providers/selector-types';
|
|
5
2
|
import type { ContentBrief } from '@contractspec/lib.content-gen/types';
|
|
6
|
-
import type {
|
|
3
|
+
import type { LLMProvider } from '@contractspec/lib.contracts-integrations/integrations/providers/llm';
|
|
7
4
|
import type { NarrationConfig, VideoFormat, VideoProject, VideoStyleOverrides } from '@contractspec/lib.contracts-integrations/integrations/providers/video';
|
|
5
|
+
import type { ImageGenerator } from '@contractspec/lib.image-gen/generators/image-generator';
|
|
6
|
+
import type { Transcriber } from '@contractspec/lib.voice/stt';
|
|
7
|
+
import type { VoiceSynthesizer } from '@contractspec/lib.voice/tts';
|
|
8
8
|
export type { AudioTrack, CompositionMeta, CompositionRegistry, NarrationConfig, RenderConfig, RenderResult, SceneTransition, SceneTransitionType, VideoCodec, VideoFormat, VideoFormatCustom, VideoFormatLandscape, VideoFormatPortrait, VideoFormatSquare, VideoOutputFormat, VideoProject, VideoProjectMetadata, VideoProvider, VideoScene, VideoStyleOverrides, } from '@contractspec/lib.contracts-integrations/integrations/providers/video';
|
|
9
|
-
export type { TTSProject } from '@contractspec/lib.voice/tts';
|
|
10
9
|
export { VIDEO_FORMATS } from '@contractspec/lib.contracts-integrations/integrations/providers/video';
|
|
10
|
+
export type { TTSProject } from '@contractspec/lib.voice/tts';
|
|
11
11
|
/**
|
|
12
12
|
* Input for the video generation pipeline.
|
|
13
13
|
* Builds on top of ContentBrief to keep a unified content pipeline.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contractspec/lib.video-gen",
|
|
3
|
-
"version": "2.7.
|
|
3
|
+
"version": "2.7.7",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -18,34 +18,34 @@
|
|
|
18
18
|
"dev": "contractspec-bun-build dev",
|
|
19
19
|
"clean": "rimraf dist .turbo",
|
|
20
20
|
"lint": "bun lint:fix",
|
|
21
|
-
"lint:fix": "
|
|
22
|
-
"lint:check": "
|
|
21
|
+
"lint:fix": "biome check --write --unsafe --only=nursery/useSortedClasses . && biome check --write .",
|
|
22
|
+
"lint:check": "biome check .",
|
|
23
23
|
"test": "bun test --pass-with-no-tests",
|
|
24
24
|
"prebuild": "contractspec-bun-build prebuild",
|
|
25
25
|
"typecheck": "tsc --noEmit"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@contractspec/lib.contracts-spec": "
|
|
29
|
-
"@contractspec/lib.contracts-integrations": "3.7.
|
|
28
|
+
"@contractspec/lib.contracts-spec": "4.0.0",
|
|
29
|
+
"@contractspec/lib.contracts-integrations": "3.7.7",
|
|
30
30
|
"@contractspec/lib.ai-providers": "3.7.6",
|
|
31
|
-
"@contractspec/lib.voice": "1.7.
|
|
32
|
-
"@contractspec/lib.content-gen": "3.7.
|
|
33
|
-
"@contractspec/lib.design-system": "3.
|
|
34
|
-
"@contractspec/lib.image-gen": "1.7.
|
|
35
|
-
"remotion": "^4.0.
|
|
31
|
+
"@contractspec/lib.voice": "1.7.7",
|
|
32
|
+
"@contractspec/lib.content-gen": "3.7.7",
|
|
33
|
+
"@contractspec/lib.design-system": "3.8.0",
|
|
34
|
+
"@contractspec/lib.image-gen": "1.7.7",
|
|
35
|
+
"remotion": "^4.0.438"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@contractspec/tool.typescript": "3.7.6",
|
|
39
39
|
"@contractspec/tool.bun": "3.7.6",
|
|
40
40
|
"typescript": "^5.9.3",
|
|
41
|
-
"@remotion/bundler": "^4.0.
|
|
42
|
-
"@remotion/cli": "^4.0.
|
|
43
|
-
"@remotion/player": "^4.0.
|
|
44
|
-
"@remotion/renderer": "^4.0.
|
|
41
|
+
"@remotion/bundler": "^4.0.438",
|
|
42
|
+
"@remotion/cli": "^4.0.438",
|
|
43
|
+
"@remotion/player": "^4.0.438",
|
|
44
|
+
"@remotion/renderer": "^4.0.438",
|
|
45
45
|
"@types/react": "^19.0.0",
|
|
46
46
|
"react": "^19.0.0",
|
|
47
47
|
"react-dom": "^19.0.0",
|
|
48
|
-
"tsdown": "^0.21.
|
|
48
|
+
"tsdown": "^0.21.4"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
51
|
"react": "^19.0.0",
|