@contractspec/lib.video-gen 2.7.17 → 2.7.19

package/dist/compositions/social-clip.js

@@ -1,495 +1,2 @@
 // @bun
-var __require = import.meta.require;
-
-// src/design/motion.ts
-import { Easing } from "remotion";
-var videoEasing = {
-  entrance: Easing.out(Easing.exp),
-  exit: Easing.in(Easing.exp),
-  emphasis: Easing.out(Easing.back(1.4)),
-  linear: Easing.linear,
-  gentle: Easing.bezier(0.25, 0.1, 0.25, 1),
-  spring: Easing.out(Easing.back(1.7))
-};
-var videoDurations = {
-  sceneTransition: 20,
-  textEntrance: 15,
-  textExit: 12,
-  codeTypingPerChar: 2,
-  sectionPause: 30,
-  emphasisPause: 15,
-  brandReveal: 25,
-  minScene: 60,
-  shortScene: 60,
-  mediumScene: 120,
-  longScene: 240
-};
-var videoTransitions = {
-  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 }
-};
-
-// src/design/tokens.ts
-import { defaultTokens } from "@contractspec/lib.design-system";
-var defaultVideoColors = {
-  canvasBackground: defaultTokens.colors.background,
-  codeBackground: "#1e1e2e",
-  terminalBackground: "#0d1117",
-  terminalForeground: "#c9d1d9",
-  highlight: defaultTokens.colors.accent,
-  gradientStart: defaultTokens.colors.primary,
-  gradientEnd: defaultTokens.colors.accent
-};
-var defaultVideoTheme = {
-  ...defaultTokens,
-  video: defaultVideoColors
-};
-
-// src/design/typography.ts
-var videoTypography = {
-  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 scaleTypography(style, targetWidth) {
-  const scale = targetWidth / 1920;
-  return {
-    ...style,
-    fontSize: Math.round(style.fontSize * scale),
-    letterSpacing: style.letterSpacing ? Math.round(style.letterSpacing * scale * 10) / 10 : undefined
-  };
-}
-
-// src/compositions/primitives/animated-text.tsx
-import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
-import { jsxDEV } from "react/jsx-dev-runtime";
-var AnimatedText = ({
-  text,
-  variant = "body",
-  style: styleOverride,
-  enterAt = 0,
-  exitAt,
-  color = "#ffffff",
-  align = "left"
-}) => {
-  const frame = useCurrentFrame();
-  const { width } = useVideoConfig();
-  const baseStyle = videoTypography[variant];
-  const scaled = scaleTypography(baseStyle, width);
-  const finalStyle = { ...scaled, ...styleOverride };
-  const enterProgress = interpolate(frame, [enterAt, enterAt + videoDurations.textEntrance], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  const enterOpacity = interpolate(enterProgress, [0, 1], [0, 1], {
-    easing: videoEasing.entrance
-  });
-  const enterTranslateY = interpolate(enterProgress, [0, 1], [30, 0], {
-    easing: videoEasing.entrance
-  });
-  let exitOpacity = 1;
-  let exitTranslateY = 0;
-  if (exitAt !== undefined) {
-    const exitProgress = interpolate(frame, [exitAt, exitAt + videoDurations.textExit], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-    exitOpacity = interpolate(exitProgress, [0, 1], [1, 0], {
-      easing: videoEasing.exit
-    });
-    exitTranslateY = interpolate(exitProgress, [0, 1], [0, -20], {
-      easing: videoEasing.exit
-    });
-  }
-  const opacity = enterOpacity * exitOpacity;
-  const translateY = enterTranslateY + exitTranslateY;
-  return /* @__PURE__ */ jsxDEV("div", {
-    style: {
-      fontSize: finalStyle.fontSize,
-      lineHeight: finalStyle.lineHeight,
-      fontWeight: finalStyle.fontWeight,
-      letterSpacing: finalStyle.letterSpacing,
-      color,
-      textAlign: align,
-      opacity,
-      transform: `translateY(${translateY}px)`,
-      willChange: "opacity, transform"
-    },
-    children: text
-  }, undefined, false, undefined, this);
-};
-
-// src/design/layouts.ts
-import { VIDEO_FORMATS } from "@contractspec/lib.contracts-integrations/integrations/providers/video";
-var DEFAULT_FPS = 30;
-var videoSafeZone = {
-  horizontal: 120,
-  vertical: 80,
-  contentWidth: 1680,
-  contentHeight: 920
-};
-function scaleSafeZone(format) {
-  const scaleX = format.width / 1920;
-  const scaleY = format.height / 1080;
-  return {
-    horizontal: Math.round(videoSafeZone.horizontal * scaleX),
-    vertical: Math.round(videoSafeZone.vertical * scaleY),
-    contentWidth: Math.round(videoSafeZone.contentWidth * scaleX),
-    contentHeight: Math.round(videoSafeZone.contentHeight * scaleY)
-  };
-}
-var videoPositions = {
-  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 getAllFormatVariants() {
-  return [
-    VIDEO_FORMATS.landscape,
-    VIDEO_FORMATS.square,
-    VIDEO_FORMATS.portrait
-  ];
-}
-
-// src/compositions/primitives/brand-frame.tsx
-import { interpolate as interpolate2, useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig2 } from "remotion";
-import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
-var BrandFrame = ({
-  styleOverrides,
-  showBranding = true,
-  animateEntrance = true,
-  variant = "gradient",
-  children
-}) => {
-  const frame = useCurrentFrame2();
-  const { width, height } = useVideoConfig2();
-  const theme = defaultVideoTheme;
-  const safeZone = scaleSafeZone({ type: "custom", width, height });
-  const primaryColor = styleOverrides?.primaryColor ?? theme.colors.primary;
-  const _accentColor = styleOverrides?.accentColor ?? theme.colors.accent;
-  const isDark = styleOverrides?.darkMode ?? true;
-  let background;
-  switch (variant) {
-    case "solid":
-      background = isDark ? "#0a0a0a" : theme.colors.background;
-      break;
-    case "gradient":
-      background = isDark ? `linear-gradient(135deg, #0a0a14 0%, #0f172a 50%, #0a0a14 100%)` : `linear-gradient(135deg, ${theme.colors.background} 0%, ${theme.colors.muted} 100%)`;
-      break;
-    case "dark":
-      background = "#000000";
-      break;
-  }
-  const entranceOpacity = animateEntrance ? interpolate2(frame, [0, 15], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-    easing: videoEasing.entrance
-  }) : 1;
-  const brandOpacity = showBranding ? interpolate2(frame, [videoDurations.brandReveal, videoDurations.brandReveal + 15], [0, 0.3], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp"
-  }) : 0;
-  return /* @__PURE__ */ jsxDEV2("div", {
-    style: {
-      width,
-      height,
-      background,
-      position: "relative",
-      overflow: "hidden",
-      opacity: entranceOpacity
-    },
-    children: [
-      variant === "gradient" && /* @__PURE__ */ jsxDEV2("div", {
-        style: {
-          position: "absolute",
-          top: "-20%",
-          right: "-10%",
-          width: "50%",
-          height: "50%",
-          background: `radial-gradient(circle, ${primaryColor}15 0%, transparent 70%)`,
-          borderRadius: "50%",
-          pointerEvents: "none"
-        }
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV2("div", {
-        style: {
-          position: "absolute",
-          left: safeZone.horizontal,
-          top: safeZone.vertical,
-          width: safeZone.contentWidth,
-          height: safeZone.contentHeight,
-          display: "flex",
-          flexDirection: "column"
-        },
-        children
-      }, undefined, false, undefined, this),
-      showBranding && /* @__PURE__ */ jsxDEV2("div", {
-        style: {
-          position: "absolute",
-          bottom: safeZone.vertical / 2,
-          right: safeZone.horizontal,
-          opacity: brandOpacity,
-          color: isDark ? "#ffffff" : "#000000",
-          fontSize: Math.round(16 * (width / 1920)),
-          fontWeight: 500,
-          letterSpacing: 1
-        },
-        children: "ContractSpec"
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-};
-
-// src/compositions/primitives/progress-bar.tsx
-import { useCurrentFrame as useCurrentFrame3, useVideoConfig as useVideoConfig3 } from "remotion";
-import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
-var ProgressBar = ({
-  height = 4,
-  color = defaultVideoTheme.colors.primary,
-  backgroundColor = "rgba(255,255,255,0.1)",
-  position = "bottom"
-}) => {
-  const frame = useCurrentFrame3();
-  const { durationInFrames, width } = useVideoConfig3();
-  const progress = frame / durationInFrames;
-  return /* @__PURE__ */ jsxDEV3("div", {
-    style: {
-      position: "absolute",
-      [position]: 0,
-      left: 0,
-      width,
-      height,
-      backgroundColor,
-      zIndex: 100
-    },
-    children: /* @__PURE__ */ jsxDEV3("div", {
-      style: {
-        width: `${progress * 100}%`,
-        height: "100%",
-        backgroundColor: color,
-        transition: "none"
-      }
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
-};
-
-// src/compositions/social-clip.tsx
-import {
-  AbsoluteFill,
-  interpolate as interpolate3,
-  Sequence,
-  useCurrentFrame as useCurrentFrame4,
-  useVideoConfig as useVideoConfig4
-} from "remotion";
-import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
-var SocialClip = ({
-  hook,
-  message,
-  points = [],
-  cta = "Learn more",
-  ctaUrl = "contractspec.dev",
-  accentColor
-}) => {
-  const { durationInFrames, width, height } = useVideoConfig4();
-  const theme = defaultVideoTheme;
-  const accent = accentColor ?? theme.colors.accent;
-  const isPortrait = height > width;
-  const HOOK_DURATION = 75;
-  const MESSAGE_START = 60;
-  const POINTS_START = MESSAGE_START + 60;
-  const CTA_START = durationInFrames - 90;
-  return /* @__PURE__ */ jsxDEV4(AbsoluteFill, {
-    children: [
-      /* @__PURE__ */ jsxDEV4(BrandFrame, {
-        variant: "gradient",
-        showBranding: true,
-        children: /* @__PURE__ */ jsxDEV4("div", {
-          style: {
-            flex: 1,
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
-            alignItems: "center",
-            gap: isPortrait ? 48 : 32,
-            textAlign: "center",
-            padding: isPortrait ? "0 20px" : 0
-          },
-          children: [
-            /* @__PURE__ */ jsxDEV4(Sequence, {
-              from: 0,
-              durationInFrames: HOOK_DURATION + 30,
-              children: /* @__PURE__ */ jsxDEV4("div", {
-                style: { width: "100%" },
-                children: /* @__PURE__ */ jsxDEV4(AnimatedText, {
-                  text: hook,
-                  variant: "title",
-                  enterAt: 5,
-                  exitAt: HOOK_DURATION,
-                  color: "#ffffff",
-                  align: "center"
-                }, undefined, false, undefined, this)
-              }, undefined, false, undefined, this)
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV4(Sequence, {
-              from: MESSAGE_START,
-              children: /* @__PURE__ */ jsxDEV4("div", {
-                style: { width: "100%" },
-                children: /* @__PURE__ */ jsxDEV4(AnimatedText, {
-                  text: message,
-                  variant: isPortrait ? "subheading" : "heading",
-                  enterAt: 0,
-                  color: "#ffffff",
-                  align: "center"
-                }, undefined, false, undefined, this)
-              }, undefined, false, undefined, this)
-            }, undefined, false, undefined, this),
-            points.length > 0 && /* @__PURE__ */ jsxDEV4(Sequence, {
-              from: POINTS_START,
-              children: /* @__PURE__ */ jsxDEV4("div", {
-                style: {
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: 16,
-                  alignItems: isPortrait ? "flex-start" : "center",
-                  width: "100%",
-                  maxWidth: isPortrait ? "100%" : "80%",
-                  marginTop: 16
-                },
-                children: points.map((point, i) => /* @__PURE__ */ jsxDEV4(PointItem, {
-                  text: point,
-                  index: i,
-                  startFrame: i * 15,
-                  accent
-                }, point, false, undefined, this))
-              }, undefined, false, undefined, this)
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV4(Sequence, {
-              from: CTA_START,
-              children: /* @__PURE__ */ jsxDEV4(CTABlock, {
-                cta,
-                url: ctaUrl,
-                accent
-              }, undefined, false, undefined, this)
-            }, undefined, false, undefined, this)
-          ]
-        }, undefined, true, undefined, this)
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV4(ProgressBar, {
-        color: accent
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-};
-var PointItem = ({ text, startFrame, accent }) => {
-  const frame = useCurrentFrame4();
-  const opacity = interpolate3(frame, [startFrame, startFrame + 12], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp"
-  });
-  const translateX = interpolate3(frame, [startFrame, startFrame + 15], [-30, 0], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-    easing: videoEasing.entrance
-  });
-  return /* @__PURE__ */ jsxDEV4("div", {
-    style: {
-      opacity,
-      transform: `translateX(${translateX}px)`,
-      display: "flex",
-      alignItems: "center",
-      gap: 16,
-      fontSize: 28,
-      color: "#ffffff"
-    },
-    children: [
-      /* @__PURE__ */ jsxDEV4("div", {
-        style: {
-          width: 8,
-          height: 8,
-          borderRadius: "50%",
-          backgroundColor: accent,
-          flexShrink: 0
-        }
-      }, undefined, false, undefined, this),
-      text
-    ]
-  }, undefined, true, undefined, this);
-};
-var CTABlock = ({ cta, url, accent }) => {
-  const frame = useCurrentFrame4();
-  const opacity = interpolate3(frame, [0, 15], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp"
-  });
-  const scale = interpolate3(frame, [0, 18], [0.9, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-    easing: videoEasing.emphasis
-  });
-  return /* @__PURE__ */ jsxDEV4("div", {
-    style: {
-      opacity,
-      transform: `scale(${scale})`,
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      gap: 12,
-      marginTop: 24
-    },
-    children: [
-      /* @__PURE__ */ jsxDEV4("div", {
-        style: {
-          backgroundColor: accent,
-          color: "#ffffff",
-          padding: "16px 48px",
-          borderRadius: 12,
-          fontSize: 28,
-          fontWeight: 600
-        },
-        children: cta
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV4("div", {
-        style: { color: "rgba(255,255,255,0.5)", fontSize: 20 },
-        children: url
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-};
-export {
-  SocialClip
-};
+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};