@lssm-tech/lib.video-gen 3.0.10
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 +79 -0
- package/dist/browser/compositions/api-overview.js +1 -0
- package/dist/browser/compositions/index.js +1 -0
- package/dist/browser/compositions/primitives/animated-text.js +1 -0
- package/dist/browser/compositions/primitives/brand-frame.js +1 -0
- package/dist/browser/compositions/primitives/code-block.js +1 -0
- package/dist/browser/compositions/primitives/index.js +1 -0
- package/dist/browser/compositions/primitives/progress-bar.js +1 -0
- package/dist/browser/compositions/primitives/terminal.js +1 -0
- package/dist/browser/compositions/primitives/transition.js +1 -0
- package/dist/browser/compositions/social-clip.js +1 -0
- package/dist/browser/compositions/terminal-demo.js +1 -0
- package/dist/browser/design/index.js +1 -0
- package/dist/browser/design/layouts.js +1 -0
- package/dist/browser/design/motion.js +1 -0
- package/dist/browser/design/tokens.js +1 -0
- package/dist/browser/design/typography.js +1 -0
- package/dist/browser/docs/compositions.docblock.js +1 -0
- package/dist/browser/docs/design.docblock.js +172 -0
- package/dist/browser/docs/generators.docblock.js +165 -0
- package/dist/browser/docs/rendering.docblock.js +175 -0
- package/dist/browser/docs/video-gen.docblock.js +126 -0
- package/dist/browser/generators/index.js +82 -0
- package/dist/browser/generators/scene-planner.js +82 -0
- package/dist/browser/generators/script-generator.js +82 -0
- package/dist/browser/generators/video-generator.js +82 -0
- package/dist/browser/i18n/catalogs/en.js +28 -0
- package/dist/browser/i18n/catalogs/es.js +28 -0
- package/dist/browser/i18n/catalogs/fr.js +28 -0
- package/dist/browser/i18n/catalogs/index.js +82 -0
- package/dist/browser/i18n/index.js +82 -0
- package/dist/browser/i18n/keys.js +1 -0
- package/dist/browser/i18n/locale.js +1 -0
- package/dist/browser/i18n/messages.js +82 -0
- package/dist/browser/index.js +82 -0
- package/dist/browser/player/demo-player.js +1 -0
- package/dist/browser/player/index.js +1 -0
- package/dist/browser/remotion/Root.js +19 -0
- package/dist/browser/remotion/index.js +19 -0
- package/dist/browser/renderers/config.js +1 -0
- package/dist/browser/renderers/index.js +1 -0
- package/dist/browser/renderers/local.js +1 -0
- package/dist/browser/types.js +1 -0
- package/dist/browser/video-gen.feature.js +1 -0
- package/dist/compositions/api-overview.d.ts +16 -0
- package/dist/compositions/api-overview.js +2 -0
- package/dist/compositions/index.d.ts +7 -0
- package/dist/compositions/index.js +2 -0
- package/dist/compositions/primitives/animated-text.d.ts +22 -0
- package/dist/compositions/primitives/animated-text.js +2 -0
- package/dist/compositions/primitives/brand-frame.d.ts +14 -0
- package/dist/compositions/primitives/brand-frame.js +2 -0
- package/dist/compositions/primitives/code-block.d.ts +18 -0
- package/dist/compositions/primitives/code-block.js +2 -0
- package/dist/compositions/primitives/index.d.ts +12 -0
- package/dist/compositions/primitives/index.js +2 -0
- package/dist/compositions/primitives/progress-bar.d.ts +12 -0
- package/dist/compositions/primitives/progress-bar.js +2 -0
- package/dist/compositions/primitives/terminal.d.ts +24 -0
- package/dist/compositions/primitives/terminal.js +2 -0
- package/dist/compositions/primitives/transition.d.ts +14 -0
- package/dist/compositions/primitives/transition.js +2 -0
- package/dist/compositions/social-clip.d.ts +16 -0
- package/dist/compositions/social-clip.js +2 -0
- package/dist/compositions/terminal-demo.d.ts +17 -0
- package/dist/compositions/terminal-demo.js +2 -0
- package/dist/design/index.d.ts +4 -0
- package/dist/design/index.js +2 -0
- package/dist/design/layouts.d.ts +69 -0
- package/dist/design/layouts.js +2 -0
- package/dist/design/motion.d.ts +72 -0
- package/dist/design/motion.js +2 -0
- package/dist/design/tokens.d.ts +31 -0
- package/dist/design/tokens.js +2 -0
- package/dist/design/typography.d.ts +61 -0
- package/dist/design/typography.js +2 -0
- package/dist/docs/compositions.docblock.d.ts +1 -0
- package/dist/docs/compositions.docblock.js +2 -0
- package/dist/docs/design.docblock.d.ts +1 -0
- package/dist/docs/design.docblock.js +173 -0
- package/dist/docs/generators.docblock.d.ts +1 -0
- package/dist/docs/generators.docblock.js +166 -0
- package/dist/docs/rendering.docblock.d.ts +1 -0
- package/dist/docs/rendering.docblock.js +176 -0
- package/dist/docs/video-gen.docblock.d.ts +1 -0
- package/dist/docs/video-gen.docblock.js +127 -0
- package/dist/generators/index.d.ts +3 -0
- package/dist/generators/index.js +83 -0
- package/dist/generators/scene-planner.d.ts +31 -0
- package/dist/generators/scene-planner.js +83 -0
- package/dist/generators/script-generator.d.ts +57 -0
- package/dist/generators/script-generator.js +83 -0
- package/dist/generators/video-generator.d.ts +21 -0
- package/dist/generators/video-generator.js +83 -0
- package/dist/i18n/catalogs/en.d.ts +8 -0
- package/dist/i18n/catalogs/en.js +29 -0
- package/dist/i18n/catalogs/es.d.ts +6 -0
- package/dist/i18n/catalogs/es.js +29 -0
- package/dist/i18n/catalogs/fr.d.ts +6 -0
- package/dist/i18n/catalogs/fr.js +29 -0
- package/dist/i18n/catalogs/index.d.ts +8 -0
- package/dist/i18n/catalogs/index.js +83 -0
- package/dist/i18n/i18n.test.d.ts +1 -0
- package/dist/i18n/index.d.ts +22 -0
- package/dist/i18n/index.js +83 -0
- package/dist/i18n/keys.d.ts +116 -0
- package/dist/i18n/keys.js +2 -0
- package/dist/i18n/locale.d.ts +8 -0
- package/dist/i18n/locale.js +2 -0
- package/dist/i18n/messages.d.ts +14 -0
- package/dist/i18n/messages.js +83 -0
- package/dist/index.d.ts +7 -0
- package/dist/index.js +83 -0
- package/dist/node/compositions/api-overview.js +1 -0
- package/dist/node/compositions/index.js +1 -0
- package/dist/node/compositions/primitives/animated-text.js +1 -0
- package/dist/node/compositions/primitives/brand-frame.js +1 -0
- package/dist/node/compositions/primitives/code-block.js +1 -0
- package/dist/node/compositions/primitives/index.js +1 -0
- package/dist/node/compositions/primitives/progress-bar.js +1 -0
- package/dist/node/compositions/primitives/terminal.js +1 -0
- package/dist/node/compositions/primitives/transition.js +1 -0
- package/dist/node/compositions/social-clip.js +1 -0
- package/dist/node/compositions/terminal-demo.js +1 -0
- package/dist/node/design/index.js +1 -0
- package/dist/node/design/layouts.js +1 -0
- package/dist/node/design/motion.js +1 -0
- package/dist/node/design/tokens.js +1 -0
- package/dist/node/design/typography.js +1 -0
- package/dist/node/docs/compositions.docblock.js +1 -0
- package/dist/node/docs/design.docblock.js +172 -0
- package/dist/node/docs/generators.docblock.js +165 -0
- package/dist/node/docs/rendering.docblock.js +175 -0
- package/dist/node/docs/video-gen.docblock.js +126 -0
- package/dist/node/generators/index.js +82 -0
- package/dist/node/generators/scene-planner.js +82 -0
- package/dist/node/generators/script-generator.js +82 -0
- package/dist/node/generators/video-generator.js +82 -0
- package/dist/node/i18n/catalogs/en.js +28 -0
- package/dist/node/i18n/catalogs/es.js +28 -0
- package/dist/node/i18n/catalogs/fr.js +28 -0
- package/dist/node/i18n/catalogs/index.js +82 -0
- package/dist/node/i18n/index.js +82 -0
- package/dist/node/i18n/keys.js +1 -0
- package/dist/node/i18n/locale.js +1 -0
- package/dist/node/i18n/messages.js +82 -0
- package/dist/node/index.js +82 -0
- package/dist/node/player/demo-player.js +1 -0
- package/dist/node/player/index.js +1 -0
- package/dist/node/remotion/Root.js +19 -0
- package/dist/node/remotion/index.js +19 -0
- package/dist/node/renderers/config.js +1 -0
- package/dist/node/renderers/index.js +1 -0
- package/dist/node/renderers/local.js +1 -0
- package/dist/node/types.js +1 -0
- package/dist/node/video-gen.feature.js +1 -0
- package/dist/player/demo-player.d.ts +55 -0
- package/dist/player/demo-player.js +2 -0
- package/dist/player/index.d.ts +2 -0
- package/dist/player/index.js +2 -0
- package/dist/remotion/Root.d.ts +2 -0
- package/dist/remotion/Root.js +20 -0
- package/dist/remotion/index.d.ts +1 -0
- package/dist/remotion/index.js +20 -0
- package/dist/renderers/config.d.ts +28 -0
- package/dist/renderers/config.js +2 -0
- package/dist/renderers/index.d.ts +3 -0
- package/dist/renderers/index.js +2 -0
- package/dist/renderers/local.d.ts +17 -0
- package/dist/renderers/local.js +2 -0
- package/dist/types.d.ts +85 -0
- package/dist/types.js +2 -0
- package/dist/video-gen.feature.d.ts +1 -0
- package/dist/video-gen.feature.js +2 -0
- package/package.json +675 -0
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import{createRequire as q}from"node:module";var A=q(import.meta.url);import{defineTranslation as u}from"@contractspec/lib.contracts-spec/translations";var j=u({meta:{key:"video-gen.messages",version:"1.0.0",domain:"video-gen",description:"All user-facing, LLM-facing, and developer-facing strings for the video-gen package",owners:["platform"],stability:"experimental"},locale:"en",fallback:"en",messages:{"prompt.script.system":{value:`You are a video narration script writer.
|
|
2
|
+
Write a narration script for a short video (30-60 seconds).
|
|
3
|
+
{styleGuide}
|
|
4
|
+
|
|
5
|
+
Return JSON with shape:
|
|
6
|
+
{
|
|
7
|
+
"segments": [{ "sceneId": string, "text": string }],
|
|
8
|
+
"fullText": string
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
Scene IDs should be: "intro", "problems", "solutions", "metrics", "cta".
|
|
12
|
+
Only include segments that are relevant to the brief content.`,description:"Script generator LLM system prompt",placeholders:[{name:"styleGuide",type:"string"}]},"prompt.scenePlanner.system":{value:`You are a video scene planner for ContractSpec marketing/documentation videos.
|
|
13
|
+
Given a content brief, break it into video scenes.
|
|
14
|
+
|
|
15
|
+
Each scene must have:
|
|
16
|
+
- compositionId: one of "ApiOverview", "SocialClip", "TerminalDemo"
|
|
17
|
+
- props: the input props for that composition (see type definitions)
|
|
18
|
+
- durationInFrames: duration at {fps}fps
|
|
19
|
+
- narrationText: what the narrator says during this scene
|
|
20
|
+
|
|
21
|
+
Return a JSON object with shape:
|
|
22
|
+
{
|
|
23
|
+
"scenes": [{ "compositionId": string, "props": object, "durationInFrames": number, "narrationText": string }],
|
|
24
|
+
"narrationScript": string
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
Keep the total duration around {targetSeconds} seconds.
|
|
28
|
+
Prioritize clarity and pacing. Each scene should communicate one idea.`,description:"Scene planner LLM system prompt",placeholders:[{name:"fps",type:"number"},{name:"targetSeconds",type:"number"}]},"prompt.style.professional":{value:"Use a clear, authoritative, professional tone. Be concise and direct.",description:"Style guide for professional narration"},"prompt.style.casual":{value:"Use a friendly, conversational tone. Be approachable and relatable.",description:"Style guide for casual narration"},"prompt.style.technical":{value:"Use precise technical language. Be detailed and accurate.",description:"Style guide for technical narration"},"script.segment.challenge":{value:"The challenge: {content}",description:"Narration segment prefix for problems",placeholders:[{name:"content",type:"string"}]},"script.segment.solution":{value:"The solution: {content}",description:"Narration segment prefix for solutions",placeholders:[{name:"content",type:"string"}]},"script.segment.results":{value:"The results: {content}",description:"Narration segment prefix for metrics",placeholders:[{name:"content",type:"string"}]},"scene.cta.default":{value:"Learn more",description:"Default call-to-action text for scenes"},"scene.hook.problem":{value:"The Problem",description:"Scene hook label for problem statement"},"scene.narration.problem":{value:"The problem: {content}",description:"Scene narration for problem statement",placeholders:[{name:"content",type:"string"}]},"scene.hook.solution":{value:"The Solution",description:"Scene hook label for solution"},"scene.narration.solution":{value:"The solution: {content}",description:"Scene narration for solution",placeholders:[{name:"content",type:"string"}]},"scene.hook.results":{value:"Results",description:"Scene hook label for results/metrics"},"composition.apiOverview.generates":{value:"Generates:",description:"ApiOverview heading for generated outputs"},"composition.apiOverview.tagline":{value:"One spec. Every surface.",description:"ApiOverview default tagline"},"composition.apiOverview.output.rest":{value:"REST Endpoint",description:"Generated output label: REST"},"composition.apiOverview.output.graphql":{value:"GraphQL Mutation",description:"Generated output label: GraphQL"},"composition.apiOverview.output.prisma":{value:"Prisma Model",description:"Generated output label: Prisma"},"composition.apiOverview.output.typescript":{value:"TypeScript SDK",description:"Generated output label: TypeScript SDK"},"composition.apiOverview.output.mcp":{value:"MCP Tool",description:"Generated output label: MCP Tool"},"composition.apiOverview.output.openapi":{value:"OpenAPI Spec",description:"Generated output label: OpenAPI"},"composition.socialClip.cta":{value:"Learn more",description:"SocialClip default CTA"},"composition.terminal.title":{value:"Terminal",description:"TerminalDemo default window title"}}});import{defineTranslation as v}from"@contractspec/lib.contracts-spec/translations";var k=v({meta:{key:"video-gen.messages",version:"1.0.0",domain:"video-gen",description:"Spanish translations for the video-gen package",owners:["platform"],stability:"experimental"},locale:"es",fallback:"en",messages:{"prompt.script.system":{value:`Eres un redactor de guiones de narración para vídeo.
|
|
29
|
+
Escribe un guión de narración para un vídeo corto (30-60 segundos).
|
|
30
|
+
{styleGuide}
|
|
31
|
+
|
|
32
|
+
Devuelve JSON con la forma:
|
|
33
|
+
{
|
|
34
|
+
"segments": [{ "sceneId": string, "text": string }],
|
|
35
|
+
"fullText": string
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
Los identificadores de escena deben ser: "intro", "problems", "solutions", "metrics", "cta".
|
|
39
|
+
Incluye solo los segmentos relevantes para el brief.`,description:"Script generator LLM system prompt",placeholders:[{name:"styleGuide",type:"string"}]},"prompt.scenePlanner.system":{value:`Eres un planificador de escenas de vídeo para vídeos de marketing/documentación de ContractSpec.
|
|
40
|
+
Dado un brief de contenido, divídelo en escenas de vídeo.
|
|
41
|
+
|
|
42
|
+
Cada escena debe tener:
|
|
43
|
+
- compositionId: uno de "ApiOverview", "SocialClip", "TerminalDemo"
|
|
44
|
+
- props: las propiedades de entrada de esa composición
|
|
45
|
+
- durationInFrames: duración a {fps} fps
|
|
46
|
+
- narrationText: lo que dice el narrador durante esta escena
|
|
47
|
+
|
|
48
|
+
Devuelve un objeto JSON con la forma:
|
|
49
|
+
{
|
|
50
|
+
"scenes": [{ "compositionId": string, "props": object, "durationInFrames": number, "narrationText": string }],
|
|
51
|
+
"narrationScript": string
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
Mantén la duración total alrededor de {targetSeconds} segundos.
|
|
55
|
+
Prioriza la claridad y el ritmo. Cada escena debe comunicar una idea.`,description:"Scene planner LLM system prompt",placeholders:[{name:"fps",type:"number"},{name:"targetSeconds",type:"number"}]},"prompt.style.professional":{value:"Usa un tono claro, autoritario y profesional. Sé conciso y directo.",description:"Style guide for professional narration"},"prompt.style.casual":{value:"Usa un tono amigable y conversacional. Sé accesible y cercano.",description:"Style guide for casual narration"},"prompt.style.technical":{value:"Usa un lenguaje técnico preciso. Sé detallado y exacto.",description:"Style guide for technical narration"},"script.segment.challenge":{value:"El desafío: {content}",description:"Narration segment prefix for problems",placeholders:[{name:"content",type:"string"}]},"script.segment.solution":{value:"La solución: {content}",description:"Narration segment prefix for solutions",placeholders:[{name:"content",type:"string"}]},"script.segment.results":{value:"Los resultados: {content}",description:"Narration segment prefix for metrics",placeholders:[{name:"content",type:"string"}]},"scene.cta.default":{value:"Más información",description:"Default call-to-action text for scenes"},"scene.hook.problem":{value:"El problema",description:"Scene hook label for problem statement"},"scene.narration.problem":{value:"El problema: {content}",description:"Scene narration for problem statement",placeholders:[{name:"content",type:"string"}]},"scene.hook.solution":{value:"La solución",description:"Scene hook label for solution"},"scene.narration.solution":{value:"La solución: {content}",description:"Scene narration for solution",placeholders:[{name:"content",type:"string"}]},"scene.hook.results":{value:"Resultados",description:"Scene hook label for results/metrics"},"composition.apiOverview.generates":{value:"Genera:",description:"ApiOverview heading for generated outputs"},"composition.apiOverview.tagline":{value:"Una spec. Todas las superficies.",description:"ApiOverview default tagline"},"composition.apiOverview.output.rest":{value:"Endpoint REST",description:"Generated output label: REST"},"composition.apiOverview.output.graphql":{value:"Mutación GraphQL",description:"Generated output label: GraphQL"},"composition.apiOverview.output.prisma":{value:"Modelo Prisma",description:"Generated output label: Prisma"},"composition.apiOverview.output.typescript":{value:"SDK TypeScript",description:"Generated output label: TypeScript SDK"},"composition.apiOverview.output.mcp":{value:"Herramienta MCP",description:"Generated output label: MCP Tool"},"composition.apiOverview.output.openapi":{value:"Spec OpenAPI",description:"Generated output label: OpenAPI"},"composition.socialClip.cta":{value:"Más información",description:"SocialClip default CTA"},"composition.terminal.title":{value:"Terminal",description:"TerminalDemo default window title"}}});import{defineTranslation as w}from"@contractspec/lib.contracts-spec/translations";var m=w({meta:{key:"video-gen.messages",version:"1.0.0",domain:"video-gen",description:"French translations for the video-gen package",owners:["platform"],stability:"experimental"},locale:"fr",fallback:"en",messages:{"prompt.script.system":{value:`Vous êtes un rédacteur de scripts de narration vidéo.
|
|
56
|
+
Écrivez un script de narration pour une courte vidéo (30-60 secondes).
|
|
57
|
+
{styleGuide}
|
|
58
|
+
|
|
59
|
+
Retournez du JSON avec la forme :
|
|
60
|
+
{
|
|
61
|
+
"segments": [{ "sceneId": string, "text": string }],
|
|
62
|
+
"fullText": string
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
Les identifiants de scène doivent être : "intro", "problems", "solutions", "metrics", "cta".
|
|
66
|
+
N'incluez que les segments pertinents au brief.`,description:"Script generator LLM system prompt",placeholders:[{name:"styleGuide",type:"string"}]},"prompt.scenePlanner.system":{value:`Vous êtes un planificateur de scènes vidéo pour les vidéos marketing/documentation de ContractSpec.
|
|
67
|
+
À partir d'un brief, décomposez-le en scènes vidéo.
|
|
68
|
+
|
|
69
|
+
Chaque scène doit avoir :
|
|
70
|
+
- compositionId : un parmi "ApiOverview", "SocialClip", "TerminalDemo"
|
|
71
|
+
- props : les propriétés d'entrée de cette composition
|
|
72
|
+
- durationInFrames : durée à {fps} fps
|
|
73
|
+
- narrationText : ce que le narrateur dit pendant cette scène
|
|
74
|
+
|
|
75
|
+
Retournez un objet JSON avec la forme :
|
|
76
|
+
{
|
|
77
|
+
"scenes": [{ "compositionId": string, "props": object, "durationInFrames": number, "narrationText": string }],
|
|
78
|
+
"narrationScript": string
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
Gardez la durée totale autour de {targetSeconds} secondes.
|
|
82
|
+
Privilégiez la clarté et le rythme. Chaque scène doit communiquer une idée.`,description:"Scene planner LLM system prompt",placeholders:[{name:"fps",type:"number"},{name:"targetSeconds",type:"number"}]},"prompt.style.professional":{value:"Utilisez un ton clair, autoritaire et professionnel. Soyez concis et direct.",description:"Style guide for professional narration"},"prompt.style.casual":{value:"Utilisez un ton amical et conversationnel. Soyez accessible et proche.",description:"Style guide for casual narration"},"prompt.style.technical":{value:"Utilisez un langage technique précis. Soyez détaillé et exact.",description:"Style guide for technical narration"},"script.segment.challenge":{value:"Le défi : {content}",description:"Narration segment prefix for problems",placeholders:[{name:"content",type:"string"}]},"script.segment.solution":{value:"La solution : {content}",description:"Narration segment prefix for solutions",placeholders:[{name:"content",type:"string"}]},"script.segment.results":{value:"Les résultats : {content}",description:"Narration segment prefix for metrics",placeholders:[{name:"content",type:"string"}]},"scene.cta.default":{value:"En savoir plus",description:"Default call-to-action text for scenes"},"scene.hook.problem":{value:"Le problème",description:"Scene hook label for problem statement"},"scene.narration.problem":{value:"Le problème : {content}",description:"Scene narration for problem statement",placeholders:[{name:"content",type:"string"}]},"scene.hook.solution":{value:"La solution",description:"Scene hook label for solution"},"scene.narration.solution":{value:"La solution : {content}",description:"Scene narration for solution",placeholders:[{name:"content",type:"string"}]},"scene.hook.results":{value:"Résultats",description:"Scene hook label for results/metrics"},"composition.apiOverview.generates":{value:"Génère :",description:"ApiOverview heading for generated outputs"},"composition.apiOverview.tagline":{value:"Un spec. Toutes les surfaces.",description:"ApiOverview default tagline"},"composition.apiOverview.output.rest":{value:"Endpoint REST",description:"Generated output label: REST"},"composition.apiOverview.output.graphql":{value:"Mutation GraphQL",description:"Generated output label: GraphQL"},"composition.apiOverview.output.prisma":{value:"Modèle Prisma",description:"Generated output label: Prisma"},"composition.apiOverview.output.typescript":{value:"SDK TypeScript",description:"Generated output label: TypeScript SDK"},"composition.apiOverview.output.mcp":{value:"Outil MCP",description:"Generated output label: MCP Tool"},"composition.apiOverview.output.openapi":{value:"Spec OpenAPI",description:"Generated output label: OpenAPI"},"composition.socialClip.cta":{value:"En savoir plus",description:"SocialClip default CTA"},"composition.terminal.title":{value:"Terminal",description:"TerminalDemo default window title"}}});import{createI18nFactory as x}from"@contractspec/lib.contracts-spec/translations";var h=x({specKey:"video-gen.messages",catalogs:[j,m,k]}),P=h.create,Q=h.getDefault,R=h.resetRegistry;export{R as resetI18nRegistry,Q as getDefaultI18n,P as createVideoGenI18n};
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import{createRequire as P8}from"node:module";var _1=P8(import.meta.url);import{Easing as w}from"remotion";var R={entrance:w.out(w.exp),exit:w.in(w.exp),emphasis:w.out(w.back(1.4)),linear:w.linear,gentle:w.bezier(0.25,0.1,0.25,1),spring:w.out(w.back(1.7))},V={sceneTransition:20,textEntrance:15,textExit:12,codeTypingPerChar:2,sectionPause:30,emphasisPause:15,brandReveal:25,minScene:60,shortScene:60,mediumScene:120,longScene:240},D1={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 b}from"@contractspec/lib.design-system";var y={canvasBackground:b.colors.background,codeBackground:"#1e1e2e",terminalBackground:"#0d1117",terminalForeground:"#c9d1d9",highlight:b.colors.accent,gradientStart:b.colors.primary,gradientEnd:b.colors.accent},P={...b,video:y};var C={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 v(G,K){let L=K/1920;return{...G,fontSize:Math.round(G.fontSize*L),letterSpacing:G.letterSpacing?Math.round(G.letterSpacing*L*10)/10:void 0}}import{interpolate as A,useCurrentFrame as O8,useVideoConfig as k8}from"remotion";import{jsx as E8}from"react/jsx-runtime";var I=({text:G,variant:K="body",style:L,enterAt:z=0,exitAt:H,color:Q="#ffffff",align:$="left"})=>{let W=O8(),{width:U}=k8(),M=C[K],X={...v(M,U),...L},N=A(W,[z,z+V.textEntrance],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),B=A(N,[0,1],[0,1],{easing:R.entrance}),Y=A(N,[0,1],[30,0],{easing:R.entrance}),Z=1,k=0;if(H!==void 0){let o=A(W,[H,H+V.textExit],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"});Z=A(o,[0,1],[1,0],{easing:R.exit}),k=A(o,[0,1],[0,-20],{easing:R.exit})}let E=B*Z,c=Y+k;return E8("div",{style:{fontSize:X.fontSize,lineHeight:X.lineHeight,fontWeight:X.fontWeight,letterSpacing:X.letterSpacing,color:Q,textAlign:$,opacity:E,transform:`translateY(${c}px)`,willChange:"opacity, transform"},children:G})};import{VIDEO_FORMATS as r}from"@contractspec/lib.contracts-integrations/integrations/providers/video";var j=30,f={horizontal:120,vertical:80,contentWidth:1680,contentHeight:920};function J8(G){let K=G.width/1920,L=G.height/1080;return{horizontal:Math.round(f.horizontal*K),vertical:Math.round(f.vertical*L),contentWidth:Math.round(f.contentWidth*K),contentHeight:Math.round(f.contentHeight*L)}}var A1={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 F1(){return[r.landscape,r.square,r.portrait]}import{interpolate as Q8,useCurrentFrame as S8,useVideoConfig as T8}from"remotion";import{jsx as a,jsxs as C8}from"react/jsx-runtime";var S=({styleOverrides:G,showBranding:K=!0,animateEntrance:L=!0,variant:z="gradient",children:H})=>{let Q=S8(),{width:$,height:W}=T8(),U=P,M=J8({type:"custom",width:$,height:W}),J=G?.primaryColor??U.colors.primary,X=G?.accentColor??U.colors.accent,N=G?.darkMode??!0,B;switch(z){case"solid":B=N?"#0a0a0a":U.colors.background;break;case"gradient":B=N?"linear-gradient(135deg, #0a0a14 0%, #0f172a 50%, #0a0a14 100%)":`linear-gradient(135deg, ${U.colors.background} 0%, ${U.colors.muted} 100%)`;break;case"dark":B="#000000";break}let Y=L?Q8(Q,[0,15],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:R.entrance}):1,Z=K?Q8(Q,[V.brandReveal,V.brandReveal+15],[0,0.3],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}):0;return C8("div",{style:{width:$,height:W,background:B,position:"relative",overflow:"hidden",opacity:Y},children:[z==="gradient"&&a("div",{style:{position:"absolute",top:"-20%",right:"-10%",width:"50%",height:"50%",background:`radial-gradient(circle, ${J}15 0%, transparent 70%)`,borderRadius:"50%",pointerEvents:"none"}}),a("div",{style:{position:"absolute",left:M.horizontal,top:M.vertical,width:M.contentWidth,height:M.contentHeight,display:"flex",flexDirection:"column"},children:H}),K&&a("div",{style:{position:"absolute",bottom:M.vertical/2,right:M.horizontal,opacity:Z,color:N?"#ffffff":"#000000",fontSize:Math.round(16*($/1920)),fontWeight:500,letterSpacing:1},children:"ContractSpec"})]})};import{interpolate as $8,useCurrentFrame as v8,useVideoConfig as A8}from"remotion";import{jsx as F,jsxs as p}from"react/jsx-runtime";var n=({code:G,language:K="typescript",startAt:L=0,typeAnimation:z=!0,backgroundColor:H=y.codeBackground,textColor:Q="#abb2bf",filename:$})=>{let W=v8(),{width:U}=A8(),M=v(C.code,U),J=G.length,X=J*V.codeTypingPerChar,N=z?Math.floor($8(W,[L,L+X],[0,J],{extrapolateLeft:"clamp",extrapolateRight:"clamp"})):J,B=G.slice(0,N),Y=$8(W,[L,L+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:R.entrance}),Z=z&&N<J&&W%16<10;return p("div",{style:{backgroundColor:H,borderRadius:16,padding:0,opacity:Y,overflow:"hidden",boxShadow:"0 8px 32px rgba(0,0,0,0.3)"},children:[p("div",{style:{display:"flex",alignItems:"center",padding:"12px 20px",backgroundColor:"rgba(0,0,0,0.2)",gap:8},children:[p("div",{style:{display:"flex",gap:8},children:[F("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#ff5f57"}}),F("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#febc2e"}}),F("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#28c840"}})]}),F("div",{style:{flex:1,textAlign:"center",color:"#666",fontSize:M.fontSize*0.7,fontFamily:"monospace"},children:$??K})]}),F("div",{style:{padding:"24px 32px"},children:p("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:[B,Z&&F("span",{style:{backgroundColor:Q,width:"2px",display:"inline-block",height:"1.2em",verticalAlign:"text-bottom"},children:" "})]})})]})};import{useCurrentFrame as F8,useVideoConfig as b8}from"remotion";import{jsx as W8}from"react/jsx-runtime";var T=({height:G=4,color:K=P.colors.primary,backgroundColor:L="rgba(255,255,255,0.1)",position:z="bottom"})=>{let H=F8(),{durationInFrames:Q,width:$}=b8(),W=H/Q;return W8("div",{style:{position:"absolute",[z]:0,left:0,width:$,height:G,backgroundColor:L,zIndex:100},children:W8("div",{style:{width:`${W*100}%`,height:"100%",backgroundColor:K,transition:"none"}})})};import{AbsoluteFill as y8,interpolate as x,Sequence as i,useCurrentFrame as X8,useVideoConfig as h8}from"remotion";import{jsx as _,jsxs as h}from"react/jsx-runtime";var x8=({specName:G,method:K="POST",endpoint:L="/api/users",specCode:z,generatedOutputs:H=["REST Endpoint","GraphQL Mutation","Prisma Model","TypeScript SDK","MCP Tool","OpenAPI Spec"],tagline:Q="One spec. Every surface."})=>{let{durationInFrames:$}=h8(),W=P,U=60,M=45,J=210,X=180,N=$-90;return h(y8,{children:[h(S,{variant:"gradient",showBranding:!0,children:[_(i,{from:0,durationInFrames:210,children:h("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:16},children:[h("div",{style:{display:"flex",alignItems:"center",gap:16},children:[_(f8,{method:K,enterAt:10}),_(I,{text:L,variant:"subheading",enterAt:15,color:W.colors.mutedForeground})]}),_(I,{text:G,variant:"title",enterAt:5,color:"#ffffff"}),_("div",{style:{flex:1,marginTop:24},children:_(n,{code:z,language:"typescript",filename:`${G.toLowerCase()}.contract.ts`,startAt:45,typeAnimation:!0})})]})}),_(i,{from:180,durationInFrames:$-180,children:h("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",gap:24},children:[_(I,{text:"Generates:",variant:"heading",enterAt:0,color:"#ffffff",align:"center"}),_("div",{style:{display:"flex",flexWrap:"wrap",gap:16,justifyContent:"center",maxWidth:"80%",marginTop:32},children:H.map((B,Y)=>_(j8,{label:B,index:Y,startFrame:20+Y*8},B))}),_(i,{from:N-180,children:_("div",{style:{marginTop:48},children:_(I,{text:Q,variant:"heading",enterAt:0,color:W.colors.accent,align:"center"})})})]})})]}),_(T,{})]})},f8=({method:G,enterAt:K})=>{let L=X8(),z=x(L,[K,K+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:R.entrance}),H=x(L,[K,K+12],[0.8,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:R.emphasis}),Q={GET:"#61afef",POST:"#98c379",PUT:"#e5c07b",PATCH:"#d19a66",DELETE:"#e06c75"};return _("div",{style:{opacity:z,transform:`scale(${H})`,backgroundColor:Q[G]??"#61afef",color:"#000",padding:"8px 20px",borderRadius:8,fontSize:24,fontWeight:700,fontFamily:"monospace",letterSpacing:1},children:G})},j8=({label:G,startFrame:K})=>{let L=X8(),z=x(L,[K,K+12],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),H=x(L,[K,K+15],[20,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:R.emphasis}),Q=x(L,[K,K+15],[0.9,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:R.emphasis});return _("div",{style:{opacity:z,transform:`translateY(${H}px) scale(${Q})`,backgroundColor:"rgba(255,255,255,0.08)",border:"1px solid rgba(255,255,255,0.15)",color:"#ffffff",padding:"16px 32px",borderRadius:12,fontSize:28,fontWeight:500},children:G})};import{interpolate as s,useCurrentFrame as p8,useVideoConfig as g8}from"remotion";import{jsx as O,jsxs as g}from"react/jsx-runtime";var U8={command:"#c9d1d9",output:"#8b949e",error:"#f85149",success:"#3fb950",comment:"#6e7681"},t=({lines:G,startAt:K=0,prompt:L="$ ",title:z="Terminal",backgroundColor:H=y.terminalBackground,typingSpeed:Q=V.codeTypingPerChar})=>{let $=p8(),{width:W}=g8(),U=v(C.code,W),M=[],J=K;for(let N of G){let B=N.delay??10,Y=J+B;if(N.type==="command"){let Z=N.text.length*Q;M.push({startFrame:Y,endFrame:Y+Z}),J=Y+Z}else M.push({startFrame:Y,endFrame:Y+5}),J=Y+5}let X=s($,[K,K+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:R.entrance});return g("div",{style:{backgroundColor:H,borderRadius:16,overflow:"hidden",opacity:X,boxShadow:"0 8px 32px rgba(0,0,0,0.3)"},children:[g("div",{style:{display:"flex",alignItems:"center",padding:"12px 20px",backgroundColor:"rgba(255,255,255,0.05)",gap:8},children:[g("div",{style:{display:"flex",gap:8},children:[O("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#ff5f57"}}),O("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#febc2e"}}),O("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#28c840"}})]}),O("div",{style:{flex:1,textAlign:"center",color:"#484f58",fontSize:U.fontSize*0.7,fontFamily:"monospace"},children:z})]}),O("div",{style:{padding:"24px 32px",minHeight:200},children:G.map((N,B)=>{let Y=M[B];if(!Y||$<Y.startFrame)return null;let Z=N.type==="command",k=U8[N.type],E=N.text;if(Z){let V8=s($,[Y.startFrame,Y.endFrame],[0,N.text.length],{extrapolateLeft:"clamp",extrapolateRight:"clamp"});E=N.text.slice(0,Math.floor(V8))}let c=Z?1:s($,[Y.startFrame,Y.startFrame+5],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),w8=Z&&$>=Y.startFrame&&$<=Y.endFrame&&$%16<10;return g("div",{style:{fontFamily:"'SF Mono', 'Fira Code', 'JetBrains Mono', monospace",fontSize:U.fontSize,lineHeight:1.8,color:k,opacity:c,whiteSpace:"pre-wrap"},children:[Z&&O("span",{style:{color:"#3fb950"},children:L}),N.type==="comment"&&O("span",{style:{color:U8.comment},children:"# "}),E,w8&&O("span",{style:{backgroundColor:"#c9d1d9",width:"2px",display:"inline-block",height:"1.2em",verticalAlign:"text-bottom"},children:" "})]},`${B}-${N.text.slice(0,20)}`)})})]})};import{interpolate as u8,useCurrentFrame as m8}from"remotion";import{jsx as N8,Fragment as c8}from"react/jsx-runtime";var d8=({type:G,durationInFrames:K,direction:L,startAt:z=0,children:H})=>{let Q=m8();if(G==="none"||K===0)return N8(c8,{children:H});let $=u8(Q,[z,z+K],L==="in"?[0,1]:[1,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),W=l8(G,$);return N8("div",{style:W,children:H})};function l8(G,K){let L=R.entrance(K);switch(G){case"fade":return{opacity:L,width:"100%",height:"100%"};case"slide-left":return{opacity:L,transform:`translateX(${(1-L)*100}%)`,width:"100%",height:"100%"};case"slide-right":return{opacity:L,transform:`translateX(${(1-L)*-100}%)`,width:"100%",height:"100%"};case"wipe":return{clipPath:`inset(0 ${(1-L)*100}% 0 0)`,width:"100%",height:"100%"};default:return{width:"100%",height:"100%"}}}import{AbsoluteFill as o8,interpolate as m,Sequence as u,useCurrentFrame as M8,useVideoConfig as r8}from"remotion";import{jsx as q,jsxs as d}from"react/jsx-runtime";var a8=({hook:G,message:K,points:L=[],cta:z="Learn more",ctaUrl:H="contractspec.dev",accentColor:Q})=>{let{durationInFrames:$,width:W,height:U}=r8(),J=Q??P.colors.accent,X=U>W,N=75,B=60,Y=120,Z=$-90;return d(o8,{children:[q(S,{variant:"gradient",showBranding:!0,children:d("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",gap:X?48:32,textAlign:"center",padding:X?"0 20px":0},children:[q(u,{from:0,durationInFrames:105,children:q("div",{style:{width:"100%"},children:q(I,{text:G,variant:"title",enterAt:5,exitAt:75,color:"#ffffff",align:"center"})})}),q(u,{from:60,children:q("div",{style:{width:"100%"},children:q(I,{text:K,variant:X?"subheading":"heading",enterAt:0,color:"#ffffff",align:"center"})})}),L.length>0&&q(u,{from:120,children:q("div",{style:{display:"flex",flexDirection:"column",gap:16,alignItems:X?"flex-start":"center",width:"100%",maxWidth:X?"100%":"80%",marginTop:16},children:L.map((k,E)=>q(n8,{text:k,index:E,startFrame:E*15,accent:J},k))})}),q(u,{from:Z,children:q(i8,{cta:z,url:H,accent:J})})]})}),q(T,{color:J})]})},n8=({text:G,startFrame:K,accent:L})=>{let z=M8(),H=m(z,[K,K+12],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),Q=m(z,[K,K+15],[-30,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:R.entrance});return d("div",{style:{opacity:H,transform:`translateX(${Q}px)`,display:"flex",alignItems:"center",gap:16,fontSize:28,color:"#ffffff"},children:[q("div",{style:{width:8,height:8,borderRadius:"50%",backgroundColor:L,flexShrink:0}}),G]})},i8=({cta:G,url:K,accent:L})=>{let z=M8(),H=m(z,[0,15],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),Q=m(z,[0,18],[0.9,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:R.emphasis});return d("div",{style:{opacity:H,transform:`scale(${Q})`,display:"flex",flexDirection:"column",alignItems:"center",gap:12,marginTop:24},children:[q("div",{style:{backgroundColor:L,color:"#ffffff",padding:"16px 48px",borderRadius:12,fontSize:28,fontWeight:600},children:G}),q("div",{style:{color:"rgba(255,255,255,0.5)",fontSize:20},children:K})]})};import{AbsoluteFill as s8,Sequence as Y8,useVideoConfig as t8}from"remotion";import{jsx as D,jsxs as e}from"react/jsx-runtime";var e8=({title:G,subtitle:K,lines:L,terminalTitle:z="Terminal",prompt:H="$ ",summary:Q})=>{let{durationInFrames:$}=t8(),W=P,U=40,M=$-90;return e(s8,{children:[D(S,{variant:"dark",showBranding:!0,children:e("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:24},children:[e("div",{children:[D(I,{text:G,variant:"heading",enterAt:5,color:"#ffffff"}),K&&D("div",{style:{marginTop:8},children:D(I,{text:K,variant:"body",enterAt:15,color:W.colors.mutedForeground})})]}),D(Y8,{from:40,children:D("div",{style:{flex:1},children:D(t,{lines:L,startAt:0,prompt:H,title:z})})}),Q&&D(Y8,{from:M,children:D("div",{style:{marginTop:"auto",paddingTop:24},children:D(I,{text:Q,variant:"subheading",enterAt:0,color:W.colors.accent,align:"center"})})})]})}),D(T,{})]})};import{defineTranslation as G1}from"@contractspec/lib.contracts-spec/translations";var G8=G1({meta:{key:"video-gen.messages",version:"1.0.0",domain:"video-gen",description:"All user-facing, LLM-facing, and developer-facing strings for the video-gen package",owners:["platform"],stability:"experimental"},locale:"en",fallback:"en",messages:{"prompt.script.system":{value:`You are a video narration script writer.
|
|
2
|
+
Write a narration script for a short video (30-60 seconds).
|
|
3
|
+
{styleGuide}
|
|
4
|
+
|
|
5
|
+
Return JSON with shape:
|
|
6
|
+
{
|
|
7
|
+
"segments": [{ "sceneId": string, "text": string }],
|
|
8
|
+
"fullText": string
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
Scene IDs should be: "intro", "problems", "solutions", "metrics", "cta".
|
|
12
|
+
Only include segments that are relevant to the brief content.`,description:"Script generator LLM system prompt",placeholders:[{name:"styleGuide",type:"string"}]},"prompt.scenePlanner.system":{value:`You are a video scene planner for ContractSpec marketing/documentation videos.
|
|
13
|
+
Given a content brief, break it into video scenes.
|
|
14
|
+
|
|
15
|
+
Each scene must have:
|
|
16
|
+
- compositionId: one of "ApiOverview", "SocialClip", "TerminalDemo"
|
|
17
|
+
- props: the input props for that composition (see type definitions)
|
|
18
|
+
- durationInFrames: duration at {fps}fps
|
|
19
|
+
- narrationText: what the narrator says during this scene
|
|
20
|
+
|
|
21
|
+
Return a JSON object with shape:
|
|
22
|
+
{
|
|
23
|
+
"scenes": [{ "compositionId": string, "props": object, "durationInFrames": number, "narrationText": string }],
|
|
24
|
+
"narrationScript": string
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
Keep the total duration around {targetSeconds} seconds.
|
|
28
|
+
Prioritize clarity and pacing. Each scene should communicate one idea.`,description:"Scene planner LLM system prompt",placeholders:[{name:"fps",type:"number"},{name:"targetSeconds",type:"number"}]},"prompt.style.professional":{value:"Use a clear, authoritative, professional tone. Be concise and direct.",description:"Style guide for professional narration"},"prompt.style.casual":{value:"Use a friendly, conversational tone. Be approachable and relatable.",description:"Style guide for casual narration"},"prompt.style.technical":{value:"Use precise technical language. Be detailed and accurate.",description:"Style guide for technical narration"},"script.segment.challenge":{value:"The challenge: {content}",description:"Narration segment prefix for problems",placeholders:[{name:"content",type:"string"}]},"script.segment.solution":{value:"The solution: {content}",description:"Narration segment prefix for solutions",placeholders:[{name:"content",type:"string"}]},"script.segment.results":{value:"The results: {content}",description:"Narration segment prefix for metrics",placeholders:[{name:"content",type:"string"}]},"scene.cta.default":{value:"Learn more",description:"Default call-to-action text for scenes"},"scene.hook.problem":{value:"The Problem",description:"Scene hook label for problem statement"},"scene.narration.problem":{value:"The problem: {content}",description:"Scene narration for problem statement",placeholders:[{name:"content",type:"string"}]},"scene.hook.solution":{value:"The Solution",description:"Scene hook label for solution"},"scene.narration.solution":{value:"The solution: {content}",description:"Scene narration for solution",placeholders:[{name:"content",type:"string"}]},"scene.hook.results":{value:"Results",description:"Scene hook label for results/metrics"},"composition.apiOverview.generates":{value:"Generates:",description:"ApiOverview heading for generated outputs"},"composition.apiOverview.tagline":{value:"One spec. Every surface.",description:"ApiOverview default tagline"},"composition.apiOverview.output.rest":{value:"REST Endpoint",description:"Generated output label: REST"},"composition.apiOverview.output.graphql":{value:"GraphQL Mutation",description:"Generated output label: GraphQL"},"composition.apiOverview.output.prisma":{value:"Prisma Model",description:"Generated output label: Prisma"},"composition.apiOverview.output.typescript":{value:"TypeScript SDK",description:"Generated output label: TypeScript SDK"},"composition.apiOverview.output.mcp":{value:"MCP Tool",description:"Generated output label: MCP Tool"},"composition.apiOverview.output.openapi":{value:"OpenAPI Spec",description:"Generated output label: OpenAPI"},"composition.socialClip.cta":{value:"Learn more",description:"SocialClip default CTA"},"composition.terminal.title":{value:"Terminal",description:"TerminalDemo default window title"}}});import{defineTranslation as K1}from"@contractspec/lib.contracts-spec/translations";var K8=K1({meta:{key:"video-gen.messages",version:"1.0.0",domain:"video-gen",description:"Spanish translations for the video-gen package",owners:["platform"],stability:"experimental"},locale:"es",fallback:"en",messages:{"prompt.script.system":{value:`Eres un redactor de guiones de narración para vídeo.
|
|
29
|
+
Escribe un guión de narración para un vídeo corto (30-60 segundos).
|
|
30
|
+
{styleGuide}
|
|
31
|
+
|
|
32
|
+
Devuelve JSON con la forma:
|
|
33
|
+
{
|
|
34
|
+
"segments": [{ "sceneId": string, "text": string }],
|
|
35
|
+
"fullText": string
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
Los identificadores de escena deben ser: "intro", "problems", "solutions", "metrics", "cta".
|
|
39
|
+
Incluye solo los segmentos relevantes para el brief.`,description:"Script generator LLM system prompt",placeholders:[{name:"styleGuide",type:"string"}]},"prompt.scenePlanner.system":{value:`Eres un planificador de escenas de vídeo para vídeos de marketing/documentación de ContractSpec.
|
|
40
|
+
Dado un brief de contenido, divídelo en escenas de vídeo.
|
|
41
|
+
|
|
42
|
+
Cada escena debe tener:
|
|
43
|
+
- compositionId: uno de "ApiOverview", "SocialClip", "TerminalDemo"
|
|
44
|
+
- props: las propiedades de entrada de esa composición
|
|
45
|
+
- durationInFrames: duración a {fps} fps
|
|
46
|
+
- narrationText: lo que dice el narrador durante esta escena
|
|
47
|
+
|
|
48
|
+
Devuelve un objeto JSON con la forma:
|
|
49
|
+
{
|
|
50
|
+
"scenes": [{ "compositionId": string, "props": object, "durationInFrames": number, "narrationText": string }],
|
|
51
|
+
"narrationScript": string
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
Mantén la duración total alrededor de {targetSeconds} segundos.
|
|
55
|
+
Prioriza la claridad y el ritmo. Cada escena debe comunicar una idea.`,description:"Scene planner LLM system prompt",placeholders:[{name:"fps",type:"number"},{name:"targetSeconds",type:"number"}]},"prompt.style.professional":{value:"Usa un tono claro, autoritario y profesional. Sé conciso y directo.",description:"Style guide for professional narration"},"prompt.style.casual":{value:"Usa un tono amigable y conversacional. Sé accesible y cercano.",description:"Style guide for casual narration"},"prompt.style.technical":{value:"Usa un lenguaje técnico preciso. Sé detallado y exacto.",description:"Style guide for technical narration"},"script.segment.challenge":{value:"El desafío: {content}",description:"Narration segment prefix for problems",placeholders:[{name:"content",type:"string"}]},"script.segment.solution":{value:"La solución: {content}",description:"Narration segment prefix for solutions",placeholders:[{name:"content",type:"string"}]},"script.segment.results":{value:"Los resultados: {content}",description:"Narration segment prefix for metrics",placeholders:[{name:"content",type:"string"}]},"scene.cta.default":{value:"Más información",description:"Default call-to-action text for scenes"},"scene.hook.problem":{value:"El problema",description:"Scene hook label for problem statement"},"scene.narration.problem":{value:"El problema: {content}",description:"Scene narration for problem statement",placeholders:[{name:"content",type:"string"}]},"scene.hook.solution":{value:"La solución",description:"Scene hook label for solution"},"scene.narration.solution":{value:"La solución: {content}",description:"Scene narration for solution",placeholders:[{name:"content",type:"string"}]},"scene.hook.results":{value:"Resultados",description:"Scene hook label for results/metrics"},"composition.apiOverview.generates":{value:"Genera:",description:"ApiOverview heading for generated outputs"},"composition.apiOverview.tagline":{value:"Una spec. Todas las superficies.",description:"ApiOverview default tagline"},"composition.apiOverview.output.rest":{value:"Endpoint REST",description:"Generated output label: REST"},"composition.apiOverview.output.graphql":{value:"Mutación GraphQL",description:"Generated output label: GraphQL"},"composition.apiOverview.output.prisma":{value:"Modelo Prisma",description:"Generated output label: Prisma"},"composition.apiOverview.output.typescript":{value:"SDK TypeScript",description:"Generated output label: TypeScript SDK"},"composition.apiOverview.output.mcp":{value:"Herramienta MCP",description:"Generated output label: MCP Tool"},"composition.apiOverview.output.openapi":{value:"Spec OpenAPI",description:"Generated output label: OpenAPI"},"composition.socialClip.cta":{value:"Más información",description:"SocialClip default CTA"},"composition.terminal.title":{value:"Terminal",description:"TerminalDemo default window title"}}});import{defineTranslation as L1}from"@contractspec/lib.contracts-spec/translations";var L8=L1({meta:{key:"video-gen.messages",version:"1.0.0",domain:"video-gen",description:"French translations for the video-gen package",owners:["platform"],stability:"experimental"},locale:"fr",fallback:"en",messages:{"prompt.script.system":{value:`Vous êtes un rédacteur de scripts de narration vidéo.
|
|
56
|
+
Écrivez un script de narration pour une courte vidéo (30-60 secondes).
|
|
57
|
+
{styleGuide}
|
|
58
|
+
|
|
59
|
+
Retournez du JSON avec la forme :
|
|
60
|
+
{
|
|
61
|
+
"segments": [{ "sceneId": string, "text": string }],
|
|
62
|
+
"fullText": string
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
Les identifiants de scène doivent être : "intro", "problems", "solutions", "metrics", "cta".
|
|
66
|
+
N'incluez que les segments pertinents au brief.`,description:"Script generator LLM system prompt",placeholders:[{name:"styleGuide",type:"string"}]},"prompt.scenePlanner.system":{value:`Vous êtes un planificateur de scènes vidéo pour les vidéos marketing/documentation de ContractSpec.
|
|
67
|
+
À partir d'un brief, décomposez-le en scènes vidéo.
|
|
68
|
+
|
|
69
|
+
Chaque scène doit avoir :
|
|
70
|
+
- compositionId : un parmi "ApiOverview", "SocialClip", "TerminalDemo"
|
|
71
|
+
- props : les propriétés d'entrée de cette composition
|
|
72
|
+
- durationInFrames : durée à {fps} fps
|
|
73
|
+
- narrationText : ce que le narrateur dit pendant cette scène
|
|
74
|
+
|
|
75
|
+
Retournez un objet JSON avec la forme :
|
|
76
|
+
{
|
|
77
|
+
"scenes": [{ "compositionId": string, "props": object, "durationInFrames": number, "narrationText": string }],
|
|
78
|
+
"narrationScript": string
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
Gardez la durée totale autour de {targetSeconds} secondes.
|
|
82
|
+
Privilégiez la clarté et le rythme. Chaque scène doit communiquer une idée.`,description:"Scene planner LLM system prompt",placeholders:[{name:"fps",type:"number"},{name:"targetSeconds",type:"number"}]},"prompt.style.professional":{value:"Utilisez un ton clair, autoritaire et professionnel. Soyez concis et direct.",description:"Style guide for professional narration"},"prompt.style.casual":{value:"Utilisez un ton amical et conversationnel. Soyez accessible et proche.",description:"Style guide for casual narration"},"prompt.style.technical":{value:"Utilisez un langage technique précis. Soyez détaillé et exact.",description:"Style guide for technical narration"},"script.segment.challenge":{value:"Le défi : {content}",description:"Narration segment prefix for problems",placeholders:[{name:"content",type:"string"}]},"script.segment.solution":{value:"La solution : {content}",description:"Narration segment prefix for solutions",placeholders:[{name:"content",type:"string"}]},"script.segment.results":{value:"Les résultats : {content}",description:"Narration segment prefix for metrics",placeholders:[{name:"content",type:"string"}]},"scene.cta.default":{value:"En savoir plus",description:"Default call-to-action text for scenes"},"scene.hook.problem":{value:"Le problème",description:"Scene hook label for problem statement"},"scene.narration.problem":{value:"Le problème : {content}",description:"Scene narration for problem statement",placeholders:[{name:"content",type:"string"}]},"scene.hook.solution":{value:"La solution",description:"Scene hook label for solution"},"scene.narration.solution":{value:"La solution : {content}",description:"Scene narration for solution",placeholders:[{name:"content",type:"string"}]},"scene.hook.results":{value:"Résultats",description:"Scene hook label for results/metrics"},"composition.apiOverview.generates":{value:"Génère :",description:"ApiOverview heading for generated outputs"},"composition.apiOverview.tagline":{value:"Un spec. Toutes les surfaces.",description:"ApiOverview default tagline"},"composition.apiOverview.output.rest":{value:"Endpoint REST",description:"Generated output label: REST"},"composition.apiOverview.output.graphql":{value:"Mutation GraphQL",description:"Generated output label: GraphQL"},"composition.apiOverview.output.prisma":{value:"Modèle Prisma",description:"Generated output label: Prisma"},"composition.apiOverview.output.typescript":{value:"SDK TypeScript",description:"Generated output label: TypeScript SDK"},"composition.apiOverview.output.mcp":{value:"Outil MCP",description:"Generated output label: MCP Tool"},"composition.apiOverview.output.openapi":{value:"Spec OpenAPI",description:"Generated output label: OpenAPI"},"composition.socialClip.cta":{value:"En savoir plus",description:"SocialClip default CTA"},"composition.terminal.title":{value:"Terminal",description:"TerminalDemo default window title"}}});var R8={"prompt.script.system":"prompt.script.system","prompt.scenePlanner.system":"prompt.scenePlanner.system","prompt.style.professional":"prompt.style.professional","prompt.style.casual":"prompt.style.casual","prompt.style.technical":"prompt.style.technical"},B8={"script.segment.challenge":"script.segment.challenge","script.segment.solution":"script.segment.solution","script.segment.results":"script.segment.results"},Z8={"scene.cta.default":"scene.cta.default","scene.hook.problem":"scene.hook.problem","scene.narration.problem":"scene.narration.problem","scene.hook.solution":"scene.hook.solution","scene.narration.solution":"scene.narration.solution","scene.hook.results":"scene.hook.results"},_8={"composition.apiOverview.generates":"composition.apiOverview.generates","composition.apiOverview.tagline":"composition.apiOverview.tagline","composition.apiOverview.output.rest":"composition.apiOverview.output.rest","composition.apiOverview.output.graphql":"composition.apiOverview.output.graphql","composition.apiOverview.output.prisma":"composition.apiOverview.output.prisma","composition.apiOverview.output.typescript":"composition.apiOverview.output.typescript","composition.apiOverview.output.mcp":"composition.apiOverview.output.mcp","composition.apiOverview.output.openapi":"composition.apiOverview.output.openapi","composition.socialClip.cta":"composition.socialClip.cta","composition.terminal.title":"composition.terminal.title"},z1={...R8,...B8,...Z8,..._8};import{DEFAULT_LOCALE as H1,isSupportedLocale as J1,resolveLocale as Q1,SUPPORTED_LOCALES as $1}from"@contractspec/lib.contracts-spec/translations";import{createI18nFactory as W1}from"@contractspec/lib.contracts-spec/translations";var z8=W1({specKey:"video-gen.messages",catalogs:[G8,L8,K8]}),H8=z8.create,X1=z8.getDefault,U1=z8.resetRegistry;class l{llm;model;temperature;fps;i18n;modelSelector;selectionContext;constructor(G){this.llm=G?.llm,this.model=G?.model,this.temperature=G?.temperature??0.3,this.fps=G?.fps??j,this.i18n=H8(G?.locale),this.modelSelector=G?.modelSelector,this.selectionContext=G?.selectionContext}async plan(G){if(this.llm)return this.planWithLlm(G);return this.planDeterministic(G)}planDeterministic(G){let{content:K}=G,{t:L}=this.i18n,z=[],H=this.fps;if(z.push({compositionId:"SocialClip",props:{hook:K.title,message:K.summary,points:K.solutions.slice(0,3),cta:K.callToAction??L("scene.cta.default")},durationInFrames:3*H,narrationText:`${K.title}. ${K.summary}`}),K.problems.length>0)z.push({compositionId:"SocialClip",props:{hook:L("scene.hook.problem"),message:K.problems[0]??"",points:K.problems.slice(1,4)},durationInFrames:4*H,narrationText:L("scene.narration.problem",{content:K.problems.join(". ")})});if(K.solutions.length>0)z.push({compositionId:"SocialClip",props:{hook:L("scene.hook.solution"),message:K.solutions[0]??"",points:K.solutions.slice(1,4)},durationInFrames:5*H,narrationText:L("scene.narration.solution",{content:K.solutions.join(". ")})});if(K.metrics&&K.metrics.length>0)z.push({compositionId:"SocialClip",props:{hook:L("scene.hook.results"),message:K.metrics[0]??"",points:K.metrics.slice(1,3)},durationInFrames:3*H,narrationText:K.metrics.join(". ")});if(K.callToAction)z.push({compositionId:"SocialClip",props:{hook:K.callToAction,message:"",cta:K.callToAction},durationInFrames:2*H,narrationText:K.callToAction});if(G.targetDurationSeconds){let W=G.targetDurationSeconds*H,U=z.reduce((J,X)=>J+X.durationInFrames,0),M=W/U;for(let J of z)J.durationInFrames=Math.round(J.durationInFrames*M)}let Q=z.reduce((W,U)=>W+U.durationInFrames,0),$=z.filter((W)=>W.narrationText).map((W)=>W.narrationText).join(" ");return{scenes:z,estimatedDurationSeconds:Q/H,narrationScript:$}}async resolveModel(){if(this.model)return this.model;if(this.modelSelector){let G=this.selectionContext??{taskDimension:"reasoning"};return(await this.modelSelector.select(G)).modelId}return}async planWithLlm(G){let{t:K}=this.i18n,L=[{role:"system",content:[{type:"text",text:K("prompt.scenePlanner.system",{fps:this.fps,targetSeconds:G.targetDurationSeconds??30})}]},{role:"user",content:[{type:"text",text:JSON.stringify(G.content)}]}];if(!this.llm)return this.planDeterministic(G);try{let z=await this.resolveModel(),Q=(await this.llm.chat(L,{model:z,temperature:this.temperature,responseFormat:"json"})).message.content.find((U)=>U.type==="text");if(!Q||Q.type!=="text")return this.planDeterministic(G);let $=JSON.parse(Q.text),W=$.scenes.reduce((U,M)=>U+M.durationInFrames,0);return{scenes:$.scenes,estimatedDurationSeconds:W/this.fps,narrationScript:$.narrationScript}}catch{return this.planDeterministic(G)}}}import{VIDEO_FORMATS as N1}from"@contractspec/lib.contracts-integrations/integrations/providers/video";class q8{scenePlanner;voice;transcriber;image;fps;constructor(G){this.fps=G?.fps??j,this.voice=G?.voice,this.transcriber=G?.transcriber,this.image=G?.image,this.scenePlanner=new l({llm:G?.llm,model:G?.model,temperature:G?.temperature,fps:this.fps,locale:G?.locale,modelSelector:G?.modelSelector,selectionContext:G?.selectionContext})}async generate(G){let K=await this.scenePlanner.plan(G),L=K.scenes.map((J,X)=>({id:`scene-${X}`,compositionId:J.compositionId,props:J.props,durationInFrames:J.durationInFrames,narrationText:J.narrationText})),z,H;if(G.narration?.enabled&&this.voice)try{if(z=await this.voice.synthesizeForVideo({content:G.content,scenePlan:{scenes:L.map((J)=>({id:J.id,compositionId:J.compositionId,durationInFrames:J.durationInFrames,narrationText:J.narrationText})),estimatedDurationSeconds:K.estimatedDurationSeconds},voice:{voiceId:G.narration.voiceId??""},pacing:{strategy:"scene-matched"},fps:this.fps}),z.timingMap)for(let J of z.timingMap.segments){let X=L.find((N)=>N.id===J.sceneId);if(X)X.durationInFrames=J.recommendedSceneDurationInFrames}if(z.assembledAudio)H={data:z.assembledAudio.data,format:z.assembledAudio.format==="wav"?"wav":"mp3",durationSeconds:(z.assembledAudio.durationMs??0)/1000,volume:1}}catch{}let Q;if(this.transcriber&&z?.assembledAudio)try{Q=(await this.transcriber.transcribe({audio:z.assembledAudio,subtitleFormat:"vtt"})).subtitles}catch{}let $;if(this.image)try{let J=await this.image.generate({content:G.content,purpose:"video-thumbnail",format:"png",style:"photorealistic"}),X=J.results?.images[0]?.url;$={prompt:J.prompt.text,...X?{imageUrl:X}:{}}}catch{}let W=G.format??N1.landscape,U=L.reduce((J,X)=>J+X.durationInFrames,0);return{id:M1(),scenes:L,totalDurationInFrames:U,fps:this.fps,format:W,audio:H?{narration:H}:void 0,subtitles:Q,voiceTimingMap:z?.timingMap,thumbnail:$}}}function M1(){let G=Date.now().toString(36),K=Math.random().toString(36).slice(2,8);return`vp_${G}_${K}`}var I8={codec:"h264",outputFormat:"mp4",crf:18,pixelFormat:"yuv420p"},Y1={h264:"mp4",h265:"mp4",vp8:"webm",vp9:"webm"},D8={draft:{crf:28,concurrency:1},standard:{crf:18,concurrency:void 0},high:{crf:12,concurrency:void 0}};function R1(G,K){let L=K?D8[K]:{};return{...I8,...L,...G}}import{VIDEO_FORMATS as TK}from"@contractspec/lib.contracts-integrations/integrations/providers/video";import{defineFeature as B1}from"@contractspec/lib.contracts-spec/features";var vK=B1({meta:{key:"libs.video-gen",version:"1.0.0",title:"Video Gen",description:"ContractSpec package declaration for @contractspec/lib.video-gen.",domain:"video-gen",owners:["@contractspec-core"],tags:["package","libs","video-gen"],stability:"experimental"},operations:[{key:"createUser",version:"1.0.0"}]});export{C as videoTypography,D1 as videoTransitions,f as videoSafeZone,A1 as videoPositions,R as videoEasing,V as videoDurations,v as scaleTypography,J8 as scaleSafeZone,R1 as resolveRenderConfig,D8 as qualityPresets,F1 as getAllFormatVariants,P as defaultVideoTheme,y as defaultVideoColors,b as defaultTokens,I8 as defaultRenderConfig,Y1 as codecFormatMap,q8 as VideoGenerator,vK as VideoGenFeature,e8 as TerminalDemo,t as Terminal,a8 as SocialClip,d8 as SceneTransitionWrapper,l as ScenePlanner,T as ProgressBar,j as DEFAULT_FPS,n as CodeBlock,S as BrandFrame,x8 as ApiOverview,I as AnimatedText};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{createRequire as MH}from"node:module";var xH=MH(import.meta.url);import{Easing as V}from"remotion";var M={entrance:V.out(V.exp),exit:V.in(V.exp),emphasis:V.out(V.back(1.4)),linear:V.linear,gentle:V.bezier(0.25,0.1,0.25,1),spring:V.out(V.back(1.7))},w={sceneTransition:20,textEntrance:15,textExit:12,codeTypingPerChar:2,sectionPause:30,emphasisPause:15,brandReveal:25,minScene:60,shortScene:60,mediumScene:120,longScene:240},cH={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 v}from"@contractspec/lib.design-system";var f={canvasBackground:v.colors.background,codeBackground:"#1e1e2e",terminalBackground:"#0d1117",terminalForeground:"#c9d1d9",highlight:v.colors.accent,gradientStart:v.colors.primary,gradientEnd:v.colors.accent},P={...v,video:f};var b={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 F(J,H){let K=H/1920;return{...J,fontSize:Math.round(J.fontSize*K),letterSpacing:J.letterSpacing?Math.round(J.letterSpacing*K*10)/10:void 0}}import{interpolate as S,useCurrentFrame as RH,useVideoConfig as YH}from"remotion";import{jsx as NH}from"react/jsx-runtime";var D=({text:J,variant:H="body",style:K,enterAt:Q=0,exitAt:z,color:$="#ffffff",align:G="left"})=>{let U=RH(),{width:R}=YH(),L=b[H],q={...F(L,R),...K},W=S(U,[Q,Q+w.textEntrance],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),N=S(W,[0,1],[0,1],{easing:M.entrance}),X=S(W,[0,1],[30,0],{easing:M.entrance}),Z=1,E=0;if(z!==void 0){let m=S(U,[z,z+w.textExit],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"});Z=S(m,[0,1],[1,0],{easing:M.exit}),E=S(m,[0,1],[0,-20],{easing:M.exit})}let k=N*Z,d=X+E;return NH("div",{style:{fontSize:q.fontSize,lineHeight:q.lineHeight,fontWeight:q.fontWeight,letterSpacing:q.letterSpacing,color:$,textAlign:G,opacity:k,transform:`translateY(${d}px)`,willChange:"opacity, transform"},children:J})};import{VIDEO_FORMATS as l}from"@contractspec/lib.contracts-integrations/integrations/providers/video";var eH=30,y={horizontal:120,vertical:80,contentWidth:1680,contentHeight:920};function a(J){let H=J.width/1920,K=J.height/1080;return{horizontal:Math.round(y.horizontal*H),vertical:Math.round(y.vertical*K),contentWidth:Math.round(y.contentWidth*H),contentHeight:Math.round(y.contentHeight*K)}}var HJ={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 JJ(){return[l.landscape,l.square,l.portrait]}import{interpolate as i,useCurrentFrame as ZH,useVideoConfig as _H}from"remotion";import{jsx as n,jsxs as BH}from"react/jsx-runtime";var A=({styleOverrides:J,showBranding:H=!0,animateEntrance:K=!0,variant:Q="gradient",children:z})=>{let $=ZH(),{width:G,height:U}=_H(),R=P,L=a({type:"custom",width:G,height:U}),Y=J?.primaryColor??R.colors.primary,q=J?.accentColor??R.colors.accent,W=J?.darkMode??!0,N;switch(Q){case"solid":N=W?"#0a0a0a":R.colors.background;break;case"gradient":N=W?"linear-gradient(135deg, #0a0a14 0%, #0f172a 50%, #0a0a14 100%)":`linear-gradient(135deg, ${R.colors.background} 0%, ${R.colors.muted} 100%)`;break;case"dark":N="#000000";break}let X=K?i($,[0,15],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.entrance}):1,Z=H?i($,[w.brandReveal,w.brandReveal+15],[0,0.3],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}):0;return BH("div",{style:{width:G,height:U,background:N,position:"relative",overflow:"hidden",opacity:X},children:[Q==="gradient"&&n("div",{style:{position:"absolute",top:"-20%",right:"-10%",width:"50%",height:"50%",background:`radial-gradient(circle, ${Y}15 0%, transparent 70%)`,borderRadius:"50%",pointerEvents:"none"}}),n("div",{style:{position:"absolute",left:L.horizontal,top:L.vertical,width:L.contentWidth,height:L.contentHeight,display:"flex",flexDirection:"column"},children:z}),H&&n("div",{style:{position:"absolute",bottom:L.vertical/2,right:L.horizontal,opacity:Z,color:W?"#ffffff":"#000000",fontSize:Math.round(16*(G/1920)),fontWeight:500,letterSpacing:1},children:"ContractSpec"})]})};import{interpolate as t,useCurrentFrame as DH,useVideoConfig as IH}from"remotion";import{jsx as T,jsxs as g}from"react/jsx-runtime";var e=({code:J,language:H="typescript",startAt:K=0,typeAnimation:Q=!0,backgroundColor:z=f.codeBackground,textColor:$="#abb2bf",filename:G})=>{let U=DH(),{width:R}=IH(),L=F(b.code,R),Y=J.length,q=Y*w.codeTypingPerChar,W=Q?Math.floor(t(U,[K,K+q],[0,Y],{extrapolateLeft:"clamp",extrapolateRight:"clamp"})):Y,N=J.slice(0,W),X=t(U,[K,K+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.entrance}),Z=Q&&W<Y&&U%16<10;return g("div",{style:{backgroundColor:z,borderRadius:16,padding:0,opacity:X,overflow:"hidden",boxShadow:"0 8px 32px rgba(0,0,0,0.3)"},children:[g("div",{style:{display:"flex",alignItems:"center",padding:"12px 20px",backgroundColor:"rgba(0,0,0,0.2)",gap:8},children:[g("div",{style:{display:"flex",gap:8},children:[T("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#ff5f57"}}),T("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#febc2e"}}),T("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#28c840"}})]}),T("div",{style:{flex:1,textAlign:"center",color:"#666",fontSize:L.fontSize*0.7,fontFamily:"monospace"},children:G??H})]}),T("div",{style:{padding:"24px 32px"},children:g("pre",{style:{margin:0,fontFamily:"'SF Mono', 'Fira Code', 'JetBrains Mono', monospace",fontSize:L.fontSize,lineHeight:L.lineHeight,color:$,whiteSpace:"pre-wrap",wordBreak:"break-word"},children:[N,Z&&T("span",{style:{backgroundColor:$,width:"2px",display:"inline-block",height:"1.2em",verticalAlign:"text-bottom"},children:" "})]})})]})};import{useCurrentFrame as VH,useVideoConfig as wH}from"remotion";import{jsx as HH}from"react/jsx-runtime";var C=({height:J=4,color:H=P.colors.primary,backgroundColor:K="rgba(255,255,255,0.1)",position:Q="bottom"})=>{let z=VH(),{durationInFrames:$,width:G}=wH(),U=z/$;return HH("div",{style:{position:"absolute",[Q]:0,left:0,width:G,height:J,backgroundColor:K,zIndex:100},children:HH("div",{style:{width:`${U*100}%`,height:"100%",backgroundColor:H,transition:"none"}})})};import{AbsoluteFill as PH,interpolate as j,Sequence as o,useCurrentFrame as JH,useVideoConfig as OH}from"remotion";import{jsx as _,jsxs as h}from"react/jsx-runtime";var KH=({specName:J,method:H="POST",endpoint:K="/api/users",specCode:Q,generatedOutputs:z=["REST Endpoint","GraphQL Mutation","Prisma Model","TypeScript SDK","MCP Tool","OpenAPI Spec"],tagline:$="One spec. Every surface."})=>{let{durationInFrames:G}=OH(),U=P,R=60,L=45,Y=210,q=180,W=G-90;return h(PH,{children:[h(A,{variant:"gradient",showBranding:!0,children:[_(o,{from:0,durationInFrames:210,children:h("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:16},children:[h("div",{style:{display:"flex",alignItems:"center",gap:16},children:[_(EH,{method:H,enterAt:10}),_(D,{text:K,variant:"subheading",enterAt:15,color:U.colors.mutedForeground})]}),_(D,{text:J,variant:"title",enterAt:5,color:"#ffffff"}),_("div",{style:{flex:1,marginTop:24},children:_(e,{code:Q,language:"typescript",filename:`${J.toLowerCase()}.contract.ts`,startAt:45,typeAnimation:!0})})]})}),_(o,{from:180,durationInFrames:G-180,children:h("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",gap:24},children:[_(D,{text:"Generates:",variant:"heading",enterAt:0,color:"#ffffff",align:"center"}),_("div",{style:{display:"flex",flexWrap:"wrap",gap:16,justifyContent:"center",maxWidth:"80%",marginTop:32},children:z.map((N,X)=>_(kH,{label:N,index:X,startFrame:20+X*8},N))}),_(o,{from:W-180,children:_("div",{style:{marginTop:48},children:_(D,{text:$,variant:"heading",enterAt:0,color:U.colors.accent,align:"center"})})})]})})]}),_(C,{})]})},EH=({method:J,enterAt:H})=>{let K=JH(),Q=j(K,[H,H+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.entrance}),z=j(K,[H,H+12],[0.8,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.emphasis}),$={GET:"#61afef",POST:"#98c379",PUT:"#e5c07b",PATCH:"#d19a66",DELETE:"#e06c75"};return _("div",{style:{opacity:Q,transform:`scale(${z})`,backgroundColor:$[J]??"#61afef",color:"#000",padding:"8px 20px",borderRadius:8,fontSize:24,fontWeight:700,fontFamily:"monospace",letterSpacing:1},children:J})},kH=({label:J,startFrame:H})=>{let K=JH(),Q=j(K,[H,H+12],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),z=j(K,[H,H+15],[20,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.emphasis}),$=j(K,[H,H+15],[0.9,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.emphasis});return _("div",{style:{opacity:Q,transform:`translateY(${z}px) scale(${$})`,backgroundColor:"rgba(255,255,255,0.08)",border:"1px solid rgba(255,255,255,0.15)",color:"#ffffff",padding:"16px 32px",borderRadius:12,fontSize:28,fontWeight:500},children:J})};import{interpolate as s,useCurrentFrame as bH,useVideoConfig as FH}from"remotion";import{jsx as O,jsxs as x}from"react/jsx-runtime";var QH={command:"#c9d1d9",output:"#8b949e",error:"#f85149",success:"#3fb950",comment:"#6e7681"},$H=({lines:J,startAt:H=0,prompt:K="$ ",title:Q="Terminal",backgroundColor:z=f.terminalBackground,typingSpeed:$=w.codeTypingPerChar})=>{let G=bH(),{width:U}=FH(),R=F(b.code,U),L=[],Y=H;for(let W of J){let N=W.delay??10,X=Y+N;if(W.type==="command"){let Z=W.text.length*$;L.push({startFrame:X,endFrame:X+Z}),Y=X+Z}else L.push({startFrame:X,endFrame:X+5}),Y=X+5}let q=s(G,[H,H+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.entrance});return x("div",{style:{backgroundColor:z,borderRadius:16,overflow:"hidden",opacity:q,boxShadow:"0 8px 32px rgba(0,0,0,0.3)"},children:[x("div",{style:{display:"flex",alignItems:"center",padding:"12px 20px",backgroundColor:"rgba(255,255,255,0.05)",gap:8},children:[x("div",{style:{display:"flex",gap:8},children:[O("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#ff5f57"}}),O("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#febc2e"}}),O("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#28c840"}})]}),O("div",{style:{flex:1,textAlign:"center",color:"#484f58",fontSize:R.fontSize*0.7,fontFamily:"monospace"},children:Q})]}),O("div",{style:{padding:"24px 32px",minHeight:200},children:J.map((W,N)=>{let X=L[N];if(!X||G<X.startFrame)return null;let Z=W.type==="command",E=QH[W.type],k=W.text;if(Z){let qH=s(G,[X.startFrame,X.endFrame],[0,W.text.length],{extrapolateLeft:"clamp",extrapolateRight:"clamp"});k=W.text.slice(0,Math.floor(qH))}let d=Z?1:s(G,[X.startFrame,X.startFrame+5],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),LH=Z&&G>=X.startFrame&&G<=X.endFrame&&G%16<10;return x("div",{style:{fontFamily:"'SF Mono', 'Fira Code', 'JetBrains Mono', monospace",fontSize:R.fontSize,lineHeight:1.8,color:E,opacity:d,whiteSpace:"pre-wrap"},children:[Z&&O("span",{style:{color:"#3fb950"},children:K}),W.type==="comment"&&O("span",{style:{color:QH.comment},children:"# "}),k,LH&&O("span",{style:{backgroundColor:"#c9d1d9",width:"2px",display:"inline-block",height:"1.2em",verticalAlign:"text-bottom"},children:" "})]},`${N}-${W.text.slice(0,20)}`)})})]})};import{AbsoluteFill as SH,interpolate as p,Sequence as u,useCurrentFrame as zH,useVideoConfig as AH}from"remotion";import{jsx as B,jsxs as c}from"react/jsx-runtime";var GH=({hook:J,message:H,points:K=[],cta:Q="Learn more",ctaUrl:z="contractspec.dev",accentColor:$})=>{let{durationInFrames:G,width:U,height:R}=AH(),Y=$??P.colors.accent,q=R>U,W=75,N=60,X=120,Z=G-90;return c(SH,{children:[B(A,{variant:"gradient",showBranding:!0,children:c("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",gap:q?48:32,textAlign:"center",padding:q?"0 20px":0},children:[B(u,{from:0,durationInFrames:105,children:B("div",{style:{width:"100%"},children:B(D,{text:J,variant:"title",enterAt:5,exitAt:75,color:"#ffffff",align:"center"})})}),B(u,{from:60,children:B("div",{style:{width:"100%"},children:B(D,{text:H,variant:q?"subheading":"heading",enterAt:0,color:"#ffffff",align:"center"})})}),K.length>0&&B(u,{from:120,children:B("div",{style:{display:"flex",flexDirection:"column",gap:16,alignItems:q?"flex-start":"center",width:"100%",maxWidth:q?"100%":"80%",marginTop:16},children:K.map((E,k)=>B(TH,{text:E,index:k,startFrame:k*15,accent:Y},E))})}),B(u,{from:Z,children:B(CH,{cta:Q,url:z,accent:Y})})]})}),B(C,{color:Y})]})},TH=({text:J,startFrame:H,accent:K})=>{let Q=zH(),z=p(Q,[H,H+12],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),$=p(Q,[H,H+15],[-30,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.entrance});return c("div",{style:{opacity:z,transform:`translateX(${$}px)`,display:"flex",alignItems:"center",gap:16,fontSize:28,color:"#ffffff"},children:[B("div",{style:{width:8,height:8,borderRadius:"50%",backgroundColor:K,flexShrink:0}}),J]})},CH=({cta:J,url:H,accent:K})=>{let Q=zH(),z=p(Q,[0,15],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),$=p(Q,[0,18],[0.9,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.emphasis});return c("div",{style:{opacity:z,transform:`scale(${$})`,display:"flex",flexDirection:"column",alignItems:"center",gap:12,marginTop:24},children:[B("div",{style:{backgroundColor:K,color:"#ffffff",padding:"16px 48px",borderRadius:12,fontSize:28,fontWeight:600},children:J}),B("div",{style:{color:"rgba(255,255,255,0.5)",fontSize:20},children:H})]})};import{AbsoluteFill as vH,Sequence as WH,useVideoConfig as fH}from"remotion";import{jsx as I,jsxs as r}from"react/jsx-runtime";var XH=({title:J,subtitle:H,lines:K,terminalTitle:Q="Terminal",prompt:z="$ ",summary:$})=>{let{durationInFrames:G}=fH(),U=P,R=40,L=G-90;return r(vH,{children:[I(A,{variant:"dark",showBranding:!0,children:r("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:24},children:[r("div",{children:[I(D,{text:J,variant:"heading",enterAt:5,color:"#ffffff"}),H&&I("div",{style:{marginTop:8},children:I(D,{text:H,variant:"body",enterAt:15,color:U.colors.mutedForeground})})]}),I(WH,{from:40,children:I("div",{style:{flex:1},children:I($H,{lines:K,startAt:0,prompt:z,title:Q})})}),$&&I(WH,{from:L,children:I("div",{style:{marginTop:"auto",paddingTop:24},children:I(D,{text:$,variant:"subheading",enterAt:0,color:U.colors.accent,align:"center"})})})]})}),I(C,{})]})};import{Player as hH}from"@remotion/player";import{useMemo as jH}from"react";import{jsx as UH}from"react/jsx-runtime";var yH={ApiOverview:{component:KH,durationInFrames:450,fps:30,width:1920,height:1080},SocialClip:{component:GH,durationInFrames:300,fps:30,width:1920,height:1080},TerminalDemo:{component:XH,durationInFrames:600,fps:30,width:1920,height:1080}};function KK({compositionId:J,inputProps:H,controls:K=!0,autoPlay:Q=!1,loop:z=!1,width:$="100%",height:G,style:U,className:R,clickToPlay:L=!0,doubleClickToFullscreen:Y=!0}){let q=yH[J],W=jH(()=>({width:$,height:G??"auto",borderRadius:12,overflow:"hidden",...U}),[$,G,U]);return UH("div",{className:R,children:UH(hH,{component:q.component,durationInFrames:q.durationInFrames,fps:q.fps,compositionWidth:q.width,compositionHeight:q.height,inputProps:H,controls:K,autoPlay:Q,loop:z,style:W,clickToPlay:L,doubleClickToFullscreen:Y})})}export{KK as DemoPlayer};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{createRequire as MH}from"node:module";var uH=MH(import.meta.url);import{Easing as V}from"remotion";var M={entrance:V.out(V.exp),exit:V.in(V.exp),emphasis:V.out(V.back(1.4)),linear:V.linear,gentle:V.bezier(0.25,0.1,0.25,1),spring:V.out(V.back(1.7))},P={sceneTransition:20,textEntrance:15,textExit:12,codeTypingPerChar:2,sectionPause:30,emphasisPause:15,brandReveal:25,minScene:60,shortScene:60,mediumScene:120,longScene:240},dH={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 v}from"@contractspec/lib.design-system";var f={canvasBackground:v.colors.background,codeBackground:"#1e1e2e",terminalBackground:"#0d1117",terminalForeground:"#c9d1d9",highlight:v.colors.accent,gradientStart:v.colors.primary,gradientEnd:v.colors.accent},w={...v,video:f};var b={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 F(J,H){let K=H/1920;return{...J,fontSize:Math.round(J.fontSize*K),letterSpacing:J.letterSpacing?Math.round(J.letterSpacing*K*10)/10:void 0}}import{interpolate as S,useCurrentFrame as RH,useVideoConfig as YH}from"remotion";import{jsx as NH}from"react/jsx-runtime";var B=({text:J,variant:H="body",style:K,enterAt:Q=0,exitAt:z,color:$="#ffffff",align:G="left"})=>{let U=RH(),{width:R}=YH(),L=b[H],q={...F(L,R),...K},W=S(U,[Q,Q+P.textEntrance],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),N=S(W,[0,1],[0,1],{easing:M.entrance}),X=S(W,[0,1],[30,0],{easing:M.entrance}),Z=1,E=0;if(z!==void 0){let m=S(U,[z,z+P.textExit],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"});Z=S(m,[0,1],[1,0],{easing:M.exit}),E=S(m,[0,1],[0,-20],{easing:M.exit})}let k=N*Z,d=X+E;return NH("div",{style:{fontSize:q.fontSize,lineHeight:q.lineHeight,fontWeight:q.fontWeight,letterSpacing:q.letterSpacing,color:$,textAlign:G,opacity:k,transform:`translateY(${d}px)`,willChange:"opacity, transform"},children:J})};import{VIDEO_FORMATS as l}from"@contractspec/lib.contracts-integrations/integrations/providers/video";var HJ=30,j={horizontal:120,vertical:80,contentWidth:1680,contentHeight:920};function a(J){let H=J.width/1920,K=J.height/1080;return{horizontal:Math.round(j.horizontal*H),vertical:Math.round(j.vertical*K),contentWidth:Math.round(j.contentWidth*H),contentHeight:Math.round(j.contentHeight*K)}}var JJ={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 KJ(){return[l.landscape,l.square,l.portrait]}import{interpolate as i,useCurrentFrame as ZH,useVideoConfig as _H}from"remotion";import{jsx as o,jsxs as DH}from"react/jsx-runtime";var A=({styleOverrides:J,showBranding:H=!0,animateEntrance:K=!0,variant:Q="gradient",children:z})=>{let $=ZH(),{width:G,height:U}=_H(),R=w,L=a({type:"custom",width:G,height:U}),Y=J?.primaryColor??R.colors.primary,q=J?.accentColor??R.colors.accent,W=J?.darkMode??!0,N;switch(Q){case"solid":N=W?"#0a0a0a":R.colors.background;break;case"gradient":N=W?"linear-gradient(135deg, #0a0a14 0%, #0f172a 50%, #0a0a14 100%)":`linear-gradient(135deg, ${R.colors.background} 0%, ${R.colors.muted} 100%)`;break;case"dark":N="#000000";break}let X=K?i($,[0,15],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.entrance}):1,Z=H?i($,[P.brandReveal,P.brandReveal+15],[0,0.3],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}):0;return DH("div",{style:{width:G,height:U,background:N,position:"relative",overflow:"hidden",opacity:X},children:[Q==="gradient"&&o("div",{style:{position:"absolute",top:"-20%",right:"-10%",width:"50%",height:"50%",background:`radial-gradient(circle, ${Y}15 0%, transparent 70%)`,borderRadius:"50%",pointerEvents:"none"}}),o("div",{style:{position:"absolute",left:L.horizontal,top:L.vertical,width:L.contentWidth,height:L.contentHeight,display:"flex",flexDirection:"column"},children:z}),H&&o("div",{style:{position:"absolute",bottom:L.vertical/2,right:L.horizontal,opacity:Z,color:W?"#ffffff":"#000000",fontSize:Math.round(16*(G/1920)),fontWeight:500,letterSpacing:1},children:"ContractSpec"})]})};import{interpolate as t,useCurrentFrame as BH,useVideoConfig as IH}from"remotion";import{jsx as C,jsxs as x}from"react/jsx-runtime";var e=({code:J,language:H="typescript",startAt:K=0,typeAnimation:Q=!0,backgroundColor:z=f.codeBackground,textColor:$="#abb2bf",filename:G})=>{let U=BH(),{width:R}=IH(),L=F(b.code,R),Y=J.length,q=Y*P.codeTypingPerChar,W=Q?Math.floor(t(U,[K,K+q],[0,Y],{extrapolateLeft:"clamp",extrapolateRight:"clamp"})):Y,N=J.slice(0,W),X=t(U,[K,K+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.entrance}),Z=Q&&W<Y&&U%16<10;return x("div",{style:{backgroundColor:z,borderRadius:16,padding:0,opacity:X,overflow:"hidden",boxShadow:"0 8px 32px rgba(0,0,0,0.3)"},children:[x("div",{style:{display:"flex",alignItems:"center",padding:"12px 20px",backgroundColor:"rgba(0,0,0,0.2)",gap:8},children:[x("div",{style:{display:"flex",gap:8},children:[C("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#ff5f57"}}),C("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#febc2e"}}),C("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#28c840"}})]}),C("div",{style:{flex:1,textAlign:"center",color:"#666",fontSize:L.fontSize*0.7,fontFamily:"monospace"},children:G??H})]}),C("div",{style:{padding:"24px 32px"},children:x("pre",{style:{margin:0,fontFamily:"'SF Mono', 'Fira Code', 'JetBrains Mono', monospace",fontSize:L.fontSize,lineHeight:L.lineHeight,color:$,whiteSpace:"pre-wrap",wordBreak:"break-word"},children:[N,Z&&C("span",{style:{backgroundColor:$,width:"2px",display:"inline-block",height:"1.2em",verticalAlign:"text-bottom"},children:" "})]})})]})};import{useCurrentFrame as VH,useVideoConfig as PH}from"remotion";import{jsx as HH}from"react/jsx-runtime";var T=({height:J=4,color:H=w.colors.primary,backgroundColor:K="rgba(255,255,255,0.1)",position:Q="bottom"})=>{let z=VH(),{durationInFrames:$,width:G}=PH(),U=z/$;return HH("div",{style:{position:"absolute",[Q]:0,left:0,width:G,height:J,backgroundColor:K,zIndex:100},children:HH("div",{style:{width:`${U*100}%`,height:"100%",backgroundColor:H,transition:"none"}})})};import{AbsoluteFill as wH,interpolate as y,Sequence as n,useCurrentFrame as JH,useVideoConfig as OH}from"remotion";import{jsx as _,jsxs as h}from"react/jsx-runtime";var KH=({specName:J,method:H="POST",endpoint:K="/api/users",specCode:Q,generatedOutputs:z=["REST Endpoint","GraphQL Mutation","Prisma Model","TypeScript SDK","MCP Tool","OpenAPI Spec"],tagline:$="One spec. Every surface."})=>{let{durationInFrames:G}=OH(),U=w,R=60,L=45,Y=210,q=180,W=G-90;return h(wH,{children:[h(A,{variant:"gradient",showBranding:!0,children:[_(n,{from:0,durationInFrames:210,children:h("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:16},children:[h("div",{style:{display:"flex",alignItems:"center",gap:16},children:[_(EH,{method:H,enterAt:10}),_(B,{text:K,variant:"subheading",enterAt:15,color:U.colors.mutedForeground})]}),_(B,{text:J,variant:"title",enterAt:5,color:"#ffffff"}),_("div",{style:{flex:1,marginTop:24},children:_(e,{code:Q,language:"typescript",filename:`${J.toLowerCase()}.contract.ts`,startAt:45,typeAnimation:!0})})]})}),_(n,{from:180,durationInFrames:G-180,children:h("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",gap:24},children:[_(B,{text:"Generates:",variant:"heading",enterAt:0,color:"#ffffff",align:"center"}),_("div",{style:{display:"flex",flexWrap:"wrap",gap:16,justifyContent:"center",maxWidth:"80%",marginTop:32},children:z.map((N,X)=>_(kH,{label:N,index:X,startFrame:20+X*8},N))}),_(n,{from:W-180,children:_("div",{style:{marginTop:48},children:_(B,{text:$,variant:"heading",enterAt:0,color:U.colors.accent,align:"center"})})})]})})]}),_(T,{})]})},EH=({method:J,enterAt:H})=>{let K=JH(),Q=y(K,[H,H+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.entrance}),z=y(K,[H,H+12],[0.8,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.emphasis}),$={GET:"#61afef",POST:"#98c379",PUT:"#e5c07b",PATCH:"#d19a66",DELETE:"#e06c75"};return _("div",{style:{opacity:Q,transform:`scale(${z})`,backgroundColor:$[J]??"#61afef",color:"#000",padding:"8px 20px",borderRadius:8,fontSize:24,fontWeight:700,fontFamily:"monospace",letterSpacing:1},children:J})},kH=({label:J,startFrame:H})=>{let K=JH(),Q=y(K,[H,H+12],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),z=y(K,[H,H+15],[20,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.emphasis}),$=y(K,[H,H+15],[0.9,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.emphasis});return _("div",{style:{opacity:Q,transform:`translateY(${z}px) scale(${$})`,backgroundColor:"rgba(255,255,255,0.08)",border:"1px solid rgba(255,255,255,0.15)",color:"#ffffff",padding:"16px 32px",borderRadius:12,fontSize:28,fontWeight:500},children:J})};import{interpolate as r,useCurrentFrame as bH,useVideoConfig as FH}from"remotion";import{jsx as O,jsxs as g}from"react/jsx-runtime";var QH={command:"#c9d1d9",output:"#8b949e",error:"#f85149",success:"#3fb950",comment:"#6e7681"},$H=({lines:J,startAt:H=0,prompt:K="$ ",title:Q="Terminal",backgroundColor:z=f.terminalBackground,typingSpeed:$=P.codeTypingPerChar})=>{let G=bH(),{width:U}=FH(),R=F(b.code,U),L=[],Y=H;for(let W of J){let N=W.delay??10,X=Y+N;if(W.type==="command"){let Z=W.text.length*$;L.push({startFrame:X,endFrame:X+Z}),Y=X+Z}else L.push({startFrame:X,endFrame:X+5}),Y=X+5}let q=r(G,[H,H+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.entrance});return g("div",{style:{backgroundColor:z,borderRadius:16,overflow:"hidden",opacity:q,boxShadow:"0 8px 32px rgba(0,0,0,0.3)"},children:[g("div",{style:{display:"flex",alignItems:"center",padding:"12px 20px",backgroundColor:"rgba(255,255,255,0.05)",gap:8},children:[g("div",{style:{display:"flex",gap:8},children:[O("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#ff5f57"}}),O("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#febc2e"}}),O("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#28c840"}})]}),O("div",{style:{flex:1,textAlign:"center",color:"#484f58",fontSize:R.fontSize*0.7,fontFamily:"monospace"},children:Q})]}),O("div",{style:{padding:"24px 32px",minHeight:200},children:J.map((W,N)=>{let X=L[N];if(!X||G<X.startFrame)return null;let Z=W.type==="command",E=QH[W.type],k=W.text;if(Z){let qH=r(G,[X.startFrame,X.endFrame],[0,W.text.length],{extrapolateLeft:"clamp",extrapolateRight:"clamp"});k=W.text.slice(0,Math.floor(qH))}let d=Z?1:r(G,[X.startFrame,X.startFrame+5],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),LH=Z&&G>=X.startFrame&&G<=X.endFrame&&G%16<10;return g("div",{style:{fontFamily:"'SF Mono', 'Fira Code', 'JetBrains Mono', monospace",fontSize:R.fontSize,lineHeight:1.8,color:E,opacity:d,whiteSpace:"pre-wrap"},children:[Z&&O("span",{style:{color:"#3fb950"},children:K}),W.type==="comment"&&O("span",{style:{color:QH.comment},children:"# "}),k,LH&&O("span",{style:{backgroundColor:"#c9d1d9",width:"2px",display:"inline-block",height:"1.2em",verticalAlign:"text-bottom"},children:" "})]},`${N}-${W.text.slice(0,20)}`)})})]})};import{AbsoluteFill as SH,interpolate as p,Sequence as u,useCurrentFrame as zH,useVideoConfig as AH}from"remotion";import{jsx as D,jsxs as c}from"react/jsx-runtime";var GH=({hook:J,message:H,points:K=[],cta:Q="Learn more",ctaUrl:z="contractspec.dev",accentColor:$})=>{let{durationInFrames:G,width:U,height:R}=AH(),Y=$??w.colors.accent,q=R>U,W=75,N=60,X=120,Z=G-90;return c(SH,{children:[D(A,{variant:"gradient",showBranding:!0,children:c("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",gap:q?48:32,textAlign:"center",padding:q?"0 20px":0},children:[D(u,{from:0,durationInFrames:105,children:D("div",{style:{width:"100%"},children:D(B,{text:J,variant:"title",enterAt:5,exitAt:75,color:"#ffffff",align:"center"})})}),D(u,{from:60,children:D("div",{style:{width:"100%"},children:D(B,{text:H,variant:q?"subheading":"heading",enterAt:0,color:"#ffffff",align:"center"})})}),K.length>0&&D(u,{from:120,children:D("div",{style:{display:"flex",flexDirection:"column",gap:16,alignItems:q?"flex-start":"center",width:"100%",maxWidth:q?"100%":"80%",marginTop:16},children:K.map((E,k)=>D(CH,{text:E,index:k,startFrame:k*15,accent:Y},E))})}),D(u,{from:Z,children:D(TH,{cta:Q,url:z,accent:Y})})]})}),D(T,{color:Y})]})},CH=({text:J,startFrame:H,accent:K})=>{let Q=zH(),z=p(Q,[H,H+12],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),$=p(Q,[H,H+15],[-30,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.entrance});return c("div",{style:{opacity:z,transform:`translateX(${$}px)`,display:"flex",alignItems:"center",gap:16,fontSize:28,color:"#ffffff"},children:[D("div",{style:{width:8,height:8,borderRadius:"50%",backgroundColor:K,flexShrink:0}}),J]})},TH=({cta:J,url:H,accent:K})=>{let Q=zH(),z=p(Q,[0,15],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),$=p(Q,[0,18],[0.9,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.emphasis});return c("div",{style:{opacity:z,transform:`scale(${$})`,display:"flex",flexDirection:"column",alignItems:"center",gap:12,marginTop:24},children:[D("div",{style:{backgroundColor:K,color:"#ffffff",padding:"16px 48px",borderRadius:12,fontSize:28,fontWeight:600},children:J}),D("div",{style:{color:"rgba(255,255,255,0.5)",fontSize:20},children:H})]})};import{AbsoluteFill as vH,Sequence as WH,useVideoConfig as fH}from"remotion";import{jsx as I,jsxs as s}from"react/jsx-runtime";var XH=({title:J,subtitle:H,lines:K,terminalTitle:Q="Terminal",prompt:z="$ ",summary:$})=>{let{durationInFrames:G}=fH(),U=w,R=40,L=G-90;return s(vH,{children:[I(A,{variant:"dark",showBranding:!0,children:s("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:24},children:[s("div",{children:[I(B,{text:J,variant:"heading",enterAt:5,color:"#ffffff"}),H&&I("div",{style:{marginTop:8},children:I(B,{text:H,variant:"body",enterAt:15,color:U.colors.mutedForeground})})]}),I(WH,{from:40,children:I("div",{style:{flex:1},children:I($H,{lines:K,startAt:0,prompt:z,title:Q})})}),$&&I(WH,{from:L,children:I("div",{style:{marginTop:"auto",paddingTop:24},children:I(B,{text:$,variant:"subheading",enterAt:0,color:U.colors.accent,align:"center"})})})]})}),I(T,{})]})};import{Player as hH}from"@remotion/player";import{useMemo as yH}from"react";import{jsx as UH}from"react/jsx-runtime";var jH={ApiOverview:{component:KH,durationInFrames:450,fps:30,width:1920,height:1080},SocialClip:{component:GH,durationInFrames:300,fps:30,width:1920,height:1080},TerminalDemo:{component:XH,durationInFrames:600,fps:30,width:1920,height:1080}};function xH({compositionId:J,inputProps:H,controls:K=!0,autoPlay:Q=!1,loop:z=!1,width:$="100%",height:G,style:U,className:R,clickToPlay:L=!0,doubleClickToFullscreen:Y=!0}){let q=jH[J],W=yH(()=>({width:$,height:G??"auto",borderRadius:12,overflow:"hidden",...U}),[$,G,U]);return UH("div",{className:R,children:UH(hH,{component:q.component,durationInFrames:q.durationInFrames,fps:q.fps,compositionWidth:q.width,compositionHeight:q.height,inputProps:H,controls:K,autoPlay:Q,loop:z,style:W,clickToPlay:L,doubleClickToFullscreen:Y})})}export{xH as DemoPlayer};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import{createRequire as RH}from"node:module";var cH=RH(import.meta.url);import{Easing as w}from"remotion";var M={entrance:w.out(w.exp),exit:w.in(w.exp),emphasis:w.out(w.back(1.4)),linear:w.linear,gentle:w.bezier(0.25,0.1,0.25,1),spring:w.out(w.back(1.7))},V={sceneTransition:20,textEntrance:15,textExit:12,codeTypingPerChar:2,sectionPause:30,emphasisPause:15,brandReveal:25,minScene:60,shortScene:60,mediumScene:120,longScene:240},lH={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 C}from"@contractspec/lib.design-system";var h={canvasBackground:C.colors.background,codeBackground:"#1e1e2e",terminalBackground:"#0d1117",terminalForeground:"#c9d1d9",highlight:C.colors.accent,gradientStart:C.colors.primary,gradientEnd:C.colors.accent},P={...C,video:h};var b={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 F(J,H){let K=H/1920;return{...J,fontSize:Math.round(J.fontSize*K),letterSpacing:J.letterSpacing?Math.round(J.letterSpacing*K*10)/10:void 0}}import{interpolate as S,useCurrentFrame as YH,useVideoConfig as ZH}from"remotion";import{jsx as _H}from"react/jsx-runtime";var B=({text:J,variant:H="body",style:K,enterAt:Q=0,exitAt:z,color:$="#ffffff",align:W="left"})=>{let X=YH(),{width:q}=ZH(),L=b[H],Y={...F(L,q),...K},U=S(X,[Q,Q+V.textEntrance],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),N=S(U,[0,1],[0,1],{easing:M.entrance}),G=S(U,[0,1],[30,0],{easing:M.entrance}),Z=1,k=0;if(z!==void 0){let n=S(X,[z,z+V.textExit],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"});Z=S(n,[0,1],[1,0],{easing:M.exit}),k=S(n,[0,1],[0,-20],{easing:M.exit})}let E=N*Z,o=G+k;return _H("div",{style:{fontSize:Y.fontSize,lineHeight:Y.lineHeight,fontWeight:Y.fontWeight,letterSpacing:Y.letterSpacing,color:$,textAlign:W,opacity:E,transform:`translateY(${o}px)`,willChange:"opacity, transform"},children:J})};import{VIDEO_FORMATS as s}from"@contractspec/lib.contracts-integrations/integrations/providers/video";var KJ=30,u={horizontal:120,vertical:80,contentWidth:1680,contentHeight:920};function HH(J){let H=J.width/1920,K=J.height/1080;return{horizontal:Math.round(u.horizontal*H),vertical:Math.round(u.vertical*K),contentWidth:Math.round(u.contentWidth*H),contentHeight:Math.round(u.contentHeight*K)}}var QJ={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 $J(){return[s.landscape,s.square,s.portrait]}import{interpolate as JH,useCurrentFrame as IH,useVideoConfig as BH}from"remotion";import{jsx as r,jsxs as DH}from"react/jsx-runtime";var T=({styleOverrides:J,showBranding:H=!0,animateEntrance:K=!0,variant:Q="gradient",children:z})=>{let $=IH(),{width:W,height:X}=BH(),q=P,L=HH({type:"custom",width:W,height:X}),R=J?.primaryColor??q.colors.primary,Y=J?.accentColor??q.colors.accent,U=J?.darkMode??!0,N;switch(Q){case"solid":N=U?"#0a0a0a":q.colors.background;break;case"gradient":N=U?"linear-gradient(135deg, #0a0a14 0%, #0f172a 50%, #0a0a14 100%)":`linear-gradient(135deg, ${q.colors.background} 0%, ${q.colors.muted} 100%)`;break;case"dark":N="#000000";break}let G=K?JH($,[0,15],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.entrance}):1,Z=H?JH($,[V.brandReveal,V.brandReveal+15],[0,0.3],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}):0;return DH("div",{style:{width:W,height:X,background:N,position:"relative",overflow:"hidden",opacity:G},children:[Q==="gradient"&&r("div",{style:{position:"absolute",top:"-20%",right:"-10%",width:"50%",height:"50%",background:`radial-gradient(circle, ${R}15 0%, transparent 70%)`,borderRadius:"50%",pointerEvents:"none"}}),r("div",{style:{position:"absolute",left:L.horizontal,top:L.vertical,width:L.contentWidth,height:L.contentHeight,display:"flex",flexDirection:"column"},children:z}),H&&r("div",{style:{position:"absolute",bottom:L.vertical/2,right:L.horizontal,opacity:Z,color:U?"#ffffff":"#000000",fontSize:Math.round(16*(W/1920)),fontWeight:500,letterSpacing:1},children:"ContractSpec"})]})};import{interpolate as KH,useCurrentFrame as wH,useVideoConfig as VH}from"remotion";import{jsx as A,jsxs as x}from"react/jsx-runtime";var QH=({code:J,language:H="typescript",startAt:K=0,typeAnimation:Q=!0,backgroundColor:z=h.codeBackground,textColor:$="#abb2bf",filename:W})=>{let X=wH(),{width:q}=VH(),L=F(b.code,q),R=J.length,Y=R*V.codeTypingPerChar,U=Q?Math.floor(KH(X,[K,K+Y],[0,R],{extrapolateLeft:"clamp",extrapolateRight:"clamp"})):R,N=J.slice(0,U),G=KH(X,[K,K+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.entrance}),Z=Q&&U<R&&X%16<10;return x("div",{style:{backgroundColor:z,borderRadius:16,padding:0,opacity:G,overflow:"hidden",boxShadow:"0 8px 32px rgba(0,0,0,0.3)"},children:[x("div",{style:{display:"flex",alignItems:"center",padding:"12px 20px",backgroundColor:"rgba(0,0,0,0.2)",gap:8},children:[x("div",{style:{display:"flex",gap:8},children:[A("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#ff5f57"}}),A("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#febc2e"}}),A("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#28c840"}})]}),A("div",{style:{flex:1,textAlign:"center",color:"#666",fontSize:L.fontSize*0.7,fontFamily:"monospace"},children:W??H})]}),A("div",{style:{padding:"24px 32px"},children:x("pre",{style:{margin:0,fontFamily:"'SF Mono', 'Fira Code', 'JetBrains Mono', monospace",fontSize:L.fontSize,lineHeight:L.lineHeight,color:$,whiteSpace:"pre-wrap",wordBreak:"break-word"},children:[N,Z&&A("span",{style:{backgroundColor:$,width:"2px",display:"inline-block",height:"1.2em",verticalAlign:"text-bottom"},children:" "})]})})]})};import{useCurrentFrame as PH,useVideoConfig as OH}from"remotion";import{jsx as $H}from"react/jsx-runtime";var v=({height:J=4,color:H=P.colors.primary,backgroundColor:K="rgba(255,255,255,0.1)",position:Q="bottom"})=>{let z=PH(),{durationInFrames:$,width:W}=OH(),X=z/$;return $H("div",{style:{position:"absolute",[Q]:0,left:0,width:W,height:J,backgroundColor:K,zIndex:100},children:$H("div",{style:{width:`${X*100}%`,height:"100%",backgroundColor:H,transition:"none"}})})};import{AbsoluteFill as kH,interpolate as f,Sequence as a,useCurrentFrame as zH,useVideoConfig as EH}from"remotion";import{jsx as _,jsxs as y}from"react/jsx-runtime";var GH=({specName:J,method:H="POST",endpoint:K="/api/users",specCode:Q,generatedOutputs:z=["REST Endpoint","GraphQL Mutation","Prisma Model","TypeScript SDK","MCP Tool","OpenAPI Spec"],tagline:$="One spec. Every surface."})=>{let{durationInFrames:W}=EH(),X=P,q=60,L=45,R=210,Y=180,U=W-90;return y(kH,{children:[y(T,{variant:"gradient",showBranding:!0,children:[_(a,{from:0,durationInFrames:210,children:y("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:16},children:[y("div",{style:{display:"flex",alignItems:"center",gap:16},children:[_(bH,{method:H,enterAt:10}),_(B,{text:K,variant:"subheading",enterAt:15,color:X.colors.mutedForeground})]}),_(B,{text:J,variant:"title",enterAt:5,color:"#ffffff"}),_("div",{style:{flex:1,marginTop:24},children:_(QH,{code:Q,language:"typescript",filename:`${J.toLowerCase()}.contract.ts`,startAt:45,typeAnimation:!0})})]})}),_(a,{from:180,durationInFrames:W-180,children:y("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",gap:24},children:[_(B,{text:"Generates:",variant:"heading",enterAt:0,color:"#ffffff",align:"center"}),_("div",{style:{display:"flex",flexWrap:"wrap",gap:16,justifyContent:"center",maxWidth:"80%",marginTop:32},children:z.map((N,G)=>_(FH,{label:N,index:G,startFrame:20+G*8},N))}),_(a,{from:U-180,children:_("div",{style:{marginTop:48},children:_(B,{text:$,variant:"heading",enterAt:0,color:X.colors.accent,align:"center"})})})]})})]}),_(v,{})]})},bH=({method:J,enterAt:H})=>{let K=zH(),Q=f(K,[H,H+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.entrance}),z=f(K,[H,H+12],[0.8,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.emphasis}),$={GET:"#61afef",POST:"#98c379",PUT:"#e5c07b",PATCH:"#d19a66",DELETE:"#e06c75"};return _("div",{style:{opacity:Q,transform:`scale(${z})`,backgroundColor:$[J]??"#61afef",color:"#000",padding:"8px 20px",borderRadius:8,fontSize:24,fontWeight:700,fontFamily:"monospace",letterSpacing:1},children:J})},FH=({label:J,startFrame:H})=>{let K=zH(),Q=f(K,[H,H+12],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),z=f(K,[H,H+15],[20,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.emphasis}),$=f(K,[H,H+15],[0.9,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.emphasis});return _("div",{style:{opacity:Q,transform:`translateY(${z}px) scale(${$})`,backgroundColor:"rgba(255,255,255,0.08)",border:"1px solid rgba(255,255,255,0.15)",color:"#ffffff",padding:"16px 32px",borderRadius:12,fontSize:28,fontWeight:500},children:J})};import{interpolate as i,useCurrentFrame as SH,useVideoConfig as TH}from"remotion";import{jsx as O,jsxs as p}from"react/jsx-runtime";var WH={command:"#c9d1d9",output:"#8b949e",error:"#f85149",success:"#3fb950",comment:"#6e7681"},UH=({lines:J,startAt:H=0,prompt:K="$ ",title:Q="Terminal",backgroundColor:z=h.terminalBackground,typingSpeed:$=V.codeTypingPerChar})=>{let W=SH(),{width:X}=TH(),q=F(b.code,X),L=[],R=H;for(let U of J){let N=U.delay??10,G=R+N;if(U.type==="command"){let Z=U.text.length*$;L.push({startFrame:G,endFrame:G+Z}),R=G+Z}else L.push({startFrame:G,endFrame:G+5}),R=G+5}let Y=i(W,[H,H+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.entrance});return p("div",{style:{backgroundColor:z,borderRadius:16,overflow:"hidden",opacity:Y,boxShadow:"0 8px 32px rgba(0,0,0,0.3)"},children:[p("div",{style:{display:"flex",alignItems:"center",padding:"12px 20px",backgroundColor:"rgba(255,255,255,0.05)",gap:8},children:[p("div",{style:{display:"flex",gap:8},children:[O("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#ff5f57"}}),O("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#febc2e"}}),O("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#28c840"}})]}),O("div",{style:{flex:1,textAlign:"center",color:"#484f58",fontSize:q.fontSize*0.7,fontFamily:"monospace"},children:Q})]}),O("div",{style:{padding:"24px 32px",minHeight:200},children:J.map((U,N)=>{let G=L[N];if(!G||W<G.startFrame)return null;let Z=U.type==="command",k=WH[U.type],E=U.text;if(Z){let qH=i(W,[G.startFrame,G.endFrame],[0,U.text.length],{extrapolateLeft:"clamp",extrapolateRight:"clamp"});E=U.text.slice(0,Math.floor(qH))}let o=Z?1:i(W,[G.startFrame,G.startFrame+5],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),NH=Z&&W>=G.startFrame&&W<=G.endFrame&&W%16<10;return p("div",{style:{fontFamily:"'SF Mono', 'Fira Code', 'JetBrains Mono', monospace",fontSize:q.fontSize,lineHeight:1.8,color:k,opacity:o,whiteSpace:"pre-wrap"},children:[Z&&O("span",{style:{color:"#3fb950"},children:K}),U.type==="comment"&&O("span",{style:{color:WH.comment},children:"# "}),E,NH&&O("span",{style:{backgroundColor:"#c9d1d9",width:"2px",display:"inline-block",height:"1.2em",verticalAlign:"text-bottom"},children:" "})]},`${N}-${U.text.slice(0,20)}`)})})]})};import{AbsoluteFill as AH,interpolate as d,Sequence as c,useCurrentFrame as XH,useVideoConfig as vH}from"remotion";import{jsx as I,jsxs as m}from"react/jsx-runtime";var l=({hook:J,message:H,points:K=[],cta:Q="Learn more",ctaUrl:z="contractspec.dev",accentColor:$})=>{let{durationInFrames:W,width:X,height:q}=vH(),R=$??P.colors.accent,Y=q>X,U=75,N=60,G=120,Z=W-90;return m(AH,{children:[I(T,{variant:"gradient",showBranding:!0,children:m("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",gap:Y?48:32,textAlign:"center",padding:Y?"0 20px":0},children:[I(c,{from:0,durationInFrames:105,children:I("div",{style:{width:"100%"},children:I(B,{text:J,variant:"title",enterAt:5,exitAt:75,color:"#ffffff",align:"center"})})}),I(c,{from:60,children:I("div",{style:{width:"100%"},children:I(B,{text:H,variant:Y?"subheading":"heading",enterAt:0,color:"#ffffff",align:"center"})})}),K.length>0&&I(c,{from:120,children:I("div",{style:{display:"flex",flexDirection:"column",gap:16,alignItems:Y?"flex-start":"center",width:"100%",maxWidth:Y?"100%":"80%",marginTop:16},children:K.map((k,E)=>I(CH,{text:k,index:E,startFrame:E*15,accent:R},k))})}),I(c,{from:Z,children:I(hH,{cta:Q,url:z,accent:R})})]})}),I(v,{color:R})]})},CH=({text:J,startFrame:H,accent:K})=>{let Q=XH(),z=d(Q,[H,H+12],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),$=d(Q,[H,H+15],[-30,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.entrance});return m("div",{style:{opacity:z,transform:`translateX(${$}px)`,display:"flex",alignItems:"center",gap:16,fontSize:28,color:"#ffffff"},children:[I("div",{style:{width:8,height:8,borderRadius:"50%",backgroundColor:K,flexShrink:0}}),J]})},hH=({cta:J,url:H,accent:K})=>{let Q=XH(),z=d(Q,[0,15],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),$=d(Q,[0,18],[0.9,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.emphasis});return m("div",{style:{opacity:z,transform:`scale(${$})`,display:"flex",flexDirection:"column",alignItems:"center",gap:12,marginTop:24},children:[I("div",{style:{backgroundColor:K,color:"#ffffff",padding:"16px 48px",borderRadius:12,fontSize:28,fontWeight:600},children:J}),I("div",{style:{color:"rgba(255,255,255,0.5)",fontSize:20},children:H})]})};import{AbsoluteFill as yH,Sequence as LH,useVideoConfig as fH}from"remotion";import{jsx as D,jsxs as t}from"react/jsx-runtime";var MH=({title:J,subtitle:H,lines:K,terminalTitle:Q="Terminal",prompt:z="$ ",summary:$})=>{let{durationInFrames:W}=fH(),X=P,q=40,L=W-90;return t(yH,{children:[D(T,{variant:"dark",showBranding:!0,children:t("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:24},children:[t("div",{children:[D(B,{text:J,variant:"heading",enterAt:5,color:"#ffffff"}),H&&D("div",{style:{marginTop:8},children:D(B,{text:H,variant:"body",enterAt:15,color:X.colors.mutedForeground})})]}),D(LH,{from:40,children:D("div",{style:{flex:1},children:D(UH,{lines:K,startAt:0,prompt:z,title:Q})})}),$&&D(LH,{from:L,children:D("div",{style:{marginTop:"auto",paddingTop:24},children:D(B,{text:$,variant:"subheading",enterAt:0,color:X.colors.accent,align:"center"})})})]})}),D(v,{})]})};import{Composition as j}from"remotion";import{jsx as g,jsxs as xH,Fragment as uH}from"react/jsx-runtime";var jH={specName:"CreateUser",method:"POST",endpoint:"/api/users",specCode:`export const createUser = defineCommand({
|
|
2
|
+
meta: {
|
|
3
|
+
name: 'CreateUser',
|
|
4
|
+
version: '1.0.0',
|
|
5
|
+
stability: 'Stable',
|
|
6
|
+
},
|
|
7
|
+
io: {
|
|
8
|
+
input: z.object({
|
|
9
|
+
email: z.string().email(),
|
|
10
|
+
name: z.string(),
|
|
11
|
+
role: z.enum(['admin', 'user']),
|
|
12
|
+
}),
|
|
13
|
+
output: z.object({
|
|
14
|
+
id: z.string().uuid(),
|
|
15
|
+
email: z.string(),
|
|
16
|
+
createdAt: z.date(),
|
|
17
|
+
}),
|
|
18
|
+
},
|
|
19
|
+
});`,generatedOutputs:["REST Endpoint","GraphQL Mutation","Prisma Model","TypeScript SDK","MCP Tool","OpenAPI Spec"],tagline:"One spec. Every surface."},e={hook:"Stop rewriting the same API logic.",message:"ContractSpec generates REST, GraphQL, DB, SDK, and MCP from a single spec.",points:["Deterministic output","Fully ejectable","Standard tech, no lock-in"],cta:"Try ContractSpec",ctaUrl:"contractspec.dev"},gH={title:"Getting Started with ContractSpec",subtitle:"Define once, generate everything.",lines:[{type:"comment",text:"Initialize a new ContractSpec project"},{type:"command",text:"npx contractspec init my-api"},{type:"output",text:"Created my-api/ with 3 sample contracts"},{type:"command",text:"cd my-api && npx contractspec build"},{type:"success",text:"Built 3 contracts -> 18 generated files"},{type:"output",text:" REST endpoints: 3"},{type:"output",text:" GraphQL types: 3"},{type:"output",text:" Prisma models: 3"},{type:"output",text:" TypeScript SDK: 3"},{type:"output",text:" MCP tools: 3"},{type:"output",text:" OpenAPI specs: 3"},{type:"command",text:"npx contractspec validate"},{type:"success",text:"All contracts valid. 0 warnings."}],terminalTitle:"contractspec",summary:"Ship faster. Stay coherent."},QK=()=>{return xH(uH,{children:[g(j,{id:"ApiOverview",component:GH,durationInFrames:450,fps:30,width:1920,height:1080,defaultProps:jH}),g(j,{id:"SocialClip",component:l,durationInFrames:300,fps:30,width:1920,height:1080,defaultProps:e}),g(j,{id:"SocialClipSquare",component:l,durationInFrames:300,fps:30,width:1080,height:1080,defaultProps:e}),g(j,{id:"SocialClipPortrait",component:l,durationInFrames:300,fps:30,width:1080,height:1920,defaultProps:e}),g(j,{id:"TerminalDemo",component:MH,durationInFrames:600,fps:30,width:1920,height:1080,defaultProps:gH})]})};export{QK as RemotionRoot};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import{createRequire as YH}from"node:module";var mH=YH(import.meta.url);import{Easing as w}from"remotion";var M={entrance:w.out(w.exp),exit:w.in(w.exp),emphasis:w.out(w.back(1.4)),linear:w.linear,gentle:w.bezier(0.25,0.1,0.25,1),spring:w.out(w.back(1.7))},V={sceneTransition:20,textEntrance:15,textExit:12,codeTypingPerChar:2,sectionPause:30,emphasisPause:15,brandReveal:25,minScene:60,shortScene:60,mediumScene:120,longScene:240},nH={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 C}from"@contractspec/lib.design-system";var h={canvasBackground:C.colors.background,codeBackground:"#1e1e2e",terminalBackground:"#0d1117",terminalForeground:"#c9d1d9",highlight:C.colors.accent,gradientStart:C.colors.primary,gradientEnd:C.colors.accent},P={...C,video:h};var b={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 F(J,H){let K=H/1920;return{...J,fontSize:Math.round(J.fontSize*K),letterSpacing:J.letterSpacing?Math.round(J.letterSpacing*K*10)/10:void 0}}import{interpolate as S,useCurrentFrame as ZH,useVideoConfig as _H}from"remotion";import{jsx as IH}from"react/jsx-runtime";var B=({text:J,variant:H="body",style:K,enterAt:Q=0,exitAt:z,color:$="#ffffff",align:W="left"})=>{let X=ZH(),{width:R}=_H(),L=b[H],Y={...F(L,R),...K},U=S(X,[Q,Q+V.textEntrance],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),N=S(U,[0,1],[0,1],{easing:M.entrance}),G=S(U,[0,1],[30,0],{easing:M.entrance}),Z=1,k=0;if(z!==void 0){let n=S(X,[z,z+V.textExit],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"});Z=S(n,[0,1],[1,0],{easing:M.exit}),k=S(n,[0,1],[0,-20],{easing:M.exit})}let E=N*Z,o=G+k;return IH("div",{style:{fontSize:Y.fontSize,lineHeight:Y.lineHeight,fontWeight:Y.fontWeight,letterSpacing:Y.letterSpacing,color:$,textAlign:W,opacity:E,transform:`translateY(${o}px)`,willChange:"opacity, transform"},children:J})};import{VIDEO_FORMATS as s}from"@contractspec/lib.contracts-integrations/integrations/providers/video";var $J=30,u={horizontal:120,vertical:80,contentWidth:1680,contentHeight:920};function HH(J){let H=J.width/1920,K=J.height/1080;return{horizontal:Math.round(u.horizontal*H),vertical:Math.round(u.vertical*K),contentWidth:Math.round(u.contentWidth*H),contentHeight:Math.round(u.contentHeight*K)}}var zJ={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 GJ(){return[s.landscape,s.square,s.portrait]}import{interpolate as JH,useCurrentFrame as BH,useVideoConfig as DH}from"remotion";import{jsx as r,jsxs as wH}from"react/jsx-runtime";var T=({styleOverrides:J,showBranding:H=!0,animateEntrance:K=!0,variant:Q="gradient",children:z})=>{let $=BH(),{width:W,height:X}=DH(),R=P,L=HH({type:"custom",width:W,height:X}),q=J?.primaryColor??R.colors.primary,Y=J?.accentColor??R.colors.accent,U=J?.darkMode??!0,N;switch(Q){case"solid":N=U?"#0a0a0a":R.colors.background;break;case"gradient":N=U?"linear-gradient(135deg, #0a0a14 0%, #0f172a 50%, #0a0a14 100%)":`linear-gradient(135deg, ${R.colors.background} 0%, ${R.colors.muted} 100%)`;break;case"dark":N="#000000";break}let G=K?JH($,[0,15],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.entrance}):1,Z=H?JH($,[V.brandReveal,V.brandReveal+15],[0,0.3],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}):0;return wH("div",{style:{width:W,height:X,background:N,position:"relative",overflow:"hidden",opacity:G},children:[Q==="gradient"&&r("div",{style:{position:"absolute",top:"-20%",right:"-10%",width:"50%",height:"50%",background:`radial-gradient(circle, ${q}15 0%, transparent 70%)`,borderRadius:"50%",pointerEvents:"none"}}),r("div",{style:{position:"absolute",left:L.horizontal,top:L.vertical,width:L.contentWidth,height:L.contentHeight,display:"flex",flexDirection:"column"},children:z}),H&&r("div",{style:{position:"absolute",bottom:L.vertical/2,right:L.horizontal,opacity:Z,color:U?"#ffffff":"#000000",fontSize:Math.round(16*(W/1920)),fontWeight:500,letterSpacing:1},children:"ContractSpec"})]})};import{interpolate as KH,useCurrentFrame as VH,useVideoConfig as PH}from"remotion";import{jsx as A,jsxs as x}from"react/jsx-runtime";var QH=({code:J,language:H="typescript",startAt:K=0,typeAnimation:Q=!0,backgroundColor:z=h.codeBackground,textColor:$="#abb2bf",filename:W})=>{let X=VH(),{width:R}=PH(),L=F(b.code,R),q=J.length,Y=q*V.codeTypingPerChar,U=Q?Math.floor(KH(X,[K,K+Y],[0,q],{extrapolateLeft:"clamp",extrapolateRight:"clamp"})):q,N=J.slice(0,U),G=KH(X,[K,K+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.entrance}),Z=Q&&U<q&&X%16<10;return x("div",{style:{backgroundColor:z,borderRadius:16,padding:0,opacity:G,overflow:"hidden",boxShadow:"0 8px 32px rgba(0,0,0,0.3)"},children:[x("div",{style:{display:"flex",alignItems:"center",padding:"12px 20px",backgroundColor:"rgba(0,0,0,0.2)",gap:8},children:[x("div",{style:{display:"flex",gap:8},children:[A("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#ff5f57"}}),A("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#febc2e"}}),A("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#28c840"}})]}),A("div",{style:{flex:1,textAlign:"center",color:"#666",fontSize:L.fontSize*0.7,fontFamily:"monospace"},children:W??H})]}),A("div",{style:{padding:"24px 32px"},children:x("pre",{style:{margin:0,fontFamily:"'SF Mono', 'Fira Code', 'JetBrains Mono', monospace",fontSize:L.fontSize,lineHeight:L.lineHeight,color:$,whiteSpace:"pre-wrap",wordBreak:"break-word"},children:[N,Z&&A("span",{style:{backgroundColor:$,width:"2px",display:"inline-block",height:"1.2em",verticalAlign:"text-bottom"},children:" "})]})})]})};import{useCurrentFrame as OH,useVideoConfig as kH}from"remotion";import{jsx as $H}from"react/jsx-runtime";var v=({height:J=4,color:H=P.colors.primary,backgroundColor:K="rgba(255,255,255,0.1)",position:Q="bottom"})=>{let z=OH(),{durationInFrames:$,width:W}=kH(),X=z/$;return $H("div",{style:{position:"absolute",[Q]:0,left:0,width:W,height:J,backgroundColor:K,zIndex:100},children:$H("div",{style:{width:`${X*100}%`,height:"100%",backgroundColor:H,transition:"none"}})})};import{AbsoluteFill as EH,interpolate as f,Sequence as a,useCurrentFrame as zH,useVideoConfig as bH}from"remotion";import{jsx as _,jsxs as y}from"react/jsx-runtime";var GH=({specName:J,method:H="POST",endpoint:K="/api/users",specCode:Q,generatedOutputs:z=["REST Endpoint","GraphQL Mutation","Prisma Model","TypeScript SDK","MCP Tool","OpenAPI Spec"],tagline:$="One spec. Every surface."})=>{let{durationInFrames:W}=bH(),X=P,R=60,L=45,q=210,Y=180,U=W-90;return y(EH,{children:[y(T,{variant:"gradient",showBranding:!0,children:[_(a,{from:0,durationInFrames:210,children:y("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:16},children:[y("div",{style:{display:"flex",alignItems:"center",gap:16},children:[_(FH,{method:H,enterAt:10}),_(B,{text:K,variant:"subheading",enterAt:15,color:X.colors.mutedForeground})]}),_(B,{text:J,variant:"title",enterAt:5,color:"#ffffff"}),_("div",{style:{flex:1,marginTop:24},children:_(QH,{code:Q,language:"typescript",filename:`${J.toLowerCase()}.contract.ts`,startAt:45,typeAnimation:!0})})]})}),_(a,{from:180,durationInFrames:W-180,children:y("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",gap:24},children:[_(B,{text:"Generates:",variant:"heading",enterAt:0,color:"#ffffff",align:"center"}),_("div",{style:{display:"flex",flexWrap:"wrap",gap:16,justifyContent:"center",maxWidth:"80%",marginTop:32},children:z.map((N,G)=>_(SH,{label:N,index:G,startFrame:20+G*8},N))}),_(a,{from:U-180,children:_("div",{style:{marginTop:48},children:_(B,{text:$,variant:"heading",enterAt:0,color:X.colors.accent,align:"center"})})})]})})]}),_(v,{})]})},FH=({method:J,enterAt:H})=>{let K=zH(),Q=f(K,[H,H+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.entrance}),z=f(K,[H,H+12],[0.8,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.emphasis}),$={GET:"#61afef",POST:"#98c379",PUT:"#e5c07b",PATCH:"#d19a66",DELETE:"#e06c75"};return _("div",{style:{opacity:Q,transform:`scale(${z})`,backgroundColor:$[J]??"#61afef",color:"#000",padding:"8px 20px",borderRadius:8,fontSize:24,fontWeight:700,fontFamily:"monospace",letterSpacing:1},children:J})},SH=({label:J,startFrame:H})=>{let K=zH(),Q=f(K,[H,H+12],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),z=f(K,[H,H+15],[20,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.emphasis}),$=f(K,[H,H+15],[0.9,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.emphasis});return _("div",{style:{opacity:Q,transform:`translateY(${z}px) scale(${$})`,backgroundColor:"rgba(255,255,255,0.08)",border:"1px solid rgba(255,255,255,0.15)",color:"#ffffff",padding:"16px 32px",borderRadius:12,fontSize:28,fontWeight:500},children:J})};import{interpolate as i,useCurrentFrame as TH,useVideoConfig as AH}from"remotion";import{jsx as O,jsxs as p}from"react/jsx-runtime";var WH={command:"#c9d1d9",output:"#8b949e",error:"#f85149",success:"#3fb950",comment:"#6e7681"},UH=({lines:J,startAt:H=0,prompt:K="$ ",title:Q="Terminal",backgroundColor:z=h.terminalBackground,typingSpeed:$=V.codeTypingPerChar})=>{let W=TH(),{width:X}=AH(),R=F(b.code,X),L=[],q=H;for(let U of J){let N=U.delay??10,G=q+N;if(U.type==="command"){let Z=U.text.length*$;L.push({startFrame:G,endFrame:G+Z}),q=G+Z}else L.push({startFrame:G,endFrame:G+5}),q=G+5}let Y=i(W,[H,H+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.entrance});return p("div",{style:{backgroundColor:z,borderRadius:16,overflow:"hidden",opacity:Y,boxShadow:"0 8px 32px rgba(0,0,0,0.3)"},children:[p("div",{style:{display:"flex",alignItems:"center",padding:"12px 20px",backgroundColor:"rgba(255,255,255,0.05)",gap:8},children:[p("div",{style:{display:"flex",gap:8},children:[O("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#ff5f57"}}),O("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#febc2e"}}),O("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#28c840"}})]}),O("div",{style:{flex:1,textAlign:"center",color:"#484f58",fontSize:R.fontSize*0.7,fontFamily:"monospace"},children:Q})]}),O("div",{style:{padding:"24px 32px",minHeight:200},children:J.map((U,N)=>{let G=L[N];if(!G||W<G.startFrame)return null;let Z=U.type==="command",k=WH[U.type],E=U.text;if(Z){let qH=i(W,[G.startFrame,G.endFrame],[0,U.text.length],{extrapolateLeft:"clamp",extrapolateRight:"clamp"});E=U.text.slice(0,Math.floor(qH))}let o=Z?1:i(W,[G.startFrame,G.startFrame+5],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),RH=Z&&W>=G.startFrame&&W<=G.endFrame&&W%16<10;return p("div",{style:{fontFamily:"'SF Mono', 'Fira Code', 'JetBrains Mono', monospace",fontSize:R.fontSize,lineHeight:1.8,color:k,opacity:o,whiteSpace:"pre-wrap"},children:[Z&&O("span",{style:{color:"#3fb950"},children:K}),U.type==="comment"&&O("span",{style:{color:WH.comment},children:"# "}),E,RH&&O("span",{style:{backgroundColor:"#c9d1d9",width:"2px",display:"inline-block",height:"1.2em",verticalAlign:"text-bottom"},children:" "})]},`${N}-${U.text.slice(0,20)}`)})})]})};import{AbsoluteFill as vH,interpolate as d,Sequence as c,useCurrentFrame as XH,useVideoConfig as CH}from"remotion";import{jsx as I,jsxs as m}from"react/jsx-runtime";var l=({hook:J,message:H,points:K=[],cta:Q="Learn more",ctaUrl:z="contractspec.dev",accentColor:$})=>{let{durationInFrames:W,width:X,height:R}=CH(),q=$??P.colors.accent,Y=R>X,U=75,N=60,G=120,Z=W-90;return m(vH,{children:[I(T,{variant:"gradient",showBranding:!0,children:m("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",gap:Y?48:32,textAlign:"center",padding:Y?"0 20px":0},children:[I(c,{from:0,durationInFrames:105,children:I("div",{style:{width:"100%"},children:I(B,{text:J,variant:"title",enterAt:5,exitAt:75,color:"#ffffff",align:"center"})})}),I(c,{from:60,children:I("div",{style:{width:"100%"},children:I(B,{text:H,variant:Y?"subheading":"heading",enterAt:0,color:"#ffffff",align:"center"})})}),K.length>0&&I(c,{from:120,children:I("div",{style:{display:"flex",flexDirection:"column",gap:16,alignItems:Y?"flex-start":"center",width:"100%",maxWidth:Y?"100%":"80%",marginTop:16},children:K.map((k,E)=>I(hH,{text:k,index:E,startFrame:E*15,accent:q},k))})}),I(c,{from:Z,children:I(yH,{cta:Q,url:z,accent:q})})]})}),I(v,{color:q})]})},hH=({text:J,startFrame:H,accent:K})=>{let Q=XH(),z=d(Q,[H,H+12],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),$=d(Q,[H,H+15],[-30,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.entrance});return m("div",{style:{opacity:z,transform:`translateX(${$}px)`,display:"flex",alignItems:"center",gap:16,fontSize:28,color:"#ffffff"},children:[I("div",{style:{width:8,height:8,borderRadius:"50%",backgroundColor:K,flexShrink:0}}),J]})},yH=({cta:J,url:H,accent:K})=>{let Q=XH(),z=d(Q,[0,15],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),$=d(Q,[0,18],[0.9,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.emphasis});return m("div",{style:{opacity:z,transform:`scale(${$})`,display:"flex",flexDirection:"column",alignItems:"center",gap:12,marginTop:24},children:[I("div",{style:{backgroundColor:K,color:"#ffffff",padding:"16px 48px",borderRadius:12,fontSize:28,fontWeight:600},children:J}),I("div",{style:{color:"rgba(255,255,255,0.5)",fontSize:20},children:H})]})};import{AbsoluteFill as fH,Sequence as LH,useVideoConfig as jH}from"remotion";import{jsx as D,jsxs as t}from"react/jsx-runtime";var MH=({title:J,subtitle:H,lines:K,terminalTitle:Q="Terminal",prompt:z="$ ",summary:$})=>{let{durationInFrames:W}=jH(),X=P,R=40,L=W-90;return t(fH,{children:[D(T,{variant:"dark",showBranding:!0,children:t("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:24},children:[t("div",{children:[D(B,{text:J,variant:"heading",enterAt:5,color:"#ffffff"}),H&&D("div",{style:{marginTop:8},children:D(B,{text:H,variant:"body",enterAt:15,color:X.colors.mutedForeground})})]}),D(LH,{from:40,children:D("div",{style:{flex:1},children:D(UH,{lines:K,startAt:0,prompt:z,title:Q})})}),$&&D(LH,{from:L,children:D("div",{style:{marginTop:"auto",paddingTop:24},children:D(B,{text:$,variant:"subheading",enterAt:0,color:X.colors.accent,align:"center"})})})]})}),D(v,{})]})};import{Composition as j}from"remotion";import{jsx as g,jsxs as pH,Fragment as xH}from"react/jsx-runtime";var gH={specName:"CreateUser",method:"POST",endpoint:"/api/users",specCode:`export const createUser = defineCommand({
|
|
2
|
+
meta: {
|
|
3
|
+
name: 'CreateUser',
|
|
4
|
+
version: '1.0.0',
|
|
5
|
+
stability: 'Stable',
|
|
6
|
+
},
|
|
7
|
+
io: {
|
|
8
|
+
input: z.object({
|
|
9
|
+
email: z.string().email(),
|
|
10
|
+
name: z.string(),
|
|
11
|
+
role: z.enum(['admin', 'user']),
|
|
12
|
+
}),
|
|
13
|
+
output: z.object({
|
|
14
|
+
id: z.string().uuid(),
|
|
15
|
+
email: z.string(),
|
|
16
|
+
createdAt: z.date(),
|
|
17
|
+
}),
|
|
18
|
+
},
|
|
19
|
+
});`,generatedOutputs:["REST Endpoint","GraphQL Mutation","Prisma Model","TypeScript SDK","MCP Tool","OpenAPI Spec"],tagline:"One spec. Every surface."},e={hook:"Stop rewriting the same API logic.",message:"ContractSpec generates REST, GraphQL, DB, SDK, and MCP from a single spec.",points:["Deterministic output","Fully ejectable","Standard tech, no lock-in"],cta:"Try ContractSpec",ctaUrl:"contractspec.dev"},uH={title:"Getting Started with ContractSpec",subtitle:"Define once, generate everything.",lines:[{type:"comment",text:"Initialize a new ContractSpec project"},{type:"command",text:"npx contractspec init my-api"},{type:"output",text:"Created my-api/ with 3 sample contracts"},{type:"command",text:"cd my-api && npx contractspec build"},{type:"success",text:"Built 3 contracts -> 18 generated files"},{type:"output",text:" REST endpoints: 3"},{type:"output",text:" GraphQL types: 3"},{type:"output",text:" Prisma models: 3"},{type:"output",text:" TypeScript SDK: 3"},{type:"output",text:" MCP tools: 3"},{type:"output",text:" OpenAPI specs: 3"},{type:"command",text:"npx contractspec validate"},{type:"success",text:"All contracts valid. 0 warnings."}],terminalTitle:"contractspec",summary:"Ship faster. Stay coherent."},NH=()=>{return pH(xH,{children:[g(j,{id:"ApiOverview",component:GH,durationInFrames:450,fps:30,width:1920,height:1080,defaultProps:gH}),g(j,{id:"SocialClip",component:l,durationInFrames:300,fps:30,width:1920,height:1080,defaultProps:e}),g(j,{id:"SocialClipSquare",component:l,durationInFrames:300,fps:30,width:1080,height:1080,defaultProps:e}),g(j,{id:"SocialClipPortrait",component:l,durationInFrames:300,fps:30,width:1080,height:1920,defaultProps:e}),g(j,{id:"TerminalDemo",component:MH,durationInFrames:600,fps:30,width:1920,height:1080,defaultProps:uH})]})};import{registerRoot as cH}from"remotion";cH(NH);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{createRequire as m}from"node:module";var A=m(import.meta.url);var v={codec:"h264",outputFormat:"mp4",crf:18,pixelFormat:"yuv420p"},D={h264:"mp4",h265:"mp4",vp8:"webm",vp9:"webm"},x={draft:{crf:28,concurrency:1},standard:{crf:18,concurrency:void 0},high:{crf:12,concurrency:void 0}};function E(j,b){let k=b?x[b]:{};return{...v,...k,...j}}export{E as resolveRenderConfig,x as qualityPresets,v as defaultRenderConfig,D as codecFormatMap};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{createRequire as _}from"node:module";var Y=_(import.meta.url);import{VIDEO_FORMATS as H}from"@contractspec/lib.contracts-integrations/integrations/providers/video";var b=30,G={horizontal:120,vertical:80,contentWidth:1680,contentHeight:920};function F(y){let Q=y.width/1920,x=y.height/1080;return{horizontal:Math.round(G.horizontal*Q),vertical:Math.round(G.vertical*x),contentWidth:Math.round(G.contentWidth*Q),contentHeight:Math.round(G.contentHeight*x)}}var O={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 h(){return[H.landscape,H.square,H.portrait]}var k={codec:"h264",outputFormat:"mp4",crf:18,pixelFormat:"yuv420p"},A={h264:"mp4",h265:"mp4",vp8:"webm",vp9:"webm"},L={draft:{crf:28,concurrency:1},standard:{crf:18,concurrency:void 0},high:{crf:12,concurrency:void 0}};function J(y,Q){let x=Q?L[Q]:{};return{...k,...x,...y}}class P{entryPoint;constructor(y){this.entryPoint=y.entryPoint}async render(y,Q){let x=J(Q),{bundle:D}=await import("@remotion/bundler"),{renderMedia:K,selectComposition:N}=await import("@remotion/renderer"),B=await D({entryPoint:this.entryPoint}),U=y.scenes[0],W=y.scenes.length===1&&U?U.compositionId:"Master",E=await N({serveUrl:B,id:W,inputProps:{project:y}});await K({composition:E,serveUrl:B,codec:x.codec,outputLocation:x.outputPath,inputProps:{project:y},...x.crf&&{crf:x.crf},...x.concurrency&&{concurrency:x.concurrency}});let $={outputPath:x.outputPath,format:x.outputFormat??k.outputFormat,codec:x.codec??k.codec,durationSeconds:y.totalDurationInFrames/y.fps,fileSizeBytes:0,dimensions:{width:y.format.width,height:y.format.height}};if(Q.autoVariants){let T=h().filter((z)=>z.type!==y.format.type),q=[];for(let z of T){let w=x.outputPath.replace(/(\.[^.]+)$/,`-${z.type}$1`),X={...y,format:z},Z=await N({serveUrl:B,id:W,inputProps:{project:X}});await K({composition:Z,serveUrl:B,codec:x.codec,outputLocation:w,inputProps:{project:X},...x.crf&&{crf:x.crf}}),q.push({outputPath:w,format:x.outputFormat??k.outputFormat,codec:x.codec??k.codec,durationSeconds:y.totalDurationInFrames/y.fps,fileSizeBytes:0,dimensions:{width:z.width,height:z.height}})}$.variants=q}return $}}export{J as resolveRenderConfig,L as qualityPresets,k as defaultRenderConfig,A as codecFormatMap,P as LocalRenderer};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{createRequire as Z}from"node:module";var X=Z(import.meta.url);import{VIDEO_FORMATS as K}from"@contractspec/lib.contracts-integrations/integrations/providers/video";var b=30,J={horizontal:120,vertical:80,contentWidth:1680,contentHeight:920};function M(x){let z=x.width/1920,k=x.height/1080;return{horizontal:Math.round(J.horizontal*z),vertical:Math.round(J.vertical*k),contentWidth:Math.round(J.contentWidth*z),contentHeight:Math.round(J.contentHeight*k)}}var O={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 Y(){return[K.landscape,K.square,K.portrait]}var G={codec:"h264",outputFormat:"mp4",crf:18,pixelFormat:"yuv420p"},S={h264:"mp4",h265:"mp4",vp8:"webm",vp9:"webm"},_={draft:{crf:28,concurrency:1},standard:{crf:18,concurrency:void 0},high:{crf:12,concurrency:void 0}};function h(x,z){let k=z?_[z]:{};return{...G,...k,...x}}class P{entryPoint;constructor(x){this.entryPoint=x.entryPoint}async render(x,z){let k=h(z),{bundle:D}=await import("@remotion/bundler"),{renderMedia:N,selectComposition:Q}=await import("@remotion/renderer"),H=await D({entryPoint:this.entryPoint}),U=x.scenes[0],W=x.scenes.length===1&&U?U.compositionId:"Master",E=await Q({serveUrl:H,id:W,inputProps:{project:x}});await N({composition:E,serveUrl:H,codec:k.codec,outputLocation:k.outputPath,inputProps:{project:x},...k.crf&&{crf:k.crf},...k.concurrency&&{concurrency:k.concurrency}});let $={outputPath:k.outputPath,format:k.outputFormat??G.outputFormat,codec:k.codec??G.codec,durationSeconds:x.totalDurationInFrames/x.fps,fileSizeBytes:0,dimensions:{width:x.format.width,height:x.format.height}};if(z.autoVariants){let L=Y().filter((B)=>B.type!==x.format.type),w=[];for(let B of L){let q=k.outputPath.replace(/(\.[^.]+)$/,`-${B.type}$1`),y={...x,format:B},T=await Q({serveUrl:H,id:W,inputProps:{project:y}});await N({composition:T,serveUrl:H,codec:k.codec,outputLocation:q,inputProps:{project:y},...k.crf&&{crf:k.crf}}),w.push({outputPath:q,format:k.outputFormat??G.outputFormat,codec:k.codec??G.codec,durationSeconds:x.totalDurationInFrames/x.fps,fileSizeBytes:0,dimensions:{width:B.width,height:B.height}})}$.variants=w}return $}}export{P as LocalRenderer};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{createRequire as f}from"node:module";var j=f(import.meta.url);import{VIDEO_FORMATS as u}from"@contractspec/lib.contracts-integrations/integrations/providers/video";export{u as VIDEO_FORMATS};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{createRequire as g}from"node:module";var k=g(import.meta.url);import{defineFeature as h}from"@contractspec/lib.contracts-spec/features";var v=h({meta:{key:"libs.video-gen",version:"1.0.0",title:"Video Gen",description:"ContractSpec package declaration for @contractspec/lib.video-gen.",domain:"video-gen",owners:["@contractspec-core"],tags:["package","libs","video-gen"],stability:"experimental"},operations:[{key:"createUser",version:"1.0.0"}]});export{v as VideoGenFeature};
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ApiOverviewProps } from '../compositions/api-overview';
|
|
3
|
+
import type { SocialClipProps } from '../compositions/social-clip';
|
|
4
|
+
import type { TerminalDemoProps } from '../compositions/terminal-demo';
|
|
5
|
+
/**
|
|
6
|
+
* Available compositions for the player.
|
|
7
|
+
*/
|
|
8
|
+
export type DemoCompositionId = 'ApiOverview' | 'SocialClip' | 'TerminalDemo';
|
|
9
|
+
export interface DemoCompositionProps {
|
|
10
|
+
ApiOverview: ApiOverviewProps;
|
|
11
|
+
SocialClip: SocialClipProps;
|
|
12
|
+
TerminalDemo: TerminalDemoProps;
|
|
13
|
+
}
|
|
14
|
+
export interface DemoPlayerProps<T extends DemoCompositionId> {
|
|
15
|
+
/** Which composition to play */
|
|
16
|
+
compositionId: T;
|
|
17
|
+
/** Props for the composition */
|
|
18
|
+
inputProps: DemoCompositionProps[T];
|
|
19
|
+
/** Show player controls */
|
|
20
|
+
controls?: boolean;
|
|
21
|
+
/** Autoplay on mount */
|
|
22
|
+
autoPlay?: boolean;
|
|
23
|
+
/** Loop playback */
|
|
24
|
+
loop?: boolean;
|
|
25
|
+
/** Player width (CSS value or number in px) */
|
|
26
|
+
width?: string | number;
|
|
27
|
+
/** Player height (CSS value). Defaults to auto (aspect ratio maintained). */
|
|
28
|
+
height?: string | number;
|
|
29
|
+
/** Additional CSS styles for the container */
|
|
30
|
+
style?: React.CSSProperties;
|
|
31
|
+
/** CSS class name */
|
|
32
|
+
className?: string;
|
|
33
|
+
/** Click to play behavior */
|
|
34
|
+
clickToPlay?: boolean;
|
|
35
|
+
/** Double click to fullscreen */
|
|
36
|
+
doubleClickToFullscreen?: boolean;
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* Embeddable video demo player.
|
|
40
|
+
*
|
|
41
|
+
* @example
|
|
42
|
+
* ```tsx
|
|
43
|
+
* <DemoPlayer
|
|
44
|
+
* compositionId="ApiOverview"
|
|
45
|
+
* inputProps={{
|
|
46
|
+
* specName: "CreateUser",
|
|
47
|
+
* specCode: "...",
|
|
48
|
+
* }}
|
|
49
|
+
* controls
|
|
50
|
+
* autoPlay
|
|
51
|
+
* loop
|
|
52
|
+
* />
|
|
53
|
+
* ```
|
|
54
|
+
*/
|
|
55
|
+
export declare function DemoPlayer<T extends DemoCompositionId>({ compositionId, inputProps, controls, autoPlay, loop, width, height, style, className, clickToPlay, doubleClickToFullscreen, }: DemoPlayerProps<T>): import("react/jsx-runtime").JSX.Element;
|