@contractspec/lib.video-gen 2.7.17 → 2.7.18

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.
Files changed (127) hide show
  1. package/dist/browser/compositions/api-overview.js +1 -645
  2. package/dist/browser/compositions/index.js +1 -1133
  3. package/dist/browser/compositions/primitives/animated-text.js +1 -144
  4. package/dist/browser/compositions/primitives/brand-frame.js +1 -181
  5. package/dist/browser/compositions/primitives/code-block.js +1 -226
  6. package/dist/browser/compositions/primitives/index.js +1 -656
  7. package/dist/browser/compositions/primitives/progress-bar.js +1 -59
  8. package/dist/browser/compositions/primitives/terminal.js +1 -265
  9. package/dist/browser/compositions/primitives/transition.js +1 -98
  10. package/dist/browser/compositions/social-clip.js +1 -500
  11. package/dist/browser/compositions/terminal-demo.js +1 -558
  12. package/dist/browser/design/index.js +1 -155
  13. package/dist/browser/design/layouts.js +1 -50
  14. package/dist/browser/design/motion.js +1 -43
  15. package/dist/browser/design/tokens.js +1 -28
  16. package/dist/browser/design/typography.js +1 -61
  17. package/dist/browser/docs/compositions.docblock.js +1 -182
  18. package/dist/browser/docs/design.docblock.js +2 -17
  19. package/dist/browser/docs/generators.docblock.js +2 -24
  20. package/dist/browser/docs/rendering.docblock.js +2 -24
  21. package/dist/browser/docs/video-gen.docblock.js +2 -17
  22. package/dist/browser/generators/index.js +7 -769
  23. package/dist/browser/generators/scene-planner.js +7 -651
  24. package/dist/browser/generators/script-generator.js +7 -599
  25. package/dist/browser/generators/video-generator.js +7 -768
  26. package/dist/browser/i18n/catalogs/en.js +3 -135
  27. package/dist/browser/i18n/catalogs/es.js +3 -135
  28. package/dist/browser/i18n/catalogs/fr.js +3 -135
  29. package/dist/browser/i18n/catalogs/index.js +7 -387
  30. package/dist/browser/i18n/index.js +7 -459
  31. package/dist/browser/i18n/keys.js +1 -54
  32. package/dist/browser/i18n/locale.js +1 -21
  33. package/dist/browser/i18n/messages.js +7 -399
  34. package/dist/browser/index.js +7 -1903
  35. package/dist/browser/player/demo-player.js +1 -1136
  36. package/dist/browser/player/index.js +1 -1136
  37. package/dist/browser/remotion/Root.js +2 -1172
  38. package/dist/browser/remotion/index.js +2 -1173
  39. package/dist/browser/renderers/config.js +1 -40
  40. package/dist/browser/renderers/index.js +1 -160
  41. package/dist/browser/renderers/local.js +1 -156
  42. package/dist/browser/types.js +1 -13
  43. package/dist/compositions/api-overview.js +1 -639
  44. package/dist/compositions/index.js +1 -1127
  45. package/dist/compositions/primitives/animated-text.js +1 -138
  46. package/dist/compositions/primitives/brand-frame.js +1 -175
  47. package/dist/compositions/primitives/code-block.js +1 -220
  48. package/dist/compositions/primitives/index.js +1 -650
  49. package/dist/compositions/primitives/progress-bar.js +1 -53
  50. package/dist/compositions/primitives/terminal.js +1 -259
  51. package/dist/compositions/primitives/transition.js +1 -92
  52. package/dist/compositions/social-clip.js +1 -494
  53. package/dist/compositions/terminal-demo.js +1 -552
  54. package/dist/design/index.js +1 -149
  55. package/dist/design/layouts.js +1 -44
  56. package/dist/design/motion.js +1 -37
  57. package/dist/design/tokens.js +1 -22
  58. package/dist/design/typography.js +1 -55
  59. package/dist/docs/compositions.docblock.js +1 -182
  60. package/dist/docs/design.docblock.js +2 -17
  61. package/dist/docs/generators.docblock.js +2 -24
  62. package/dist/docs/rendering.docblock.js +2 -24
  63. package/dist/docs/video-gen.docblock.js +2 -17
  64. package/dist/generators/index.js +7 -763
  65. package/dist/generators/scene-planner.js +7 -645
  66. package/dist/generators/script-generator.js +7 -593
  67. package/dist/generators/video-generator.js +7 -762
  68. package/dist/i18n/catalogs/en.js +3 -129
  69. package/dist/i18n/catalogs/es.js +3 -129
  70. package/dist/i18n/catalogs/fr.js +3 -129
  71. package/dist/i18n/catalogs/index.js +7 -381
  72. package/dist/i18n/index.js +7 -453
  73. package/dist/i18n/keys.js +1 -48
  74. package/dist/i18n/locale.js +1 -15
  75. package/dist/i18n/messages.js +7 -393
  76. package/dist/index.js +7 -1897
  77. package/dist/node/compositions/api-overview.js +1 -640
  78. package/dist/node/compositions/index.js +1 -1128
  79. package/dist/node/compositions/primitives/animated-text.js +1 -139
  80. package/dist/node/compositions/primitives/brand-frame.js +1 -176
  81. package/dist/node/compositions/primitives/code-block.js +1 -221
  82. package/dist/node/compositions/primitives/index.js +1 -651
  83. package/dist/node/compositions/primitives/progress-bar.js +1 -54
  84. package/dist/node/compositions/primitives/terminal.js +1 -260
  85. package/dist/node/compositions/primitives/transition.js +1 -93
  86. package/dist/node/compositions/social-clip.js +1 -495
  87. package/dist/node/compositions/terminal-demo.js +1 -553
  88. package/dist/node/design/index.js +1 -150
  89. package/dist/node/design/layouts.js +1 -45
  90. package/dist/node/design/motion.js +1 -38
  91. package/dist/node/design/tokens.js +1 -23
  92. package/dist/node/design/typography.js +1 -56
  93. package/dist/node/docs/compositions.docblock.js +1 -182
  94. package/dist/node/docs/design.docblock.js +2 -17
  95. package/dist/node/docs/generators.docblock.js +2 -24
  96. package/dist/node/docs/rendering.docblock.js +2 -24
  97. package/dist/node/docs/video-gen.docblock.js +2 -17
  98. package/dist/node/generators/index.js +7 -764
  99. package/dist/node/generators/scene-planner.js +7 -646
  100. package/dist/node/generators/script-generator.js +7 -594
  101. package/dist/node/generators/video-generator.js +7 -763
  102. package/dist/node/i18n/catalogs/en.js +3 -130
  103. package/dist/node/i18n/catalogs/es.js +3 -130
  104. package/dist/node/i18n/catalogs/fr.js +3 -130
  105. package/dist/node/i18n/catalogs/index.js +7 -382
  106. package/dist/node/i18n/index.js +7 -454
  107. package/dist/node/i18n/keys.js +1 -49
  108. package/dist/node/i18n/locale.js +1 -16
  109. package/dist/node/i18n/messages.js +7 -394
  110. package/dist/node/index.js +7 -1898
  111. package/dist/node/player/demo-player.js +1 -1131
  112. package/dist/node/player/index.js +1 -1131
  113. package/dist/node/remotion/Root.js +2 -1167
  114. package/dist/node/remotion/index.js +2 -1168
  115. package/dist/node/renderers/config.js +1 -35
  116. package/dist/node/renderers/index.js +1 -155
  117. package/dist/node/renderers/local.js +1 -151
  118. package/dist/node/types.js +1 -8
  119. package/dist/player/demo-player.js +1 -1130
  120. package/dist/player/index.js +1 -1130
  121. package/dist/remotion/Root.js +2 -1166
  122. package/dist/remotion/index.js +2 -1167
  123. package/dist/renderers/config.js +1 -34
  124. package/dist/renderers/index.js +1 -154
  125. package/dist/renderers/local.js +1 -150
  126. package/dist/types.js +1 -7
  127. package/package.json +16 -16
@@ -1,139 +1,2 @@
1
1
  // @bun
2
- var __require = import.meta.require;
3
-
4
- // src/design/motion.ts
5
- import { Easing } from "remotion";
6
- var videoEasing = {
7
- entrance: Easing.out(Easing.exp),
8
- exit: Easing.in(Easing.exp),
9
- emphasis: Easing.out(Easing.back(1.4)),
10
- linear: Easing.linear,
11
- gentle: Easing.bezier(0.25, 0.1, 0.25, 1),
12
- spring: Easing.out(Easing.back(1.7))
13
- };
14
- var videoDurations = {
15
- sceneTransition: 20,
16
- textEntrance: 15,
17
- textExit: 12,
18
- codeTypingPerChar: 2,
19
- sectionPause: 30,
20
- emphasisPause: 15,
21
- brandReveal: 25,
22
- minScene: 60,
23
- shortScene: 60,
24
- mediumScene: 120,
25
- longScene: 240
26
- };
27
- var videoTransitions = {
28
- fade: { type: "fade", durationInFrames: 20 },
29
- slideLeft: { type: "slide-left", durationInFrames: 20 },
30
- slideRight: { type: "slide-right", durationInFrames: 20 },
31
- wipe: { type: "wipe", durationInFrames: 15 },
32
- none: { type: "none", durationInFrames: 0 }
33
- };
34
-
35
- // src/design/typography.ts
36
- var videoTypography = {
37
- title: {
38
- fontSize: 72,
39
- lineHeight: 1.1,
40
- fontWeight: 700,
41
- letterSpacing: -1
42
- },
43
- heading: {
44
- fontSize: 56,
45
- lineHeight: 1.2,
46
- fontWeight: 600,
47
- letterSpacing: -0.5
48
- },
49
- subheading: {
50
- fontSize: 40,
51
- lineHeight: 1.25,
52
- fontWeight: 500
53
- },
54
- body: {
55
- fontSize: 32,
56
- lineHeight: 1.5,
57
- fontWeight: 400
58
- },
59
- code: {
60
- fontSize: 28,
61
- lineHeight: 1.6,
62
- fontWeight: 400
63
- },
64
- caption: {
65
- fontSize: 24,
66
- lineHeight: 1.4,
67
- fontWeight: 400
68
- },
69
- label: {
70
- fontSize: 20,
71
- lineHeight: 1.3,
72
- fontWeight: 600,
73
- letterSpacing: 1
74
- }
75
- };
76
- function scaleTypography(style, targetWidth) {
77
- const scale = targetWidth / 1920;
78
- return {
79
- ...style,
80
- fontSize: Math.round(style.fontSize * scale),
81
- letterSpacing: style.letterSpacing ? Math.round(style.letterSpacing * scale * 10) / 10 : undefined
82
- };
83
- }
84
-
85
- // src/compositions/primitives/animated-text.tsx
86
- import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
87
- import { jsxDEV } from "react/jsx-dev-runtime";
88
- var AnimatedText = ({
89
- text,
90
- variant = "body",
91
- style: styleOverride,
92
- enterAt = 0,
93
- exitAt,
94
- color = "#ffffff",
95
- align = "left"
96
- }) => {
97
- const frame = useCurrentFrame();
98
- const { width } = useVideoConfig();
99
- const baseStyle = videoTypography[variant];
100
- const scaled = scaleTypography(baseStyle, width);
101
- const finalStyle = { ...scaled, ...styleOverride };
102
- const enterProgress = interpolate(frame, [enterAt, enterAt + videoDurations.textEntrance], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
103
- const enterOpacity = interpolate(enterProgress, [0, 1], [0, 1], {
104
- easing: videoEasing.entrance
105
- });
106
- const enterTranslateY = interpolate(enterProgress, [0, 1], [30, 0], {
107
- easing: videoEasing.entrance
108
- });
109
- let exitOpacity = 1;
110
- let exitTranslateY = 0;
111
- if (exitAt !== undefined) {
112
- const exitProgress = interpolate(frame, [exitAt, exitAt + videoDurations.textExit], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
113
- exitOpacity = interpolate(exitProgress, [0, 1], [1, 0], {
114
- easing: videoEasing.exit
115
- });
116
- exitTranslateY = interpolate(exitProgress, [0, 1], [0, -20], {
117
- easing: videoEasing.exit
118
- });
119
- }
120
- const opacity = enterOpacity * exitOpacity;
121
- const translateY = enterTranslateY + exitTranslateY;
122
- return /* @__PURE__ */ jsxDEV("div", {
123
- style: {
124
- fontSize: finalStyle.fontSize,
125
- lineHeight: finalStyle.lineHeight,
126
- fontWeight: finalStyle.fontWeight,
127
- letterSpacing: finalStyle.letterSpacing,
128
- color,
129
- textAlign: align,
130
- opacity,
131
- transform: `translateY(${translateY}px)`,
132
- willChange: "opacity, transform"
133
- },
134
- children: text
135
- }, undefined, false, undefined, this);
136
- };
137
- export {
138
- AnimatedText
139
- };
2
+ var P=import.meta.require;import{Easing as k}from"remotion";var B={entrance:k.out(k.exp),exit:k.in(k.exp),emphasis:k.out(k.back(1.4)),linear:k.linear,gentle:k.bezier(0.25,0.1,0.25,1),spring:k.out(k.back(1.7))},K={sceneTransition:20,textEntrance:15,textExit:12,codeTypingPerChar:2,sectionPause:30,emphasisPause:15,brandReveal:25,minScene:60,shortScene:60,mediumScene:120,longScene:240},h={fade:{type:"fade",durationInFrames:20},slideLeft:{type:"slide-left",durationInFrames:20},slideRight:{type:"slide-right",durationInFrames:20},wipe:{type:"wipe",durationInFrames:15},none:{type:"none",durationInFrames:0}};var X={title:{fontSize:72,lineHeight:1.1,fontWeight:700,letterSpacing:-1},heading:{fontSize:56,lineHeight:1.2,fontWeight:600,letterSpacing:-0.5},subheading:{fontSize:40,lineHeight:1.25,fontWeight:500},body:{fontSize:32,lineHeight:1.5,fontWeight:400},code:{fontSize:28,lineHeight:1.6,fontWeight:400},caption:{fontSize:24,lineHeight:1.4,fontWeight:400},label:{fontSize:20,lineHeight:1.3,fontWeight:600,letterSpacing:1}};function Z(q,I){let G=I/1920;return{...q,fontSize:Math.round(q.fontSize*G),letterSpacing:q.letterSpacing?Math.round(q.letterSpacing*G*10)/10:void 0}}import{interpolate as z,useCurrentFrame as D,useVideoConfig as W}from"remotion";import{jsx as Y}from"react/jsx-runtime";var E=({text:q,variant:I="body",style:G,enterAt:L=0,exitAt:J,color:_="#ffffff",align:$="left"})=>{let M=D(),{width:F}=W(),V=X[I],H={...Z(V,F),...G},N=z(M,[L,L+K.textEntrance],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),b=z(N,[0,1],[0,1],{easing:B.entrance}),j=z(N,[0,1],[30,0],{easing:B.entrance}),Q=1,R=0;if(J!==void 0){let U=z(M,[J,J+K.textExit],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"});Q=z(U,[0,1],[1,0],{easing:B.exit}),R=z(U,[0,1],[0,-20],{easing:B.exit})}let w=b*Q,C=j+R;return Y("div",{style:{fontSize:H.fontSize,lineHeight:H.lineHeight,fontWeight:H.fontWeight,letterSpacing:H.letterSpacing,color:_,textAlign:$,opacity:w,transform:`translateY(${C}px)`,willChange:"opacity, transform"},children:q})};export{E as AnimatedText};
@@ -1,176 +1,2 @@
1
1
  // @bun
2
- var __require = import.meta.require;
3
-
4
- // src/design/motion.ts
5
- import { Easing } from "remotion";
6
- var videoEasing = {
7
- entrance: Easing.out(Easing.exp),
8
- exit: Easing.in(Easing.exp),
9
- emphasis: Easing.out(Easing.back(1.4)),
10
- linear: Easing.linear,
11
- gentle: Easing.bezier(0.25, 0.1, 0.25, 1),
12
- spring: Easing.out(Easing.back(1.7))
13
- };
14
- var videoDurations = {
15
- sceneTransition: 20,
16
- textEntrance: 15,
17
- textExit: 12,
18
- codeTypingPerChar: 2,
19
- sectionPause: 30,
20
- emphasisPause: 15,
21
- brandReveal: 25,
22
- minScene: 60,
23
- shortScene: 60,
24
- mediumScene: 120,
25
- longScene: 240
26
- };
27
- var videoTransitions = {
28
- fade: { type: "fade", durationInFrames: 20 },
29
- slideLeft: { type: "slide-left", durationInFrames: 20 },
30
- slideRight: { type: "slide-right", durationInFrames: 20 },
31
- wipe: { type: "wipe", durationInFrames: 15 },
32
- none: { type: "none", durationInFrames: 0 }
33
- };
34
-
35
- // src/design/tokens.ts
36
- import { defaultTokens } from "@contractspec/lib.design-system";
37
- var defaultVideoColors = {
38
- canvasBackground: defaultTokens.colors.background,
39
- codeBackground: "#1e1e2e",
40
- terminalBackground: "#0d1117",
41
- terminalForeground: "#c9d1d9",
42
- highlight: defaultTokens.colors.accent,
43
- gradientStart: defaultTokens.colors.primary,
44
- gradientEnd: defaultTokens.colors.accent
45
- };
46
- var defaultVideoTheme = {
47
- ...defaultTokens,
48
- video: defaultVideoColors
49
- };
50
-
51
- // src/design/layouts.ts
52
- import { VIDEO_FORMATS } from "@contractspec/lib.contracts-integrations/integrations/providers/video";
53
- var DEFAULT_FPS = 30;
54
- var videoSafeZone = {
55
- horizontal: 120,
56
- vertical: 80,
57
- contentWidth: 1680,
58
- contentHeight: 920
59
- };
60
- function scaleSafeZone(format) {
61
- const scaleX = format.width / 1920;
62
- const scaleY = format.height / 1080;
63
- return {
64
- horizontal: Math.round(videoSafeZone.horizontal * scaleX),
65
- vertical: Math.round(videoSafeZone.vertical * scaleY),
66
- contentWidth: Math.round(videoSafeZone.contentWidth * scaleX),
67
- contentHeight: Math.round(videoSafeZone.contentHeight * scaleY)
68
- };
69
- }
70
- var videoPositions = {
71
- center: { x: 960, y: 540 },
72
- topLeft: { x: 120, y: 80 },
73
- topRight: { x: 1800, y: 80 },
74
- bottomLeft: { x: 120, y: 1000 },
75
- bottomRight: { x: 1800, y: 1000 },
76
- bottomCenter: { x: 960, y: 960 }
77
- };
78
- function getAllFormatVariants() {
79
- return [
80
- VIDEO_FORMATS.landscape,
81
- VIDEO_FORMATS.square,
82
- VIDEO_FORMATS.portrait
83
- ];
84
- }
85
-
86
- // src/compositions/primitives/brand-frame.tsx
87
- import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
88
- import { jsxDEV } from "react/jsx-dev-runtime";
89
- var BrandFrame = ({
90
- styleOverrides,
91
- showBranding = true,
92
- animateEntrance = true,
93
- variant = "gradient",
94
- children
95
- }) => {
96
- const frame = useCurrentFrame();
97
- const { width, height } = useVideoConfig();
98
- const theme = defaultVideoTheme;
99
- const safeZone = scaleSafeZone({ type: "custom", width, height });
100
- const primaryColor = styleOverrides?.primaryColor ?? theme.colors.primary;
101
- const _accentColor = styleOverrides?.accentColor ?? theme.colors.accent;
102
- const isDark = styleOverrides?.darkMode ?? true;
103
- let background;
104
- switch (variant) {
105
- case "solid":
106
- background = isDark ? "#0a0a0a" : theme.colors.background;
107
- break;
108
- case "gradient":
109
- background = isDark ? `linear-gradient(135deg, #0a0a14 0%, #0f172a 50%, #0a0a14 100%)` : `linear-gradient(135deg, ${theme.colors.background} 0%, ${theme.colors.muted} 100%)`;
110
- break;
111
- case "dark":
112
- background = "#000000";
113
- break;
114
- }
115
- const entranceOpacity = animateEntrance ? interpolate(frame, [0, 15], [0, 1], {
116
- extrapolateLeft: "clamp",
117
- extrapolateRight: "clamp",
118
- easing: videoEasing.entrance
119
- }) : 1;
120
- const brandOpacity = showBranding ? interpolate(frame, [videoDurations.brandReveal, videoDurations.brandReveal + 15], [0, 0.3], {
121
- extrapolateLeft: "clamp",
122
- extrapolateRight: "clamp"
123
- }) : 0;
124
- return /* @__PURE__ */ jsxDEV("div", {
125
- style: {
126
- width,
127
- height,
128
- background,
129
- position: "relative",
130
- overflow: "hidden",
131
- opacity: entranceOpacity
132
- },
133
- children: [
134
- variant === "gradient" && /* @__PURE__ */ jsxDEV("div", {
135
- style: {
136
- position: "absolute",
137
- top: "-20%",
138
- right: "-10%",
139
- width: "50%",
140
- height: "50%",
141
- background: `radial-gradient(circle, ${primaryColor}15 0%, transparent 70%)`,
142
- borderRadius: "50%",
143
- pointerEvents: "none"
144
- }
145
- }, undefined, false, undefined, this),
146
- /* @__PURE__ */ jsxDEV("div", {
147
- style: {
148
- position: "absolute",
149
- left: safeZone.horizontal,
150
- top: safeZone.vertical,
151
- width: safeZone.contentWidth,
152
- height: safeZone.contentHeight,
153
- display: "flex",
154
- flexDirection: "column"
155
- },
156
- children
157
- }, undefined, false, undefined, this),
158
- showBranding && /* @__PURE__ */ jsxDEV("div", {
159
- style: {
160
- position: "absolute",
161
- bottom: safeZone.vertical / 2,
162
- right: safeZone.horizontal,
163
- opacity: brandOpacity,
164
- color: isDark ? "#ffffff" : "#000000",
165
- fontSize: Math.round(16 * (width / 1920)),
166
- fontWeight: 500,
167
- letterSpacing: 1
168
- },
169
- children: "ContractSpec"
170
- }, undefined, false, undefined, this)
171
- ]
172
- }, undefined, true, undefined, this);
173
- };
174
- export {
175
- BrandFrame
176
- };
2
+ var w=import.meta.require;import{Easing as q}from"remotion";var M={entrance:q.out(q.exp),exit:q.in(q.exp),emphasis:q.out(q.back(1.4)),linear:q.linear,gentle:q.bezier(0.25,0.1,0.25,1),spring:q.out(q.back(1.7))},z={sceneTransition:20,textEntrance:15,textExit:12,codeTypingPerChar:2,sectionPause:30,emphasisPause:15,brandReveal:25,minScene:60,shortScene:60,mediumScene:120,longScene:240},Z={fade:{type:"fade",durationInFrames:20},slideLeft:{type:"slide-left",durationInFrames:20},slideRight:{type:"slide-right",durationInFrames:20},wipe:{type:"wipe",durationInFrames:15},none:{type:"none",durationInFrames:0}};import{defaultTokens as L}from"@contractspec/lib.design-system";var V={canvasBackground:L.colors.background,codeBackground:"#1e1e2e",terminalBackground:"#0d1117",terminalForeground:"#c9d1d9",highlight:L.colors.accent,gradientStart:L.colors.primary,gradientEnd:L.colors.accent},R={...L,video:V};import{VIDEO_FORMATS as P}from"@contractspec/lib.contracts-integrations/integrations/providers/video";var h=30,U={horizontal:120,vertical:80,contentWidth:1680,contentHeight:920};function _(G){let J=G.width/1920,N=G.height/1080;return{horizontal:Math.round(U.horizontal*J),vertical:Math.round(U.vertical*N),contentWidth:Math.round(U.contentWidth*J),contentHeight:Math.round(U.contentHeight*N)}}var u={center:{x:960,y:540},topLeft:{x:120,y:80},topRight:{x:1800,y:80},bottomLeft:{x:120,y:1000},bottomRight:{x:1800,y:1000},bottomCenter:{x:960,y:960}};function m(){return[P.landscape,P.square,P.portrait]}import{interpolate as j,useCurrentFrame as p,useVideoConfig as D}from"remotion";import{jsx as X,jsxs as S}from"react/jsx-runtime";var r=({styleOverrides:G,showBranding:J=!0,animateEntrance:N=!0,variant:Y="gradient",children:B})=>{let A=p(),{width:W,height:I}=D(),K=R,H=_({type:"custom",width:W,height:I}),F=G?.primaryColor??K.colors.primary,b=G?.accentColor??K.colors.accent,$=G?.darkMode??!0,Q;switch(Y){case"solid":Q=$?"#0a0a0a":K.colors.background;break;case"gradient":Q=$?"linear-gradient(135deg, #0a0a14 0%, #0f172a 50%, #0a0a14 100%)":`linear-gradient(135deg, ${K.colors.background} 0%, ${K.colors.muted} 100%)`;break;case"dark":Q="#000000";break}let x=N?j(A,[0,15],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.entrance}):1,C=J?j(A,[z.brandReveal,z.brandReveal+15],[0,0.3],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}):0;return S("div",{style:{width:W,height:I,background:Q,position:"relative",overflow:"hidden",opacity:x},children:[Y==="gradient"&&X("div",{style:{position:"absolute",top:"-20%",right:"-10%",width:"50%",height:"50%",background:`radial-gradient(circle, ${F}15 0%, transparent 70%)`,borderRadius:"50%",pointerEvents:"none"}}),X("div",{style:{position:"absolute",left:H.horizontal,top:H.vertical,width:H.contentWidth,height:H.contentHeight,display:"flex",flexDirection:"column"},children:B}),J&&X("div",{style:{position:"absolute",bottom:H.vertical/2,right:H.horizontal,opacity:C,color:$?"#ffffff":"#000000",fontSize:Math.round(16*(W/1920)),fontWeight:500,letterSpacing:1},children:"ContractSpec"})]})};export{r as BrandFrame};
@@ -1,221 +1,2 @@
1
1
  // @bun
2
- var __require = import.meta.require;
3
-
4
- // src/design/motion.ts
5
- import { Easing } from "remotion";
6
- var videoEasing = {
7
- entrance: Easing.out(Easing.exp),
8
- exit: Easing.in(Easing.exp),
9
- emphasis: Easing.out(Easing.back(1.4)),
10
- linear: Easing.linear,
11
- gentle: Easing.bezier(0.25, 0.1, 0.25, 1),
12
- spring: Easing.out(Easing.back(1.7))
13
- };
14
- var videoDurations = {
15
- sceneTransition: 20,
16
- textEntrance: 15,
17
- textExit: 12,
18
- codeTypingPerChar: 2,
19
- sectionPause: 30,
20
- emphasisPause: 15,
21
- brandReveal: 25,
22
- minScene: 60,
23
- shortScene: 60,
24
- mediumScene: 120,
25
- longScene: 240
26
- };
27
- var videoTransitions = {
28
- fade: { type: "fade", durationInFrames: 20 },
29
- slideLeft: { type: "slide-left", durationInFrames: 20 },
30
- slideRight: { type: "slide-right", durationInFrames: 20 },
31
- wipe: { type: "wipe", durationInFrames: 15 },
32
- none: { type: "none", durationInFrames: 0 }
33
- };
34
-
35
- // src/design/tokens.ts
36
- import { defaultTokens } from "@contractspec/lib.design-system";
37
- var defaultVideoColors = {
38
- canvasBackground: defaultTokens.colors.background,
39
- codeBackground: "#1e1e2e",
40
- terminalBackground: "#0d1117",
41
- terminalForeground: "#c9d1d9",
42
- highlight: defaultTokens.colors.accent,
43
- gradientStart: defaultTokens.colors.primary,
44
- gradientEnd: defaultTokens.colors.accent
45
- };
46
- var defaultVideoTheme = {
47
- ...defaultTokens,
48
- video: defaultVideoColors
49
- };
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/code-block.tsx
102
- import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
103
- import { jsxDEV } from "react/jsx-dev-runtime";
104
- var CodeBlock = ({
105
- code,
106
- language = "typescript",
107
- startAt = 0,
108
- typeAnimation = true,
109
- backgroundColor = defaultVideoColors.codeBackground,
110
- textColor = "#abb2bf",
111
- filename
112
- }) => {
113
- const frame = useCurrentFrame();
114
- const { width } = useVideoConfig();
115
- const codeStyle = scaleTypography(videoTypography.code, width);
116
- const totalChars = code.length;
117
- const typingDuration = totalChars * videoDurations.codeTypingPerChar;
118
- const charsVisible = typeAnimation ? Math.floor(interpolate(frame, [startAt, startAt + typingDuration], [0, totalChars], {
119
- extrapolateLeft: "clamp",
120
- extrapolateRight: "clamp"
121
- })) : totalChars;
122
- const visibleCode = code.slice(0, charsVisible);
123
- const opacity = interpolate(frame, [startAt, startAt + 10], [0, 1], {
124
- extrapolateLeft: "clamp",
125
- extrapolateRight: "clamp",
126
- easing: videoEasing.entrance
127
- });
128
- const showCursor = typeAnimation && charsVisible < totalChars && frame % 16 < 10;
129
- return /* @__PURE__ */ jsxDEV("div", {
130
- style: {
131
- backgroundColor,
132
- borderRadius: 16,
133
- padding: 0,
134
- opacity,
135
- overflow: "hidden",
136
- boxShadow: "0 8px 32px rgba(0,0,0,0.3)"
137
- },
138
- children: [
139
- /* @__PURE__ */ jsxDEV("div", {
140
- style: {
141
- display: "flex",
142
- alignItems: "center",
143
- padding: "12px 20px",
144
- backgroundColor: "rgba(0,0,0,0.2)",
145
- gap: 8
146
- },
147
- children: [
148
- /* @__PURE__ */ jsxDEV("div", {
149
- style: { display: "flex", gap: 8 },
150
- children: [
151
- /* @__PURE__ */ jsxDEV("div", {
152
- style: {
153
- width: 12,
154
- height: 12,
155
- borderRadius: "50%",
156
- backgroundColor: "#ff5f57"
157
- }
158
- }, undefined, false, undefined, this),
159
- /* @__PURE__ */ jsxDEV("div", {
160
- style: {
161
- width: 12,
162
- height: 12,
163
- borderRadius: "50%",
164
- backgroundColor: "#febc2e"
165
- }
166
- }, undefined, false, undefined, this),
167
- /* @__PURE__ */ jsxDEV("div", {
168
- style: {
169
- width: 12,
170
- height: 12,
171
- borderRadius: "50%",
172
- backgroundColor: "#28c840"
173
- }
174
- }, undefined, false, undefined, this)
175
- ]
176
- }, undefined, true, undefined, this),
177
- /* @__PURE__ */ jsxDEV("div", {
178
- style: {
179
- flex: 1,
180
- textAlign: "center",
181
- color: "#666",
182
- fontSize: codeStyle.fontSize * 0.7,
183
- fontFamily: "monospace"
184
- },
185
- children: filename ?? language
186
- }, undefined, false, undefined, this)
187
- ]
188
- }, undefined, true, undefined, this),
189
- /* @__PURE__ */ jsxDEV("div", {
190
- style: { padding: "24px 32px" },
191
- children: /* @__PURE__ */ jsxDEV("pre", {
192
- style: {
193
- margin: 0,
194
- fontFamily: "'SF Mono', 'Fira Code', 'JetBrains Mono', monospace",
195
- fontSize: codeStyle.fontSize,
196
- lineHeight: codeStyle.lineHeight,
197
- color: textColor,
198
- whiteSpace: "pre-wrap",
199
- wordBreak: "break-word"
200
- },
201
- children: [
202
- visibleCode,
203
- showCursor && /* @__PURE__ */ jsxDEV("span", {
204
- style: {
205
- backgroundColor: textColor,
206
- width: "2px",
207
- display: "inline-block",
208
- height: "1.2em",
209
- verticalAlign: "text-bottom"
210
- },
211
- children: "\xA0"
212
- }, undefined, false, undefined, this)
213
- ]
214
- }, undefined, true, undefined, this)
215
- }, undefined, false, undefined, this)
216
- ]
217
- }, undefined, true, undefined, this);
218
- };
219
- export {
220
- CodeBlock
221
- };
2
+ var b=import.meta.require;import{Easing as q}from"remotion";var U={entrance:q.out(q.exp),exit:q.in(q.exp),emphasis:q.out(q.back(1.4)),linear:q.linear,gentle:q.bezier(0.25,0.1,0.25,1),spring:q.out(q.back(1.7))},X={sceneTransition:20,textEntrance:15,textExit:12,codeTypingPerChar:2,sectionPause:30,emphasisPause:15,brandReveal:25,minScene:60,shortScene:60,mediumScene:120,longScene:240},T={fade:{type:"fade",durationInFrames:20},slideLeft:{type:"slide-left",durationInFrames:20},slideRight:{type:"slide-right",durationInFrames:20},wipe:{type:"wipe",durationInFrames:15},none:{type:"none",durationInFrames:0}};import{defaultTokens as H}from"@contractspec/lib.design-system";var N={canvasBackground:H.colors.background,codeBackground:"#1e1e2e",terminalBackground:"#0d1117",terminalForeground:"#c9d1d9",highlight:H.colors.accent,gradientStart:H.colors.primary,gradientEnd:H.colors.accent},x={...H,video:N};var Y={title:{fontSize:72,lineHeight:1.1,fontWeight:700,letterSpacing:-1},heading:{fontSize:56,lineHeight:1.2,fontWeight:600,letterSpacing:-0.5},subheading:{fontSize:40,lineHeight:1.25,fontWeight:500},body:{fontSize:32,lineHeight:1.5,fontWeight:400},code:{fontSize:28,lineHeight:1.6,fontWeight:400},caption:{fontSize:24,lineHeight:1.4,fontWeight:400},label:{fontSize:20,lineHeight:1.3,fontWeight:600,letterSpacing:1}};function Z(z,K){let B=K/1920;return{...z,fontSize:Math.round(z.fontSize*B),letterSpacing:z.letterSpacing?Math.round(z.letterSpacing*B*10)/10:void 0}}import{interpolate as _,useCurrentFrame as V,useVideoConfig as v}from"remotion";import{jsx as G,jsxs as J}from"react/jsx-runtime";var y=({code:z,language:K="typescript",startAt:B=0,typeAnimation:O=!0,backgroundColor:$=N.codeBackground,textColor:Q="#abb2bf",filename:P})=>{let L=V(),{width:D}=v(),M=Z(Y.code,D),I=z.length,F=I*X.codeTypingPerChar,R=O?Math.floor(_(L,[B,B+F],[0,I],{extrapolateLeft:"clamp",extrapolateRight:"clamp"})):I,W=z.slice(0,R),w=_(L,[B,B+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:U.entrance}),S=O&&R<I&&L%16<10;return J("div",{style:{backgroundColor:$,borderRadius:16,padding:0,opacity:w,overflow:"hidden",boxShadow:"0 8px 32px rgba(0,0,0,0.3)"},children:[J("div",{style:{display:"flex",alignItems:"center",padding:"12px 20px",backgroundColor:"rgba(0,0,0,0.2)",gap:8},children:[J("div",{style:{display:"flex",gap:8},children:[G("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#ff5f57"}}),G("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#febc2e"}}),G("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#28c840"}})]}),G("div",{style:{flex:1,textAlign:"center",color:"#666",fontSize:M.fontSize*0.7,fontFamily:"monospace"},children:P??K})]}),G("div",{style:{padding:"24px 32px"},children:J("pre",{style:{margin:0,fontFamily:"'SF Mono', 'Fira Code', 'JetBrains Mono', monospace",fontSize:M.fontSize,lineHeight:M.lineHeight,color:Q,whiteSpace:"pre-wrap",wordBreak:"break-word"},children:[W,S&&G("span",{style:{backgroundColor:Q,width:"2px",display:"inline-block",height:"1.2em",verticalAlign:"text-bottom"},children:"\xA0"})]})})]})};export{y as CodeBlock};