@cueframe/kernel 0.1.0 → 0.1.1

package/dist/_members/primitives/chunk-WPGKIPCO.js

@@ -1,3563 +0,0 @@
-import {
-  frostedGlassWipe,
-  spatialPush
-} from "./chunk-US4YEDAA.js";
-import {
-  DashboardPopulate
-} from "./chunk-KYRDVZST.js";
-import {
-  ACCENT_SOFT,
-  BG,
-  BG_DEEP,
-  BLUE,
-  BORDER,
-  BORDER_STRONG,
-  DANGER,
-  SUCCESS,
-  SURFACE,
-  SURFACE_HI,
-  SYN_COMMENT,
-  SYN_FN,
-  SYN_KEYWORD,
-  SYN_NUMBER,
-  SYN_STRING,
-  SYN_TEXT,
-  TEXT,
-  TEXT_HI,
-  TEXT_MUTED,
-  VIOLET,
-  WARNING
-} from "./chunk-3OMURV6Q.js";
-
-// src/scenes/changelog-bite/index.tsx
-import {
-  AbsoluteFill,
-  Easing,
-  interpolate,
-  spring,
-  useCurrentFrame,
-  useVideoConfig
-} from "remotion";
-import { jsx, jsxs } from "react/jsx-runtime";
-var FONT_FAMILY = "inherit";
-var MONO_FAMILY = "monospace";
-var SOFT = Easing.bezier(0.16, 1, 0.3, 1);
-function ChangelogBite({
-  label = "New",
-  title = "Inline diff view",
-  oldContent,
-  newContent,
-  oldLines,
-  newLines,
-  format = "square",
-  background = BG,
-  cardBackground = SURFACE,
-  accent = ACCENT_SOFT,
-  speed = 1,
-  className
-}) {
-  const frame = useCurrentFrame() * speed;
-  const { fps, durationInFrames } = useVideoConfig();
-  const enterT = interpolate(frame, [0, 10], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-    easing: SOFT
-  });
-  const exitT = interpolate(
-    frame,
-    [durationInFrames - 15, durationInFrames - 1],
-    [0, 1],
-    { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: SOFT }
-  );
-  const cardScale = 0.95 + enterT * 0.05 - exitT * 0.05;
-  const cardOpacity = enterT * (1 - exitT);
-  const wipe = spring({
-    frame: frame - 60,
-    fps,
-    config: { damping: 18, mass: 0.9, stiffness: 90 },
-    durationInFrames: 50
-  });
-  const wipePct = wipe * 100;
-  const isSquare = format === "square";
-  const cardWidth = isSquare ? 880 : 880;
-  const cardHeight = isSquare ? 880 : 1100;
-  const oldNode = oldContent ?? (oldLines && oldLines.length > 0 ? /* @__PURE__ */ jsx(LinesPanel, { lines: oldLines, variant: "old", accent }) : /* @__PURE__ */ jsx(DefaultOldPanel, { accent }));
-  const newNode = newContent ?? (newLines && newLines.length > 0 ? /* @__PURE__ */ jsx(LinesPanel, { lines: newLines, variant: "new", accent }) : /* @__PURE__ */ jsx(DefaultNewPanel, { accent }));
-  return /* @__PURE__ */ jsx(
-    AbsoluteFill,
-    {
-      className,
-      style: {
-        background,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        fontFamily: FONT_FAMILY
-      },
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: {
-            width: cardWidth,
-            height: cardHeight,
-            borderRadius: 56,
-            background: cardBackground,
-            border: `1px solid ${accent}33`,
-            opacity: cardOpacity,
-            transform: `scale(${cardScale})`,
-            transformOrigin: "center",
-            willChange: "transform, opacity",
-            padding: 56,
-            display: "flex",
-            flexDirection: "column",
-            gap: 28,
-            position: "relative",
-            overflow: "hidden"
-          },
-          children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between"
-                },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        color: "rgba(255,255,255,0.55)",
-                        fontSize: 22,
-                        letterSpacing: "0.02em"
-                      },
-                      children: title
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(PulsingPill, { label, color: accent, speed })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  position: "relative",
-                  flex: 1,
-                  borderRadius: 32,
-                  overflow: "hidden",
-                  background: "rgba(8,7,12,0.6)",
-                  border: "1px solid rgba(255,255,255,0.05)"
-                },
-                children: [
-                  /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0 }, children: newNode }),
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        position: "absolute",
-                        inset: 0,
-                        clipPath: `inset(0 ${wipePct}% 0 0)`,
-                        willChange: "clip-path"
-                      },
-                      children: oldNode
-                    }
-                  ),
-                  wipePct > 0 && wipePct < 100 && /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        position: "absolute",
-                        top: 0,
-                        bottom: 0,
-                        left: `calc(${wipePct}% - 60px)`,
-                        width: 120,
-                        background: "linear-gradient(90deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.0) 100%)",
-                        backdropFilter: "blur(18px)",
-                        WebkitBackdropFilter: "blur(18px)",
-                        pointerEvents: "none"
-                      }
-                    }
-                  ),
-                  wipePct > 0 && wipePct < 100 && /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        position: "absolute",
-                        top: 0,
-                        bottom: 0,
-                        left: `${wipePct}%`,
-                        width: 1.5,
-                        background: accent,
-                        opacity: 0.55,
-                        pointerEvents: "none"
-                      }
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  justifyContent: "space-between",
-                  color: "rgba(255,255,255,0.4)",
-                  fontSize: 16,
-                  fontFamily: MONO_FAMILY
-                },
-                children: [
-                  /* @__PURE__ */ jsx("span", { style: { opacity: 1 - wipe }, children: "before" }),
-                  /* @__PURE__ */ jsx("span", { style: { opacity: wipe }, children: "after" })
-                ]
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-}
-function LinesPanel({
-  lines,
-  variant,
-  accent
-}) {
-  const isOld = variant === "old";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        inset: 0,
-        background: isOld ? BG_DEEP : "radial-gradient(ellipse at 50% 30%, rgba(255,179,142,0.10) 0%, rgba(10,9,14,1) 70%)",
-        padding: "44px 52px",
-        fontFamily: MONO_FAMILY,
-        color: isOld ? TEXT_MUTED : TEXT,
-        fontSize: 22,
-        lineHeight: 1.55,
-        whiteSpace: "pre"
-      },
-      children: [
-        lines.map((line, i) => /* @__PURE__ */ jsx("div", { children: line === "" ? "\xA0" : line }, i)),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              marginTop: 24,
-              display: "inline-block",
-              padding: "6px 14px",
-              borderRadius: 999,
-              background: isOld ? `${DANGER}1f` : `${accent}1a`,
-              border: isOld ? `1px solid ${DANGER}59` : `1px solid ${accent}55`,
-              color: isOld ? DANGER : accent,
-              fontSize: 13,
-              letterSpacing: "0.12em",
-              fontWeight: 700
-            },
-            children: isOld ? "BEFORE" : "AFTER"
-          }
-        )
-      ]
-    }
-  );
-}
-function DefaultOldPanel({ accent }) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        inset: 0,
-        background: BG_DEEP,
-        padding: "44px 52px",
-        fontFamily: MONO_FAMILY,
-        color: TEXT_MUTED,
-        fontSize: 22,
-        lineHeight: 1.55,
-        whiteSpace: "pre"
-      },
-      children: [
-        /* @__PURE__ */ jsx("div", { children: "function diff(a, b) {" }),
-        /* @__PURE__ */ jsx("div", { children: "  if (a === b) return null;" }),
-        /* @__PURE__ */ jsx("div", { children: "  return {" }),
-        /* @__PURE__ */ jsx("div", { children: "    before: a," }),
-        /* @__PURE__ */ jsx("div", { children: "    after: b," }),
-        /* @__PURE__ */ jsx("div", { children: "  };" }),
-        /* @__PURE__ */ jsx("div", { children: "}" }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              marginTop: 24,
-              display: "inline-block",
-              padding: "6px 14px",
-              borderRadius: 999,
-              background: `${DANGER}1f`,
-              border: `1px solid ${DANGER}59`,
-              color: DANGER,
-              fontSize: 13,
-              letterSpacing: "0.12em",
-              fontWeight: 700
-            },
-            children: "BEFORE"
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { style: { display: "none" }, children: accent })
-      ]
-    }
-  );
-}
-function DefaultNewPanel({ accent }) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        inset: 0,
-        background: "radial-gradient(ellipse at 50% 30%, rgba(255,179,142,0.10) 0%, rgba(10,9,14,1) 70%)",
-        padding: "44px 52px",
-        fontFamily: MONO_FAMILY,
-        color: TEXT,
-        fontSize: 22,
-        lineHeight: 1.55,
-        whiteSpace: "pre"
-      },
-      children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("span", { style: { color: SYN_KEYWORD }, children: "function" }),
-          " ",
-          /* @__PURE__ */ jsx("span", { style: { color: SYN_FN }, children: "diff" }),
-          "(a, b) {"
-        ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          "  return ",
-          /* @__PURE__ */ jsx("span", { style: { color: SYN_STRING }, children: "visualDiff" }),
-          "(a, b);"
-        ] }),
-        /* @__PURE__ */ jsx("div", { children: "}" }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              marginTop: 24,
-              display: "inline-block",
-              padding: "6px 14px",
-              borderRadius: 999,
-              background: `${accent}1a`,
-              border: `1px solid ${accent}55`,
-              color: accent,
-              fontSize: 13,
-              letterSpacing: "0.12em",
-              fontWeight: 700
-            },
-            children: "AFTER"
-          }
-        )
-      ]
-    }
-  );
-}
-function PulsingPill({
-  label,
-  color,
-  speed
-}) {
-  const frame = useCurrentFrame() * speed;
-  const wave = (Math.sin(frame / 8) + 1) / 2;
-  const dotScale = 0.92 + wave * 0.16;
-  const ringPhase = frame % 60 / 60;
-  const ringScale = 1 + ringPhase * 1.6;
-  const ringOpacity = (1 - ringPhase) * 0.6;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: 12,
-        padding: "10px 18px 10px 14px",
-        borderRadius: 999,
-        background: `${color}1a`,
-        border: `1px solid ${color}55`,
-        color,
-        fontSize: 16,
-        fontWeight: 600,
-        letterSpacing: "0.02em"
-      },
-      children: [
-        /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: 12, height: 12 }, children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                inset: 0,
-                borderRadius: "50%",
-                background: color,
-                opacity: ringOpacity,
-                transform: `scale(${ringScale})`
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                inset: 0,
-                borderRadius: "50%",
-                background: color,
-                transform: `scale(${dotScale})`
-              }
-            }
-          )
-        ] }),
-        label
-      ]
-    }
-  );
-}
-
-// src/scenes/live-code-compilation/index.tsx
-import { useCurrentFrame as useCurrentFrame2 } from "remotion";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var FONT_FAMILY2 = "inherit";
-var MONO_FAMILY2 = "monospace";
-var EVENTS = [
-  {
-    code: "export function Button() {\n  return (\n    <button",
-    ui: {}
-  },
-  { code: "\n      style={{", ui: {} },
-  {
-    code: '\n        background: "#7b93b0",',
-    ui: { background: "#7b93b0" }
-  },
-  {
-    code: '\n        color: "white",',
-    ui: { color: "white" }
-  },
-  {
-    code: '\n        padding: "12px 28px",',
-    ui: { padding: "12px 28px" }
-  },
-  {
-    code: '\n        borderRadius: "999px",',
-    ui: { borderRadius: "999px" }
-  },
-  {
-    code: "\n        fontWeight: 600,",
-    ui: { fontWeight: 600 }
-  },
-  {
-    code: "\n      }}\n    >\n      Ship it\n    </button>\n  );\n}",
-    ui: { label: "Ship it" }
-  }
-];
-var CHARS_PER_FRAME = 1.6;
-var DWELL_FRAMES = 5;
-var INITIAL_OFFSET = 8;
-var TIMELINE = (() => {
-  let cursor = INITIAL_OFFSET;
-  return EVENTS.map((ev) => {
-    const start = cursor;
-    const end = start + Math.ceil(ev.code.length / CHARS_PER_FRAME);
-    cursor = end + DWELL_FRAMES;
-    return { ...ev, start, end };
-  });
-})();
-var TIMELINE_END = TIMELINE[TIMELINE.length - 1].end;
-function highlightLine(line, accentColor) {
-  const tokens = [];
-  const regex = /(\bexport\b|\bfunction\b|\breturn\b)|("[^"]*")|(\b[a-zA-Z_][a-zA-Z0-9_]*)(?=:)|(\{|\}|\(|\)|<|>|\/)|([0-9]+)/g;
-  let lastIndex = 0;
-  let m = regex.exec(line);
-  while (m !== null) {
-    if (m.index > lastIndex) {
-      tokens.push({
-        text: line.slice(lastIndex, m.index),
-        color: SYN_TEXT
-      });
-    }
-    if (m[1]) tokens.push({ text: m[1], color: SYN_KEYWORD });
-    else if (m[2]) tokens.push({ text: m[2], color: SYN_STRING });
-    else if (m[3]) tokens.push({ text: m[3], color: accentColor });
-    else if (m[4]) tokens.push({ text: m[4], color: SYN_COMMENT });
-    else if (m[5]) tokens.push({ text: m[5], color: SYN_NUMBER });
-    lastIndex = regex.lastIndex;
-    m = regex.exec(line);
-  }
-  if (lastIndex < line.length) {
-    tokens.push({ text: line.slice(lastIndex), color: SYN_TEXT });
-  }
-  return tokens;
-}
-function LiveCodeCompilation({
-  accentColor = "#7b93b0",
-  speed = 1,
-  className
-}) {
-  const frame = useCurrentFrame2() * speed;
-  let visibleCode = "";
-  const ui = {};
-  for (const t of TIMELINE) {
-    if (frame < t.start) break;
-    const elapsed = frame - t.start;
-    const charsTyped = Math.min(
-      t.code.length,
-      Math.floor(elapsed * CHARS_PER_FRAME)
-    );
-    visibleCode += t.code.slice(0, charsTyped);
-    if (frame >= t.end) Object.assign(ui, t.ui);
-  }
-  const lines = visibleCode.split("\n");
-  const buttonLabel = ui.label ?? "Button";
-  const cursorVisible = frame < TIMELINE_END && Math.floor(frame / 12) % 2 === 0;
-  const lastLineIndex = lines.length - 1;
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      className,
-      style: {
-        position: "absolute",
-        inset: 0,
-        background: BG,
-        overflow: "hidden",
-        fontFamily: FONT_FAMILY2,
-        display: "flex"
-      },
-      children: [
-        /* @__PURE__ */ jsx2(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              inset: 0,
-              background: `radial-gradient(ellipse at 20% 30%, ${BLUE}14, transparent 60%), radial-gradient(ellipse at 80% 70%, ${VIOLET}0f, transparent 60%)`
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          "div",
-          {
-            style: {
-              flex: 1,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              padding: 48,
-              position: "relative"
-            },
-            children: /* @__PURE__ */ jsx2(
-              "div",
-              {
-                style: {
-                  width: "100%",
-                  maxWidth: 560,
-                  position: "relative",
-                  borderRadius: 14,
-                  padding: 1,
-                  background: "linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.06) 100%)"
-                },
-                children: /* @__PURE__ */ jsxs2(
-                  "div",
-                  {
-                    style: {
-                      borderRadius: 13,
-                      background: "rgba(12,12,14,0.85)",
-                      backdropFilter: "blur(20px)",
-                      overflow: "hidden"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsxs2(
-                        "div",
-                        {
-                          style: {
-                            height: 38,
-                            display: "flex",
-                            alignItems: "center",
-                            padding: "0 16px",
-                            borderBottom: "1px solid rgba(255,255,255,0.06)",
-                            gap: 8
-                          },
-                          children: [
-                            /* @__PURE__ */ jsx2(
-                              "div",
-                              {
-                                style: {
-                                  width: 11,
-                                  height: 11,
-                                  borderRadius: 6,
-                                  background: "#ff5f57",
-                                  opacity: 0.6
-                                }
-                              }
-                            ),
-                            /* @__PURE__ */ jsx2(
-                              "div",
-                              {
-                                style: {
-                                  width: 11,
-                                  height: 11,
-                                  borderRadius: 6,
-                                  background: "#febc2e",
-                                  opacity: 0.6
-                                }
-                              }
-                            ),
-                            /* @__PURE__ */ jsx2(
-                              "div",
-                              {
-                                style: {
-                                  width: 11,
-                                  height: 11,
-                                  borderRadius: 6,
-                                  background: "#28c840",
-                                  opacity: 0.6
-                                }
-                              }
-                            ),
-                            /* @__PURE__ */ jsx2(
-                              "div",
-                              {
-                                style: {
-                                  marginLeft: 12,
-                                  fontSize: 12,
-                                  color: "rgba(255,255,255,0.45)",
-                                  fontFamily: MONO_FAMILY2
-                                },
-                                children: "Button.tsx"
-                              }
-                            )
-                          ]
-                        }
-                      ),
-                      /* @__PURE__ */ jsx2(
-                        "div",
-                        {
-                          style: {
-                            padding: "20px 22px",
-                            fontFamily: MONO_FAMILY2,
-                            fontSize: 14,
-                            lineHeight: 1.65,
-                            color: SYN_TEXT,
-                            minHeight: 360
-                          },
-                          children: lines.map((line, i) => {
-                            const tokens = highlightLine(line, accentColor);
-                            const isLast = i === lastLineIndex;
-                            return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", whiteSpace: "pre" }, children: [
-                              /* @__PURE__ */ jsx2(
-                                "span",
-                                {
-                                  style: {
-                                    width: 28,
-                                    color: "rgba(255,255,255,0.2)",
-                                    userSelect: "none",
-                                    flexShrink: 0
-                                  },
-                                  children: i + 1
-                                }
-                              ),
-                              /* @__PURE__ */ jsxs2("span", { children: [
-                                tokens.length === 0 ? /* @__PURE__ */ jsx2("span", { children: " " }) : tokens.map((t, j) => /* @__PURE__ */ jsx2("span", { style: { color: t.color }, children: t.text }, j)),
-                                isLast && cursorVisible && /* @__PURE__ */ jsx2(
-                                  "span",
-                                  {
-                                    style: {
-                                      display: "inline-block",
-                                      width: 8,
-                                      height: 16,
-                                      marginLeft: 1,
-                                      verticalAlign: "text-bottom",
-                                      background: accentColor
-                                    }
-                                  }
-                                )
-                              ] })
-                            ] }, i);
-                          })
-                        }
-                      )
-                    ]
-                  }
-                )
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxs2(
-          "div",
-          {
-            style: {
-              flex: 1,
-              position: "relative",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              borderLeft: "1px solid rgba(255,255,255,0.05)",
-              background: "repeating-conic-gradient(rgba(255,255,255,0.018) 0deg 90deg, transparent 90deg 180deg) 0 0 / 28px 28px"
-            },
-            children: [
-              /* @__PURE__ */ jsxs2(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    top: 24,
-                    left: 24,
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 8
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx2(
-                      "div",
-                      {
-                        style: {
-                          width: 8,
-                          height: 8,
-                          borderRadius: 4,
-                          background: SUCCESS
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ jsx2(
-                      "div",
-                      {
-                        style: {
-                          fontSize: 11,
-                          fontFamily: MONO_FAMILY2,
-                          color: "rgba(255,255,255,0.5)",
-                          textTransform: "uppercase",
-                          letterSpacing: "0.08em"
-                        },
-                        children: "Preview \xB7 HMR"
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx2(
-                "button",
-                {
-                  type: "button",
-                  style: {
-                    background: ui.background ?? "rgba(255,255,255,0.06)",
-                    color: ui.color ?? "rgba(255,255,255,0.4)",
-                    padding: ui.padding ?? "10px 20px",
-                    borderRadius: ui.borderRadius ?? "4px",
-                    fontWeight: ui.fontWeight ?? 400,
-                    fontSize: 18,
-                    fontFamily: FONT_FAMILY2,
-                    border: ui.background ? "none" : "1px dashed rgba(255,255,255,0.15)",
-                    cursor: "pointer",
-                    transition: "none"
-                  },
-                  children: buttonLabel
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-
-// src/scenes/product-launch-trailer/index.tsx
-import {
-  AbsoluteFill as AbsoluteFill2,
-  Easing as Easing2,
-  interpolate as interpolate2,
-  random,
-  Sequence,
-  spring as spring2,
-  useCurrentFrame as useCurrentFrame3,
-  useVideoConfig as useVideoConfig2
-} from "remotion";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var FONT_FAMILY3 = "inherit";
-var MONO_FAMILY3 = "monospace";
-var SOFT2 = Easing2.bezier(0.16, 1, 0.3, 1);
-var T = {
-  pulseStart: 0,
-  pulseEnd: 50,
-  zoomStart: 38,
-  zoomEnd: 78,
-  shellStart: 70,
-  flyStart: 110,
-  flyEnd: 200,
-  outroStart: 190,
-  outroEnd: 240
-};
-function ProductLaunchTrailer({
-  logoLabel = "R",
-  productName = "Remocn",
-  versionLabel = "v1.0 is live",
-  accentPeach = ACCENT_SOFT,
-  accentLavender = VIOLET,
-  accentMint = SUCCESS,
-  background = BG,
-  speed = 1,
-  className
-}) {
-  return /* @__PURE__ */ jsxs3(AbsoluteFill2, { className, style: { background }, children: [
-    /* @__PURE__ */ jsx3(Sequence, { from: T.pulseStart, durationInFrames: T.zoomEnd - T.pulseStart, children: /* @__PURE__ */ jsx3(
-      PulseLogo,
-      {
-        label: logoLabel,
-        name: productName,
-        accentLavender,
-        background,
-        speed
-      }
-    ) }),
-    /* @__PURE__ */ jsx3(Sequence, { from: T.shellStart, durationInFrames: T.outroEnd - T.shellStart, children: /* @__PURE__ */ jsx3(
-      AppShellFlyover,
-      {
-        accentPeach,
-        accentLavender,
-        accentMint,
-        background,
-        speed,
-        flyStartLocal: T.flyStart - T.shellStart,
-        flyEndLocal: T.flyEnd - T.shellStart,
-        outroStartLocal: T.outroStart - T.shellStart
-      }
-    ) }),
-    /* @__PURE__ */ jsx3(
-      Sequence,
-      {
-        from: T.outroStart,
-        durationInFrames: T.outroEnd - T.outroStart + 1,
-        children: /* @__PURE__ */ jsx3(
-          Outro,
-          {
-            versionLabel,
-            accentMint,
-            accentPeach,
-            accentLavender,
-            speed
-          }
-        )
-      }
-    )
-  ] });
-}
-function PulseLogo({
-  label,
-  name,
-  accentLavender,
-  background,
-  speed
-}) {
-  const frame = useCurrentFrame3() * speed;
-  const localDuration = T.zoomEnd - T.pulseStart;
-  const pulse = (Math.sin(frame / 6) + 1) / 2;
-  const zoomLocal = Math.max(0, frame - (T.zoomStart - T.pulseStart));
-  const zoomDuration = T.zoomEnd - T.zoomStart;
-  const zoom = interpolate2(zoomLocal, [0, zoomDuration], [1, 14], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-    easing: Easing2.bezier(0.7, 0, 0.84, 0)
-  });
-  const fade = interpolate2(zoomLocal, [zoomDuration * 0.5, zoomDuration], [1, 0], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp"
-  });
-  const baseScale = 0.96 + pulse * 0.04;
-  const glowAlpha = 0.35 + pulse * 0.4;
-  const labelOpacity = interpolate2(frame, [4, 18], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp"
-  });
-  return /* @__PURE__ */ jsxs3(
-    AbsoluteFill2,
-    {
-      style: {
-        // Exposure lift — the scene graded ~1.5 stops under launch-video norm.
-        filter: "brightness(1.28) contrast(1.03)",
-        background,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      },
-      children: [
-        /* @__PURE__ */ jsxs3(
-          "div",
-          {
-            style: {
-              transform: `scale(${zoom * baseScale})`,
-              opacity: fade,
-              willChange: "transform, opacity",
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              gap: 28
-            },
-            children: [
-              /* @__PURE__ */ jsx3(
-                "div",
-                {
-                  style: {
-                    width: 200,
-                    height: 200,
-                    borderRadius: 56,
-                    background: "linear-gradient(160deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 100%)",
-                    border: `1px solid ${accentLavender}55`,
-                    boxShadow: `0 0 ${60 + pulse * 80}px ${accentLavender}${toHex(
-                      glowAlpha
-                    )}, inset 0 1px 0 rgba(255,255,255,0.12)`,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    color: "white",
-                    fontFamily: FONT_FAMILY3,
-                    fontSize: 112,
-                    fontWeight: 700,
-                    letterSpacing: "-0.06em"
-                  },
-                  children: label
-                }
-              ),
-              /* @__PURE__ */ jsx3(
-                "div",
-                {
-                  style: {
-                    opacity: labelOpacity,
-                    color: "rgba(255,255,255,0.92)",
-                    fontFamily: FONT_FAMILY3,
-                    fontSize: 28,
-                    fontWeight: 500,
-                    letterSpacing: "0.02em"
-                  },
-                  children: name
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx3("span", { style: { display: "none" }, children: localDuration })
-      ]
-    }
-  );
-}
-function AppShellFlyover({
-  accentPeach,
-  accentLavender,
-  accentMint,
-  background,
-  speed,
-  flyStartLocal,
-  flyEndLocal,
-  outroStartLocal
-}) {
-  const frame = useCurrentFrame3() * speed;
-  const enter = interpolate2(frame, [0, 14], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-    easing: SOFT2
-  });
-  const flyT = interpolate2(frame, [flyStartLocal, flyEndLocal], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-    easing: SOFT2
-  });
-  const outroT = interpolate2(
-    frame,
-    [outroStartLocal, outroStartLocal + 30],
-    [0, 1],
-    {
-      extrapolateLeft: "clamp",
-      extrapolateRight: "clamp",
-      easing: SOFT2
-    }
-  );
-  const rx = interpolate2(flyT, [0, 1], [0, -8]) * (1 - outroT);
-  const ry = interpolate2(flyT, [0, 1], [-6, 6]) * (1 - outroT);
-  const tz = interpolate2(flyT, [0, 1], [-220, 80]) * (1 - outroT) + outroT * -360;
-  const scaleBoost = interpolate2(flyT, [0, 1], [0.92, 1.04]) * (1 - outroT) + outroT * 0.84;
-  const shadowBlur = Math.max(20, 28 + tz * 0.4);
-  const shadowOpacity = 0.35 + Math.max(0, tz / 180) * 0.35;
-  return /* @__PURE__ */ jsx3(
-    AbsoluteFill2,
-    {
-      style: {
-        // Exposure lift — the scene graded ~1.5 stops under launch-video norm.
-        filter: "brightness(1.28) contrast(1.03)",
-        background,
-        opacity: enter,
-        perspective: 2e3,
-        perspectiveOrigin: "50% 45%"
-      },
-      children: /* @__PURE__ */ jsxs3(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            inset: 0,
-            transformStyle: "preserve-3d",
-            transform: `rotateX(${rx}deg) rotateY(${ry}deg) translateZ(${tz}px) scale(${scaleBoost})`,
-            willChange: "transform"
-          },
-          children: [
-            /* @__PURE__ */ jsx3(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  inset: 40,
-                  borderRadius: 24,
-                  border: `1px solid ${accentLavender}1f`,
-                  background: "linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%)"
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx3(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  left: 80,
-                  top: 110,
-                  width: 520,
-                  height: 500,
-                  transform: "translateZ(20px)",
-                  filter: `drop-shadow(0 22px ${shadowBlur}px ${accentLavender}${toHex(
-                    shadowOpacity
-                  )})`
-                },
-                children: /* @__PURE__ */ jsx3(FauxCodeBlock, { accentLavender, accentMint })
-              }
-            ),
-            /* @__PURE__ */ jsx3(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  right: 80,
-                  top: 110,
-                  width: 540,
-                  height: 500,
-                  transform: "translateZ(40px)",
-                  filter: `drop-shadow(0 22px ${shadowBlur}px ${accentPeach}${toHex(
-                    shadowOpacity
-                  )})`
-                },
-                children: /* @__PURE__ */ jsx3(
-                  FauxBentoGrid,
-                  {
-                    accentPeach,
-                    accentLavender,
-                    accentMint,
-                    speed
-                  }
-                )
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-}
-function FauxCodeBlock({
-  accentLavender,
-  accentMint
-}) {
-  const frame = useCurrentFrame3();
-  const lines = [
-    { t: "import { Trailer } from 'remocn'", c: SYN_KEYWORD },
-    { t: "", c: "" },
-    { t: "export const Scene = () => (", c: SYN_TEXT },
-    { t: "  <Trailer", c: SYN_TEXT },
-    { t: `    label="v1.0"`, c: SYN_STRING },
-    { t: `    accent="lavender"`, c: SYN_NUMBER },
-    { t: "  />", c: SYN_TEXT },
-    { t: ")", c: SYN_TEXT }
-  ];
-  return /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        inset: 0,
-        borderRadius: 20,
-        background: "rgba(20,19,24,0.78)",
-        backdropFilter: "blur(18px)",
-        WebkitBackdropFilter: "blur(18px)",
-        border: `1px solid ${accentLavender}33`,
-        overflow: "hidden",
-        fontFamily: MONO_FAMILY3
-      },
-      children: [
-        /* @__PURE__ */ jsxs3(
-          "div",
-          {
-            style: {
-              height: 38,
-              display: "flex",
-              alignItems: "center",
-              gap: 8,
-              padding: "0 16px",
-              borderBottom: "1px solid rgba(255,255,255,0.06)"
-            },
-            children: [
-              [ACCENT_SOFT, WARNING, accentMint].map((c) => /* @__PURE__ */ jsx3(
-                "div",
-                {
-                  style: {
-                    width: 10,
-                    height: 10,
-                    borderRadius: "50%",
-                    background: c,
-                    opacity: 0.85
-                  }
-                },
-                c
-              )),
-              /* @__PURE__ */ jsx3(
-                "span",
-                {
-                  style: {
-                    marginLeft: 12,
-                    color: "rgba(255,255,255,0.45)",
-                    fontSize: 12
-                  },
-                  children: "scene.tsx"
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx3("div", { style: { padding: "20px 22px", display: "flex", flexDirection: "column", gap: 6 }, children: lines.map((line, i) => {
-          const local = frame - 14 - i * 5;
-          const o = interpolate2(local, [0, 10], [0, 1], {
-            extrapolateLeft: "clamp",
-            extrapolateRight: "clamp"
-          });
-          const x = interpolate2(local, [0, 10], [12, 0], {
-            extrapolateLeft: "clamp",
-            extrapolateRight: "clamp"
-          });
-          return /* @__PURE__ */ jsxs3(
-            "div",
-            {
-              style: {
-                display: "flex",
-                gap: 14,
-                opacity: o,
-                transform: `translateX(${x}px)`,
-                fontSize: 15,
-                lineHeight: "22px"
-              },
-              children: [
-                /* @__PURE__ */ jsx3("span", { style: { color: BORDER_STRONG, width: 18, textAlign: "right" }, children: i + 1 }),
-                /* @__PURE__ */ jsx3("span", { style: { color: line.c || SYN_TEXT, whiteSpace: "pre" }, children: line.t || " " })
-              ]
-            },
-            i
-          );
-        }) })
-      ]
-    }
-  );
-}
-function FauxBentoGrid({
-  accentPeach,
-  accentLavender,
-  accentMint,
-  speed
-}) {
-  const frame = useCurrentFrame3() * speed;
-  const { fps } = useVideoConfig2();
-  const cards = [
-    { title: "Animations", body: "Spring-tuned", tint: accentLavender, span: 2 },
-    { title: "Transitions", body: "Cinematic", tint: accentPeach, span: 1 },
-    { title: "Backgrounds", body: "Volumetric", tint: accentMint, span: 1 },
-    { title: "Compositions", body: "Production-ready", tint: accentLavender, span: 2 }
-  ];
-  return /* @__PURE__ */ jsx3(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        inset: 0,
-        display: "grid",
-        gridTemplateColumns: "1fr 1fr",
-        gap: 16
-      },
-      children: cards.map((c, i) => {
-        const progress = spring2({
-          frame: frame - 30 - i * 8,
-          fps,
-          config: { damping: 14, stiffness: 110, mass: 0.7 },
-          durationInFrames: 28
-        });
-        return /* @__PURE__ */ jsxs3(
-          "div",
-          {
-            style: {
-              gridColumn: c.span === 2 ? "span 2" : "span 1",
-              minHeight: 110,
-              padding: 22,
-              borderRadius: 18,
-              background: "linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%)",
-              border: `1px solid ${c.tint}33`,
-              opacity: progress,
-              transform: `translateY(${(1 - progress) * 18}px) scale(${0.92 + progress * 0.08})`,
-              transformOrigin: "center",
-              willChange: "transform, opacity",
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "flex-end"
-            },
-            children: [
-              /* @__PURE__ */ jsx3(
-                "div",
-                {
-                  style: {
-                    color: TEXT_HI,
-                    fontFamily: FONT_FAMILY3,
-                    fontSize: 22,
-                    fontWeight: 600,
-                    letterSpacing: "-0.02em"
-                  },
-                  children: c.title
-                }
-              ),
-              /* @__PURE__ */ jsx3(
-                "div",
-                {
-                  style: {
-                    color: `${c.tint}cc`,
-                    fontFamily: FONT_FAMILY3,
-                    fontSize: 13,
-                    marginTop: 2
-                  },
-                  children: c.body
-                }
-              )
-            ]
-          },
-          c.title
-        );
-      })
-    }
-  );
-}
-function Outro({
-  versionLabel,
-  accentMint,
-  accentPeach,
-  accentLavender,
-  speed
-}) {
-  const frame = useCurrentFrame3() * speed;
-  const { fps } = useVideoConfig2();
-  const drop = spring2({
-    frame: frame - 6,
-    fps,
-    config: { damping: 14, stiffness: 110, mass: 0.7 },
-    durationInFrames: 28
-  });
-  const headingY = interpolate2(drop, [0, 1], [-40, 0]);
-  const headingOpacity = interpolate2(drop, [0, 1], [0, 1]);
-  const particles = Array.from({ length: 70 }, (_, i) => {
-    const angle = random(`pl:${i}:a`) * Math.PI * 2;
-    const v = 9 + random(`pl:${i}:v`) * 9;
-    const sz = 5 + random(`pl:${i}:s`) * 7;
-    const f = Math.max(0, frame - 14 - Math.floor(random(`pl:${i}:d`) * 6));
-    const cx = 640 + Math.cos(angle) * v * f;
-    const cy = 280 + Math.sin(angle) * v * f + 0.4 * f * f;
-    const colors = [accentMint, accentPeach, accentLavender, WARNING];
-    const color = colors[Math.floor(random(`pl:${i}:c`) * colors.length)];
-    const opacity = interpolate2(f, [0, 4, 38, 50], [0, 1, 1, 0], {
-      extrapolateLeft: "clamp",
-      extrapolateRight: "clamp"
-    });
-    return { cx, cy, sz, color, opacity, key: i };
-  });
-  return /* @__PURE__ */ jsxs3(AbsoluteFill2, { style: { pointerEvents: "none" }, children: [
-    /* @__PURE__ */ jsx3(
-      "svg",
-      {
-        width: 1280,
-        height: 720,
-        viewBox: "0 0 1280 720",
-        style: { position: "absolute", inset: 0 },
-        children: particles.map((p) => /* @__PURE__ */ jsx3(
-          "rect",
-          {
-            x: p.cx - p.sz / 2,
-            y: p.cy - p.sz / 2,
-            width: p.sz,
-            height: p.sz * 0.55,
-            rx: 1,
-            fill: p.color,
-            opacity: p.opacity
-          },
-          p.key
-        ))
-      }
-    ),
-    /* @__PURE__ */ jsx3(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          left: 0,
-          right: 0,
-          top: 240,
-          textAlign: "center",
-          transform: `translateY(${headingY}px)`,
-          opacity: headingOpacity,
-          willChange: "transform, opacity"
-        },
-        children: /* @__PURE__ */ jsx3(
-          "div",
-          {
-            style: {
-              fontFamily: FONT_FAMILY3,
-              fontSize: 96,
-              fontWeight: 700,
-              letterSpacing: "-0.04em",
-              color: TEXT_HI
-            },
-            children: versionLabel
-          }
-        )
-      }
-    )
-  ] });
-}
-function toHex(alpha) {
-  const clamped = Math.max(0, Math.min(1, alpha));
-  return Math.round(clamped * 255).toString(16).padStart(2, "0");
-}
-
-// src/scenes/hero-device-assemble/index.tsx
-import { interpolate as interpolate3, spring as spring3, useCurrentFrame as useCurrentFrame4, useVideoConfig as useVideoConfig3 } from "remotion";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var FONT_FAMILY4 = "inherit";
-function MockUI({ accentColor }) {
-  return /* @__PURE__ */ jsxs4(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        inset: 0,
-        display: "flex",
-        flexDirection: "column",
-        background: BG,
-        fontFamily: FONT_FAMILY4,
-        color: "white",
-        overflow: "hidden"
-      },
-      children: [
-        /* @__PURE__ */ jsxs4(
-          "div",
-          {
-            style: {
-              height: "10%",
-              background: SURFACE,
-              borderBottom: "1px solid rgba(255,255,255,0.06)",
-              display: "flex",
-              alignItems: "center",
-              padding: "0 16px",
-              gap: 8
-            },
-            children: [
-              /* @__PURE__ */ jsx4(
-                "div",
-                {
-                  style: {
-                    width: 10,
-                    height: 10,
-                    borderRadius: "50%",
-                    background: "rgba(255,255,255,0.18)"
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx4(
-                "div",
-                {
-                  style: {
-                    width: 10,
-                    height: 10,
-                    borderRadius: "50%",
-                    background: "rgba(255,255,255,0.18)"
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx4(
-                "div",
-                {
-                  style: {
-                    width: 10,
-                    height: 10,
-                    borderRadius: "50%",
-                    background: "rgba(255,255,255,0.18)"
-                  }
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs4("div", { style: { flex: 1, display: "flex" }, children: [
-          /* @__PURE__ */ jsxs4(
-            "div",
-            {
-              style: {
-                width: "22%",
-                background: BG,
-                borderRight: "1px solid rgba(255,255,255,0.05)",
-                padding: 16,
-                display: "flex",
-                flexDirection: "column",
-                gap: 10
-              },
-              children: [
-                /* @__PURE__ */ jsx4(
-                  "div",
-                  {
-                    style: {
-                      height: 12,
-                      borderRadius: 4,
-                      background: accentColor,
-                      opacity: 0.85,
-                      width: "70%"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx4(
-                  "div",
-                  {
-                    style: {
-                      height: 10,
-                      borderRadius: 4,
-                      background: "rgba(255,255,255,0.1)",
-                      width: "85%"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx4(
-                  "div",
-                  {
-                    style: {
-                      height: 10,
-                      borderRadius: 4,
-                      background: "rgba(255,255,255,0.08)",
-                      width: "60%"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx4(
-                  "div",
-                  {
-                    style: {
-                      height: 10,
-                      borderRadius: 4,
-                      background: "rgba(255,255,255,0.08)",
-                      width: "75%"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs4(
-            "div",
-            {
-              style: {
-                flex: 1,
-                padding: 24,
-                display: "flex",
-                flexDirection: "column",
-                gap: 16
-              },
-              children: [
-                /* @__PURE__ */ jsx4(
-                  "div",
-                  {
-                    style: {
-                      height: 18,
-                      width: "40%",
-                      background: "rgba(255,255,255,0.85)",
-                      borderRadius: 4
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx4(
-                  "div",
-                  {
-                    style: {
-                      height: 10,
-                      width: "65%",
-                      background: "rgba(255,255,255,0.18)",
-                      borderRadius: 4
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsxs4(
-                  "div",
-                  {
-                    style: {
-                      display: "grid",
-                      gridTemplateColumns: "1fr 1fr 1fr",
-                      gap: 12,
-                      marginTop: 12
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx4(
-                        "div",
-                        {
-                          style: {
-                            height: 90,
-                            borderRadius: 8,
-                            background: "linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02))",
-                            border: "1px solid rgba(255,255,255,0.06)"
-                          }
-                        }
-                      ),
-                      /* @__PURE__ */ jsx4(
-                        "div",
-                        {
-                          style: {
-                            height: 90,
-                            borderRadius: 8,
-                            background: `linear-gradient(180deg, ${accentColor}33, ${accentColor}11)`,
-                            border: `1px solid ${accentColor}55`
-                          }
-                        }
-                      ),
-                      /* @__PURE__ */ jsx4(
-                        "div",
-                        {
-                          style: {
-                            height: 90,
-                            borderRadius: 8,
-                            background: "linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02))",
-                            border: "1px solid rgba(255,255,255,0.06)"
-                          }
-                        }
-                      )
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx4(
-                  "div",
-                  {
-                    style: {
-                      flex: 1,
-                      borderRadius: 8,
-                      background: "linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01))",
-                      border: "1px solid rgba(255,255,255,0.06)"
-                    }
-                  }
-                )
-              ]
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-function HeroDeviceAssemble({
-  assembleStart = 0,
-  device = "laptop",
-  accentColor = SUCCESS,
-  speed = 1,
-  className
-}) {
-  const frame = useCurrentFrame4() * speed;
-  const { fps } = useVideoConfig3();
-  const assemble = spring3({
-    frame: frame - assembleStart,
-    fps,
-    config: { mass: 1.4, damping: 12, stiffness: 90 },
-    durationInFrames: 60
-  });
-  const lidZ = interpolate3(assemble, [0, 1], [1e3, 0]);
-  const baseZ = interpolate3(assemble, [0, 1], [-800, 0]);
-  const bezelZ = interpolate3(assemble, [0, 1], [600, 0]);
-  const screenZ = interpolate3(assemble, [0, 1], [300, 0]);
-  const rotX = interpolate3(assemble, [0, 1], [-22, 0]);
-  const rotY = interpolate3(assemble, [0, 1], [28, 0]);
-  const layerOpacity = interpolate3(assemble, [0, 0.4], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp"
-  });
-  const settleFrame = assembleStart + 45;
-  const screenWake = interpolate3(
-    frame,
-    [settleFrame, settleFrame + 18],
-    [0, 1],
-    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
-  );
-  const shimmerProgress = interpolate3(
-    frame,
-    [settleFrame + 6, settleFrame + 30],
-    [-1, 2],
-    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
-  );
-  const isPhone = device === "phone";
-  const deviceW = isPhone ? 320 : 760;
-  const deviceH = isPhone ? 640 : 470;
-  const screenInset = isPhone ? 12 : 18;
-  const bezelRadius = isPhone ? 36 : 14;
-  return /* @__PURE__ */ jsx4(
-    "div",
-    {
-      className,
-      style: {
-        position: "absolute",
-        inset: 0,
-        overflow: "hidden",
-        background: `radial-gradient(ellipse at center, ${SURFACE} 0%, ${BG_DEEP} 70%)`,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        perspective: 2e3,
-        fontFamily: FONT_FAMILY4
-      },
-      children: /* @__PURE__ */ jsxs4(
-        "div",
-        {
-          style: {
-            position: "relative",
-            width: deviceW,
-            height: deviceH,
-            transformStyle: "preserve-3d",
-            transform: `rotateX(${rotX}deg) rotateY(${rotY}deg)`,
-            willChange: "transform"
-          },
-          children: [
-            /* @__PURE__ */ jsx4(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  inset: 0,
-                  transform: `translateZ(${lidZ - 8}px)`,
-                  background: `linear-gradient(180deg, ${SURFACE_HI} 0%, ${BG} 100%)`,
-                  borderRadius: bezelRadius + 4,
-                  border: "1px solid rgba(255,255,255,0.08)",
-                  opacity: layerOpacity
-                }
-              }
-            ),
-            !isPhone && /* @__PURE__ */ jsx4(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  left: -40,
-                  right: -40,
-                  bottom: -28,
-                  height: 28,
-                  transform: `translateZ(${baseZ}px) rotateX(78deg)`,
-                  transformOrigin: "top center",
-                  background: `linear-gradient(180deg, ${SURFACE_HI} 0%, ${BG} 100%)`,
-                  borderRadius: "0 0 12px 12px",
-                  border: "1px solid rgba(255,255,255,0.06)",
-                  opacity: layerOpacity
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx4(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  inset: 0,
-                  transform: `translateZ(${bezelZ}px)`,
-                  background: BG_DEEP,
-                  borderRadius: bezelRadius,
-                  border: "1px solid rgba(255,255,255,0.12)",
-                  opacity: layerOpacity
-                }
-              }
-            ),
-            /* @__PURE__ */ jsxs4(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  inset: screenInset,
-                  transform: `translateZ(${screenZ}px)`,
-                  borderRadius: bezelRadius - 6,
-                  overflow: "hidden",
-                  background: "black",
-                  opacity: layerOpacity
-                },
-                children: [
-                  /* @__PURE__ */ jsx4(
-                    "div",
-                    {
-                      style: {
-                        position: "absolute",
-                        inset: 0,
-                        background: "#000",
-                        opacity: 1 - screenWake
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ jsx4("div", { style: { position: "absolute", inset: 0, opacity: screenWake }, children: /* @__PURE__ */ jsx4(MockUI, { accentColor }) }),
-                  /* @__PURE__ */ jsx4(
-                    "div",
-                    {
-                      style: {
-                        position: "absolute",
-                        inset: 0,
-                        background: `linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%)`,
-                        transform: `translateX(${shimmerProgress * 100}%)`,
-                        mixBlendMode: "screen",
-                        pointerEvents: "none"
-                      }
-                    }
-                  )
-                ]
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-}
-
-// src/scenes/pricing-tier-focus/index.tsx
-import { interpolate as interpolate4, spring as spring4, useCurrentFrame as useCurrentFrame5, useVideoConfig as useVideoConfig4 } from "remotion";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var FONT_FAMILY5 = "inherit";
-var TIERS = [
-  {
-    name: "Free",
-    price: "$0",
-    period: "/mo",
-    features: ["1 project", "Community support", "1 GB storage"],
-    cta: "Get started"
-  },
-  {
-    name: "Pro",
-    price: "$24",
-    period: "/mo",
-    features: [
-      "Unlimited projects",
-      "Priority support",
-      "100 GB storage",
-      "Advanced analytics"
-    ],
-    cta: "Buy Pro"
-  },
-  {
-    name: "Enterprise",
-    price: "$99",
-    period: "/mo",
-    features: ["SSO & SAML", "Dedicated manager", "Unlimited storage"],
-    cta: "Contact sales"
-  }
-];
-function PricingTierFocus({
-  focusedTier = 1,
-  accentColor = SUCCESS,
-  speed = 1,
-  className
-}) {
-  const frame = useCurrentFrame5() * speed;
-  const { fps } = useVideoConfig4();
-  const focusedIdx = Number(focusedTier);
-  const focusStart = 30;
-  const focusProgress = spring4({
-    frame: frame - focusStart,
-    fps,
-    config: { mass: 1, damping: 18, stiffness: 90 },
-    durationInFrames: 50
-  });
-  const focusScale = interpolate4(focusProgress, [0, 1], [1, 1.05]);
-  const focusLift = interpolate4(focusProgress, [0, 1], [0, -20]);
-  const sideBrightness = interpolate4(focusProgress, [0, 1], [1, 0.4]);
-  const sideBlur = interpolate4(focusProgress, [0, 1], [0, 4]);
-  const sideScale = interpolate4(focusProgress, [0, 1], [1, 0.95]);
-  const shimmerStart = 90;
-  const shimmerPos = interpolate4(
-    frame,
-    [shimmerStart, shimmerStart + 40],
-    [-150, 250],
-    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
-  );
-  return /* @__PURE__ */ jsx5(
-    "div",
-    {
-      className,
-      style: {
-        position: "absolute",
-        inset: 0,
-        background: BG,
-        fontFamily: FONT_FAMILY5,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: 60,
-        gap: 28
-      },
-      children: TIERS.map((tier, i) => {
-        const isFocused = i === focusedIdx;
-        const scale = isFocused ? focusScale : sideScale;
-        const lift = isFocused ? focusLift : 0;
-        const brightness = isFocused ? 1 : sideBrightness;
-        const blurPx = isFocused ? 0 : sideBlur;
-        const z8 = isFocused ? 10 : 1;
-        return /* @__PURE__ */ jsxs5(
-          "div",
-          {
-            style: {
-              position: "relative",
-              flex: "1 1 0",
-              maxWidth: 320,
-              minHeight: 460,
-              padding: 32,
-              borderRadius: 20,
-              background: `linear-gradient(180deg, ${SURFACE} 0%, ${BG} 100%)`,
-              border: isFocused ? `1px solid ${accentColor}88` : `1px solid ${BORDER}`,
-              transform: `translateY(${lift}px) scale(${scale})`,
-              filter: `brightness(${brightness}) blur(${blurPx}px)`,
-              zIndex: z8,
-              display: "flex",
-              flexDirection: "column",
-              willChange: "transform, filter"
-            },
-            children: [
-              isFocused && /* @__PURE__ */ jsx5(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    top: 16,
-                    right: 16,
-                    padding: "4px 10px",
-                    borderRadius: 999,
-                    background: accentColor,
-                    color: BG,
-                    fontSize: 11,
-                    fontWeight: 700,
-                    letterSpacing: "0.04em",
-                    textTransform: "uppercase"
-                  },
-                  children: "Popular"
-                }
-              ),
-              /* @__PURE__ */ jsx5(
-                "div",
-                {
-                  style: {
-                    fontSize: 14,
-                    fontWeight: 600,
-                    color: "rgba(255,255,255,0.6)",
-                    letterSpacing: "0.04em",
-                    textTransform: "uppercase"
-                  },
-                  children: tier.name
-                }
-              ),
-              /* @__PURE__ */ jsxs5(
-                "div",
-                {
-                  style: {
-                    marginTop: 12,
-                    display: "flex",
-                    alignItems: "baseline",
-                    gap: 4
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx5(
-                      "div",
-                      {
-                        style: {
-                          fontSize: 56,
-                          fontWeight: 700,
-                          color: TEXT_HI,
-                          letterSpacing: "-0.04em",
-                          lineHeight: 1
-                        },
-                        children: tier.price
-                      }
-                    ),
-                    /* @__PURE__ */ jsx5(
-                      "div",
-                      {
-                        style: {
-                          fontSize: 16,
-                          color: "rgba(255,255,255,0.5)",
-                          fontWeight: 500
-                        },
-                        children: tier.period
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx5(
-                "div",
-                {
-                  style: {
-                    marginTop: 24,
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: 12,
-                    flex: 1
-                  },
-                  children: tier.features.map((f) => /* @__PURE__ */ jsxs5(
-                    "div",
-                    {
-                      style: {
-                        display: "flex",
-                        alignItems: "center",
-                        gap: 10,
-                        fontSize: 14,
-                        color: "rgba(255,255,255,0.85)"
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx5(
-                          "div",
-                          {
-                            style: {
-                              width: 16,
-                              height: 16,
-                              borderRadius: 999,
-                              background: `${accentColor}22`,
-                              display: "flex",
-                              alignItems: "center",
-                              justifyContent: "center",
-                              color: accentColor,
-                              fontSize: 11,
-                              fontWeight: 700,
-                              flexShrink: 0
-                            },
-                            children: "\u2713"
-                          }
-                        ),
-                        f
-                      ]
-                    },
-                    f
-                  ))
-                }
-              ),
-              /* @__PURE__ */ jsxs5(
-                "div",
-                {
-                  style: {
-                    marginTop: 24,
-                    position: "relative",
-                    height: 44,
-                    borderRadius: 12,
-                    background: isFocused ? accentColor : "rgba(255,255,255,0.08)",
-                    color: isFocused ? BG : TEXT_HI,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    fontSize: 14,
-                    fontWeight: 600,
-                    overflow: "hidden",
-                    border: isFocused ? "none" : "1px solid rgba(255,255,255,0.1)"
-                  },
-                  children: [
-                    tier.cta,
-                    isFocused && /* @__PURE__ */ jsx5(
-                      "div",
-                      {
-                        style: {
-                          position: "absolute",
-                          top: 0,
-                          left: 0,
-                          bottom: 0,
-                          width: 80,
-                          transform: `translateX(${shimmerPos}px) skewX(-20deg)`,
-                          background: "linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%)",
-                          pointerEvents: "none"
-                        }
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          },
-          tier.name
-        );
-      })
-    }
-  );
-}
-
-// src/scenes/landing-code-showcase/index.tsx
-import {
-  AbsoluteFill as AbsoluteFill3,
-  Freeze,
-  interpolate as interpolate6,
-  Sequence as Sequence2,
-  spring as spring6,
-  useCurrentFrame as useCurrentFrame7,
-  useVideoConfig as useVideoConfig6
-} from "remotion";
-
-// src/scenes/landing-code-showcase/timeline.ts
-var SCENES = {
-  blur: { start: 0, duration: 90 },
-  push1: { start: 70, duration: 60 },
-  dashboard: { start: 130, duration: 110 },
-  glassWipe: { start: 230, duration: 60 },
-  maskedSlide: { start: 290, duration: 120 },
-  push2: { start: 400, duration: 60 },
-  terminal: { start: 460, duration: 180 },
-  // Quiet hold at the very end so the loop never restarts mid-action.
-  endHold: 80
-};
-var LANDING_CODE_SHOWCASE_DURATION = SCENES.terminal.start + SCENES.terminal.duration + SCENES.endHold;
-
-// src/scenes/landing-code-showcase/index.tsx
-import { TransitionSeries, linearTiming } from "@remotion/transitions";
-
-// src/scenes/terminal-to-browser-deploy/index.tsx
-import { interpolate as interpolate5, spring as spring5, useCurrentFrame as useCurrentFrame6, useVideoConfig as useVideoConfig5 } from "remotion";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-var FONT_FAMILY6 = "inherit";
-var MONO_FAMILY4 = "monospace";
-function MacDots({ size = 12 }) {
-  return /* @__PURE__ */ jsx6("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: ["#ff5f57", "#febc2e", "#28c840"].map((c) => /* @__PURE__ */ jsx6(
-    "div",
-    {
-      style: {
-        width: size,
-        height: size,
-        borderRadius: "50%",
-        background: c,
-        opacity: 0.85
-      }
-    },
-    c
-  )) });
-}
-function TerminalToBrowserDeploy({
-  siteUrl = "https://app.example.com",
-  accentColor = SUCCESS,
-  speed = 1,
-  className
-}) {
-  const frame = useCurrentFrame6() * speed;
-  const { fps, durationInFrames } = useVideoConfig5();
-  const lines = [
-    { text: "$ pnpm deploy", start: 10, type: "command" },
-    { text: "\u2192 Building project...", start: 35, type: "step" },
-    { text: "\u2192 Bundling assets...", start: 55, type: "step" },
-    { text: "\u2192 Optimizing images...", start: 75, type: "step" },
-    { text: "\u2192 Uploading...", start: 95, type: "step" },
-    { text: `\u2713 Deployed to ${siteUrl}`, start: 120, type: "success" }
-  ];
-  const renderedLines = lines.map((line) => {
-    const elapsed = frame - line.start;
-    const charsPerFrame = 1.6;
-    const visibleChars = Math.max(
-      0,
-      Math.min(line.text.length, Math.floor(elapsed * charsPerFrame))
-    );
-    return {
-      ...line,
-      visible: line.text.slice(0, visibleChars),
-      isVisible: elapsed >= 0
-    };
-  });
-  const collapseStart = 155;
-  const collapseProgress = interpolate5(
-    frame,
-    [collapseStart, collapseStart + 18],
-    [0, 1],
-    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
-  );
-  const terminalScale = interpolate5(collapseProgress, [0, 1], [1, 0.8]);
-  const terminalBlur = interpolate5(collapseProgress, [0, 1], [0, 10]);
-  const terminalOpacity = interpolate5(collapseProgress, [0, 1], [1, 0.35]);
-  const browserSpring = spring5({
-    frame: frame - collapseStart - 4,
-    fps,
-    config: { mass: 1, damping: 14, stiffness: 110 },
-    durationInFrames: 50
-  });
-  const browserScale = browserSpring;
-  const browserOpacity = interpolate5(browserSpring, [0, 0.3, 1], [0, 1, 1], {
-    extrapolateRight: "clamp"
-  });
-  let activeLine;
-  for (let i = renderedLines.length - 1; i >= 0; i--) {
-    const l = renderedLines[i];
-    if (l.isVisible && l.visible.length < l.text.length) {
-      activeLine = l;
-      break;
-    }
-  }
-  const urlLineIndex = 5;
-  const lineHeight = 30;
-  const terminalBodyPaddingTop = 22;
-  const urlLineCenterY = terminalBodyPaddingTop + urlLineIndex * lineHeight + 12;
-  const terminalWidth = 820;
-  const terminalHeight = 360;
-  const terminalLeft = (1280 - terminalWidth) / 2;
-  const terminalTop = (720 - terminalHeight) / 2;
-  const terminalHeaderHeight = 36;
-  const originX = terminalLeft + 200;
-  const originY = terminalTop + terminalHeaderHeight + urlLineCenterY;
-  const browserWidth = 980;
-  const browserHeight = 560;
-  return /* @__PURE__ */ jsxs6(
-    "div",
-    {
-      className,
-      style: {
-        position: "absolute",
-        inset: 0,
-        overflow: "hidden",
-        background: BG,
-        fontFamily: FONT_FAMILY6
-      },
-      children: [
-        /* @__PURE__ */ jsx6(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              inset: 0,
-              background: `radial-gradient(ellipse at center, ${SURFACE} 0%, ${BG_DEEP} 70%)`
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxs6(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: terminalLeft,
-              top: terminalTop,
-              width: terminalWidth,
-              height: terminalHeight,
-              borderRadius: 14,
-              background: "rgba(15,15,17,0.96)",
-              border: "1px solid rgba(255,255,255,0.08)",
-              overflow: "hidden",
-              transform: `scale(${terminalScale})`,
-              filter: `blur(${terminalBlur}px)`,
-              opacity: terminalOpacity,
-              transformOrigin: "center center",
-              willChange: "transform, filter"
-            },
-            children: [
-              /* @__PURE__ */ jsxs6(
-                "div",
-                {
-                  style: {
-                    height: terminalHeaderHeight,
-                    display: "flex",
-                    alignItems: "center",
-                    paddingLeft: 14,
-                    borderBottom: "1px solid rgba(255,255,255,0.06)",
-                    background: "rgba(255,255,255,0.02)"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx6(MacDots, {}),
-                    /* @__PURE__ */ jsx6(
-                      "div",
-                      {
-                        style: {
-                          flex: 1,
-                          textAlign: "center",
-                          color: "rgba(255,255,255,0.45)",
-                          fontFamily: MONO_FAMILY4,
-                          fontSize: 12,
-                          marginRight: 56
-                        },
-                        children: "~/project \u2014 zsh"
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx6(
-                "div",
-                {
-                  style: {
-                    padding: `${terminalBodyPaddingTop}px 22px`,
-                    fontFamily: MONO_FAMILY4,
-                    fontSize: 16,
-                    lineHeight: `${lineHeight}px`,
-                    color: "rgba(255,255,255,0.85)"
-                  },
-                  children: renderedLines.map((line, i) => {
-                    if (!line.isVisible) return null;
-                    const isActive = activeLine === line;
-                    const showCursor = isActive && Math.floor(frame / 12) % 2 === 0;
-                    const color = line.type === "success" ? accentColor : line.type === "command" ? "rgba(255,255,255,0.95)" : "rgba(255,255,255,0.7)";
-                    return /* @__PURE__ */ jsxs6(
-                      "div",
-                      {
-                        style: {
-                          color,
-                          whiteSpace: "pre"
-                        },
-                        children: [
-                          line.visible,
-                          showCursor && /* @__PURE__ */ jsx6(
-                            "span",
-                            {
-                              style: {
-                                display: "inline-block",
-                                width: 8,
-                                height: 18,
-                                background: "rgba(255,255,255,0.85)",
-                                verticalAlign: "text-bottom",
-                                marginLeft: 2
-                              }
-                            }
-                          )
-                        ]
-                      },
-                      i
-                    );
-                  })
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs6(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: (1280 - browserWidth) / 2,
-              top: (720 - browserHeight) / 2,
-              width: browserWidth,
-              height: browserHeight,
-              borderRadius: 16,
-              overflow: "hidden",
-              background: BG,
-              border: "1px solid rgba(255,255,255,0.1)",
-              transform: `scale(${browserScale})`,
-              transformOrigin: `${(originX - (1280 - browserWidth) / 2) / browserWidth * 100}% ${(originY - (720 - browserHeight) / 2) / browserHeight * 100}%`,
-              opacity: browserOpacity,
-              willChange: "transform, opacity"
-            },
-            children: [
-              /* @__PURE__ */ jsxs6(
-                "div",
-                {
-                  style: {
-                    height: 44,
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 14,
-                    paddingLeft: 16,
-                    paddingRight: 16,
-                    background: "rgba(20,20,22,0.95)",
-                    borderBottom: "1px solid rgba(255,255,255,0.06)"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx6(MacDots, {}),
-                    /* @__PURE__ */ jsx6(
-                      "div",
-                      {
-                        style: {
-                          flex: 1,
-                          height: 26,
-                          borderRadius: 13,
-                          background: "rgba(255,255,255,0.06)",
-                          border: "1px solid rgba(255,255,255,0.08)",
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          color: "rgba(255,255,255,0.7)",
-                          fontFamily: MONO_FAMILY4,
-                          fontSize: 12
-                        },
-                        children: siteUrl
-                      }
-                    ),
-                    /* @__PURE__ */ jsx6("div", { style: { width: 60 } })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs6(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    inset: "44px 0 0 0",
-                    background: `linear-gradient(180deg, ${BG} 0%, ${SURFACE} 60%, ${BG} 100%)`,
-                    color: "white",
-                    padding: "60px 80px",
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "flex-start",
-                    gap: 24
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs6(
-                      "div",
-                      {
-                        style: {
-                          position: "absolute",
-                          top: 22,
-                          left: 80,
-                          right: 80,
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "space-between",
-                          fontFamily: FONT_FAMILY6,
-                          fontSize: 14,
-                          color: "rgba(255,255,255,0.7)"
-                        },
-                        children: [
-                          /* @__PURE__ */ jsx6("div", { style: { fontWeight: 600, color: TEXT_HI }, children: "Acme" }),
-                          /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: 24 }, children: [
-                            /* @__PURE__ */ jsx6("span", { children: "Features" }),
-                            /* @__PURE__ */ jsx6("span", { children: "Pricing" }),
-                            /* @__PURE__ */ jsx6("span", { children: "Docs" })
-                          ] })
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsx6(
-                      "div",
-                      {
-                        style: {
-                          position: "absolute",
-                          right: 60,
-                          top: 120,
-                          width: 280,
-                          height: 280,
-                          borderRadius: "50%",
-                          background: `radial-gradient(circle at 30% 30%, ${accentColor}55, transparent 70%)`,
-                          filter: "blur(20px)"
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ jsx6(
-                      "div",
-                      {
-                        style: {
-                          position: "absolute",
-                          right: 100,
-                          top: 160,
-                          width: 200,
-                          height: 200,
-                          borderRadius: 24,
-                          border: `1px solid ${accentColor}55`,
-                          transform: "rotate(12deg)",
-                          background: "linear-gradient(135deg, rgba(255,255,255,0.04), transparent)"
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ jsx6(
-                      "div",
-                      {
-                        style: {
-                          fontFamily: FONT_FAMILY6,
-                          fontSize: 14,
-                          color: accentColor,
-                          fontWeight: 500,
-                          marginTop: 50
-                        },
-                        children: "Now live"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx6(
-                      "div",
-                      {
-                        style: {
-                          fontFamily: FONT_FAMILY6,
-                          fontSize: 72,
-                          fontWeight: 700,
-                          letterSpacing: "-0.04em",
-                          lineHeight: 1,
-                          maxWidth: 560
-                        },
-                        children: "Ship faster."
-                      }
-                    ),
-                    /* @__PURE__ */ jsx6(
-                      "div",
-                      {
-                        style: {
-                          fontFamily: FONT_FAMILY6,
-                          fontSize: 18,
-                          color: "rgba(255,255,255,0.65)",
-                          maxWidth: 480,
-                          lineHeight: 1.5
-                        },
-                        children: "From commit to global edge in seconds. No config. No drama."
-                      }
-                    ),
-                    /* @__PURE__ */ jsx6(
-                      "button",
-                      {
-                        type: "button",
-                        style: {
-                          marginTop: 8,
-                          padding: "14px 28px",
-                          borderRadius: 10,
-                          background: accentColor,
-                          color: BG,
-                          fontFamily: FONT_FAMILY6,
-                          fontSize: 15,
-                          fontWeight: 600,
-                          border: "none"
-                        },
-                        children: "Get started \u2192"
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx6("div", { style: { display: "none" }, children: durationInFrames })
-      ]
-    }
-  );
-}
-
-// src/scenes/landing-code-showcase/index.tsx
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
-function WipeWindow({
-  presentation,
-  duration,
-  from,
-  to
-}) {
-  return /* @__PURE__ */ jsxs7(TransitionSeries, { children: [
-    /* @__PURE__ */ jsx7(TransitionSeries.Sequence, { durationInFrames: duration, children: from }),
-    /* @__PURE__ */ jsx7(
-      TransitionSeries.Transition,
-      {
-        presentation,
-        timing: linearTiming({ durationInFrames: duration - 1 })
-      }
-    ),
-    /* @__PURE__ */ jsx7(TransitionSeries.Sequence, { durationInFrames: duration, children: to })
-  ] });
-}
-var FONT_FAMILY7 = "inherit";
-var MONO_FAMILY5 = "monospace";
-var PEACH = ACCENT_SOFT;
-var LAVENDER = VIOLET;
-var MINT = SUCCESS;
-var STAGE_BG = BG_DEEP;
-var PANEL_BG = BG;
-var HEADER = `import { BlurReveal, DashboardPopulate, MaskedSlideReveal,
-  TerminalToBrowserDeploy, Transition } from "@/components/remocn";
-
-export default function Scene() {
-  return (
-    <>
-`;
-var FOOTER = `    </>
-  );
-}`;
-var STEPS = [
-  {
-    startFrame: 4,
-    code: `      <BlurReveal text="Build faster." />
-`
-  },
-  {
-    startFrame: SCENES.push1.start,
-    code: `      <Transition type="spatial-push" />
-`,
-    highlight: "spatial-push"
-  },
-  {
-    startFrame: SCENES.dashboard.start,
-    code: `      <DashboardPopulate data={metrics} />
-`
-  },
-  {
-    startFrame: SCENES.glassWipe.start,
-    code: `      <Transition type="glass-wipe" />
-`,
-    highlight: "glass-wipe"
-  },
-  {
-    startFrame: SCENES.maskedSlide.start,
-    code: `      <MaskedSlideReveal text="Ship to production." />
-`
-  },
-  {
-    startFrame: SCENES.push2.start,
-    code: `      <Transition type="spatial-push" direction="left" />
-`,
-    highlight: "spatial-push"
-  },
-  {
-    startFrame: SCENES.terminal.start,
-    code: `      <TerminalToBrowserDeploy />
-`
-  }
-];
-var CHARS_PER_FRAME2 = 2.2;
-var BUILT_STEPS = STEPS.map((s) => ({
-  ...s,
-  endFrame: s.startFrame + Math.ceil(s.code.length / CHARS_PER_FRAME2)
-}));
-function tokenizeLine(line, accentColor, highlightedToken) {
-  const tokens = [];
-  const regex = /(\bimport\b|\bfrom\b|\bexport\b|\bdefault\b|\bfunction\b|\breturn\b|\bconst\b)|("[^"]*")|(\b[A-Z][a-zA-Z0-9_]*)|(\b[a-zA-Z_][a-zA-Z0-9_]*)(?==)|(\{|\}|\(|\)|<|>|\/|;)|([0-9]+)/g;
-  let lastIndex = 0;
-  let m = regex.exec(line);
-  while (m !== null) {
-    if (m.index > lastIndex) {
-      tokens.push({
-        text: line.slice(lastIndex, m.index),
-        color: SYN_TEXT
-      });
-    }
-    if (m[1]) tokens.push({ text: m[1], color: LAVENDER });
-    else if (m[2]) {
-      const inner = m[2].slice(1, -1);
-      if (highlightedToken && inner === highlightedToken) {
-        tokens.push({ text: m[2], color: LAVENDER, glow: true });
-      } else {
-        tokens.push({ text: m[2], color: MINT });
-      }
-    } else if (m[3]) tokens.push({ text: m[3], color: PEACH });
-    else if (m[4]) tokens.push({ text: m[4], color: accentColor });
-    else if (m[5]) tokens.push({ text: m[5], color: SYN_COMMENT });
-    else if (m[6]) tokens.push({ text: m[6], color: SYN_NUMBER });
-    lastIndex = regex.lastIndex;
-    m = regex.exec(line);
-  }
-  if (lastIndex < line.length) {
-    tokens.push({ text: line.slice(lastIndex), color: SYN_TEXT });
-  }
-  return tokens;
-}
-function CodeEditor({
-  frame,
-  accentColor
-}) {
-  const dynamicChunks = [];
-  let activeHighlight = null;
-  for (const step of BUILT_STEPS) {
-    if (frame < step.startFrame) break;
-    const elapsed = frame - step.startFrame;
-    const charsTyped = Math.min(
-      step.code.length,
-      Math.floor(elapsed * CHARS_PER_FRAME2)
-    );
-    dynamicChunks.push(step.code.slice(0, charsTyped));
-    if (step.highlight) {
-      const sinceStart = frame - step.startFrame;
-      if (sinceStart >= 0 && sinceStart < 60) {
-        activeHighlight = step.highlight;
-      }
-    }
-  }
-  const allTyped = dynamicChunks.join("");
-  const lastStep = BUILT_STEPS[BUILT_STEPS.length - 1];
-  const showFooter = frame > lastStep.endFrame + 4;
-  const visibleCode = HEADER + allTyped + (showFooter ? FOOTER : "");
-  const lines = visibleCode.split("\n");
-  const lastLineIdx = lines.length - 1;
-  const caretOn = Math.floor(frame / 12) % 2 === 0;
-  return /* @__PURE__ */ jsx7(
-    "div",
-    {
-      style: {
-        width: "100%",
-        maxWidth: 540,
-        position: "relative",
-        borderRadius: 16,
-        padding: 1,
-        background: "linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.06) 100%)"
-      },
-      children: /* @__PURE__ */ jsxs7(
-        "div",
-        {
-          style: {
-            borderRadius: 15,
-            background: "rgba(12,12,14,0.9)",
-            backdropFilter: "blur(20px)",
-            overflow: "hidden"
-          },
-          children: [
-            /* @__PURE__ */ jsxs7(
-              "div",
-              {
-                style: {
-                  height: 40,
-                  display: "flex",
-                  alignItems: "center",
-                  padding: "0 16px",
-                  borderBottom: "1px solid rgba(255,255,255,0.06)",
-                  gap: 8
-                },
-                children: [
-                  ["#ff5f57", "#febc2e", "#28c840"].map((c) => /* @__PURE__ */ jsx7(
-                    "div",
-                    {
-                      style: {
-                        width: 11,
-                        height: 11,
-                        borderRadius: 6,
-                        background: c,
-                        opacity: 0.65
-                      }
-                    },
-                    c
-                  )),
-                  /* @__PURE__ */ jsx7(
-                    "div",
-                    {
-                      style: {
-                        marginLeft: 12,
-                        fontSize: 12,
-                        color: "rgba(255,255,255,0.5)",
-                        fontFamily: MONO_FAMILY5
-                      },
-                      children: "scene.tsx"
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx7(
-              "div",
-              {
-                style: {
-                  padding: "20px 22px",
-                  fontFamily: MONO_FAMILY5,
-                  fontSize: 12.5,
-                  lineHeight: 1.7,
-                  color: SYN_TEXT,
-                  minHeight: 480
-                },
-                children: lines.map((line, i) => {
-                  const tokens = tokenizeLine(line, accentColor, activeHighlight);
-                  const isLast = i === lastLineIdx;
-                  return /* @__PURE__ */ jsxs7(
-                    "div",
-                    {
-                      style: { display: "flex", whiteSpace: "pre" },
-                      children: [
-                        /* @__PURE__ */ jsx7(
-                          "span",
-                          {
-                            style: {
-                              width: 26,
-                              color: "rgba(255,255,255,0.18)",
-                              userSelect: "none",
-                              flexShrink: 0
-                            },
-                            children: i + 1
-                          }
-                        ),
-                        /* @__PURE__ */ jsxs7("span", { children: [
-                          tokens.length === 0 ? /* @__PURE__ */ jsx7("span", { children: " " }) : tokens.map((t, j) => /* @__PURE__ */ jsx7(
-                            "span",
-                            {
-                              style: {
-                                color: t.color
-                              },
-                              children: t.text
-                            },
-                            j
-                          )),
-                          isLast && caretOn && /* @__PURE__ */ jsx7(
-                            "span",
-                            {
-                              style: {
-                                display: "inline-block",
-                                width: 7,
-                                height: 14,
-                                marginLeft: 1,
-                                verticalAlign: "text-bottom",
-                                background: accentColor
-                              }
-                            }
-                          )
-                        ] })
-                      ]
-                    },
-                    i
-                  );
-                })
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-}
-function PastelStage({
-  background = STAGE_BG,
-  children
-}) {
-  return /* @__PURE__ */ jsxs7(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        inset: 0,
-        background,
-        overflow: "hidden"
-      },
-      children: [
-        /* @__PURE__ */ jsx7(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              inset: 0,
-              background: "radial-gradient(ellipse at 20% 30%, rgba(255,179,142,0.08), transparent 60%), radial-gradient(ellipse at 80% 70%, rgba(155,139,176,0.06), transparent 60%)"
-            }
-          }
-        ),
-        children
-      ]
-    }
-  );
-}
-function BlurRevealScene() {
-  const frame = useCurrentFrame7();
-  const opacity = interpolate6(frame, [0, 50], [0, 1], {
-    extrapolateRight: "clamp"
-  });
-  const blurAmount = interpolate6(frame, [0, 50], [22, 0], {
-    extrapolateRight: "clamp"
-  });
-  return /* @__PURE__ */ jsx7(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        inset: 0,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      },
-      children: /* @__PURE__ */ jsx7(
-        "span",
-        {
-          style: {
-            opacity,
-            filter: `blur(${blurAmount}px)`,
-            fontSize: 96,
-            fontWeight: 600,
-            color: PEACH,
-            letterSpacing: "-0.04em",
-            fontFamily: FONT_FAMILY7
-          },
-          children: "Build faster."
-        }
-      )
-    }
-  );
-}
-function DashboardScene() {
-  return /* @__PURE__ */ jsx7("div", { style: { position: "absolute", inset: 0 }, children: /* @__PURE__ */ jsx7(DashboardPopulate, { accentColor: PEACH }) });
-}
-function MaskedSlideScene() {
-  const frame = useCurrentFrame7();
-  const { fps } = useVideoConfig6();
-  const words = "Ship to production.".split(" ");
-  return /* @__PURE__ */ jsx7(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        inset: 0,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      },
-      children: /* @__PURE__ */ jsx7(
-        "span",
-        {
-          style: {
-            fontSize: 92,
-            fontWeight: 700,
-            color: MINT,
-            letterSpacing: "-0.03em",
-            fontFamily: FONT_FAMILY7
-          },
-          children: words.map((word, i) => {
-            const t = spring6({
-              frame: frame - i * 4,
-              fps,
-              config: { damping: 18, stiffness: 120 }
-            });
-            return /* @__PURE__ */ jsx7(
-              "span",
-              {
-                style: {
-                  display: "inline-block",
-                  overflow: "hidden",
-                  verticalAlign: "bottom",
-                  lineHeight: 1.05,
-                  marginRight: "0.25em"
-                },
-                children: /* @__PURE__ */ jsx7(
-                  "span",
-                  {
-                    style: {
-                      display: "inline-block",
-                      transform: `translateY(${(1 - t) * 110}%)`
-                    },
-                    children: word
-                  }
-                )
-              },
-              i
-            );
-          })
-        }
-      )
-    }
-  );
-}
-function TerminalScene() {
-  return /* @__PURE__ */ jsx7("div", { style: { position: "absolute", inset: 0 }, children: /* @__PURE__ */ jsx7(TerminalToBrowserDeploy, { accentColor: MINT, siteUrl: "remocn.dev" }) });
-}
-function RightPane() {
-  return /* @__PURE__ */ jsxs7(
-    "div",
-    {
-      style: {
-        position: "relative",
-        width: "100%",
-        height: "100%",
-        background: STAGE_BG,
-        overflow: "hidden",
-        borderRadius: 18
-      },
-      children: [
-        /* @__PURE__ */ jsx7(
-          Sequence2,
-          {
-            from: SCENES.blur.start,
-            durationInFrames: SCENES.blur.duration + SCENES.push1.duration,
-            children: /* @__PURE__ */ jsx7(PastelStage, { children: /* @__PURE__ */ jsx7(BlurRevealScene, {}) })
-          }
-        ),
-        /* @__PURE__ */ jsx7(
-          Sequence2,
-          {
-            from: SCENES.dashboard.start,
-            durationInFrames: SCENES.dashboard.duration + SCENES.glassWipe.duration,
-            children: /* @__PURE__ */ jsx7(PastelStage, { children: /* @__PURE__ */ jsx7(DashboardScene, {}) })
-          }
-        ),
-        /* @__PURE__ */ jsx7(
-          Sequence2,
-          {
-            from: SCENES.maskedSlide.start,
-            durationInFrames: SCENES.maskedSlide.duration + SCENES.push2.duration,
-            children: /* @__PURE__ */ jsx7(PastelStage, { children: /* @__PURE__ */ jsx7(MaskedSlideScene, {}) })
-          }
-        ),
-        /* @__PURE__ */ jsx7(
-          Sequence2,
-          {
-            from: SCENES.terminal.start,
-            durationInFrames: SCENES.terminal.duration + SCENES.endHold,
-            children: /* @__PURE__ */ jsx7(PastelStage, { children: /* @__PURE__ */ jsx7(TerminalScene, {}) })
-          }
-        ),
-        /* @__PURE__ */ jsx7(
-          Sequence2,
-          {
-            from: SCENES.push1.start,
-            durationInFrames: SCENES.push1.duration,
-            children: /* @__PURE__ */ jsx7(
-              WipeWindow,
-              {
-                presentation: spatialPush({ direction: "up" }),
-                duration: SCENES.push1.duration,
-                from: /* @__PURE__ */ jsx7(Freeze, { frame: SCENES.push1.start - SCENES.blur.start - 1, children: /* @__PURE__ */ jsx7(PastelStage, { children: /* @__PURE__ */ jsx7(BlurRevealScene, {}) }) }),
-                to: /* @__PURE__ */ jsx7(Freeze, { frame: 0, children: /* @__PURE__ */ jsx7(PastelStage, { children: /* @__PURE__ */ jsx7(DashboardScene, {}) }) })
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx7(
-          Sequence2,
-          {
-            from: SCENES.glassWipe.start,
-            durationInFrames: SCENES.glassWipe.duration,
-            children: /* @__PURE__ */ jsx7(
-              WipeWindow,
-              {
-                presentation: frostedGlassWipe({ glassBlur: 28 }),
-                duration: SCENES.glassWipe.duration,
-                from: /* @__PURE__ */ jsx7(Freeze, { frame: SCENES.dashboard.duration - 1, children: /* @__PURE__ */ jsx7(PastelStage, { children: /* @__PURE__ */ jsx7(DashboardScene, {}) }) }),
-                to: /* @__PURE__ */ jsx7(Freeze, { frame: 0, children: /* @__PURE__ */ jsx7(PastelStage, { children: /* @__PURE__ */ jsx7(MaskedSlideScene, {}) }) })
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx7(
-          Sequence2,
-          {
-            from: SCENES.push2.start,
-            durationInFrames: SCENES.push2.duration,
-            children: /* @__PURE__ */ jsx7(
-              WipeWindow,
-              {
-                presentation: spatialPush({ direction: "left" }),
-                duration: SCENES.push2.duration,
-                from: /* @__PURE__ */ jsx7(Freeze, { frame: SCENES.maskedSlide.duration - 1, children: /* @__PURE__ */ jsx7(PastelStage, { children: /* @__PURE__ */ jsx7(MaskedSlideScene, {}) }) }),
-                to: /* @__PURE__ */ jsx7(Freeze, { frame: 0, children: /* @__PURE__ */ jsx7(PastelStage, { children: /* @__PURE__ */ jsx7(TerminalScene, {}) }) })
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-function LandingCodeShowcase({
-  accentColor = ACCENT_SOFT,
-  speed = 1
-}) {
-  const rawFrame = useCurrentFrame7();
-  const frame = rawFrame * speed;
-  const successGlow = interpolate6(
-    frame,
-    [SCENES.terminal.start + 70, SCENES.terminal.start + 100],
-    [0, 1],
-    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
-  );
-  return /* @__PURE__ */ jsxs7(
-    AbsoluteFill3,
-    {
-      style: {
-        background: PANEL_BG,
-        fontFamily: FONT_FAMILY7,
-        overflow: "hidden"
-      },
-      children: [
-        /* @__PURE__ */ jsx7(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              inset: 0,
-              background: "radial-gradient(ellipse at 20% 30%, rgba(255,179,142,0.06), transparent 55%), radial-gradient(ellipse at 80% 70%, rgba(155,139,176,0.06), transparent 55%)"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx7(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: 0,
-              top: 0,
-              bottom: 0,
-              width: "38%",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              padding: 48
-            },
-            children: /* @__PURE__ */ jsx7(CodeEditor, { frame, accentColor })
-          }
-        ),
-        /* @__PURE__ */ jsxs7(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              right: 0,
-              top: 0,
-              bottom: 0,
-              width: "62%",
-              borderLeft: "1px solid rgba(255,255,255,0.05)"
-            },
-            children: [
-              /* @__PURE__ */ jsxs7(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    top: 22,
-                    left: 24,
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 8,
-                    zIndex: 5
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx7(
-                      "div",
-                      {
-                        style: {
-                          width: 8,
-                          height: 8,
-                          borderRadius: 4,
-                          background: MINT,
-                          boxShadow: `0 0 ${10 + successGlow * 12}px ${MINT}`
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ jsx7(
-                      "div",
-                      {
-                        style: {
-                          fontSize: 11,
-                          fontFamily: MONO_FAMILY5,
-                          color: "rgba(255,255,255,0.5)",
-                          textTransform: "uppercase",
-                          letterSpacing: "0.1em"
-                        },
-                        children: "Preview \xB7 HMR"
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx7(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    inset: 0,
-                    overflow: "hidden",
-                    boxShadow: `inset 0 0 ${60 * successGlow}px rgba(127,174,122,${successGlow * 0.45})`
-                  },
-                  children: /* @__PURE__ */ jsx7(RightPane, {})
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-
-// src/scenes/changelog-bite/config.ts
-import { z } from "zod";
-var paramsSchema = z.object({
-  label: z.string().default("Changelog").describe("Short eyebrow label (1\u20132 words)."),
-  title: z.string().default("Faster builds").describe("Headline (1 short sentence)."),
-  format: z.enum(["square", "portrait"]).default("square").describe("Aspect ratio. square: 1080\xD71080. portrait: 1080\xD71920."),
-  background: z.string().optional().describe("Frame background."),
-  cardBackground: z.string().optional().describe("Card panel background."),
-  accent: z.string().default("#ffb38e").describe('Accent color for label/highlights. Brand-bindable: pass "$brand:colors.accent" to track the project brand kit.'),
-  speed: z.number().min(0.25).max(4).default(1).describe("Playback speed multiplier."),
-  // Structured-content slot for the before/after comparison panels. These are
-  // the JSON-serializable replacement for the inexpressible `oldContent`/
-  // `newContent` ReactNode props: supply the literal diff lines and they render
-  // in the panels. Omit them to show the baked sample diff.
-  oldLines: z.array(z.string()).optional().describe("BEFORE-panel content: one string per line (e.g. the old code). Rendered as monospace text. Omit to show the baked sample diff."),
-  newLines: z.array(z.string()).optional().describe("AFTER-panel content: one string per line (e.g. the new code). Rendered as monospace text. Omit to show the baked sample diff.")
-}).passthrough();
-var config = {
-  id: "changelog-bite",
-  component: ChangelogBite,
-  name: "Changelog Bite",
-  category: "scenes",
-  kind: "scene",
-  version: "0.1.1",
-  intent: "changelog",
-  description: "Short-form changelog post (square or portrait) with a label/title header and side-by-side old/new content panels. Designed for social-feed posts announcing a release.",
-  useWhen: "Twitter/X, Instagram, LinkedIn release posts. The portrait format works for Stories/Reels; square works for feeds. Pass oldLines/newLines (string[]) to fill the before/after comparison panels; omit them to show the baked sample diff.",
-  pairsWith: [],
-  avoidWith: ["product-launch-trailer"],
-  tier: "niche",
-  useCase: ["social-cut"],
-  tags: ["scene", "changelog", "release", "social", "comparison"],
-  mood: ["corporate", "tech-demo", "minimal"],
-  paramsSchema,
-  propDefaults: { label: "Changelog", title: "Faster builds", format: "square", accent: "#ffb38e", speed: 1 },
-  primitivesUsed: [],
-  examples: [
-    { name: "square-feed", mood: ["corporate"], params: { label: "Changelog", title: "Faster builds", format: "square", accent: "#ffb38e", speed: 1 } },
-    { name: "portrait-story", mood: ["minimal"], params: { label: "v2.1", title: "New API surface", format: "portrait", accent: "#9b8bb0", speed: 1 } }
-  ],
-  textParam: "title",
-  subtextParam: "label",
-  // label/title/oldLines/newLines ARE params — the diff CONTENT is now
-  // expressible (string[] panels, see oldLines/newLines). What remains baked is
-  // only the panel chrome: the BEFORE/AFTER corner badges and the mid-wipe
-  // footer labels. Omitting oldLines/newLines falls back to a baked sample diff
-  // (its literals are the params' documented defaults, not fixed copy).
-  fixedCopy: [
-    "BEFORE",
-    "AFTER",
-    // old/new panel corner badges
-    "before",
-    "after"
-    // mid-wipe footer labels
-  ],
-  tokens: [
-    { propPath: "accent", cssVar: "--cf-accent", fallback: "#ffb38e", brandKitPath: "colors.accent" }
-  ],
-  durationInFrames: 180,
-  fps: 30,
-  width: 1080,
-  height: 1080,
-  preview: { thumbnailFrame: 90, mode: "oneshot", defaultExample: "square-feed" }
-};
-
-// src/scenes/live-code-compilation/config.ts
-import { z as z2 } from "zod";
-var paramsSchema2 = z2.object({
-  accentColor: z2.string().default("#7fae7a").describe("Accent for build success indicators."),
-  speed: z2.number().min(0.25).max(4).default(1).describe("Playback speed multiplier.")
-}).passthrough();
-var config2 = {
-  id: "live-code-compilation",
-  component: LiveCodeCompilation,
-  name: "Live Code Compilation",
-  category: "scenes",
-  kind: "scene",
-  version: "0.1.1",
-  intent: "feature-walkthrough",
-  description: "Composed scene showing code typing alongside a live build/output panel. Self-contained mini-product-demo for developer-tooling content. Compiles green when the code reaches a working state.",
-  useWhen: 'Developer-tooling product demos, build-time-savings claims, "watch the magic" moments for compiler/transpiler/builder tools. Pair with a mesh-gradient-bg behind for premium feel. Avoid for non-build content.',
-  pairsWith: ["mesh-gradient-bg", "pulsing-indicator", "success-confetti"],
-  avoidWith: ["changelog-bite"],
-  tier: "niche",
-  useCase: ["full-scene", "explainer"],
-  tags: ["scene", "code", "build", "compilation", "developer", "demo"],
-  mood: ["tech-demo", "corporate"],
-  paramsSchema: paramsSchema2,
-  propDefaults: { accentColor: "#7fae7a", speed: 1 },
-  primitivesUsed: [],
-  examples: [
-    { name: "green-build", mood: ["tech-demo"], params: { accentColor: "#7fae7a", speed: 1 } },
-    { name: "brand-blue", mood: ["corporate"], params: { accentColor: "#7b93b0", speed: 1 } }
-  ],
-  textParam: null,
-  subtextParam: null,
-  // The typed program + rendered output are BAKED — no param sets the code or
-  // the resulting button label.
-  fixedCopy: [
-    "Button",
-    // editor filename tab
-    "export function Button() { \u2026 }",
-    // baked sample component source
-    "Ship it"
-    // the rendered button label in the live output panel
-  ],
-  tokens: [
-    { propPath: "accentColor", cssVar: "--cf-accent", fallback: "#7fae7a", brandKitPath: "colors.accent" }
-  ],
-  durationInFrames: 240,
-  fps: 30,
-  width: 1920,
-  height: 1080,
-  preview: { thumbnailFrame: 120, mode: "oneshot", defaultExample: "green-build" }
-};
-
-// src/scenes/product-launch-trailer/config.ts
-import { z as z3 } from "zod";
-var paramsSchema3 = z3.object({
-  logoLabel: z3.string().default("cf").describe("Short logo glyph (1\u20133 characters)."),
-  productName: z3.string().default("cueframe").describe("Product name (1\u20133 words)."),
-  versionLabel: z3.string().default("v2.1").describe("Version or release tag."),
-  accentPeach: z3.string().default("#e8782b").describe("Primary accent color (peach in default)."),
-  accentLavender: z3.string().default("#9b8bb0").describe("Secondary accent color (lavender in default)."),
-  accentMint: z3.string().default("#7fae7a").describe("Tertiary accent color (mint in default)."),
-  background: z3.string().default("#14100c").describe("Frame background."),
-  speed: z3.number().min(0.25).max(4).default(1).describe("Playback speed multiplier.")
-}).passthrough();
-var config3 = {
-  id: "product-launch-trailer",
-  component: ProductLaunchTrailer,
-  name: "Product Launch Trailer",
-  category: "scenes",
-  kind: "scene",
-  version: "0.1.2",
-  intent: "product-trailer",
-  description: "Full-frame multi-phase trailer: pulsing logo intro \u2192 app-shell flyover \u2192 outro with confetti. ~8-second self-contained scene with three named accent colors. Use as a reference template for client-trailer work or as a drop-in launch video.",
-  useWhen: "Product launches, version releases, hero pages, anywhere a polished 8-second trailer fits. Customize via the brand-kit-driven accent triplet + product copy. Avoid editing the timing \u2014 the anchor object inside is tuned.",
-  pairsWith: [],
-  avoidWith: ["changelog-bite", "live-code-compilation"],
-  tier: "recommended",
-  useCase: ["intro", "full-scene"],
-  tags: ["scene", "trailer", "product", "launch", "composition", "multi-phase"],
-  mood: ["cinematic", "corporate", "aggressive"],
-  paramsSchema: paramsSchema3,
-  propDefaults: { logoLabel: "cf", productName: "cueframe", versionLabel: "v2.1", accentPeach: "#e8782b", accentLavender: "#9b8bb0", accentMint: "#7fae7a", background: "#14100c", speed: 1 },
-  primitivesUsed: [],
-  examples: [
-    { name: "cueframe-launch", mood: ["corporate"], params: { logoLabel: "cf", productName: "cueframe", versionLabel: "v2.1", accentPeach: "#e8782b", accentLavender: "#9b8bb0", accentMint: "#7fae7a", background: "#14100c", speed: 1 } }
-  ],
-  textParam: "productName",
-  subtextParam: "versionLabel",
-  // logoLabel/productName/versionLabel ARE params; these are the BAKED strings
-  // (FauxBentoGrid cards + FauxCodeBlock body) no param can change.
-  fixedCopy: [
-    "Animations",
-    "Spring-tuned",
-    // bento card 1
-    "Transitions",
-    "Cinematic",
-    // bento card 2
-    "Backgrounds",
-    "Volumetric",
-    // bento card 3
-    "Compositions",
-    "Production-ready",
-    // bento card 4
-    "scene.tsx",
-    // faux code block title bar
-    "import { Trailer } from 'remocn'",
-    '<Trailer label="v1.0" accent="lavender" />'
-  ],
-  tokens: [
-    { propPath: "accentPeach", cssVar: "--cf-accent", fallback: "#e8782b", brandKitPath: "colors.accent" },
-    { propPath: "accentLavender", cssVar: "--cf-accent-2", fallback: "#9b8bb0", brandKitPath: "colors.accentMuted" },
-    { propPath: "accentMint", cssVar: "--cf-accent-3", fallback: "#7fae7a", brandKitPath: "colors.accentMuted" },
-    { propPath: "background", cssVar: "--cf-bg", fallback: "#14100c", brandKitPath: "colors.background" }
-  ],
-  durationInFrames: 240,
-  fps: 30,
-  width: 1920,
-  height: 1080,
-  preview: { thumbnailFrame: 120, mode: "oneshot", defaultExample: "cueframe-launch" }
-};
-
-// src/scenes/hero-device-assemble/config.ts
-import { z as z4 } from "zod";
-var paramsSchema4 = z4.object({
-  assembleStart: z4.number().min(0).default(0).describe("Frame at which the 3D layer-stack assembly spring fires. Use to delay the assemble after a title beat."),
-  device: z4.enum(["laptop", "phone"]).default("laptop").describe("Device silhouette. `laptop` adds a chassis base under the screen; `phone` uses a tall portrait bezel."),
-  accentColor: z4.string().default("#7fae7a").describe("Accent color for the mock-UI sidebar bar, the highlighted dashboard card, and brand surfaces inside the screen."),
-  speed: z4.number().min(0.25).max(4).default(1).describe("Playback speed multiplier. >1 condenses the assemble + screen wake + shimmer."),
-  className: z4.string().optional().describe("Optional className passthrough on the outer absolute frame.")
-}).passthrough();
-var config4 = {
-  id: "hero-device-assemble",
-  component: HeroDeviceAssemble,
-  name: "Hero Device Assemble",
-  category: "scenes",
-  kind: "scene",
-  version: "0.1.1",
-  intent: "assemble-hero-device",
-  description: "Hero shot where a laptop or phone assembles in 3D from exploded layers (lid, base, bezel, screen) into a settled device, then the screen wakes from black to a mock UI and a shimmer sweeps across. Self-contained ~3-second product reveal beat.",
-  useWhen: 'App / SaaS hero loops, product-page intros, "see it on your device" moments, ad pre-rolls. Use `device="phone"` for mobile-first products. Pair with a title card before or a CTA after. Avoid for short clips <4s \u2014 the assemble spring + wake + shimmer needs ~80 frames to land. Avoid for vertical/9:16 with `device="laptop"` \u2014 the laptop aspect cuts off; switch to `device="phone"`.',
-  pairsWith: ["kinetic-type-mask", "pulsing-indicator"],
-  avoidWith: ["changelog-bite"],
-  tier: "standard",
-  useCase: ["intro", "full-scene"],
-  tags: ["scene", "hero", "device", "mockup", "laptop", "phone", "3d", "assemble", "product"],
-  mood: ["cinematic", "tech-demo", "corporate"],
-  paramsSchema: paramsSchema4,
-  propDefaults: { assembleStart: 0, device: "laptop", accentColor: "#7fae7a", speed: 1 },
-  primitivesUsed: [],
-  examples: [
-    {
-      name: "laptop-green",
-      mood: ["tech-demo", "corporate"],
-      params: { assembleStart: 0, device: "laptop", accentColor: "#7fae7a", speed: 1 },
-      description: "Default \u2014 laptop assemble with green accent on the mock dashboard. Use for SaaS hero loops."
-    },
-    {
-      name: "phone-lavender",
-      mood: ["cinematic"],
-      params: { assembleStart: 0, device: "phone", accentColor: "#9b8bb0", speed: 1 },
-      description: "Phone variant with lavender accent. Use for mobile-first product launches."
-    },
-    {
-      name: "delayed-laptop",
-      mood: ["cinematic"],
-      params: { assembleStart: 30, device: "laptop", accentColor: "#7b93b0", speed: 1 },
-      description: "Hold black for 1s before assembling. Use when stacking after a title-card beat."
-    }
-  ],
-  textParam: null,
-  subtextParam: null,
-  tokens: [
-    { propPath: "accentColor", cssVar: "--cf-accent", fallback: "#7fae7a", brandKitPath: "colors.accent" }
-  ],
-  durationInFrames: 240,
-  fps: 30,
-  width: 1920,
-  height: 1080,
-  preview: { thumbnailFrame: 75, mode: "oneshot", defaultExample: "laptop-green" }
-};
-
-// src/scenes/pricing-tier-focus/config.ts
-import { z as z5 } from "zod";
-var paramsSchema5 = z5.object({
-  focusedTier: z5.union([
-    z5.literal(0),
-    z5.literal(1),
-    z5.literal(2),
-    z5.literal("0"),
-    z5.literal("1"),
-    z5.literal("2")
-  ]).default(1).describe('Index of the tier to focus (0=Free, 1=Pro, 2=Enterprise). The focused tier scales up, lifts, and gets a "Popular" badge + shimmering CTA; siblings dim and blur.'),
-  accentColor: z5.string().default("#7fae7a").describe('Accent color for the focused-tier border glow, "Popular" badge, feature checks, and CTA fill.'),
-  speed: z5.number().min(0.25).max(4).default(1).describe("Playback speed multiplier."),
-  className: z5.string().optional().describe("Optional className passthrough on the outer flex frame.")
-}).passthrough();
-var config5 = {
-  id: "pricing-tier-focus",
-  component: PricingTierFocus,
-  name: "Pricing Tier Focus",
-  category: "scenes",
-  kind: "scene",
-  version: "0.1.1",
-  intent: "showcase-pricing",
-  description: "Three-card pricing layout (Free / Pro / Enterprise) where one tier scales up, lifts, and shimmers while the others dim and blur. Tier copy is hardcoded; the agent picks which tier to spotlight via `focusedTier`.",
-  useWhen: 'SaaS pricing reveals, plan-upgrade promos, "this is the one to pick" moments. Use `focusedTier=1` for Pro-default upsell, `2` for enterprise sales decks. Avoid for short clips <8s \u2014 the focus spring lands at frame 50, shimmer at 90. Avoid for vertical/9:16 unless rebuilt \u2014 three side-by-side cards need 16:9 width.',
-  pairsWith: ["success-confetti"],
-  avoidWith: ["changelog-bite"],
-  tier: "standard",
-  useCase: ["full-scene", "explainer"],
-  tags: ["scene", "pricing", "tiers", "saas", "upsell", "plans"],
-  mood: ["corporate", "tech-demo", "minimal"],
-  paramsSchema: paramsSchema5,
-  propDefaults: { focusedTier: 1, accentColor: "#7fae7a", speed: 1 },
-  primitivesUsed: [],
-  examples: [
-    {
-      name: "pro-upsell",
-      mood: ["corporate"],
-      params: { focusedTier: 1, accentColor: "#7fae7a", speed: 1 },
-      description: "Default \u2014 focus the middle Pro tier with green accent. Best for self-serve SaaS landing pages."
-    },
-    {
-      name: "enterprise-sales",
-      mood: ["corporate", "cinematic"],
-      params: { focusedTier: 2, accentColor: "#9b8bb0", speed: 1 },
-      description: "Spotlight Enterprise with lavender accent. Use in sales-deck loops or B2B trailers."
-    },
-    {
-      name: "free-onboarding",
-      mood: ["playful", "minimal"],
-      params: { focusedTier: 0, accentColor: "#7b93b0", speed: 1 },
-      description: "Spotlight the Free tier with sky-blue accent. Use in product-led-growth onboarding videos."
-    }
-  ],
-  textParam: null,
-  subtextParam: null,
-  // focusedTier picks WHICH card to spotlight; all tier copy/prices are BAKED.
-  // The scene that exists to show pricing cannot carry the agent's pricing.
-  fixedCopy: [
-    "Free",
-    "$0",
-    "/mo",
-    "1 project",
-    "Community support",
-    "1 GB storage",
-    "Get started",
-    "Pro",
-    "$24",
-    "/mo",
-    "Unlimited projects",
-    "Priority support",
-    "100 GB storage",
-    "Advanced analytics",
-    "Buy Pro",
-    "Enterprise",
-    "Dedicated manager",
-    "Unlimited storage",
-    "Contact sales",
-    "Popular"
-    // badge on the focused tier
-  ],
-  tokens: [
-    { propPath: "accentColor", cssVar: "--cf-accent", fallback: "#7fae7a", brandKitPath: "colors.accent" }
-  ],
-  durationInFrames: 240,
-  fps: 30,
-  width: 1920,
-  height: 1080,
-  preview: { thumbnailFrame: 110, mode: "oneshot", defaultExample: "pro-upsell" }
-};
-
-// src/scenes/landing-code-showcase/config.ts
-import { z as z6 } from "zod";
-var paramsSchema6 = z6.object({
-  accentColor: z6.string().default("#FFB38E").describe("Accent color for the code editor caret, syntax highlight on local identifiers, and the success-glow halo on the right preview pane."),
-  speed: z6.number().min(0.25).max(4).default(1).describe("Playback speed multiplier. The internal timeline assumes 30fps base; >1 condenses the whole 24s sequence.")
-}).passthrough();
-var config6 = {
-  id: "landing-code-showcase",
-  component: LandingCodeShowcase,
-  name: "Landing Code Showcase",
-  category: "scenes",
-  kind: "scene",
-  version: "0.1.1",
-  intent: "showcase-landing-code",
-  description: 'Two-pane "code \u2192 live preview" hero loop. Left: a glassy editor types JSX one component at a time. Right: each typed component renders inside a warm pastel stage, with `spatial-push` and `frosted-glass-wipe` transitions between beats (BlurReveal \u2192 DashboardPopulate \u2192 MaskedSlideReveal \u2192 TerminalToBrowserDeploy). Self-contained 24-second showcase loop for component-library marketing.',
-  useWhen: 'Component library / framework / Remotion-style SDK landing pages, hero loops, "build with us" demos, conference talk title cards. Avoid for short clips <16s \u2014 the staged code-typing pace cannot be compressed without losing the reveal beats. Avoid for vertical/9:16 unless rebuilt \u2014 split-pane layout assumes 16:9.',
-  pairsWith: [],
-  avoidWith: ["changelog-bite", "product-launch-trailer"],
-  tier: "recommended",
-  useCase: ["full-scene"],
-  tags: ["scene", "landing", "code", "showcase", "hero", "split-pane", "components", "library"],
-  mood: ["cinematic", "tech-demo", "editorial"],
-  paramsSchema: paramsSchema6,
-  propDefaults: { accentColor: "#FFB38E", speed: 1 },
-  primitivesUsed: [
-    "dashboard-populate",
-    "frosted-glass-wipe",
-    "spatial-push",
-    "terminal-to-browser-deploy"
-  ],
-  examples: [
-    {
-      name: "peach-default",
-      mood: ["cinematic", "editorial"],
-      params: { accentColor: "#FFB38E", speed: 1 },
-      description: "Default warm peach accent. Use for premium dev-tool landing pages where the pastel stage matches the brand."
-    },
-    {
-      name: "mint-hero",
-      mood: ["tech-demo"],
-      params: { accentColor: "#7fae7a", speed: 1 },
-      description: 'Mint accent \u2014 pairs well when the brand already uses green for "ship/deploy" semantics.'
-    }
-  ],
-  textParam: null,
-  subtextParam: null,
-  // No prop changes the marketing copy or the typed program — fork via
-  // get_component_source to rewrite (index.tsx STEPS / BlurRevealScene /
-  // MaskedSlideScene / TerminalScene).
-  fixedCopy: [
-    "Build faster.",
-    // BlurReveal headline (right preview pane)
-    "Ship to production.",
-    // MaskedSlideReveal headline
-    "Preview \xB7 HMR",
-    // live-preview label
-    "scene.tsx",
-    // editor title-bar filename
-    "remocn.dev",
-    // deploy URL inside the embedded terminal-to-browser beat
-    'import { BlurReveal, DashboardPopulate, MaskedSlideReveal, TerminalToBrowserDeploy, Transition } from "@/components/remocn"',
-    '<BlurReveal text="Build faster." />',
-    '<MaskedSlideReveal text="Ship to production." />'
-  ],
-  tokens: [
-    { propPath: "accentColor", cssVar: "--cf-accent", fallback: "#FFB38E", brandKitPath: "colors.accent" }
-  ],
-  durationInFrames: LANDING_CODE_SHOWCASE_DURATION,
-  fps: 30,
-  width: 1920,
-  height: 1080,
-  preview: { thumbnailFrame: 540, mode: "oneshot", defaultExample: "peach-default" }
-};
-
-// src/scenes/terminal-to-browser-deploy/config.ts
-import { z as z7 } from "zod";
-var paramsSchema7 = z7.object({
-  siteUrl: z7.string().default("https://app.example.com").describe("Deploy target URL shown on the success line and inside the browser address bar."),
-  accentColor: z7.string().default("#7fae7a").describe("Accent color for the deploy success line, browser hero copy, and CTA button."),
-  speed: z7.number().min(0.25).max(4).default(1).describe("Playback speed multiplier. >1 condenses the typewriter + collapse + browser reveal."),
-  className: z7.string().optional().describe("Optional className passthrough on the outer absolute frame.")
-}).passthrough();
-var config7 = {
-  id: "terminal-to-browser-deploy",
-  component: TerminalToBrowserDeploy,
-  name: "Terminal to Browser Deploy",
-  category: "scenes",
-  kind: "scene",
-  version: "0.1.1",
-  intent: "animate-deploy-flow",
-  description: 'Full-frame deploy beat: terminal types `pnpm deploy`, prints build/bundle/upload steps, then the success line collapses-and-blurs while a polished marketing browser springs forward at the URL. Self-contained ~6-second story for "ship it" moments.',
-  useWhen: 'Developer-tooling launches, deploy/CI/CD product demos, "from commit to live" moments, hero loops behind a CTA. Pair with `success-confetti` or a short outro card. Avoid for short clips <10s where the terminal collapse never plays. Avoid for vertical/9:16 unless the terminal + browser geometry is rebuilt \u2014 internal coordinates are baked at 1280\xD7720.',
-  pairsWith: ["success-confetti", "pulsing-indicator"],
-  avoidWith: ["changelog-bite"],
-  tier: "recommended",
-  useCase: ["outro", "full-scene"],
-  tags: ["scene", "terminal", "deploy", "browser", "cli", "developer", "shipping", "cicd"],
-  mood: ["tech-demo", "cinematic", "corporate"],
-  paramsSchema: paramsSchema7,
-  propDefaults: { siteUrl: "https://app.example.com", accentColor: "#7fae7a", speed: 1 },
-  primitivesUsed: [],
-  examples: [
-    {
-      name: "green-ship",
-      mood: ["tech-demo"],
-      params: { siteUrl: "https://app.example.com", accentColor: "#7fae7a", speed: 1 },
-      description: "Default green-build deploy. Use for generic developer-tool demos."
-    },
-    {
-      name: "brand-blue",
-      mood: ["corporate"],
-      params: { siteUrl: "https://acme.dev", accentColor: "#7b93b0", speed: 1 },
-      description: "Corporate blue accent on a real-looking domain. Use when the brand kit resolves the accent."
-    },
-    {
-      name: "fast-edit",
-      mood: ["tech-demo", "aggressive"],
-      params: { siteUrl: "https://remocn.dev", accentColor: "#9b8bb0", speed: 1.4 },
-      description: "1.4x speed cut, lavender accent. Use inside compilation montages where the deploy beat is one of several."
-    }
-  ],
-  textParam: "siteUrl",
-  subtextParam: null,
-  // siteUrl is a param (it interpolates into the success line + address bar);
-  // the terminal log lines + browser chrome/hero are BAKED.
-  fixedCopy: [
-    "$ pnpm deploy",
-    "\u2192 Building project...",
-    "\u2192 Bundling assets...",
-    "\u2192 Uploading...",
-    "\u2713 Deployed to <siteUrl>",
-    // siteUrl param interpolates here
-    "Acme",
-    "Features",
-    "Pricing",
-    "Docs",
-    // browser nav (Acme brand is fixed)
-    "Ship faster.",
-    "Get started \u2192"
-    // browser hero headline + CTA
-  ],
-  tokens: [
-    { propPath: "accentColor", cssVar: "--cf-accent", fallback: "#7fae7a", brandKitPath: "colors.accent" }
-  ],
-  durationInFrames: 240,
-  fps: 30,
-  width: 1920,
-  height: 1080,
-  preview: { thumbnailFrame: 165, mode: "oneshot", defaultExample: "green-ship" }
-};
-
-// src/scenes/index.ts
-var catalog = [
-  config,
-  config2,
-  config3,
-  config4,
-  config5,
-  config6,
-  config7
-];
-
-export {
-  ChangelogBite,
-  LiveCodeCompilation,
-  ProductLaunchTrailer,
-  HeroDeviceAssemble,
-  PricingTierFocus,
-  TerminalToBrowserDeploy,
-  LandingCodeShowcase,
-  catalog
-};
-//# sourceMappingURL=chunk-WPGKIPCO.js.map