@democraft/remotion 0.1.0-beta.0

package/dist/chunk-TWKRXLNL.js

@@ -0,0 +1,684 @@
+import {
+  createProductDemoVideoProps
+} from "./chunk-RINGSQ6X.js";
+
+// src/stage.ts
+import React from "react";
+import { Img, OffthreadVideo, interpolate, staticFile } from "remotion";
+
+// src/utils.ts
+function active(track, frame) {
+  return frame >= track.fromFrame && frame < track.fromFrame + track.durationInFrames;
+}
+function lerp(from, to, progress) {
+  return from + (to - from) * progress;
+}
+function smoothstep(value) {
+  return value * value * (3 - 2 * value);
+}
+
+// src/camera.ts
+function makeCamera(scale, focusX, focusY) {
+  return {
+    scale,
+    focusX,
+    focusY,
+    translateX: 720 / scale - focusX,
+    translateY: 450 / scale - focusY
+  };
+}
+function identityCamera() {
+  return makeCamera(1, 720, 450);
+}
+function cameraStateAt(timeline, frame) {
+  const tracks = [...timeline.camera].sort((a, b) => a.fromFrame - b.fromFrame);
+  let index = -1;
+  for (let cursor = 0; cursor < tracks.length; cursor += 1) {
+    if (frame >= tracks[cursor].fromFrame) index = cursor;
+  }
+  if (index === -1) return identityCamera();
+  const track = tracks[index];
+  const previous = index > 0 ? cameraTarget(tracks[index - 1]) : identityCamera();
+  const next = cameraTarget(track);
+  const progress = smoothstep(
+    Math.min(
+      1,
+      Math.max(0, (frame - track.fromFrame) / track.durationInFrames)
+    )
+  );
+  return makeCamera(
+    lerp(previous.scale, next.scale, progress),
+    lerp(previous.focusX, next.focusX, progress),
+    lerp(previous.focusY, next.focusY, progress)
+  );
+}
+function cameraTarget(track) {
+  if (!track?.boundingBox || track.kind === "establish")
+    return identityCamera();
+  const padding = 88;
+  const scale = Math.min(
+    1.32,
+    Math.max(
+      1,
+      Math.min(
+        1440 / (track.boundingBox.width + padding * 2),
+        900 / (track.boundingBox.height + padding * 2)
+      )
+    )
+  );
+  const focusX = track.boundingBox.x + track.boundingBox.width / 2;
+  const focusY = track.boundingBox.y + track.boundingBox.height / 2;
+  return makeCamera(scale, focusX, focusY);
+}
+function cameraTransform(camera, stage) {
+  const scale = stage.scale * camera.scale;
+  return `matrix(${scale}, 0, 0, ${scale}, ${stage.x + camera.translateX * scale}, ${stage.y + camera.translateY * scale})`;
+}
+
+// src/stage.ts
+var DEFAULT_CAPTURE = { width: 1920, height: 1080 };
+function stageLayout(width, height, capture = DEFAULT_CAPTURE) {
+  const scale = Math.min(width / capture.width, height / capture.height);
+  return {
+    scale,
+    x: (width - capture.width * scale) / 2,
+    y: (height - capture.height * scale) / 2
+  };
+}
+function transformedBox(box, camera, stage) {
+  const scale = stage.scale * camera.scale;
+  return {
+    x: stage.x + (box.x + camera.translateX) * scale,
+    y: stage.y + (box.y + camera.translateY) * scale,
+    width: box.width * scale,
+    height: box.height * scale
+  };
+}
+function imageStyle(opacity, capture = DEFAULT_CAPTURE) {
+  const dsf = capture.deviceScaleFactor ?? 1;
+  return {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: capture.width * dsf,
+    height: capture.height * dsf,
+    // Host styles such as Tailwind's `img { max-width: 100% }` must not clamp
+    // the native DPR-sized bitmap before the compensating transform runs.
+    maxWidth: "none",
+    maxHeight: "none",
+    transform: `scale(${1 / dsf})`,
+    transformOrigin: "0 0",
+    objectFit: "contain",
+    opacity
+  };
+}
+function currentStep(steps, frame) {
+  return [...steps].reverse().find((step) => frame >= step.fromFrame);
+}
+function firstScreenshot(sources) {
+  return Object.values(sources)[0];
+}
+function previousRenderStep(steps, step) {
+  const index = step ? steps.findIndex((item) => item.stepId === step.stepId) : -1;
+  return index > 0 ? steps[index - 1] : void 0;
+}
+function nextRenderStep(steps, step) {
+  const index = step ? steps.findIndex((item) => item.stepId === step.stepId) : -1;
+  return index >= 0 && index < steps.length - 1 ? steps[index + 1] : void 0;
+}
+function screenshotForStep(sources, step) {
+  return step ? sources[step.stepId] : firstScreenshot(sources);
+}
+function stageMediaState(steps, sources, frame) {
+  const step = currentStep(steps, frame);
+  if (!step) {
+    return {
+      currentSrc: firstScreenshot(sources),
+      currentOpacity: 1,
+      previousOpacity: 0
+    };
+  }
+  if (step.kind !== "timeline.transition" || step.durationInFrames <= 1) {
+    return {
+      currentSrc: screenshotForStep(sources, step),
+      currentOpacity: 1,
+      previousOpacity: 0
+    };
+  }
+  const progress = interpolate(
+    frame,
+    [step.fromFrame, step.fromFrame + step.durationInFrames],
+    [0, 1],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+  );
+  return {
+    currentSrc: screenshotForStep(sources, nextRenderStep(steps, step) ?? step),
+    currentOpacity: progress,
+    previousSrc: screenshotForStep(sources, previousRenderStep(steps, step)),
+    previousOpacity: 1 - progress
+  };
+}
+function Backdrop() {
+  return React.createElement("div", {
+    style: {
+      position: "absolute",
+      inset: 0,
+      background: "linear-gradient(135deg, #10131a 0%, #18202b 52%, #0d1118 100%)"
+    }
+  });
+}
+function StageMedia({
+  camera,
+  capture = DEFAULT_CAPTURE,
+  frame,
+  recordingSrc,
+  screenshotSrcByStepId,
+  stage,
+  steps
+}) {
+  const media = stageMediaState(steps, screenshotSrcByStepId, frame);
+  return React.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: stage.x,
+        top: stage.y,
+        width: capture.width * stage.scale,
+        height: capture.height * stage.scale,
+        borderRadius: 18,
+        boxShadow: "0 28px 90px rgba(0,0,0,.35)",
+        overflow: "hidden"
+      }
+    },
+    React.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          width: capture.width,
+          height: capture.height,
+          transform: cameraTransform(camera, { ...stage, x: 0, y: 0 }),
+          transformOrigin: "0 0"
+        }
+      },
+      recordingSrc ? React.createElement(OffthreadVideo, {
+        muted: true,
+        src: staticFile(recordingSrc),
+        style: imageStyle(1, capture)
+      }) : null,
+      recordingSrc ? null : media.previousSrc && media.previousOpacity > 0 ? React.createElement(Img, {
+        src: media.previousSrc,
+        style: imageStyle(media.previousOpacity, capture)
+      }) : null,
+      !recordingSrc && media.currentSrc ? React.createElement(Img, {
+        src: media.currentSrc,
+        style: imageStyle(media.currentOpacity, capture)
+      }) : null
+    )
+  );
+}
+
+// src/overlays.ts
+import React2 from "react";
+import { interpolate as interpolate3, Sequence } from "remotion";
+
+// src/components/remocn/soft-blur-in.tsx
+import { Easing, interpolate as interpolate2, useCurrentFrame } from "remotion";
+import { jsx } from "react/jsx-runtime";
+function SoftBlurIn({
+  text,
+  blur = 12,
+  fontSize = 72,
+  color = "#171717",
+  fontWeight = 600,
+  speed = 1,
+  className
+}) {
+  const frame = useCurrentFrame() * speed;
+  const chars = Array.from(text);
+  const charDurationFrames = 27;
+  const staggerFrames = 1;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "transparent"
+      },
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className,
+          style: {
+            fontSize,
+            fontWeight,
+            color,
+            letterSpacing: "-0.05em",
+            fontFamily: "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif"
+          },
+          children: chars.map((char, i) => {
+            const local = frame - i * staggerFrames;
+            const easing = Easing.bezier(0.22, 1, 0.36, 1);
+            const opacity = interpolate2(local, [0, charDurationFrames], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+              easing
+            });
+            const y = interpolate2(local, [0, charDurationFrames], [16, 0], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+              easing
+            });
+            const blurAmount = interpolate2(
+              local,
+              [0, charDurationFrames],
+              [blur, 0],
+              { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing }
+            );
+            return /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  display: "inline-block",
+                  whiteSpace: "pre",
+                  backfaceVisibility: "hidden",
+                  transformOrigin: "50% 55%",
+                  opacity,
+                  transform: `translateY(${y}px)`,
+                  filter: `blur(${blurAmount}px)`
+                },
+                children: char
+              },
+              i
+            );
+          })
+        }
+      )
+    }
+  );
+}
+
+// src/overlays.ts
+function overlayOpacity(overlay, frame) {
+  return interpolate3(
+    frame,
+    [
+      overlay.fromFrame,
+      overlay.fromFrame + 12,
+      overlay.fromFrame + overlay.durationInFrames - 12,
+      overlay.fromFrame + overlay.durationInFrames
+    ],
+    [0, 1, 1, 0],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+  );
+}
+function calloutStyle(box, opacity, backgroundColor) {
+  return {
+    position: "absolute",
+    left: Math.min(box.x + box.width + 24, 1920 - 460),
+    top: Math.max(42, box.y),
+    width: 380,
+    padding: 22,
+    borderRadius: 14,
+    backgroundColor,
+    color: "white",
+    boxShadow: "0 24px 70px rgba(0,0,0,.32)",
+    opacity
+  };
+}
+function OverlayLayer({
+  camera,
+  frame,
+  registry,
+  stage,
+  timeline
+}) {
+  return React2.createElement(
+    React2.Fragment,
+    null,
+    ...timeline.overlays.filter((overlay) => active(overlay, frame)).map((overlay) => {
+      if (overlay.kind === "caption") {
+        const opacity2 = overlayOpacity(overlay, frame);
+        const Component2 = resolveCaptionComponent(
+          registry,
+          overlay.renderer
+        );
+        return React2.createElement(Component2, {
+          key: overlay.id,
+          opacity: opacity2,
+          overlay
+        });
+      }
+      if (overlay.kind === "visual") {
+        const Component2 = resolveVisualComponent(registry, overlay.visual);
+        return React2.createElement(
+          Sequence,
+          {
+            key: overlay.id,
+            from: overlay.fromFrame,
+            durationInFrames: overlay.durationInFrames,
+            name: overlay.visual
+          },
+          React2.createElement(Component2, overlay.props)
+        );
+      }
+      const opacity = overlayOpacity(overlay, frame);
+      const rawBox = overlay.boundingBox ?? {
+        x: 40,
+        y: 40,
+        width: 0,
+        height: 0
+      };
+      const box = transformedBox(rawBox, camera, stage);
+      const Component = resolveCalloutComponent(registry, overlay.renderer);
+      return React2.createElement(Component, {
+        box,
+        key: overlay.id,
+        opacity,
+        overlay
+      });
+    })
+  );
+}
+function resolveCaptionComponent(registry, renderer) {
+  if (!renderer) return registry.captions["motion.caption"] ?? Caption;
+  const component = registry.captions[renderer];
+  if (component) return component;
+  throw unknownRenderer("caption", renderer, Object.keys(registry.captions));
+}
+function resolveCalloutComponent(registry, renderer) {
+  if (!renderer) return registry.callouts["motion.callout"] ?? Callout;
+  const component = registry.callouts[renderer];
+  if (component) return component;
+  throw unknownRenderer("callout", renderer, Object.keys(registry.callouts));
+}
+function resolveVisualComponent(registry, visual) {
+  const component = registry.visuals[visual];
+  if (component) return component;
+  throw unknownRenderer("visual", visual, Object.keys(registry.visuals));
+}
+function unknownRenderer(kind, renderer, registered) {
+  return new Error(
+    `Unknown ${kind} renderer "${renderer}". Registered renderers: ${registered.sort().join(", ") || "none"}.`
+  );
+}
+function Caption({ opacity, overlay }) {
+  return React2.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: "50%",
+        bottom: 74,
+        transform: "translateX(-50%)",
+        maxWidth: 980,
+        padding: "18px 26px",
+        borderRadius: 14,
+        backgroundColor: "rgba(10,14,20,.84)",
+        color: "white",
+        font: "500 34px Inter, system-ui, sans-serif",
+        opacity
+      }
+    },
+    overlay.text
+  );
+}
+function KineticCaption({ opacity, overlay }) {
+  return React2.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: "50%",
+        bottom: 96,
+        transform: `translateX(-50%) scale(${0.96 + opacity * 0.04})`,
+        width: 980,
+        maxWidth: 980,
+        height: 76,
+        padding: "16px 24px",
+        borderRadius: 16,
+        backgroundColor: "rgba(10,14,20,.72)",
+        color: "white",
+        font: "800 38px Inter, system-ui, sans-serif",
+        letterSpacing: 0,
+        opacity,
+        textShadow: "0 18px 50px rgba(0,0,0,.42)"
+      }
+    },
+    React2.createElement(SoftBlurIn, {
+      blur: 10,
+      color: "white",
+      fontSize: 38,
+      fontWeight: 800,
+      speed: 1.2,
+      text: overlay.text
+    })
+  );
+}
+function Callout({ box, opacity, overlay }) {
+  return React2.createElement(
+    "div",
+    {
+      style: calloutStyle(box, opacity, "rgba(10,14,20,.88)")
+    },
+    React2.createElement(
+      "strong",
+      { style: { display: "block", color: "#79e3c7", fontSize: 26 } },
+      overlay.title
+    ),
+    overlay.description ? React2.createElement(
+      "p",
+      { style: { margin: "10px 0 0", fontSize: 21, lineHeight: 1.45 } },
+      overlay.description
+    ) : null
+  );
+}
+function GlassCallout({
+  box,
+  opacity,
+  overlay
+}) {
+  return React2.createElement(
+    "div",
+    {
+      style: {
+        ...calloutStyle(box, opacity, "rgba(255,255,255,.86)"),
+        color: "#121722",
+        fontFamily: "Inter, system-ui, sans-serif"
+      }
+    },
+    React2.createElement(
+      "strong",
+      { style: { display: "block", color: "#185eaa", fontSize: 26 } },
+      overlay.title
+    ),
+    overlay.description ? React2.createElement(
+      "p",
+      { style: { margin: "10px 0 0", fontSize: 21, lineHeight: 1.45 } },
+      overlay.description
+    ) : null
+  );
+}
+var defaultVisualRegistry = {
+  captions: {
+    "motion.caption": Caption,
+    "remocn.kinetic-title": KineticCaption
+  },
+  callouts: {
+    "motion.callout": Callout,
+    "remocn.glass-callout": GlassCallout
+  },
+  visuals: {}
+};
+
+// src/composition.ts
+import React4 from "react";
+import { AbsoluteFill, useCurrentFrame as useCurrentFrame2, useVideoConfig } from "remotion";
+
+// src/cursor.ts
+import React3 from "react";
+import { interpolate as interpolate4 } from "remotion";
+var CLICK_PULSE_FRAMES = 28;
+function TargetAndCursorLayer({
+  camera,
+  frame,
+  stage,
+  timeline
+}) {
+  return React3.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        width: 1440,
+        height: 900,
+        transform: cameraTransform(camera, stage),
+        transformOrigin: "0 0"
+      }
+    },
+    ...timeline.cursor.filter((track) => track.point && frame >= track.fromFrame).map(
+      (track) => React3.createElement(ClickRipple, {
+        key: track.id,
+        track,
+        frame
+      })
+    )
+  );
+}
+function ClickRipple({
+  track,
+  frame
+}) {
+  if (!track.point) return null;
+  const local = frame - track.fromFrame;
+  if (local >= CLICK_PULSE_FRAMES) return null;
+  const progress = local / CLICK_PULSE_FRAMES;
+  const dotOpacity = interpolate4(progress, [0, 0.2, 0.7, 1], [0, 1, 1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  const ringScale = interpolate4(progress, [0, 1], [0.4, 2.2], {
+    extrapolateRight: "clamp"
+  });
+  const ringOpacity = interpolate4(progress, [0, 0.3, 1], [0, 0.55, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  const size = 26;
+  return React3.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: track.point.x,
+        top: track.point.y,
+        width: 0,
+        height: 0
+      }
+    },
+    React3.createElement("div", {
+      style: {
+        position: "absolute",
+        left: -size / 2,
+        top: -size / 2,
+        width: size,
+        height: size,
+        borderRadius: 999,
+        backgroundColor: "#79e3c7",
+        opacity: dotOpacity,
+        boxShadow: "0 0 0 6px rgba(121,227,199,.25)"
+      }
+    }),
+    React3.createElement("div", {
+      style: {
+        position: "absolute",
+        left: -size / 2,
+        top: -size / 2,
+        width: size,
+        height: size,
+        borderRadius: 999,
+        border: "3px solid #79e3c7",
+        transform: `scale(${ringScale})`,
+        opacity: ringOpacity
+      }
+    })
+  );
+}
+
+// src/composition.ts
+var defaultProductDemoProps = createProductDemoVideoProps({
+  manifest: {
+    schemaVersion: "1",
+    demoId: "demo",
+    steps: [],
+    diagnostics: []
+  },
+  timeline: {
+    schemaVersion: "1",
+    demoId: "demo",
+    fps: 60,
+    durationInFrames: 1,
+    scenes: [],
+    camera: [],
+    cursor: [],
+    overlays: []
+  },
+  screenshotSrcByStepId: {}
+});
+function ProductDemoVideo(props) {
+  const frame = useCurrentFrame2();
+  const { width, height } = useVideoConfig();
+  const capture = props.manifest.capture ? {
+    width: props.manifest.capture.width,
+    height: props.manifest.capture.height,
+    deviceScaleFactor: props.manifest.capture.deviceScaleFactor
+  } : void 0;
+  const stage = stageLayout(width, height, capture);
+  const camera = cameraStateAt(props.timeline, frame);
+  const steps = props.timeline.scenes.flatMap((scene) => scene.steps);
+  const registry = props.registry ?? defaultVisualRegistry;
+  return React4.createElement(
+    AbsoluteFill,
+    { style: { backgroundColor: "#10131a" } },
+    React4.createElement(Backdrop),
+    React4.createElement(StageMedia, {
+      camera,
+      capture,
+      frame,
+      recordingSrc: props.recordingSrc,
+      screenshotSrcByStepId: props.screenshotSrcByStepId,
+      stage,
+      steps
+    }),
+    React4.createElement(TargetAndCursorLayer, {
+      camera,
+      frame,
+      stage,
+      timeline: props.timeline
+    }),
+    React4.createElement(OverlayLayer, {
+      camera,
+      frame,
+      registry,
+      stage,
+      timeline: props.timeline
+    })
+  );
+}
+
+export {
+  stageLayout,
+  OverlayLayer,
+  Caption,
+  KineticCaption,
+  Callout,
+  GlassCallout,
+  defaultVisualRegistry,
+  defaultProductDemoProps,
+  ProductDemoVideo
+};