@cueframe/kernel 0.0.1

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

@@ -0,0 +1,3563 @@
+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