@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,19 @@
|
|
|
1
|
+
var cH=((J)=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(J,{get:(H,K)=>(typeof require<"u"?require:H)[K]}):J)(function(J){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+J+'" is not supported')});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:R}=ZH(),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 _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(),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 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, ${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 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:R}=VH(),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 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,R=60,L=45,q=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(),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 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:R}=vH(),q=$??P.colors.accent,Y=R>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:q},k))})}),I(c,{from:Z,children:I(hH,{cta:Q,url:z,accent:q})})]})}),I(v,{color:q})]})},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,R=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."},NH=()=>{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})]})};import{registerRoot as pH}from"remotion";pH(NH);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var x=((b)=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(b,{get:(j,k)=>(typeof require<"u"?require:j)[k]}):b)(function(b){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+b+'" is not supported')});var m={codec:"h264",outputFormat:"mp4",crf:18,pixelFormat:"yuv420p"},A={h264:"mp4",h265:"mp4",vp8:"webm",vp9:"webm"},v={draft:{crf:28,concurrency:1},standard:{crf:18,concurrency:void 0},high:{crf:12,concurrency:void 0}};function B(b,j){let k=j?v[j]:{};return{...m,...k,...b}}export{B as resolveRenderConfig,v as qualityPresets,m as defaultRenderConfig,A as codecFormatMap};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var Y=((x)=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(x,{get:(Q,y)=>(typeof require<"u"?require:Q)[y]}):x)(function(x){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+x+'" is not supported')});import{VIDEO_FORMATS as H}from"@contractspec/lib.contracts-integrations/integrations/providers/video";var M=30,G={horizontal:120,vertical:80,contentWidth:1680,contentHeight:920};function V(x){let Q=x.width/1920,y=x.height/1080;return{horizontal:Math.round(G.horizontal*Q),vertical:Math.round(G.vertical*y),contentWidth:Math.round(G.contentWidth*Q),contentHeight:Math.round(G.contentHeight*y)}}var b={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"},_={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(x,Q){let y=Q?L[Q]:{};return{...k,...y,...x}}class P{entryPoint;constructor(x){this.entryPoint=x.entryPoint}async render(x,Q){let y=J(Q),{bundle:D}=await import("@remotion/bundler"),{renderMedia:K,selectComposition:N}=await import("@remotion/renderer"),B=await D({entryPoint:this.entryPoint}),U=x.scenes[0],W=x.scenes.length===1&&U?U.compositionId:"Master",E=await N({serveUrl:B,id:W,inputProps:{project:x}});await K({composition:E,serveUrl:B,codec:y.codec,outputLocation:y.outputPath,inputProps:{project:x},...y.crf&&{crf:y.crf},...y.concurrency&&{concurrency:y.concurrency}});let $={outputPath:y.outputPath,format:y.outputFormat??k.outputFormat,codec:y.codec??k.codec,durationSeconds:x.totalDurationInFrames/x.fps,fileSizeBytes:0,dimensions:{width:x.format.width,height:x.format.height}};if(Q.autoVariants){let T=h().filter((z)=>z.type!==x.format.type),q=[];for(let z of T){let w=y.outputPath.replace(/(\.[^.]+)$/,`-${z.type}$1`),X={...x,format:z},Z=await N({serveUrl:B,id:W,inputProps:{project:X}});await K({composition:Z,serveUrl:B,codec:y.codec,outputLocation:w,inputProps:{project:X},...y.crf&&{crf:y.crf}}),q.push({outputPath:w,format:y.outputFormat??k.outputFormat,codec:y.codec??k.codec,durationSeconds:x.totalDurationInFrames/x.fps,fileSizeBytes:0,dimensions:{width:z.width,height:z.height}})}$.variants=q}return $}}export{J as resolveRenderConfig,L as qualityPresets,k as defaultRenderConfig,_ as codecFormatMap,P as LocalRenderer};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var X=((k)=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(k,{get:(z,x)=>(typeof require<"u"?require:z)[x]}):k)(function(k){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+k+'" is not supported')});import{VIDEO_FORMATS as K}from"@contractspec/lib.contracts-integrations/integrations/providers/video";var I=30,J={horizontal:120,vertical:80,contentWidth:1680,contentHeight:920};function V(k){let z=k.width/1920,x=k.height/1080;return{horizontal:Math.round(J.horizontal*z),vertical:Math.round(J.vertical*x),contentWidth:Math.round(J.contentWidth*z),contentHeight:Math.round(J.contentHeight*x)}}var b={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"},O={h264:"mp4",h265:"mp4",vp8:"webm",vp9:"webm"},Z={draft:{crf:28,concurrency:1},standard:{crf:18,concurrency:void 0},high:{crf:12,concurrency:void 0}};function h(k,z){let x=z?Z[z]:{};return{...G,...x,...k}}class _{entryPoint;constructor(k){this.entryPoint=k.entryPoint}async render(k,z){let x=h(z),{bundle:D}=await import("@remotion/bundler"),{renderMedia:N,selectComposition:Q}=await import("@remotion/renderer"),H=await D({entryPoint:this.entryPoint}),U=k.scenes[0],W=k.scenes.length===1&&U?U.compositionId:"Master",E=await Q({serveUrl:H,id:W,inputProps:{project:k}});await N({composition:E,serveUrl:H,codec:x.codec,outputLocation:x.outputPath,inputProps:{project:k},...x.crf&&{crf:x.crf},...x.concurrency&&{concurrency:x.concurrency}});let $={outputPath:x.outputPath,format:x.outputFormat??G.outputFormat,codec:x.codec??G.codec,durationSeconds:k.totalDurationInFrames/k.fps,fileSizeBytes:0,dimensions:{width:k.format.width,height:k.format.height}};if(z.autoVariants){let L=Y().filter((B)=>B.type!==k.format.type),w=[];for(let B of L){let q=x.outputPath.replace(/(\.[^.]+)$/,`-${B.type}$1`),y={...k,format:B},T=await Q({serveUrl:H,id:W,inputProps:{project:y}});await N({composition:T,serveUrl:H,codec:x.codec,outputLocation:q,inputProps:{project:y},...x.crf&&{crf:x.crf}}),w.push({outputPath:q,format:x.outputFormat??G.outputFormat,codec:x.codec??G.codec,durationSeconds:k.totalDurationInFrames/k.fps,fileSizeBytes:0,dimensions:{width:B.width,height:B.height}})}$.variants=w}return $}}export{_ as LocalRenderer};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var k=((f)=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(f,{get:(h,j)=>(typeof require<"u"?require:h)[j]}):f)(function(f){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+f+'" is not supported')});import{VIDEO_FORMATS as w}from"@contractspec/lib.contracts-integrations/integrations/providers/video";export{w as VIDEO_FORMATS};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var m=((g)=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(g,{get:(h,j)=>(typeof require<"u"?require:h)[j]}):g)(function(g){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+g+'" is not supported')});import{defineFeature as k}from"@contractspec/lib.contracts-spec/features";var w=k({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{w as VideoGenFeature};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface ApiOverviewProps {
|
|
3
|
+
/** The contract spec name (e.g., "CreateUser") */
|
|
4
|
+
specName: string;
|
|
5
|
+
/** HTTP method */
|
|
6
|
+
method?: string;
|
|
7
|
+
/** Endpoint path */
|
|
8
|
+
endpoint?: string;
|
|
9
|
+
/** Contract spec code snippet */
|
|
10
|
+
specCode: string;
|
|
11
|
+
/** Generated output items to showcase */
|
|
12
|
+
generatedOutputs?: string[];
|
|
13
|
+
/** Tagline */
|
|
14
|
+
tagline?: string;
|
|
15
|
+
}
|
|
16
|
+
export declare const ApiOverview: React.FC<ApiOverviewProps>;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
// @bun
|
|
2
|
+
var GH=import.meta.require;import{Easing as R}from"remotion";var L={entrance:R.out(R.exp),exit:R.in(R.exp),emphasis:R.out(R.back(1.4)),linear:R.linear,gentle:R.bezier(0.25,0.1,0.25,1),spring:R.out(R.back(1.7))},I={sceneTransition:20,textEntrance:15,textExit:12,codeTypingPerChar:2,sectionPause:30,emphasisPause:15,brandReveal:25,minScene:60,shortScene:60,mediumScene:120,longScene:240},XH={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 C={canvasBackground:V.colors.background,codeBackground:"#1e1e2e",terminalBackground:"#0d1117",terminalForeground:"#c9d1d9",highlight:V.colors.accent,gradientStart:V.colors.primary,gradientEnd:V.colors.accent},B={...V,video:C};var k={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 D,useCurrentFrame as o,useVideoConfig as s}from"remotion";import{jsx as i}from"react/jsx-runtime";var S=({text:J,variant:H="body",style:K,enterAt:Q=0,exitAt:$,color:z="#ffffff",align:X="left"})=>{let G=o(),{width:N}=s(),W=k[H],P={...F(W,N),...K},q=D(G,[Q,Q+I.textEntrance],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),M=D(q,[0,1],[0,1],{easing:L.entrance}),Y=D(q,[0,1],[30,0],{easing:L.entrance}),Z=1,y=0;if($!==void 0){let f=D(G,[$,$+I.textExit],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"});Z=D(f,[0,1],[1,0],{easing:L.exit}),y=D(f,[0,1],[0,-20],{easing:L.exit})}let d=M*Z,n=Y+y;return i("div",{style:{fontSize:P.fontSize,lineHeight:P.lineHeight,fontWeight:P.fontWeight,letterSpacing:P.letterSpacing,color:z,textAlign:X,opacity:d,transform:`translateY(${n}px)`,willChange:"opacity, transform"},children:J})};import{VIDEO_FORMATS as A}from"@contractspec/lib.contracts-integrations/integrations/providers/video";var DH=30,E={horizontal:120,vertical:80,contentWidth:1680,contentHeight:920};function h(J){let H=J.width/1920,K=J.height/1080;return{horizontal:Math.round(E.horizontal*H),vertical:Math.round(E.vertical*K),contentWidth:Math.round(E.contentWidth*H),contentHeight:Math.round(E.contentHeight*K)}}var wH={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 VH(){return[A.landscape,A.square,A.portrait]}import{interpolate as x,useCurrentFrame as r,useVideoConfig as a}from"remotion";import{jsx as j,jsxs as t}from"react/jsx-runtime";var p=({styleOverrides:J,showBranding:H=!0,animateEntrance:K=!0,variant:Q="gradient",children:$})=>{let z=r(),{width:X,height:G}=a(),N=B,W=h({type:"custom",width:X,height:G}),_=J?.primaryColor??N.colors.primary,P=J?.accentColor??N.colors.accent,q=J?.darkMode??!0,M;switch(Q){case"solid":M=q?"#0a0a0a":N.colors.background;break;case"gradient":M=q?"linear-gradient(135deg, #0a0a14 0%, #0f172a 50%, #0a0a14 100%)":`linear-gradient(135deg, ${N.colors.background} 0%, ${N.colors.muted} 100%)`;break;case"dark":M="#000000";break}let Y=K?x(z,[0,15],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:L.entrance}):1,Z=H?x(z,[I.brandReveal,I.brandReveal+15],[0,0.3],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}):0;return t("div",{style:{width:X,height:G,background:M,position:"relative",overflow:"hidden",opacity:Y},children:[Q==="gradient"&&j("div",{style:{position:"absolute",top:"-20%",right:"-10%",width:"50%",height:"50%",background:`radial-gradient(circle, ${_}15 0%, transparent 70%)`,borderRadius:"50%",pointerEvents:"none"}}),j("div",{style:{position:"absolute",left:W.horizontal,top:W.vertical,width:W.contentWidth,height:W.contentHeight,display:"flex",flexDirection:"column"},children:$}),H&&j("div",{style:{position:"absolute",bottom:W.vertical/2,right:W.horizontal,opacity:Z,color:q?"#ffffff":"#000000",fontSize:Math.round(16*(X/1920)),fontWeight:500,letterSpacing:1},children:"ContractSpec"})]})};import{interpolate as u,useCurrentFrame as e,useVideoConfig as HH}from"remotion";import{jsx as w,jsxs as T}from"react/jsx-runtime";var g=({code:J,language:H="typescript",startAt:K=0,typeAnimation:Q=!0,backgroundColor:$=C.codeBackground,textColor:z="#abb2bf",filename:X})=>{let G=e(),{width:N}=HH(),W=F(k.code,N),_=J.length,P=_*I.codeTypingPerChar,q=Q?Math.floor(u(G,[K,K+P],[0,_],{extrapolateLeft:"clamp",extrapolateRight:"clamp"})):_,M=J.slice(0,q),Y=u(G,[K,K+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:L.entrance}),Z=Q&&q<_&&G%16<10;return T("div",{style:{backgroundColor:$,borderRadius:16,padding:0,opacity:Y,overflow:"hidden",boxShadow:"0 8px 32px rgba(0,0,0,0.3)"},children:[T("div",{style:{display:"flex",alignItems:"center",padding:"12px 20px",backgroundColor:"rgba(0,0,0,0.2)",gap:8},children:[T("div",{style:{display:"flex",gap:8},children:[w("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#ff5f57"}}),w("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#febc2e"}}),w("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#28c840"}})]}),w("div",{style:{flex:1,textAlign:"center",color:"#666",fontSize:W.fontSize*0.7,fontFamily:"monospace"},children:X??H})]}),w("div",{style:{padding:"24px 32px"},children:T("pre",{style:{margin:0,fontFamily:"'SF Mono', 'Fira Code', 'JetBrains Mono', monospace",fontSize:W.fontSize,lineHeight:W.lineHeight,color:z,whiteSpace:"pre-wrap",wordBreak:"break-word"},children:[M,Z&&w("span",{style:{backgroundColor:z,width:"2px",display:"inline-block",height:"1.2em",verticalAlign:"text-bottom"},children:"\xA0"})]})})]})};import{useCurrentFrame as JH,useVideoConfig as KH}from"remotion";import{jsx as c}from"react/jsx-runtime";var m=({height:J=4,color:H=B.colors.primary,backgroundColor:K="rgba(255,255,255,0.1)",position:Q="bottom"})=>{let $=JH(),{durationInFrames:z,width:X}=KH(),G=$/z;return c("div",{style:{position:"absolute",[Q]:0,left:0,width:X,height:J,backgroundColor:K,zIndex:100},children:c("div",{style:{width:`${G*100}%`,height:"100%",backgroundColor:H,transition:"none"}})})};import{AbsoluteFill as QH,interpolate as b,Sequence as v,useCurrentFrame as l,useVideoConfig as UH}from"remotion";import{jsx as U,jsxs as O}from"react/jsx-runtime";var sH=({specName:J,method:H="POST",endpoint:K="/api/users",specCode:Q,generatedOutputs:$=["REST Endpoint","GraphQL Mutation","Prisma Model","TypeScript SDK","MCP Tool","OpenAPI Spec"],tagline:z="One spec. Every surface."})=>{let{durationInFrames:X}=UH(),G=B,N=60,W=45,_=210,P=180,q=X-90;return O(QH,{children:[O(p,{variant:"gradient",showBranding:!0,children:[U(v,{from:0,durationInFrames:210,children:O("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:16},children:[O("div",{style:{display:"flex",alignItems:"center",gap:16},children:[U($H,{method:H,enterAt:10}),U(S,{text:K,variant:"subheading",enterAt:15,color:G.colors.mutedForeground})]}),U(S,{text:J,variant:"title",enterAt:5,color:"#ffffff"}),U("div",{style:{flex:1,marginTop:24},children:U(g,{code:Q,language:"typescript",filename:`${J.toLowerCase()}.contract.ts`,startAt:45,typeAnimation:!0})})]})}),U(v,{from:180,durationInFrames:X-180,children:O("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",gap:24},children:[U(S,{text:"Generates:",variant:"heading",enterAt:0,color:"#ffffff",align:"center"}),U("div",{style:{display:"flex",flexWrap:"wrap",gap:16,justifyContent:"center",maxWidth:"80%",marginTop:32},children:$.map((M,Y)=>U(zH,{label:M,index:Y,startFrame:20+Y*8},M))}),U(v,{from:q-180,children:U("div",{style:{marginTop:48},children:U(S,{text:z,variant:"heading",enterAt:0,color:G.colors.accent,align:"center"})})})]})})]}),U(m,{})]})},$H=({method:J,enterAt:H})=>{let K=l(),Q=b(K,[H,H+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:L.entrance}),$=b(K,[H,H+12],[0.8,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:L.emphasis}),z={GET:"#61afef",POST:"#98c379",PUT:"#e5c07b",PATCH:"#d19a66",DELETE:"#e06c75"};return U("div",{style:{opacity:Q,transform:`scale(${$})`,backgroundColor:z[J]??"#61afef",color:"#000",padding:"8px 20px",borderRadius:8,fontSize:24,fontWeight:700,fontFamily:"monospace",letterSpacing:1},children:J})},zH=({label:J,startFrame:H})=>{let K=l(),Q=b(K,[H,H+12],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),$=b(K,[H,H+15],[20,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:L.emphasis}),z=b(K,[H,H+15],[0.9,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:L.emphasis});return U("div",{style:{opacity:Q,transform:`translateY(${$}px) scale(${z})`,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})};export{sH as ApiOverview};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export type { ApiOverviewProps } from './api-overview';
|
|
2
|
+
export { ApiOverview } from './api-overview';
|
|
3
|
+
export * from './primitives';
|
|
4
|
+
export type { SocialClipProps } from './social-clip';
|
|
5
|
+
export { SocialClip } from './social-clip';
|
|
6
|
+
export type { TerminalDemoProps } from './terminal-demo';
|
|
7
|
+
export { TerminalDemo } from './terminal-demo';
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
// @bun
|
|
2
|
+
var xH=import.meta.require;import{Easing as w}from"remotion";var L={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))},I={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 A}from"@contractspec/lib.design-system";var f={canvasBackground:A.colors.background,codeBackground:"#1e1e2e",terminalBackground:"#0d1117",terminalForeground:"#c9d1d9",highlight:A.colors.accent,gradientStart:A.colors.primary,gradientEnd:A.colors.accent},V={...A,video:f};var T={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(K,H){let J=H/1920;return{...K,fontSize:Math.round(K.fontSize*J),letterSpacing:K.letterSpacing?Math.round(K.letterSpacing*J*10)/10:void 0}}import{interpolate as C,useCurrentFrame as XH,useVideoConfig as LH}from"remotion";import{jsx as PH}from"react/jsx-runtime";var _=({text:K,variant:H="body",style:J,enterAt:Q=0,exitAt:$,color:z="#ffffff",align:G="left"})=>{let X=XH(),{width:N}=LH(),P=T[H],R={...F(P,N),...J},U=C(X,[Q,Q+I.textEntrance],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),M=C(U,[0,1],[0,1],{easing:L.entrance}),W=C(U,[0,1],[30,0],{easing:L.entrance}),Y=1,k=0;if($!==void 0){let d=C(X,[$,$+I.textExit],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"});Y=C(d,[0,1],[1,0],{easing:L.exit}),k=C(d,[0,1],[0,-20],{easing:L.exit})}let E=M*Y,m=W+k;return PH("div",{style:{fontSize:R.fontSize,lineHeight:R.lineHeight,fontWeight:R.fontWeight,letterSpacing:R.letterSpacing,color:z,textAlign:G,opacity:E,transform:`translateY(${m}px)`,willChange:"opacity, transform"},children:K})};import{VIDEO_FORMATS as l}from"@contractspec/lib.contracts-integrations/integrations/providers/video";var eH=30,p={horizontal:120,vertical:80,contentWidth:1680,contentHeight:920};function t(K){let H=K.width/1920,J=K.height/1080;return{horizontal:Math.round(p.horizontal*H),vertical:Math.round(p.vertical*J),contentWidth:Math.round(p.contentWidth*H),contentHeight:Math.round(p.contentHeight*J)}}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 e,useCurrentFrame as MH,useVideoConfig as NH}from"remotion";import{jsx as o,jsxs as qH}from"react/jsx-runtime";var b=({styleOverrides:K,showBranding:H=!0,animateEntrance:J=!0,variant:Q="gradient",children:$})=>{let z=MH(),{width:G,height:X}=NH(),N=V,P=t({type:"custom",width:G,height:X}),q=K?.primaryColor??N.colors.primary,R=K?.accentColor??N.colors.accent,U=K?.darkMode??!0,M;switch(Q){case"solid":M=U?"#0a0a0a":N.colors.background;break;case"gradient":M=U?"linear-gradient(135deg, #0a0a14 0%, #0f172a 50%, #0a0a14 100%)":`linear-gradient(135deg, ${N.colors.background} 0%, ${N.colors.muted} 100%)`;break;case"dark":M="#000000";break}let W=J?e(z,[0,15],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:L.entrance}):1,Y=H?e(z,[I.brandReveal,I.brandReveal+15],[0,0.3],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}):0;return qH("div",{style:{width:G,height:X,background:M,position:"relative",overflow:"hidden",opacity:W},children:[Q==="gradient"&&o("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"}}),o("div",{style:{position:"absolute",left:P.horizontal,top:P.vertical,width:P.contentWidth,height:P.contentHeight,display:"flex",flexDirection:"column"},children:$}),H&&o("div",{style:{position:"absolute",bottom:P.vertical/2,right:P.horizontal,opacity:Y,color:U?"#ffffff":"#000000",fontSize:Math.round(16*(G/1920)),fontWeight:500,letterSpacing:1},children:"ContractSpec"})]})};import{interpolate as HH,useCurrentFrame as RH,useVideoConfig as YH}from"remotion";import{jsx as v,jsxs as j}from"react/jsx-runtime";var n=({code:K,language:H="typescript",startAt:J=0,typeAnimation:Q=!0,backgroundColor:$=f.codeBackground,textColor:z="#abb2bf",filename:G})=>{let X=RH(),{width:N}=YH(),P=F(T.code,N),q=K.length,R=q*I.codeTypingPerChar,U=Q?Math.floor(HH(X,[J,J+R],[0,q],{extrapolateLeft:"clamp",extrapolateRight:"clamp"})):q,M=K.slice(0,U),W=HH(X,[J,J+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:L.entrance}),Y=Q&&U<q&&X%16<10;return j("div",{style:{backgroundColor:$,borderRadius:16,padding:0,opacity:W,overflow:"hidden",boxShadow:"0 8px 32px rgba(0,0,0,0.3)"},children:[j("div",{style:{display:"flex",alignItems:"center",padding:"12px 20px",backgroundColor:"rgba(0,0,0,0.2)",gap:8},children:[j("div",{style:{display:"flex",gap:8},children:[v("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#ff5f57"}}),v("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#febc2e"}}),v("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#28c840"}})]}),v("div",{style:{flex:1,textAlign:"center",color:"#666",fontSize:P.fontSize*0.7,fontFamily:"monospace"},children:G??H})]}),v("div",{style:{padding:"24px 32px"},children:j("pre",{style:{margin:0,fontFamily:"'SF Mono', 'Fira Code', 'JetBrains Mono', monospace",fontSize:P.fontSize,lineHeight:P.lineHeight,color:z,whiteSpace:"pre-wrap",wordBreak:"break-word"},children:[M,Y&&v("span",{style:{backgroundColor:z,width:"2px",display:"inline-block",height:"1.2em",verticalAlign:"text-bottom"},children:"\xA0"})]})})]})};import{useCurrentFrame as BH,useVideoConfig as ZH}from"remotion";import{jsx as JH}from"react/jsx-runtime";var S=({height:K=4,color:H=V.colors.primary,backgroundColor:J="rgba(255,255,255,0.1)",position:Q="bottom"})=>{let $=BH(),{durationInFrames:z,width:G}=ZH(),X=$/z;return JH("div",{style:{position:"absolute",[Q]:0,left:0,width:G,height:K,backgroundColor:J,zIndex:100},children:JH("div",{style:{width:`${X*100}%`,height:"100%",backgroundColor:H,transition:"none"}})})};import{AbsoluteFill as _H,interpolate as h,Sequence as r,useCurrentFrame as KH,useVideoConfig as DH}from"remotion";import{jsx as B,jsxs as y}from"react/jsx-runtime";var wH=({specName:K,method:H="POST",endpoint:J="/api/users",specCode:Q,generatedOutputs:$=["REST Endpoint","GraphQL Mutation","Prisma Model","TypeScript SDK","MCP Tool","OpenAPI Spec"],tagline:z="One spec. Every surface."})=>{let{durationInFrames:G}=DH(),X=V,N=60,P=45,q=210,R=180,U=G-90;return y(_H,{children:[y(b,{variant:"gradient",showBranding:!0,children:[B(r,{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:[B(IH,{method:H,enterAt:10}),B(_,{text:J,variant:"subheading",enterAt:15,color:X.colors.mutedForeground})]}),B(_,{text:K,variant:"title",enterAt:5,color:"#ffffff"}),B("div",{style:{flex:1,marginTop:24},children:B(n,{code:Q,language:"typescript",filename:`${K.toLowerCase()}.contract.ts`,startAt:45,typeAnimation:!0})})]})}),B(r,{from:180,durationInFrames:G-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"}),B("div",{style:{display:"flex",flexWrap:"wrap",gap:16,justifyContent:"center",maxWidth:"80%",marginTop:32},children:$.map((M,W)=>B(VH,{label:M,index:W,startFrame:20+W*8},M))}),B(r,{from:U-180,children:B("div",{style:{marginTop:48},children:B(_,{text:z,variant:"heading",enterAt:0,color:X.colors.accent,align:"center"})})})]})})]}),B(S,{})]})},IH=({method:K,enterAt:H})=>{let J=KH(),Q=h(J,[H,H+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:L.entrance}),$=h(J,[H,H+12],[0.8,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:L.emphasis}),z={GET:"#61afef",POST:"#98c379",PUT:"#e5c07b",PATCH:"#d19a66",DELETE:"#e06c75"};return B("div",{style:{opacity:Q,transform:`scale(${$})`,backgroundColor:z[K]??"#61afef",color:"#000",padding:"8px 20px",borderRadius:8,fontSize:24,fontWeight:700,fontFamily:"monospace",letterSpacing:1},children:K})},VH=({label:K,startFrame:H})=>{let J=KH(),Q=h(J,[H,H+12],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),$=h(J,[H,H+15],[20,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:L.emphasis}),z=h(J,[H,H+15],[0.9,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:L.emphasis});return B("div",{style:{opacity:Q,transform:`translateY(${$}px) scale(${z})`,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:K})};import{interpolate as s,useCurrentFrame as OH,useVideoConfig as kH}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"},a=({lines:K,startAt:H=0,prompt:J="$ ",title:Q="Terminal",backgroundColor:$=f.terminalBackground,typingSpeed:z=I.codeTypingPerChar})=>{let G=OH(),{width:X}=kH(),N=F(T.code,X),P=[],q=H;for(let U of K){let M=U.delay??10,W=q+M;if(U.type==="command"){let Y=U.text.length*z;P.push({startFrame:W,endFrame:W+Y}),q=W+Y}else P.push({startFrame:W,endFrame:W+5}),q=W+5}let R=s(G,[H,H+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:L.entrance});return x("div",{style:{backgroundColor:$,borderRadius:16,overflow:"hidden",opacity:R,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:N.fontSize*0.7,fontFamily:"monospace"},children:Q})]}),O("div",{style:{padding:"24px 32px",minHeight:200},children:K.map((U,M)=>{let W=P[M];if(!W||G<W.startFrame)return null;let Y=U.type==="command",k=QH[U.type],E=U.text;if(Y){let UH=s(G,[W.startFrame,W.endFrame],[0,U.text.length],{extrapolateLeft:"clamp",extrapolateRight:"clamp"});E=U.text.slice(0,Math.floor(UH))}let m=Y?1:s(G,[W.startFrame,W.startFrame+5],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),WH=Y&&G>=W.startFrame&&G<=W.endFrame&&G%16<10;return x("div",{style:{fontFamily:"'SF Mono', 'Fira Code', 'JetBrains Mono', monospace",fontSize:N.fontSize,lineHeight:1.8,color:k,opacity:m,whiteSpace:"pre-wrap"},children:[Y&&O("span",{style:{color:"#3fb950"},children:J}),U.type==="comment"&&O("span",{style:{color:QH.comment},children:"# "}),E,WH&&O("span",{style:{backgroundColor:"#c9d1d9",width:"2px",display:"inline-block",height:"1.2em",verticalAlign:"text-bottom"},children:"\xA0"})]},`${M}-${U.text.slice(0,20)}`)})})]})};import{interpolate as EH,useCurrentFrame as bH}from"remotion";import{jsx as $H,Fragment as FH}from"react/jsx-runtime";var SH=({type:K,durationInFrames:H,direction:J,startAt:Q=0,children:$})=>{let z=bH();if(K==="none"||H===0)return $H(FH,{children:$});let G=EH(z,[Q,Q+H],J==="in"?[0,1]:[1,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),X=TH(K,G);return $H("div",{style:X,children:$})};function TH(K,H){let J=L.entrance(H);switch(K){case"fade":return{opacity:J,width:"100%",height:"100%"};case"slide-left":return{opacity:J,transform:`translateX(${(1-J)*100}%)`,width:"100%",height:"100%"};case"slide-right":return{opacity:J,transform:`translateX(${(1-J)*-100}%)`,width:"100%",height:"100%"};case"wipe":return{clipPath:`inset(0 ${(1-J)*100}% 0 0)`,width:"100%",height:"100%"};default:return{width:"100%",height:"100%"}}}import{AbsoluteFill as CH,interpolate as u,Sequence as g,useCurrentFrame as zH,useVideoConfig as vH}from"remotion";import{jsx as Z,jsxs as c}from"react/jsx-runtime";var AH=({hook:K,message:H,points:J=[],cta:Q="Learn more",ctaUrl:$="contractspec.dev",accentColor:z})=>{let{durationInFrames:G,width:X,height:N}=vH(),q=z??V.colors.accent,R=N>X,U=75,M=60,W=120,Y=G-90;return c(CH,{children:[Z(b,{variant:"gradient",showBranding:!0,children:c("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",gap:R?48:32,textAlign:"center",padding:R?"0 20px":0},children:[Z(g,{from:0,durationInFrames:105,children:Z("div",{style:{width:"100%"},children:Z(_,{text:K,variant:"title",enterAt:5,exitAt:75,color:"#ffffff",align:"center"})})}),Z(g,{from:60,children:Z("div",{style:{width:"100%"},children:Z(_,{text:H,variant:R?"subheading":"heading",enterAt:0,color:"#ffffff",align:"center"})})}),J.length>0&&Z(g,{from:120,children:Z("div",{style:{display:"flex",flexDirection:"column",gap:16,alignItems:R?"flex-start":"center",width:"100%",maxWidth:R?"100%":"80%",marginTop:16},children:J.map((k,E)=>Z(fH,{text:k,index:E,startFrame:E*15,accent:q},k))})}),Z(g,{from:Y,children:Z(yH,{cta:Q,url:$,accent:q})})]})}),Z(S,{color:q})]})},fH=({text:K,startFrame:H,accent:J})=>{let Q=zH(),$=u(Q,[H,H+12],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),z=u(Q,[H,H+15],[-30,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:L.entrance});return c("div",{style:{opacity:$,transform:`translateX(${z}px)`,display:"flex",alignItems:"center",gap:16,fontSize:28,color:"#ffffff"},children:[Z("div",{style:{width:8,height:8,borderRadius:"50%",backgroundColor:J,flexShrink:0}}),K]})},yH=({cta:K,url:H,accent:J})=>{let Q=zH(),$=u(Q,[0,15],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),z=u(Q,[0,18],[0.9,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:L.emphasis});return c("div",{style:{opacity:$,transform:`scale(${z})`,display:"flex",flexDirection:"column",alignItems:"center",gap:12,marginTop:24},children:[Z("div",{style:{backgroundColor:J,color:"#ffffff",padding:"16px 48px",borderRadius:12,fontSize:28,fontWeight:600},children:K}),Z("div",{style:{color:"rgba(255,255,255,0.5)",fontSize:20},children:H})]})};import{AbsoluteFill as hH,Sequence as GH,useVideoConfig as pH}from"remotion";import{jsx as D,jsxs as i}from"react/jsx-runtime";var jH=({title:K,subtitle:H,lines:J,terminalTitle:Q="Terminal",prompt:$="$ ",summary:z})=>{let{durationInFrames:G}=pH(),X=V,N=40,P=G-90;return i(hH,{children:[D(b,{variant:"dark",showBranding:!0,children:i("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:24},children:[i("div",{children:[D(_,{text:K,variant:"heading",enterAt:5,color:"#ffffff"}),H&&D("div",{style:{marginTop:8},children:D(_,{text:H,variant:"body",enterAt:15,color:X.colors.mutedForeground})})]}),D(GH,{from:40,children:D("div",{style:{flex:1},children:D(a,{lines:J,startAt:0,prompt:$,title:Q})})}),z&&D(GH,{from:P,children:D("div",{style:{marginTop:"auto",paddingTop:24},children:D(_,{text:z,variant:"subheading",enterAt:0,color:X.colors.accent,align:"center"})})})]})}),D(S,{})]})};export{jH as TerminalDemo,a as Terminal,AH as SocialClip,SH as SceneTransitionWrapper,S as ProgressBar,n as CodeBlock,b as BrandFrame,wH as ApiOverview,_ as AnimatedText};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { VideoTypeStyle } from '../../design/typography';
|
|
3
|
+
import { videoTypography } from '../../design/typography';
|
|
4
|
+
export interface AnimatedTextProps {
|
|
5
|
+
/** The text content to display */
|
|
6
|
+
text: string;
|
|
7
|
+
/** Typography style key or custom style */
|
|
8
|
+
variant?: keyof typeof videoTypography;
|
|
9
|
+
/** Custom style override */
|
|
10
|
+
style?: Partial<VideoTypeStyle>;
|
|
11
|
+
/** Frame at which text enters (relative to composition start) */
|
|
12
|
+
enterAt?: number;
|
|
13
|
+
/** Frame at which text exits. Omit to keep visible. */
|
|
14
|
+
exitAt?: number;
|
|
15
|
+
/** Color */
|
|
16
|
+
color?: string;
|
|
17
|
+
/** Text alignment */
|
|
18
|
+
align?: 'left' | 'center' | 'right';
|
|
19
|
+
/** Additional CSS styles */
|
|
20
|
+
className?: string;
|
|
21
|
+
}
|
|
22
|
+
export declare const AnimatedText: React.FC<AnimatedTextProps>;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
// @bun
|
|
2
|
+
var P=import.meta.require;import{Easing as k}from"remotion";var B={entrance:k.out(k.exp),exit:k.in(k.exp),emphasis:k.out(k.back(1.4)),linear:k.linear,gentle:k.bezier(0.25,0.1,0.25,1),spring:k.out(k.back(1.7))},K={sceneTransition:20,textEntrance:15,textExit:12,codeTypingPerChar:2,sectionPause:30,emphasisPause:15,brandReveal:25,minScene:60,shortScene:60,mediumScene:120,longScene:240},h={fade:{type:"fade",durationInFrames:20},slideLeft:{type:"slide-left",durationInFrames:20},slideRight:{type:"slide-right",durationInFrames:20},wipe:{type:"wipe",durationInFrames:15},none:{type:"none",durationInFrames:0}};var X={title:{fontSize:72,lineHeight:1.1,fontWeight:700,letterSpacing:-1},heading:{fontSize:56,lineHeight:1.2,fontWeight:600,letterSpacing:-0.5},subheading:{fontSize:40,lineHeight:1.25,fontWeight:500},body:{fontSize:32,lineHeight:1.5,fontWeight:400},code:{fontSize:28,lineHeight:1.6,fontWeight:400},caption:{fontSize:24,lineHeight:1.4,fontWeight:400},label:{fontSize:20,lineHeight:1.3,fontWeight:600,letterSpacing:1}};function Z(q,I){let G=I/1920;return{...q,fontSize:Math.round(q.fontSize*G),letterSpacing:q.letterSpacing?Math.round(q.letterSpacing*G*10)/10:void 0}}import{interpolate as z,useCurrentFrame as D,useVideoConfig as W}from"remotion";import{jsx as Y}from"react/jsx-runtime";var E=({text:q,variant:I="body",style:G,enterAt:L=0,exitAt:J,color:_="#ffffff",align:$="left"})=>{let M=D(),{width:F}=W(),V=X[I],H={...Z(V,F),...G},N=z(M,[L,L+K.textEntrance],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),b=z(N,[0,1],[0,1],{easing:B.entrance}),j=z(N,[0,1],[30,0],{easing:B.entrance}),Q=1,R=0;if(J!==void 0){let U=z(M,[J,J+K.textExit],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"});Q=z(U,[0,1],[1,0],{easing:B.exit}),R=z(U,[0,1],[0,-20],{easing:B.exit})}let w=b*Q,C=j+R;return Y("div",{style:{fontSize:H.fontSize,lineHeight:H.lineHeight,fontWeight:H.fontWeight,letterSpacing:H.letterSpacing,color:_,textAlign:$,opacity:w,transform:`translateY(${C}px)`,willChange:"opacity, transform"},children:q})};export{E as AnimatedText};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { VideoStyleOverrides } from '@contractspec/lib.contracts-integrations/integrations/providers/video';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export interface BrandFrameProps {
|
|
4
|
+
/** Override style tokens */
|
|
5
|
+
styleOverrides?: VideoStyleOverrides;
|
|
6
|
+
/** Show the ContractSpec logo/brand in bottom-right */
|
|
7
|
+
showBranding?: boolean;
|
|
8
|
+
/** Animate entrance */
|
|
9
|
+
animateEntrance?: boolean;
|
|
10
|
+
/** Background variant */
|
|
11
|
+
variant?: 'solid' | 'gradient' | 'dark';
|
|
12
|
+
children: React.ReactNode;
|
|
13
|
+
}
|
|
14
|
+
export declare const BrandFrame: React.FC<BrandFrameProps>;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
// @bun
|
|
2
|
+
var w=import.meta.require;import{Easing as q}from"remotion";var M={entrance:q.out(q.exp),exit:q.in(q.exp),emphasis:q.out(q.back(1.4)),linear:q.linear,gentle:q.bezier(0.25,0.1,0.25,1),spring:q.out(q.back(1.7))},z={sceneTransition:20,textEntrance:15,textExit:12,codeTypingPerChar:2,sectionPause:30,emphasisPause:15,brandReveal:25,minScene:60,shortScene:60,mediumScene:120,longScene:240},Z={fade:{type:"fade",durationInFrames:20},slideLeft:{type:"slide-left",durationInFrames:20},slideRight:{type:"slide-right",durationInFrames:20},wipe:{type:"wipe",durationInFrames:15},none:{type:"none",durationInFrames:0}};import{defaultTokens as L}from"@contractspec/lib.design-system";var V={canvasBackground:L.colors.background,codeBackground:"#1e1e2e",terminalBackground:"#0d1117",terminalForeground:"#c9d1d9",highlight:L.colors.accent,gradientStart:L.colors.primary,gradientEnd:L.colors.accent},R={...L,video:V};import{VIDEO_FORMATS as P}from"@contractspec/lib.contracts-integrations/integrations/providers/video";var h=30,U={horizontal:120,vertical:80,contentWidth:1680,contentHeight:920};function _(G){let J=G.width/1920,N=G.height/1080;return{horizontal:Math.round(U.horizontal*J),vertical:Math.round(U.vertical*N),contentWidth:Math.round(U.contentWidth*J),contentHeight:Math.round(U.contentHeight*N)}}var u={center:{x:960,y:540},topLeft:{x:120,y:80},topRight:{x:1800,y:80},bottomLeft:{x:120,y:1000},bottomRight:{x:1800,y:1000},bottomCenter:{x:960,y:960}};function m(){return[P.landscape,P.square,P.portrait]}import{interpolate as j,useCurrentFrame as p,useVideoConfig as D}from"remotion";import{jsx as X,jsxs as S}from"react/jsx-runtime";var r=({styleOverrides:G,showBranding:J=!0,animateEntrance:N=!0,variant:Y="gradient",children:B})=>{let A=p(),{width:W,height:I}=D(),K=R,H=_({type:"custom",width:W,height:I}),F=G?.primaryColor??K.colors.primary,b=G?.accentColor??K.colors.accent,$=G?.darkMode??!0,Q;switch(Y){case"solid":Q=$?"#0a0a0a":K.colors.background;break;case"gradient":Q=$?"linear-gradient(135deg, #0a0a14 0%, #0f172a 50%, #0a0a14 100%)":`linear-gradient(135deg, ${K.colors.background} 0%, ${K.colors.muted} 100%)`;break;case"dark":Q="#000000";break}let x=N?j(A,[0,15],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.entrance}):1,C=J?j(A,[z.brandReveal,z.brandReveal+15],[0,0.3],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}):0;return S("div",{style:{width:W,height:I,background:Q,position:"relative",overflow:"hidden",opacity:x},children:[Y==="gradient"&&X("div",{style:{position:"absolute",top:"-20%",right:"-10%",width:"50%",height:"50%",background:`radial-gradient(circle, ${F}15 0%, transparent 70%)`,borderRadius:"50%",pointerEvents:"none"}}),X("div",{style:{position:"absolute",left:H.horizontal,top:H.vertical,width:H.contentWidth,height:H.contentHeight,display:"flex",flexDirection:"column"},children:B}),J&&X("div",{style:{position:"absolute",bottom:H.vertical/2,right:H.horizontal,opacity:C,color:$?"#ffffff":"#000000",fontSize:Math.round(16*(W/1920)),fontWeight:500,letterSpacing:1},children:"ContractSpec"})]})};export{r as BrandFrame};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface CodeBlockProps {
|
|
3
|
+
/** Code string to display */
|
|
4
|
+
code: string;
|
|
5
|
+
/** Language label shown in the top bar */
|
|
6
|
+
language?: string;
|
|
7
|
+
/** Frame at which typing starts */
|
|
8
|
+
startAt?: number;
|
|
9
|
+
/** Whether to animate typing or show all at once */
|
|
10
|
+
typeAnimation?: boolean;
|
|
11
|
+
/** Background color */
|
|
12
|
+
backgroundColor?: string;
|
|
13
|
+
/** Text color */
|
|
14
|
+
textColor?: string;
|
|
15
|
+
/** Filename to show in the title bar */
|
|
16
|
+
filename?: string;
|
|
17
|
+
}
|
|
18
|
+
export declare const CodeBlock: React.FC<CodeBlockProps>;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
// @bun
|
|
2
|
+
var b=import.meta.require;import{Easing as q}from"remotion";var U={entrance:q.out(q.exp),exit:q.in(q.exp),emphasis:q.out(q.back(1.4)),linear:q.linear,gentle:q.bezier(0.25,0.1,0.25,1),spring:q.out(q.back(1.7))},X={sceneTransition:20,textEntrance:15,textExit:12,codeTypingPerChar:2,sectionPause:30,emphasisPause:15,brandReveal:25,minScene:60,shortScene:60,mediumScene:120,longScene:240},T={fade:{type:"fade",durationInFrames:20},slideLeft:{type:"slide-left",durationInFrames:20},slideRight:{type:"slide-right",durationInFrames:20},wipe:{type:"wipe",durationInFrames:15},none:{type:"none",durationInFrames:0}};import{defaultTokens as H}from"@contractspec/lib.design-system";var N={canvasBackground:H.colors.background,codeBackground:"#1e1e2e",terminalBackground:"#0d1117",terminalForeground:"#c9d1d9",highlight:H.colors.accent,gradientStart:H.colors.primary,gradientEnd:H.colors.accent},x={...H,video:N};var Y={title:{fontSize:72,lineHeight:1.1,fontWeight:700,letterSpacing:-1},heading:{fontSize:56,lineHeight:1.2,fontWeight:600,letterSpacing:-0.5},subheading:{fontSize:40,lineHeight:1.25,fontWeight:500},body:{fontSize:32,lineHeight:1.5,fontWeight:400},code:{fontSize:28,lineHeight:1.6,fontWeight:400},caption:{fontSize:24,lineHeight:1.4,fontWeight:400},label:{fontSize:20,lineHeight:1.3,fontWeight:600,letterSpacing:1}};function Z(z,K){let B=K/1920;return{...z,fontSize:Math.round(z.fontSize*B),letterSpacing:z.letterSpacing?Math.round(z.letterSpacing*B*10)/10:void 0}}import{interpolate as _,useCurrentFrame as V,useVideoConfig as v}from"remotion";import{jsx as G,jsxs as J}from"react/jsx-runtime";var y=({code:z,language:K="typescript",startAt:B=0,typeAnimation:O=!0,backgroundColor:$=N.codeBackground,textColor:Q="#abb2bf",filename:P})=>{let L=V(),{width:D}=v(),M=Z(Y.code,D),I=z.length,F=I*X.codeTypingPerChar,R=O?Math.floor(_(L,[B,B+F],[0,I],{extrapolateLeft:"clamp",extrapolateRight:"clamp"})):I,W=z.slice(0,R),w=_(L,[B,B+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:U.entrance}),S=O&&R<I&&L%16<10;return J("div",{style:{backgroundColor:$,borderRadius:16,padding:0,opacity:w,overflow:"hidden",boxShadow:"0 8px 32px rgba(0,0,0,0.3)"},children:[J("div",{style:{display:"flex",alignItems:"center",padding:"12px 20px",backgroundColor:"rgba(0,0,0,0.2)",gap:8},children:[J("div",{style:{display:"flex",gap:8},children:[G("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#ff5f57"}}),G("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#febc2e"}}),G("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#28c840"}})]}),G("div",{style:{flex:1,textAlign:"center",color:"#666",fontSize:M.fontSize*0.7,fontFamily:"monospace"},children:P??K})]}),G("div",{style:{padding:"24px 32px"},children:J("pre",{style:{margin:0,fontFamily:"'SF Mono', 'Fira Code', 'JetBrains Mono', monospace",fontSize:M.fontSize,lineHeight:M.lineHeight,color:Q,whiteSpace:"pre-wrap",wordBreak:"break-word"},children:[W,S&&G("span",{style:{backgroundColor:Q,width:"2px",display:"inline-block",height:"1.2em",verticalAlign:"text-bottom"},children:"\xA0"})]})})]})};export{y as CodeBlock};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export type { AnimatedTextProps } from './animated-text';
|
|
2
|
+
export { AnimatedText } from './animated-text';
|
|
3
|
+
export type { BrandFrameProps } from './brand-frame';
|
|
4
|
+
export { BrandFrame } from './brand-frame';
|
|
5
|
+
export type { CodeBlockProps } from './code-block';
|
|
6
|
+
export { CodeBlock } from './code-block';
|
|
7
|
+
export type { ProgressBarProps } from './progress-bar';
|
|
8
|
+
export { ProgressBar } from './progress-bar';
|
|
9
|
+
export type { TerminalLine, TerminalProps } from './terminal';
|
|
10
|
+
export { Terminal } from './terminal';
|
|
11
|
+
export type { SceneTransitionProps } from './transition';
|
|
12
|
+
export { SceneTransitionWrapper } from './transition';
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
// @bun
|
|
2
|
+
var XG=import.meta.require;import{Easing as R}from"remotion";var X={entrance:R.out(R.exp),exit:R.in(R.exp),emphasis:R.out(R.back(1.4)),linear:R.linear,gentle:R.bezier(0.25,0.1,0.25,1),spring:R.out(R.back(1.7))},Y={sceneTransition:20,textEntrance:15,textExit:12,codeTypingPerChar:2,sectionPause:30,emphasisPause:15,brandReveal:25,minScene:60,shortScene:60,mediumScene:120,longScene:240},RG={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 F}from"@contractspec/lib.design-system";var b={canvasBackground:F.colors.background,codeBackground:"#1e1e2e",terminalBackground:"#0d1117",terminalForeground:"#c9d1d9",highlight:F.colors.accent,gradientStart:F.colors.primary,gradientEnd:F.colors.accent},O={...F,video:b};var Z={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 D(H,J){let G=J/1920;return{...H,fontSize:Math.round(H.fontSize*G),letterSpacing:H.letterSpacing?Math.round(H.letterSpacing*G*10)/10:void 0}}import{interpolate as V,useCurrentFrame as l,useVideoConfig as o}from"remotion";import{jsx as s}from"react/jsx-runtime";var r=({text:H,variant:J="body",style:G,enterAt:q=0,exitAt:P,color:B="#ffffff",align:U="left"})=>{let z=l(),{width:L}=o(),$=Z[J],_={...D($,L),...G},K=V(z,[q,q+Y.textEntrance],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),N=V(K,[0,1],[0,1],{easing:X.entrance}),Q=V(K,[0,1],[30,0],{easing:X.entrance}),W=1,k=0;if(P!==void 0){let C=V(z,[P,P+Y.textExit],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"});W=V(C,[0,1],[1,0],{easing:X.exit}),k=V(C,[0,1],[0,-20],{easing:X.exit})}let T=N*W,j=Q+k;return s("div",{style:{fontSize:_.fontSize,lineHeight:_.lineHeight,fontWeight:_.fontWeight,letterSpacing:_.letterSpacing,color:B,textAlign:U,opacity:T,transform:`translateY(${j}px)`,willChange:"opacity, transform"},children:H})};import{VIDEO_FORMATS as x}from"@contractspec/lib.contracts-integrations/integrations/providers/video";var TG=30,S={horizontal:120,vertical:80,contentWidth:1680,contentHeight:920};function p(H){let J=H.width/1920,G=H.height/1080;return{horizontal:Math.round(S.horizontal*J),vertical:Math.round(S.vertical*G),contentWidth:Math.round(S.contentWidth*J),contentHeight:Math.round(S.contentHeight*G)}}var OG={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 SG(){return[x.landscape,x.square,x.portrait]}import{interpolate as h,useCurrentFrame as n,useVideoConfig as a}from"remotion";import{jsx as v,jsxs as t}from"react/jsx-runtime";var i=({styleOverrides:H,showBranding:J=!0,animateEntrance:G=!0,variant:q="gradient",children:P})=>{let B=n(),{width:U,height:z}=a(),L=O,$=p({type:"custom",width:U,height:z}),M=H?.primaryColor??L.colors.primary,_=H?.accentColor??L.colors.accent,K=H?.darkMode??!0,N;switch(q){case"solid":N=K?"#0a0a0a":L.colors.background;break;case"gradient":N=K?"linear-gradient(135deg, #0a0a14 0%, #0f172a 50%, #0a0a14 100%)":`linear-gradient(135deg, ${L.colors.background} 0%, ${L.colors.muted} 100%)`;break;case"dark":N="#000000";break}let Q=G?h(B,[0,15],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:X.entrance}):1,W=J?h(B,[Y.brandReveal,Y.brandReveal+15],[0,0.3],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}):0;return t("div",{style:{width:U,height:z,background:N,position:"relative",overflow:"hidden",opacity:Q},children:[q==="gradient"&&v("div",{style:{position:"absolute",top:"-20%",right:"-10%",width:"50%",height:"50%",background:`radial-gradient(circle, ${M}15 0%, transparent 70%)`,borderRadius:"50%",pointerEvents:"none"}}),v("div",{style:{position:"absolute",left:$.horizontal,top:$.vertical,width:$.contentWidth,height:$.contentHeight,display:"flex",flexDirection:"column"},children:P}),J&&v("div",{style:{position:"absolute",bottom:$.vertical/2,right:$.horizontal,opacity:W,color:K?"#ffffff":"#000000",fontSize:Math.round(16*(U/1920)),fontWeight:500,letterSpacing:1},children:"ContractSpec"})]})};import{interpolate as y,useCurrentFrame as e,useVideoConfig as GG}from"remotion";import{jsx as w,jsxs as E}from"react/jsx-runtime";var HG=({code:H,language:J="typescript",startAt:G=0,typeAnimation:q=!0,backgroundColor:P=b.codeBackground,textColor:B="#abb2bf",filename:U})=>{let z=e(),{width:L}=GG(),$=D(Z.code,L),M=H.length,_=M*Y.codeTypingPerChar,K=q?Math.floor(y(z,[G,G+_],[0,M],{extrapolateLeft:"clamp",extrapolateRight:"clamp"})):M,N=H.slice(0,K),Q=y(z,[G,G+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:X.entrance}),W=q&&K<M&&z%16<10;return E("div",{style:{backgroundColor:P,borderRadius:16,padding:0,opacity:Q,overflow:"hidden",boxShadow:"0 8px 32px rgba(0,0,0,0.3)"},children:[E("div",{style:{display:"flex",alignItems:"center",padding:"12px 20px",backgroundColor:"rgba(0,0,0,0.2)",gap:8},children:[E("div",{style:{display:"flex",gap:8},children:[w("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#ff5f57"}}),w("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#febc2e"}}),w("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#28c840"}})]}),w("div",{style:{flex:1,textAlign:"center",color:"#666",fontSize:$.fontSize*0.7,fontFamily:"monospace"},children:U??J})]}),w("div",{style:{padding:"24px 32px"},children:E("pre",{style:{margin:0,fontFamily:"'SF Mono', 'Fira Code', 'JetBrains Mono', monospace",fontSize:$.fontSize,lineHeight:$.lineHeight,color:B,whiteSpace:"pre-wrap",wordBreak:"break-word"},children:[N,W&&w("span",{style:{backgroundColor:B,width:"2px",display:"inline-block",height:"1.2em",verticalAlign:"text-bottom"},children:"\xA0"})]})})]})};import{useCurrentFrame as JG,useVideoConfig as KG}from"remotion";import{jsx as u}from"react/jsx-runtime";var QG=({height:H=4,color:J=O.colors.primary,backgroundColor:G="rgba(255,255,255,0.1)",position:q="bottom"})=>{let P=JG(),{durationInFrames:B,width:U}=KG(),z=P/B;return u("div",{style:{position:"absolute",[q]:0,left:0,width:U,height:H,backgroundColor:G,zIndex:100},children:u("div",{style:{width:`${z*100}%`,height:"100%",backgroundColor:J,transition:"none"}})})};import{interpolate as f,useCurrentFrame as UG,useVideoConfig as $G}from"remotion";import{jsx as I,jsxs as A}from"react/jsx-runtime";var m={command:"#c9d1d9",output:"#8b949e",error:"#f85149",success:"#3fb950",comment:"#6e7681"},qG=({lines:H,startAt:J=0,prompt:G="$ ",title:q="Terminal",backgroundColor:P=b.terminalBackground,typingSpeed:B=Y.codeTypingPerChar})=>{let U=UG(),{width:z}=$G(),L=D(Z.code,z),$=[],M=J;for(let K of H){let N=K.delay??10,Q=M+N;if(K.type==="command"){let W=K.text.length*B;$.push({startFrame:Q,endFrame:Q+W}),M=Q+W}else $.push({startFrame:Q,endFrame:Q+5}),M=Q+5}let _=f(U,[J,J+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:X.entrance});return A("div",{style:{backgroundColor:P,borderRadius:16,overflow:"hidden",opacity:_,boxShadow:"0 8px 32px rgba(0,0,0,0.3)"},children:[A("div",{style:{display:"flex",alignItems:"center",padding:"12px 20px",backgroundColor:"rgba(255,255,255,0.05)",gap:8},children:[A("div",{style:{display:"flex",gap:8},children:[I("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#ff5f57"}}),I("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#febc2e"}}),I("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#28c840"}})]}),I("div",{style:{flex:1,textAlign:"center",color:"#484f58",fontSize:L.fontSize*0.7,fontFamily:"monospace"},children:q})]}),I("div",{style:{padding:"24px 32px",minHeight:200},children:H.map((K,N)=>{let Q=$[N];if(!Q||U<Q.startFrame)return null;let W=K.type==="command",k=m[K.type],T=K.text;if(W){let d=f(U,[Q.startFrame,Q.endFrame],[0,K.text.length],{extrapolateLeft:"clamp",extrapolateRight:"clamp"});T=K.text.slice(0,Math.floor(d))}let j=W?1:f(U,[Q.startFrame,Q.startFrame+5],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),g=W&&U>=Q.startFrame&&U<=Q.endFrame&&U%16<10;return A("div",{style:{fontFamily:"'SF Mono', 'Fira Code', 'JetBrains Mono', monospace",fontSize:L.fontSize,lineHeight:1.8,color:k,opacity:j,whiteSpace:"pre-wrap"},children:[W&&I("span",{style:{color:"#3fb950"},children:G}),K.type==="comment"&&I("span",{style:{color:m.comment},children:"# "}),T,g&&I("span",{style:{backgroundColor:"#c9d1d9",width:"2px",display:"inline-block",height:"1.2em",verticalAlign:"text-bottom"},children:"\xA0"})]},`${N}-${K.text.slice(0,20)}`)})})]})};import{interpolate as zG,useCurrentFrame as PG}from"remotion";import{jsx as c,Fragment as NG}from"react/jsx-runtime";var WG=({type:H,durationInFrames:J,direction:G,startAt:q=0,children:P})=>{let B=PG();if(H==="none"||J===0)return c(NG,{children:P});let U=zG(B,[q,q+J],G==="in"?[0,1]:[1,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),z=BG(H,U);return c("div",{style:z,children:P})};function BG(H,J){let G=X.entrance(J);switch(H){case"fade":return{opacity:G,width:"100%",height:"100%"};case"slide-left":return{opacity:G,transform:`translateX(${(1-G)*100}%)`,width:"100%",height:"100%"};case"slide-right":return{opacity:G,transform:`translateX(${(1-G)*-100}%)`,width:"100%",height:"100%"};case"wipe":return{clipPath:`inset(0 ${(1-G)*100}% 0 0)`,width:"100%",height:"100%"};default:return{width:"100%",height:"100%"}}}export{qG as Terminal,WG as SceneTransitionWrapper,QG as ProgressBar,HG as CodeBlock,i as BrandFrame,r as AnimatedText};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface ProgressBarProps {
|
|
3
|
+
/** Bar height in pixels */
|
|
4
|
+
height?: number;
|
|
5
|
+
/** Bar color */
|
|
6
|
+
color?: string;
|
|
7
|
+
/** Background color */
|
|
8
|
+
backgroundColor?: string;
|
|
9
|
+
/** Position */
|
|
10
|
+
position?: 'top' | 'bottom';
|
|
11
|
+
}
|
|
12
|
+
export declare const ProgressBar: React.FC<ProgressBarProps>;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
// @bun
|
|
2
|
+
var R=import.meta.require;import{defaultTokens as q}from"@contractspec/lib.design-system";var N={canvasBackground:q.colors.background,codeBackground:"#1e1e2e",terminalBackground:"#0d1117",terminalForeground:"#c9d1d9",highlight:q.colors.accent,gradientStart:q.colors.primary,gradientEnd:q.colors.accent},z={...q,video:N};import{useCurrentFrame as O,useVideoConfig as Q}from"remotion";import{jsx as A}from"react/jsx-runtime";var Z=({height:D=4,color:E=z.colors.primary,backgroundColor:G="rgba(255,255,255,0.1)",position:H="bottom"})=>{let J=O(),{durationInFrames:K,width:L}=Q(),M=J/K;return A("div",{style:{position:"absolute",[H]:0,left:0,width:L,height:D,backgroundColor:G,zIndex:100},children:A("div",{style:{width:`${M*100}%`,height:"100%",backgroundColor:E,transition:"none"}})})};export{Z as ProgressBar};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface TerminalLine {
|
|
3
|
+
/** The text content */
|
|
4
|
+
text: string;
|
|
5
|
+
/** Line type determines styling */
|
|
6
|
+
type: 'command' | 'output' | 'error' | 'success' | 'comment';
|
|
7
|
+
/** Delay in frames before this line appears (relative to previous line end) */
|
|
8
|
+
delay?: number;
|
|
9
|
+
}
|
|
10
|
+
export interface TerminalProps {
|
|
11
|
+
/** Lines to display in sequence */
|
|
12
|
+
lines: TerminalLine[];
|
|
13
|
+
/** Frame at which the terminal appears */
|
|
14
|
+
startAt?: number;
|
|
15
|
+
/** Terminal prompt string */
|
|
16
|
+
prompt?: string;
|
|
17
|
+
/** Terminal title */
|
|
18
|
+
title?: string;
|
|
19
|
+
/** Background color */
|
|
20
|
+
backgroundColor?: string;
|
|
21
|
+
/** Typing speed in frames per character (for command lines) */
|
|
22
|
+
typingSpeed?: number;
|
|
23
|
+
}
|
|
24
|
+
export declare const Terminal: React.FC<TerminalProps>;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
// @bun
|
|
2
|
+
var C=import.meta.require;import{Easing as B}from"remotion";var D={entrance:B.out(B.exp),exit:B.in(B.exp),emphasis:B.out(B.back(1.4)),linear:B.linear,gentle:B.bezier(0.25,0.1,0.25,1),spring:B.out(B.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},u={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 Q}from"@contractspec/lib.design-system";var N={canvasBackground:Q.colors.background,codeBackground:"#1e1e2e",terminalBackground:"#0d1117",terminalForeground:"#c9d1d9",highlight:Q.colors.accent,gradientStart:Q.colors.primary,gradientEnd:Q.colors.accent},c={...Q,video:N};var w={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 L(H,M){let U=M/1920;return{...H,fontSize:Math.round(H.fontSize*U),letterSpacing:H.letterSpacing?Math.round(H.letterSpacing*U*10)/10:void 0}}import{interpolate as R,useCurrentFrame as S,useVideoConfig as E}from"remotion";import{jsx as G,jsxs as Z}from"react/jsx-runtime";var P={command:"#c9d1d9",output:"#8b949e",error:"#f85149",success:"#3fb950",comment:"#6e7681"},a=({lines:H,startAt:M=0,prompt:U="$ ",title:_="Terminal",backgroundColor:O=N.terminalBackground,typingSpeed:A=V.codeTypingPerChar})=>{let J=S(),{width:F}=E(),W=L(w.code,F),$=[],I=M;for(let z of H){let X=z.delay??10,q=I+X;if(z.type==="command"){let K=z.text.length*A;$.push({startFrame:q,endFrame:q+K}),I=q+K}else $.push({startFrame:q,endFrame:q+5}),I=q+5}let b=R(J,[M,M+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:D.entrance});return Z("div",{style:{backgroundColor:O,borderRadius:16,overflow:"hidden",opacity:b,boxShadow:"0 8px 32px rgba(0,0,0,0.3)"},children:[Z("div",{style:{display:"flex",alignItems:"center",padding:"12px 20px",backgroundColor:"rgba(255,255,255,0.05)",gap:8},children:[Z("div",{style:{display:"flex",gap:8},children:[G("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#ff5f57"}}),G("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#febc2e"}}),G("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#28c840"}})]}),G("div",{style:{flex:1,textAlign:"center",color:"#484f58",fontSize:W.fontSize*0.7,fontFamily:"monospace"},children:_})]}),G("div",{style:{padding:"24px 32px",minHeight:200},children:H.map((z,X)=>{let q=$[X];if(!q||J<q.startFrame)return null;let K=z.type==="command",v=P[z.type],Y=z.text;if(K){let j=R(J,[q.startFrame,q.endFrame],[0,z.text.length],{extrapolateLeft:"clamp",extrapolateRight:"clamp"});Y=z.text.slice(0,Math.floor(j))}let k=K?1:R(J,[q.startFrame,q.startFrame+5],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),h=K&&J>=q.startFrame&&J<=q.endFrame&&J%16<10;return Z("div",{style:{fontFamily:"'SF Mono', 'Fira Code', 'JetBrains Mono', monospace",fontSize:W.fontSize,lineHeight:1.8,color:v,opacity:k,whiteSpace:"pre-wrap"},children:[K&&G("span",{style:{color:"#3fb950"},children:U}),z.type==="comment"&&G("span",{style:{color:P.comment},children:"# "}),Y,h&&G("span",{style:{backgroundColor:"#c9d1d9",width:"2px",display:"inline-block",height:"1.2em",verticalAlign:"text-bottom"},children:"\xA0"})]},`${X}-${z.text.slice(0,20)}`)})})]})};export{a as Terminal};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { SceneTransitionType } from '@contractspec/lib.contracts-integrations/integrations/providers/video';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export interface SceneTransitionProps {
|
|
4
|
+
/** Transition type */
|
|
5
|
+
type: SceneTransitionType;
|
|
6
|
+
/** Duration of the transition in frames */
|
|
7
|
+
durationInFrames: number;
|
|
8
|
+
/** 'in' = entering, 'out' = exiting */
|
|
9
|
+
direction: 'in' | 'out';
|
|
10
|
+
/** Frame at which the transition starts (relative to sequence) */
|
|
11
|
+
startAt?: number;
|
|
12
|
+
children: React.ReactNode;
|
|
13
|
+
}
|
|
14
|
+
export declare const SceneTransitionWrapper: React.FC<SceneTransitionProps>;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
// @bun
|
|
2
|
+
var V=import.meta.require;import{Easing as k}from"remotion";var J={entrance:k.out(k.exp),exit:k.in(k.exp),emphasis:k.out(k.back(1.4)),linear:k.linear,gentle:k.bezier(0.25,0.1,0.25,1),spring:k.out(k.back(1.7))},Y={sceneTransition:20,textEntrance:15,textExit:12,codeTypingPerChar:2,sectionPause:30,emphasisPause:15,brandReveal:25,minScene:60,shortScene:60,mediumScene:120,longScene:240},Z={fade:{type:"fade",durationInFrames:20},slideLeft:{type:"slide-left",durationInFrames:20},slideRight:{type:"slide-right",durationInFrames:20},wipe:{type:"wipe",durationInFrames:15},none:{type:"none",durationInFrames:0}};import{interpolate as O,useCurrentFrame as Q}from"remotion";import{jsx as K,Fragment as U}from"react/jsx-runtime";var q=({type:B,durationInFrames:D,direction:z,startAt:G=0,children:H})=>{let L=Q();if(B==="none"||D===0)return K(U,{children:H});let M=O(L,[G,G+D],z==="in"?[0,1]:[1,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),N=R(B,M);return K("div",{style:N,children:H})};function R(B,D){let z=J.entrance(D);switch(B){case"fade":return{opacity:z,width:"100%",height:"100%"};case"slide-left":return{opacity:z,transform:`translateX(${(1-z)*100}%)`,width:"100%",height:"100%"};case"slide-right":return{opacity:z,transform:`translateX(${(1-z)*-100}%)`,width:"100%",height:"100%"};case"wipe":return{clipPath:`inset(0 ${(1-z)*100}% 0 0)`,width:"100%",height:"100%"};default:return{width:"100%",height:"100%"}}}export{q as SceneTransitionWrapper};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface SocialClipProps {
|
|
3
|
+
/** Hook line -- the attention grabber (first 3 seconds) */
|
|
4
|
+
hook: string;
|
|
5
|
+
/** Main message / value proposition */
|
|
6
|
+
message: string;
|
|
7
|
+
/** Supporting points (shown as a list) */
|
|
8
|
+
points?: string[];
|
|
9
|
+
/** Call to action */
|
|
10
|
+
cta?: string;
|
|
11
|
+
/** CTA URL (displayed, not clickable in video) */
|
|
12
|
+
ctaUrl?: string;
|
|
13
|
+
/** Accent color override */
|
|
14
|
+
accentColor?: string;
|
|
15
|
+
}
|
|
16
|
+
export declare const SocialClip: React.FC<SocialClipProps>;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
// @bun
|
|
2
|
+
var HG=import.meta.require;import{Easing as z}from"remotion";var U={entrance:z.out(z.exp),exit:z.in(z.exp),emphasis:z.out(z.back(1.4)),linear:z.linear,gentle:z.bezier(0.25,0.1,0.25,1),spring:z.out(z.back(1.7))},B={sceneTransition:20,textEntrance:15,textExit:12,codeTypingPerChar:2,sectionPause:30,emphasisPause:15,brandReveal:25,minScene:60,shortScene:60,mediumScene:120,longScene:240},LG={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 P}from"@contractspec/lib.design-system";var g={canvasBackground:P.colors.background,codeBackground:"#1e1e2e",terminalBackground:"#0d1117",terminalForeground:"#c9d1d9",highlight:P.colors.accent,gradientStart:P.colors.primary,gradientEnd:P.colors.accent},D={...P,video:g};var j={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,H){let J=H/1920;return{...G,fontSize:Math.round(G.fontSize*J),letterSpacing:G.letterSpacing?Math.round(G.letterSpacing*J*10)/10:void 0}}import{interpolate as Z,useCurrentFrame as c,useVideoConfig as d}from"remotion";import{jsx as l}from"react/jsx-runtime";var S=({text:G,variant:H="body",style:J,enterAt:L=0,exitAt:N,color:Q="#ffffff",align:W="left"})=>{let X=c(),{width:q}=d(),M=j[H],$={...v(M,q),...J},R=Z(X,[L,L+B.textEntrance],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),_=Z(R,[0,1],[0,1],{easing:U.entrance}),w=Z(R,[0,1],[30,0],{easing:U.entrance}),I=1,V=0;if(N!==void 0){let T=Z(X,[N,N+B.textExit],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"});I=Z(T,[0,1],[1,0],{easing:U.exit}),V=Z(T,[0,1],[0,-20],{easing:U.exit})}let b=_*I,m=w+V;return l("div",{style:{fontSize:$.fontSize,lineHeight:$.lineHeight,fontWeight:$.fontWeight,letterSpacing:$.letterSpacing,color:Q,textAlign:W,opacity:b,transform:`translateY(${m}px)`,willChange:"opacity, transform"},children:G})};import{VIDEO_FORMATS as k}from"@contractspec/lib.contracts-integrations/integrations/providers/video";var _G=30,C={horizontal:120,vertical:80,contentWidth:1680,contentHeight:920};function y(G){let H=G.width/1920,J=G.height/1080;return{horizontal:Math.round(C.horizontal*H),vertical:Math.round(C.vertical*J),contentWidth:Math.round(C.contentWidth*H),contentHeight:Math.round(C.contentHeight*J)}}var YG={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 IG(){return[k.landscape,k.square,k.portrait]}import{interpolate as h,useCurrentFrame as o,useVideoConfig as n}from"remotion";import{jsx as E,jsxs as s}from"react/jsx-runtime";var f=({styleOverrides:G,showBranding:H=!0,animateEntrance:J=!0,variant:L="gradient",children:N})=>{let Q=o(),{width:W,height:X}=n(),q=D,M=y({type:"custom",width:W,height:X}),Y=G?.primaryColor??q.colors.primary,$=G?.accentColor??q.colors.accent,R=G?.darkMode??!0,_;switch(L){case"solid":_=R?"#0a0a0a":q.colors.background;break;case"gradient":_=R?"linear-gradient(135deg, #0a0a14 0%, #0f172a 50%, #0a0a14 100%)":`linear-gradient(135deg, ${q.colors.background} 0%, ${q.colors.muted} 100%)`;break;case"dark":_="#000000";break}let w=J?h(Q,[0,15],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:U.entrance}):1,I=H?h(Q,[B.brandReveal,B.brandReveal+15],[0,0.3],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}):0;return s("div",{style:{width:W,height:X,background:_,position:"relative",overflow:"hidden",opacity:w},children:[L==="gradient"&&E("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"}}),E("div",{style:{position:"absolute",left:M.horizontal,top:M.vertical,width:M.contentWidth,height:M.contentHeight,display:"flex",flexDirection:"column"},children:N}),H&&E("div",{style:{position:"absolute",bottom:M.vertical/2,right:M.horizontal,opacity:I,color:R?"#ffffff":"#000000",fontSize:Math.round(16*(W/1920)),fontWeight:500,letterSpacing:1},children:"ContractSpec"})]})};import{useCurrentFrame as r,useVideoConfig as i}from"remotion";import{jsx as p}from"react/jsx-runtime";var u=({height:G=4,color:H=D.colors.primary,backgroundColor:J="rgba(255,255,255,0.1)",position:L="bottom"})=>{let N=r(),{durationInFrames:Q,width:W}=i(),X=N/Q;return p("div",{style:{position:"absolute",[L]:0,left:0,width:W,height:G,backgroundColor:J,zIndex:100},children:p("div",{style:{width:`${X*100}%`,height:"100%",backgroundColor:H,transition:"none"}})})};import{AbsoluteFill as a,interpolate as F,Sequence as A,useCurrentFrame as x,useVideoConfig as t}from"remotion";import{jsx as K,jsxs as O}from"react/jsx-runtime";var yG=({hook:G,message:H,points:J=[],cta:L="Learn more",ctaUrl:N="contractspec.dev",accentColor:Q})=>{let{durationInFrames:W,width:X,height:q}=t(),Y=Q??D.colors.accent,$=q>X,R=75,_=60,w=120,I=W-90;return O(a,{children:[K(f,{variant:"gradient",showBranding:!0,children:O("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",gap:$?48:32,textAlign:"center",padding:$?"0 20px":0},children:[K(A,{from:0,durationInFrames:105,children:K("div",{style:{width:"100%"},children:K(S,{text:G,variant:"title",enterAt:5,exitAt:75,color:"#ffffff",align:"center"})})}),K(A,{from:60,children:K("div",{style:{width:"100%"},children:K(S,{text:H,variant:$?"subheading":"heading",enterAt:0,color:"#ffffff",align:"center"})})}),J.length>0&&K(A,{from:120,children:K("div",{style:{display:"flex",flexDirection:"column",gap:16,alignItems:$?"flex-start":"center",width:"100%",maxWidth:$?"100%":"80%",marginTop:16},children:J.map((V,b)=>K(e,{text:V,index:b,startFrame:b*15,accent:Y},V))})}),K(A,{from:I,children:K(GG,{cta:L,url:N,accent:Y})})]})}),K(u,{color:Y})]})},e=({text:G,startFrame:H,accent:J})=>{let L=x(),N=F(L,[H,H+12],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),Q=F(L,[H,H+15],[-30,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:U.entrance});return O("div",{style:{opacity:N,transform:`translateX(${Q}px)`,display:"flex",alignItems:"center",gap:16,fontSize:28,color:"#ffffff"},children:[K("div",{style:{width:8,height:8,borderRadius:"50%",backgroundColor:J,flexShrink:0}}),G]})},GG=({cta:G,url:H,accent:J})=>{let L=x(),N=F(L,[0,15],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),Q=F(L,[0,18],[0.9,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:U.emphasis});return O("div",{style:{opacity:N,transform:`scale(${Q})`,display:"flex",flexDirection:"column",alignItems:"center",gap:12,marginTop:24},children:[K("div",{style:{backgroundColor:J,color:"#ffffff",padding:"16px 48px",borderRadius:12,fontSize:28,fontWeight:600},children:G}),K("div",{style:{color:"rgba(255,255,255,0.5)",fontSize:20},children:H})]})};export{yG as SocialClip};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { TerminalLine } from './primitives/terminal';
|
|
3
|
+
export interface TerminalDemoProps {
|
|
4
|
+
/** Title shown above the terminal */
|
|
5
|
+
title: string;
|
|
6
|
+
/** Subtitle / description */
|
|
7
|
+
subtitle?: string;
|
|
8
|
+
/** Terminal lines (commands + output) */
|
|
9
|
+
lines: TerminalLine[];
|
|
10
|
+
/** Terminal window title */
|
|
11
|
+
terminalTitle?: string;
|
|
12
|
+
/** Prompt string */
|
|
13
|
+
prompt?: string;
|
|
14
|
+
/** Summary text shown after terminal completes */
|
|
15
|
+
summary?: string;
|
|
16
|
+
}
|
|
17
|
+
export declare const TerminalDemo: React.FC<TerminalDemoProps>;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
// @bun
|
|
2
|
+
var zG=import.meta.require;import{Easing as R}from"remotion";var Y={entrance:R.out(R.exp),exit:R.in(R.exp),emphasis:R.out(R.back(1.4)),linear:R.linear,gentle:R.bezier(0.25,0.1,0.25,1),spring:R.out(R.back(1.7))},_={sceneTransition:20,textEntrance:15,textExit:12,codeTypingPerChar:2,sectionPause:30,emphasisPause:15,brandReveal:25,minScene:60,shortScene:60,mediumScene:120,longScene:240},NG={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 w}from"@contractspec/lib.design-system";var j={canvasBackground:w.colors.background,codeBackground:"#1e1e2e",terminalBackground:"#0d1117",terminalForeground:"#c9d1d9",highlight:w.colors.accent,gradientStart:w.colors.primary,gradientEnd:w.colors.accent},D={...w,video:j};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 A(G,J){let $=J/1920;return{...G,fontSize:Math.round(G.fontSize*$),letterSpacing:G.letterSpacing?Math.round(G.letterSpacing*$*10)/10:void 0}}import{interpolate as V,useCurrentFrame as a,useVideoConfig as r}from"remotion";import{jsx as n}from"react/jsx-runtime";var O=({text:G,variant:J="body",style:$,enterAt:N=0,exitAt:W,color:X="#ffffff",align:Q="left"})=>{let U=a(),{width:L}=r(),z=b[J],P={...A(z,L),...$},K=V(U,[N,N+_.textEntrance],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),M=V(K,[0,1],[0,1],{easing:Y.entrance}),H=V(K,[0,1],[30,0],{easing:Y.entrance}),q=1,F=0;if(W!==void 0){let T=V(U,[W,W+_.textExit],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"});q=V(T,[0,1],[1,0],{easing:Y.exit}),F=V(T,[0,1],[0,-20],{easing:Y.exit})}let k=M*q,S=H+F;return n("div",{style:{fontSize:P.fontSize,lineHeight:P.lineHeight,fontWeight:P.fontWeight,letterSpacing:P.letterSpacing,color:X,textAlign:Q,opacity:k,transform:`translateY(${S}px)`,willChange:"opacity, transform"},children:G})};import{VIDEO_FORMATS as v}from"@contractspec/lib.contracts-integrations/integrations/providers/video";var ZG=30,C={horizontal:120,vertical:80,contentWidth:1680,contentHeight:920};function x(G){let J=G.width/1920,$=G.height/1080;return{horizontal:Math.round(C.horizontal*J),vertical:Math.round(C.vertical*$),contentWidth:Math.round(C.contentWidth*J),contentHeight:Math.round(C.contentHeight*$)}}var DG={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 VG(){return[v.landscape,v.square,v.portrait]}import{interpolate as p,useCurrentFrame as i,useVideoConfig as t}from"remotion";import{jsx as h,jsxs as e}from"react/jsx-runtime";var u=({styleOverrides:G,showBranding:J=!0,animateEntrance:$=!0,variant:N="gradient",children:W})=>{let X=i(),{width:Q,height:U}=t(),L=D,z=x({type:"custom",width:Q,height:U}),Z=G?.primaryColor??L.colors.primary,P=G?.accentColor??L.colors.accent,K=G?.darkMode??!0,M;switch(N){case"solid":M=K?"#0a0a0a":L.colors.background;break;case"gradient":M=K?"linear-gradient(135deg, #0a0a14 0%, #0f172a 50%, #0a0a14 100%)":`linear-gradient(135deg, ${L.colors.background} 0%, ${L.colors.muted} 100%)`;break;case"dark":M="#000000";break}let H=$?p(X,[0,15],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:Y.entrance}):1,q=J?p(X,[_.brandReveal,_.brandReveal+15],[0,0.3],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}):0;return e("div",{style:{width:Q,height:U,background:M,position:"relative",overflow:"hidden",opacity:H},children:[N==="gradient"&&h("div",{style:{position:"absolute",top:"-20%",right:"-10%",width:"50%",height:"50%",background:`radial-gradient(circle, ${Z}15 0%, transparent 70%)`,borderRadius:"50%",pointerEvents:"none"}}),h("div",{style:{position:"absolute",left:z.horizontal,top:z.vertical,width:z.contentWidth,height:z.contentHeight,display:"flex",flexDirection:"column"},children:W}),J&&h("div",{style:{position:"absolute",bottom:z.vertical/2,right:z.horizontal,opacity:q,color:K?"#ffffff":"#000000",fontSize:Math.round(16*(Q/1920)),fontWeight:500,letterSpacing:1},children:"ContractSpec"})]})};import{useCurrentFrame as GG,useVideoConfig as HG}from"remotion";import{jsx as c}from"react/jsx-runtime";var g=({height:G=4,color:J=D.colors.primary,backgroundColor:$="rgba(255,255,255,0.1)",position:N="bottom"})=>{let W=GG(),{durationInFrames:X,width:Q}=HG(),U=W/X;return c("div",{style:{position:"absolute",[N]:0,left:0,width:Q,height:G,backgroundColor:$,zIndex:100},children:c("div",{style:{width:`${U*100}%`,height:"100%",backgroundColor:J,transition:"none"}})})};import{interpolate as f,useCurrentFrame as JG,useVideoConfig as KG}from"remotion";import{jsx as B,jsxs as E}from"react/jsx-runtime";var d={command:"#c9d1d9",output:"#8b949e",error:"#f85149",success:"#3fb950",comment:"#6e7681"},m=({lines:G,startAt:J=0,prompt:$="$ ",title:N="Terminal",backgroundColor:W=j.terminalBackground,typingSpeed:X=_.codeTypingPerChar})=>{let Q=JG(),{width:U}=KG(),L=A(b.code,U),z=[],Z=J;for(let K of G){let M=K.delay??10,H=Z+M;if(K.type==="command"){let q=K.text.length*X;z.push({startFrame:H,endFrame:H+q}),Z=H+q}else z.push({startFrame:H,endFrame:H+5}),Z=H+5}let P=f(Q,[J,J+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:Y.entrance});return E("div",{style:{backgroundColor:W,borderRadius:16,overflow:"hidden",opacity:P,boxShadow:"0 8px 32px rgba(0,0,0,0.3)"},children:[E("div",{style:{display:"flex",alignItems:"center",padding:"12px 20px",backgroundColor:"rgba(255,255,255,0.05)",gap:8},children:[E("div",{style:{display:"flex",gap:8},children:[B("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#ff5f57"}}),B("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#febc2e"}}),B("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#28c840"}})]}),B("div",{style:{flex:1,textAlign:"center",color:"#484f58",fontSize:L.fontSize*0.7,fontFamily:"monospace"},children:N})]}),B("div",{style:{padding:"24px 32px",minHeight:200},children:G.map((K,M)=>{let H=z[M];if(!H||Q<H.startFrame)return null;let q=K.type==="command",F=d[K.type],k=K.text;if(q){let s=f(Q,[H.startFrame,H.endFrame],[0,K.text.length],{extrapolateLeft:"clamp",extrapolateRight:"clamp"});k=K.text.slice(0,Math.floor(s))}let S=q?1:f(Q,[H.startFrame,H.startFrame+5],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),o=q&&Q>=H.startFrame&&Q<=H.endFrame&&Q%16<10;return E("div",{style:{fontFamily:"'SF Mono', 'Fira Code', 'JetBrains Mono', monospace",fontSize:L.fontSize,lineHeight:1.8,color:F,opacity:S,whiteSpace:"pre-wrap"},children:[q&&B("span",{style:{color:"#3fb950"},children:$}),K.type==="comment"&&B("span",{style:{color:d.comment},children:"# "}),k,o&&B("span",{style:{backgroundColor:"#c9d1d9",width:"2px",display:"inline-block",height:"1.2em",verticalAlign:"text-bottom"},children:"\xA0"})]},`${M}-${K.text.slice(0,20)}`)})})]})};import{AbsoluteFill as QG,Sequence as l,useVideoConfig as $G}from"remotion";import{jsx as I,jsxs as y}from"react/jsx-runtime";var oG=({title:G,subtitle:J,lines:$,terminalTitle:N="Terminal",prompt:W="$ ",summary:X})=>{let{durationInFrames:Q}=$G(),U=D,L=40,z=Q-90;return y(QG,{children:[I(u,{variant:"dark",showBranding:!0,children:y("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:24},children:[y("div",{children:[I(O,{text:G,variant:"heading",enterAt:5,color:"#ffffff"}),J&&I("div",{style:{marginTop:8},children:I(O,{text:J,variant:"body",enterAt:15,color:U.colors.mutedForeground})})]}),I(l,{from:40,children:I("div",{style:{flex:1},children:I(m,{lines:$,startAt:0,prompt:W,title:N})})}),X&&I(l,{from:z,children:I("div",{style:{marginTop:"auto",paddingTop:24},children:I(O,{text:X,variant:"subheading",enterAt:0,color:U.colors.accent,align:"center"})})})]})}),I(g,{})]})};export{oG as TerminalDemo};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
// @bun
|
|
2
|
+
var K=import.meta.require;import{Easing as x}from"remotion";var Q={entrance:x.out(x.exp),exit:x.in(x.exp),emphasis:x.out(x.back(1.4)),linear:x.linear,gentle:x.bezier(0.25,0.1,0.25,1),spring:x.out(x.back(1.7))},U={sceneTransition:20,textEntrance:15,textExit:12,codeTypingPerChar:2,sectionPause:30,emphasisPause:15,brandReveal:25,minScene:60,shortScene:60,mediumScene:120,longScene:240},$={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 z}from"@contractspec/lib.design-system";var J={canvasBackground:z.colors.background,codeBackground:"#1e1e2e",terminalBackground:"#0d1117",terminalForeground:"#c9d1d9",highlight:z.colors.accent,gradientStart:z.colors.primary,gradientEnd:z.colors.accent},C={...z,video:J};var X={title:{fontSize:72,lineHeight:1.1,fontWeight:700,letterSpacing:-1},heading:{fontSize:56,lineHeight:1.2,fontWeight:600,letterSpacing:-0.5},subheading:{fontSize:40,lineHeight:1.25,fontWeight:500},body:{fontSize:32,lineHeight:1.5,fontWeight:400},code:{fontSize:28,lineHeight:1.6,fontWeight:400},caption:{fontSize:24,lineHeight:1.4,fontWeight:400},label:{fontSize:20,lineHeight:1.3,fontWeight:600,letterSpacing:1}};function Y(j,B){let q=B/1920;return{...j,fontSize:Math.round(j.fontSize*q),letterSpacing:j.letterSpacing?Math.round(j.letterSpacing*q*10)/10:void 0}}import{VIDEO_FORMATS as H}from"@contractspec/lib.contracts-integrations/integrations/providers/video";var A=30,G={horizontal:120,vertical:80,contentWidth:1680,contentHeight:920};function D(j){let B=j.width/1920,q=j.height/1080;return{horizontal:Math.round(G.horizontal*B),vertical:Math.round(G.vertical*q),contentWidth:Math.round(G.contentWidth*B),contentHeight:Math.round(G.contentHeight*q)}}var F={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 I(){return[H.landscape,H.square,H.portrait]}export{X as videoTypography,$ as videoTransitions,G as videoSafeZone,F as videoPositions,Q as videoEasing,U as videoDurations,Y as scaleTypography,D as scaleSafeZone,I as getAllFormatVariants,C as defaultVideoTheme,J as defaultVideoColors,z as defaultTokens,H as VIDEO_FORMATS,A as DEFAULT_FPS};
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import type { VideoFormat } from '@contractspec/lib.contracts-integrations/integrations/providers/video';
|
|
2
|
+
import { VIDEO_FORMATS } from '@contractspec/lib.contracts-integrations/integrations/providers/video';
|
|
3
|
+
export { VIDEO_FORMATS };
|
|
4
|
+
/** Standard FPS for all video output. */
|
|
5
|
+
export declare const DEFAULT_FPS = 30;
|
|
6
|
+
/**
|
|
7
|
+
* Padding and safe zones for text content within video frames.
|
|
8
|
+
* Values are in pixels for 1920x1080; scale proportionally for other formats.
|
|
9
|
+
*/
|
|
10
|
+
export declare const videoSafeZone: {
|
|
11
|
+
/** Horizontal padding from edges */
|
|
12
|
+
readonly horizontal: 120;
|
|
13
|
+
/** Vertical padding from edges */
|
|
14
|
+
readonly vertical: 80;
|
|
15
|
+
/** Content area width (1920 - 2 * 120) */
|
|
16
|
+
readonly contentWidth: 1680;
|
|
17
|
+
/** Content area height (1080 - 2 * 80) */
|
|
18
|
+
readonly contentHeight: 920;
|
|
19
|
+
};
|
|
20
|
+
/**
|
|
21
|
+
* Scale safe zone values for a target format.
|
|
22
|
+
*/
|
|
23
|
+
export declare function scaleSafeZone(format: VideoFormat): {
|
|
24
|
+
horizontal: number;
|
|
25
|
+
vertical: number;
|
|
26
|
+
contentWidth: number;
|
|
27
|
+
contentHeight: number;
|
|
28
|
+
};
|
|
29
|
+
/**
|
|
30
|
+
* Common layout positions within a 1920x1080 frame.
|
|
31
|
+
* Use with absolute positioning in compositions.
|
|
32
|
+
*/
|
|
33
|
+
export declare const videoPositions: {
|
|
34
|
+
/** Centered content */
|
|
35
|
+
readonly center: {
|
|
36
|
+
readonly x: 960;
|
|
37
|
+
readonly y: 540;
|
|
38
|
+
};
|
|
39
|
+
/** Top-left content area start */
|
|
40
|
+
readonly topLeft: {
|
|
41
|
+
readonly x: 120;
|
|
42
|
+
readonly y: 80;
|
|
43
|
+
};
|
|
44
|
+
/** Top-right content area end */
|
|
45
|
+
readonly topRight: {
|
|
46
|
+
readonly x: 1800;
|
|
47
|
+
readonly y: 80;
|
|
48
|
+
};
|
|
49
|
+
/** Bottom-left */
|
|
50
|
+
readonly bottomLeft: {
|
|
51
|
+
readonly x: 120;
|
|
52
|
+
readonly y: 1000;
|
|
53
|
+
};
|
|
54
|
+
/** Bottom-right (for logos, watermarks) */
|
|
55
|
+
readonly bottomRight: {
|
|
56
|
+
readonly x: 1800;
|
|
57
|
+
readonly y: 1000;
|
|
58
|
+
};
|
|
59
|
+
/** Bottom center (for captions) */
|
|
60
|
+
readonly bottomCenter: {
|
|
61
|
+
readonly x: 960;
|
|
62
|
+
readonly y: 960;
|
|
63
|
+
};
|
|
64
|
+
};
|
|
65
|
+
/**
|
|
66
|
+
* Get all format variants for a given primary format.
|
|
67
|
+
* Returns landscape, square, and portrait variants.
|
|
68
|
+
*/
|
|
69
|
+
export declare function getAllFormatVariants(): VideoFormat[];
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
// @bun
|
|
2
|
+
var w=import.meta.require;import{VIDEO_FORMATS as j}from"@contractspec/lib.contracts-integrations/integrations/providers/video";var z=30,h={horizontal:120,vertical:80,contentWidth:1680,contentHeight:920};function B(k){let q=k.width/1920,u=k.height/1080;return{horizontal:Math.round(h.horizontal*q),vertical:Math.round(h.vertical*u),contentWidth:Math.round(h.contentWidth*q),contentHeight:Math.round(h.contentHeight*u)}}var C={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 G(){return[j.landscape,j.square,j.portrait]}export{h as videoSafeZone,C as videoPositions,B as scaleSafeZone,G as getAllFormatVariants,j as VIDEO_FORMATS,z as DEFAULT_FPS};
|