@cueframe/kernel 0.1.0 → 0.1.1

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

@@ -1,2337 +0,0 @@
-import {
-  ACCENT,
-  ACCENT_SOFT,
-  ACCENT_STRONG,
-  BG,
-  BG_DEEP,
-  BLUE,
-  BORDER,
-  DANGER,
-  SUCCESS,
-  SUCCESS_SOFT,
-  SURFACE,
-  TEAL,
-  TEXT_FAINT,
-  TEXT_HI,
-  VIOLET,
-  WARNING
-} from "./chunk-3OMURV6Q.js";
-import {
-  resolveFitFontSize
-} from "./chunk-ROV2ODWC.js";
-
-// src/backgrounds/animated-bar-chart/index.tsx
-import { spring, useCurrentFrame, useVideoConfig } from "remotion";
-import { jsx, jsxs } from "react/jsx-runtime";
-function AnimatedBarChart({
-  data = [35, 60, 45, 80, 55, 70, 90, 65],
-  labels,
-  width = 1e3,
-  height = 500,
-  barColor = ACCENT,
-  accentColor = TEAL,
-  background = BG,
-  valueLabels = true,
-  gap = 16,
-  staggerFrames = 5,
-  speed = 1,
-  className
-}) {
-  const frame = useCurrentFrame() * speed;
-  const { fps } = useVideoConfig();
-  const t = frame / fps;
-  const padding = 60;
-  const labelSpace = labels ? 40 : 0;
-  const valueSpace = valueLabels ? 34 : 0;
-  const innerWidth = width - padding * 2;
-  const innerHeight = height - padding * 2 - labelSpace - valueSpace;
-  const max = Math.max(...data);
-  const maxIndex = data.indexOf(max);
-  const barWidth = (innerWidth - gap * (data.length - 1)) / data.length;
-  const baseY = padding + valueSpace + innerHeight;
-  const labelFontSize = 16;
-  const labelPitch = barWidth + gap;
-  const maxLabelChars = Math.max(1, Math.floor((labelPitch - 6) / (labelFontSize * 0.6)));
-  const fitLabel = (text) => text.length <= maxLabelChars ? text : text.slice(0, Math.max(0, maxLabelChars - 1)) + "\u2026";
-  const GRID_LINES = 4;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className,
-      style: {
-        position: "absolute",
-        inset: 0,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        background,
-        fontFamily: "inherit"
-      },
-      children: /* @__PURE__ */ jsxs("svg", { width, height, viewBox: `0 0 ${width} ${height}`, children: [
-        /* @__PURE__ */ jsxs("defs", { children: [
-          /* @__PURE__ */ jsxs("linearGradient", { id: "abc-bar", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: barColor, stopOpacity: 1 }),
-            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: barColor, stopOpacity: 0.55 })
-          ] }),
-          /* @__PURE__ */ jsxs("linearGradient", { id: "abc-peak", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: accentColor, stopOpacity: 1 }),
-            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: accentColor, stopOpacity: 0.55 })
-          ] })
-        ] }),
-        Array.from({ length: GRID_LINES }, (_, g) => {
-          const y = baseY - (g + 1) / GRID_LINES * innerHeight;
-          return /* @__PURE__ */ jsx(
-            "line",
-            {
-              x1: padding,
-              x2: padding + innerWidth,
-              y1: y,
-              y2: y,
-              stroke: "rgba(255,255,255,0.07)",
-              strokeWidth: 1
-            },
-            `grid-${g}`
-          );
-        }),
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: padding,
-            x2: padding + innerWidth,
-            y1: baseY,
-            y2: baseY,
-            stroke: "rgba(255,255,255,0.22)",
-            strokeWidth: 2
-          }
-        ),
-        data.map((value, index) => {
-          const targetHeight = value / max * innerHeight;
-          const x = padding + index * (barWidth + gap);
-          const isPeak = index === maxIndex && accentColor !== barColor;
-          const enter = spring({
-            frame: frame - index * staggerFrames,
-            fps,
-            config: { damping: 13, stiffness: 110, mass: 0.8 },
-            from: 0,
-            to: 1
-          });
-          const breathe = enter > 0.98 ? 1 + Math.sin(2 * Math.PI * (0.05 + index * 0.013) * t + index * 1.7) * 0.015 : 1;
-          const scaleY = enter * breathe;
-          const y = baseY - targetHeight;
-          const shown = Math.round(value * Math.min(1, enter));
-          return /* @__PURE__ */ jsxs("g", { children: [
-            /* @__PURE__ */ jsx(
-              "rect",
-              {
-                x,
-                y,
-                width: barWidth,
-                height: targetHeight,
-                rx: Math.min(8, barWidth / 4),
-                fill: isPeak ? "url(#abc-peak)" : "url(#abc-bar)",
-                style: {
-                  transform: `scaleY(${scaleY})`,
-                  transformOrigin: `${x + barWidth / 2}px ${baseY}px`,
-                  transformBox: "view-box"
-                }
-              }
-            ),
-            valueLabels && /* @__PURE__ */ jsx(
-              "text",
-              {
-                x: x + barWidth / 2,
-                y: baseY - targetHeight * scaleY - 12,
-                fill: isPeak ? accentColor : "rgba(255,255,255,0.85)",
-                fontSize: 18,
-                fontWeight: 700,
-                textAnchor: "middle",
-                style: { opacity: Math.min(1, enter * 1.2), fontFamily: "inherit" },
-                children: shown
-              }
-            ),
-            labels && labels[index] && /* @__PURE__ */ jsx(
-              "text",
-              {
-                x: x + barWidth / 2,
-                y: baseY + 28,
-                fill: "rgba(255,255,255,0.55)",
-                fontSize: labelFontSize,
-                textAnchor: "middle",
-                style: { opacity: enter, fontFamily: "inherit" },
-                children: fitLabel(labels[index])
-              }
-            )
-          ] }, index);
-        })
-      ] })
-    }
-  );
-}
-
-// src/backgrounds/animated-line-chart/index.tsx
-import { spring as spring2, useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig2 } from "remotion";
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function AnimatedLineChart({
-  data = [12, 19, 8, 15, 22, 18, 28, 25, 32],
-  width = 1e3,
-  height = 500,
-  strokeColor = ACCENT,
-  accentColor = TEAL,
-  strokeWidth = 4,
-  background = BG,
-  gridColor = "rgba(255,255,255,0.07)",
-  endpointValue = true,
-  showDot = true,
-  speed = 1,
-  className
-}) {
-  const frame = useCurrentFrame2() * speed;
-  const { fps, durationInFrames } = useVideoConfig2();
-  const t = frame / fps;
-  const padding = 60;
-  const innerWidth = width - padding * 2;
-  const innerHeight = height - padding * 2;
-  const min = Math.min(...data);
-  const max = Math.max(...data);
-  const range = max - min || 1;
-  const points = data.map((value, index) => {
-    const x = padding + index / (data.length - 1) * innerWidth;
-    const y = padding + innerHeight - (value - min) / range * innerHeight;
-    return { x, y };
-  });
-  let pathLength = 0;
-  for (let i = 1; i < points.length; i++) {
-    const dx = points[i].x - points[i - 1].x;
-    const dy = points[i].y - points[i - 1].y;
-    pathLength += Math.sqrt(dx * dx + dy * dy);
-  }
-  const d = points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(2)},${p.y.toFixed(2)}`).join(" ");
-  const areaD = `${d} L${(padding + innerWidth).toFixed(2)},${(padding + innerHeight).toFixed(2)} L${padding},${(padding + innerHeight).toFixed(2)} Z`;
-  const progress = spring2({
-    frame,
-    fps,
-    durationInFrames: Math.max(20, Math.round(durationInFrames * 0.5)),
-    config: { damping: 200 }
-  });
-  const dashOffset = pathLength * (1 - progress);
-  const targetLen = pathLength * progress;
-  let traveled = 0;
-  let dotX = points[0].x;
-  let dotY = points[0].y;
-  for (let i = 1; i < points.length; i++) {
-    const dx = points[i].x - points[i - 1].x;
-    const dy = points[i].y - points[i - 1].y;
-    const segLen = Math.sqrt(dx * dx + dy * dy);
-    if (traveled + segLen >= targetLen) {
-      const s = (targetLen - traveled) / segLen;
-      dotX = points[i - 1].x + dx * s;
-      dotY = points[i - 1].y + dy * s;
-      break;
-    }
-    traveled += segLen;
-    dotX = points[i].x;
-    dotY = points[i].y;
-  }
-  const settled = progress >= 0.999;
-  const pulse = settled ? 1 + Math.sin(2 * Math.PI * 0.55 * t) * 0.25 : 1;
-  const haloR = settled ? strokeWidth * (2.4 + Math.sin(2 * Math.PI * 0.55 * t) * 0.9) : 0;
-  const shownValue = Math.round(
-    min + (data[data.length - 1] - min) * Math.min(1, progress)
-  );
-  const gridRows = 4;
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      className,
-      style: {
-        position: "absolute",
-        inset: 0,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        background,
-        fontFamily: "inherit"
-      },
-      children: /* @__PURE__ */ jsxs2(
-        "svg",
-        {
-          width,
-          height,
-          viewBox: `0 0 ${width} ${height}`,
-          style: { overflow: "visible" },
-          children: [
-            /* @__PURE__ */ jsxs2("defs", { children: [
-              /* @__PURE__ */ jsxs2("linearGradient", { id: "alc-area", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-                /* @__PURE__ */ jsx2("stop", { offset: "0%", stopColor: strokeColor, stopOpacity: 0.28 }),
-                /* @__PURE__ */ jsx2("stop", { offset: "100%", stopColor: strokeColor, stopOpacity: 0 })
-              ] }),
-              /* @__PURE__ */ jsx2("clipPath", { id: "alc-reveal", children: /* @__PURE__ */ jsx2(
-                "rect",
-                {
-                  x: padding,
-                  y: 0,
-                  width: innerWidth * progress,
-                  height
-                }
-              ) })
-            ] }),
-            Array.from({ length: gridRows + 1 }).map((_, i) => {
-              const y = padding + i / gridRows * innerHeight;
-              return /* @__PURE__ */ jsx2(
-                "line",
-                {
-                  x1: padding,
-                  x2: padding + innerWidth,
-                  y1: y,
-                  y2: y,
-                  stroke: gridColor,
-                  strokeWidth: 1
-                },
-                `h-${i}`
-              );
-            }),
-            /* @__PURE__ */ jsx2(
-              "line",
-              {
-                x1: padding,
-                x2: padding + innerWidth,
-                y1: padding + innerHeight,
-                y2: padding + innerHeight,
-                stroke: "rgba(255,255,255,0.22)",
-                strokeWidth: 2
-              }
-            ),
-            /* @__PURE__ */ jsx2("path", { d: areaD, fill: "url(#alc-area)", clipPath: "url(#alc-reveal)" }),
-            /* @__PURE__ */ jsx2(
-              "path",
-              {
-                d,
-                fill: "none",
-                stroke: strokeColor,
-                strokeWidth,
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                strokeDasharray: pathLength,
-                strokeDashoffset: dashOffset
-              }
-            ),
-            showDot && progress > 0 && /* @__PURE__ */ jsxs2(Fragment, { children: [
-              settled && /* @__PURE__ */ jsx2(
-                "circle",
-                {
-                  cx: dotX,
-                  cy: dotY,
-                  r: haloR,
-                  fill: "none",
-                  stroke: accentColor,
-                  strokeWidth: 1.5,
-                  opacity: 0.5
-                }
-              ),
-              /* @__PURE__ */ jsx2(
-                "circle",
-                {
-                  cx: dotX,
-                  cy: dotY,
-                  r: strokeWidth * 1.6 * pulse,
-                  fill: accentColor
-                }
-              )
-            ] }),
-            endpointValue && progress > 0.15 && /* @__PURE__ */ jsx2(
-              "text",
-              {
-                x: Math.min(dotX + 16, padding + innerWidth),
-                y: dotY - 16,
-                fill: accentColor,
-                fontSize: 22,
-                fontWeight: 800,
-                textAnchor: "start",
-                style: { fontFamily: "inherit" },
-                children: shownValue
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-}
-
-// src/backgrounds/dither-gradient-bg/index.tsx
-import { useEffect, useRef } from "react";
-import { useCurrentFrame as useCurrentFrame3, useVideoConfig as useVideoConfig3 } from "remotion";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var BAYER8 = [
-  0,
-  32,
-  8,
-  40,
-  2,
-  34,
-  10,
-  42,
-  48,
-  16,
-  56,
-  24,
-  50,
-  18,
-  58,
-  26,
-  12,
-  44,
-  4,
-  36,
-  14,
-  46,
-  6,
-  38,
-  60,
-  28,
-  52,
-  20,
-  62,
-  30,
-  54,
-  22,
-  3,
-  35,
-  11,
-  43,
-  1,
-  33,
-  9,
-  41,
-  51,
-  19,
-  59,
-  27,
-  49,
-  17,
-  57,
-  25,
-  15,
-  47,
-  7,
-  39,
-  13,
-  45,
-  5,
-  37,
-  63,
-  31,
-  55,
-  23,
-  61,
-  29,
-  53,
-  21
-].map((v) => (v + 0.5) / 64);
-function hash2(ix, iy, seed) {
-  let h = Math.imul(ix, 374761393) + Math.imul(iy, 668265263) + Math.imul(seed, 1013904223);
-  h = Math.imul(h ^ h >>> 13, 1274126177);
-  h ^= h >>> 16;
-  return (h >>> 0) / 4294967295;
-}
-function smoother(f) {
-  return f * f * f * (f * (f * 6 - 15) + 10);
-}
-function noise2(x, y, seed) {
-  const ix = Math.floor(x);
-  const iy = Math.floor(y);
-  const u = smoother(x - ix);
-  const v = smoother(y - iy);
-  const a = hash2(ix, iy, seed);
-  const b = hash2(ix + 1, iy, seed);
-  const c = hash2(ix, iy + 1, seed);
-  const d = hash2(ix + 1, iy + 1, seed);
-  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;
-}
-function hexToRgb(hex) {
-  const m = hex.replace("#", "");
-  return [
-    parseInt(m.slice(0, 2), 16),
-    parseInt(m.slice(2, 4), 16),
-    parseInt(m.slice(4, 6), 16)
-  ];
-}
-function DitherGradientBg({
-  color = BLUE,
-  color2 = TEAL,
-  background = BG,
-  pixelSize = 8,
-  angle = -30,
-  speed = 1,
-  seed = 7,
-  className
-}) {
-  const frame = useCurrentFrame3();
-  const { fps, width, height } = useVideoConfig3();
-  const canvasRef = useRef(null);
-  const t = frame / fps * speed;
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-    const px = Math.max(2, Math.round(pixelSize * (height / 1080)));
-    const cols = Math.ceil(width / px);
-    const rows = Math.ceil(height / px);
-    canvas.width = cols;
-    canvas.height = rows;
-    const img = ctx.createImageData(cols, rows);
-    const [r1, g1, b1] = hexToRgb(color);
-    const [r2, g2, b2] = hexToRgb(color2);
-    const [rb, gb, bb] = hexToRgb(background);
-    const rad = angle * Math.PI / 180;
-    const dx = Math.cos(rad);
-    const dy = Math.sin(rad);
-    const drift = t * 0.045;
-    const warpT = 2 * Math.PI * 0.03 * t;
-    for (let y = 0; y < rows; y++) {
-      for (let x = 0; x < cols; x++) {
-        const nx = x / cols;
-        const ny = y / rows;
-        const ramp = nx * dx + ny * dy + drift;
-        const warp = (noise2(nx * 2.3 + Math.sin(warpT) * 0.4, ny * 2.3 + Math.cos(warpT) * 0.4, seed) - 0.5) * 0.55;
-        const v = ((ramp + warp) % 1 + 1) % 1;
-        const lum = v < 0.5 ? v * 2 : (1 - v) * 2;
-        const threshold = BAYER8[y % 8 * 8 + x % 8];
-        const on = lum > threshold;
-        const i = (y * cols + x) * 4;
-        if (on) {
-          const mix = smoother(lum);
-          img.data[i] = Math.round(r1 + (r2 - r1) * mix);
-          img.data[i + 1] = Math.round(g1 + (g2 - g1) * mix);
-          img.data[i + 2] = Math.round(b1 + (b2 - b1) * mix);
-        } else {
-          img.data[i] = rb;
-          img.data[i + 1] = gb;
-          img.data[i + 2] = bb;
-        }
-        img.data[i + 3] = 255;
-      }
-    }
-    ctx.putImageData(img, 0, 0);
-  }, [frame, fps, width, height, color, color2, background, pixelSize, angle, speed, seed, t]);
-  return /* @__PURE__ */ jsx3(
-    "div",
-    {
-      className,
-      style: { position: "absolute", inset: 0, background, overflow: "hidden" },
-      children: /* @__PURE__ */ jsx3(
-        "canvas",
-        {
-          ref: canvasRef,
-          style: {
-            position: "absolute",
-            inset: 0,
-            width: "100%",
-            height: "100%",
-            imageRendering: "pixelated"
-          }
-        }
-      )
-    }
-  );
-}
-
-// src/backgrounds/dynamic-grid/index.tsx
-import { useCurrentFrame as useCurrentFrame4 } from "remotion";
-import { jsx as jsx4 } from "react/jsx-runtime";
-function DynamicGrid({
-  cellSize = 40,
-  lineColor = BORDER,
-  background = BG,
-  speed = 0.5,
-  direction = "diagonal",
-  className
-}) {
-  const frame = useCurrentFrame4();
-  const offset = frame * speed % cellSize;
-  let tx = 0;
-  let ty = 0;
-  if (direction === "horizontal") {
-    tx = offset;
-  } else if (direction === "vertical") {
-    ty = offset;
-  } else {
-    tx = offset;
-    ty = offset;
-  }
-  return /* @__PURE__ */ jsx4(
-    "div",
-    {
-      className,
-      style: {
-        position: "absolute",
-        inset: 0,
-        background,
-        overflow: "hidden"
-      },
-      children: /* @__PURE__ */ jsx4(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            inset: `-${cellSize}px`,
-            backgroundImage: `
-            linear-gradient(to right, ${lineColor} 1px, transparent 1px),
-            linear-gradient(to bottom, ${lineColor} 1px, transparent 1px)
-          `,
-            backgroundSize: `${cellSize}px ${cellSize}px`,
-            transform: `translate(${tx}px, ${ty}px)`,
-            willChange: "transform"
-          }
-        }
-      )
-    }
-  );
-}
-
-// src/backgrounds/ecosystem-constellation/index.tsx
-import { interpolate, spring as spring3, useCurrentFrame as useCurrentFrame5, useVideoConfig as useVideoConfig4 } from "remotion";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var FONT_FAMILY = "inherit";
-function GitHubMark() {
-  return /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", width: 30, height: 30, "aria-hidden": "true", children: /* @__PURE__ */ jsx5(
-    "path",
-    {
-      fill: "#fff",
-      d: "M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.55v-2.06c-3.2.7-3.87-1.36-3.87-1.36-.52-1.33-1.27-1.69-1.27-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.75 2.69 1.24 3.35.95.1-.74.4-1.24.72-1.53-2.55-.29-5.24-1.28-5.24-5.7 0-1.26.45-2.29 1.18-3.1-.12-.29-.51-1.46.11-3.05 0 0 .97-.31 3.18 1.18.92-.26 1.91-.39 2.89-.39s1.97.13 2.89.39c2.21-1.49 3.18-1.18 3.18-1.18.62 1.59.23 2.76.11 3.05.74.81 1.18 1.84 1.18 3.1 0 4.43-2.7 5.41-5.27 5.69.41.36.77 1.06.77 2.13v3.16c0 .31.21.67.8.55C20.21 21.39 23.5 17.08 23.5 12 23.5 5.65 18.35.5 12 .5z"
-    }
-  ) });
-}
-function VercelMark() {
-  return /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", width: 28, height: 28, "aria-hidden": "true", children: /* @__PURE__ */ jsx5("path", { fill: "#fff", d: "M12 2 L23 21 L1 21 Z" }) });
-}
-function StripeMark() {
-  return /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", width: 28, height: 28, "aria-hidden": "true", children: /* @__PURE__ */ jsx5(
-    "path",
-    {
-      fill: "#fff",
-      d: "M13.5 9.6c0-.6.5-.85 1.3-.85 1.15 0 2.6.35 3.75.97V6.16c-1.25-.5-2.5-.7-3.75-.7C11.7 5.46 9.6 7.06 9.6 9.7c0 4.13 5.7 3.47 5.7 5.25 0 .7-.6.93-1.45.93-1.25 0-2.85-.52-4.1-1.2v3.65c1.4.6 2.8.85 4.1.85 3.2 0 5.4-1.55 5.4-4.25-.02-4.45-5.75-3.65-5.75-5.33z"
-    }
-  ) });
-}
-function SlackMark() {
-  return /* @__PURE__ */ jsxs3("svg", { viewBox: "0 0 24 24", width: 26, height: 26, "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx5("rect", { x: "2", y: "10", width: "9", height: "2.5", rx: "1.25", fill: "#36C5F0" }),
-    /* @__PURE__ */ jsx5("rect", { x: "13", y: "10", width: "9", height: "2.5", rx: "1.25", fill: "#2EB67D" }),
-    /* @__PURE__ */ jsx5("rect", { x: "10", y: "2", width: "2.5", height: "9", rx: "1.25", fill: "#ECB22E" }),
-    /* @__PURE__ */ jsx5("rect", { x: "10", y: "13", width: "2.5", height: "9", rx: "1.25", fill: "#E01E5A" })
-  ] });
-}
-function LinearMark() {
-  return /* @__PURE__ */ jsxs3("svg", { viewBox: "0 0 24 24", width: 28, height: 28, "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx5("defs", { children: /* @__PURE__ */ jsxs3("linearGradient", { id: "linear-grad", x1: "0", x2: "1", y1: "0", y2: "1", children: [
-      /* @__PURE__ */ jsx5("stop", { offset: "0%", stopColor: "#fff", stopOpacity: "0.95" }),
-      /* @__PURE__ */ jsx5("stop", { offset: "100%", stopColor: "#fff", stopOpacity: "0.55" })
-    ] }) }),
-    /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "10", fill: "url(#linear-grad)" }),
-    /* @__PURE__ */ jsx5(
-      "path",
-      {
-        d: "M5 13 L11 19 M5 9 L15 19 M5 5 L19 19 M9 5 L19 15 M13 5 L19 11",
-        stroke: "#0a0a0a",
-        strokeWidth: "0.9",
-        strokeLinecap: "round",
-        opacity: "0.85"
-      }
-    )
-  ] });
-}
-function FigmaMark() {
-  return /* @__PURE__ */ jsxs3("svg", { viewBox: "0 0 24 24", width: 26, height: 26, "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx5("circle", { cx: "9", cy: "4", r: "3.5", fill: "#F24E1E" }),
-    /* @__PURE__ */ jsx5("circle", { cx: "15", cy: "4", r: "3.5", fill: "#FF7262" }),
-    /* @__PURE__ */ jsx5("circle", { cx: "9", cy: "11", r: "3.5", fill: "#A259FF" }),
-    /* @__PURE__ */ jsx5("circle", { cx: "15", cy: "11", r: "3.5", fill: "#1ABCFE" }),
-    /* @__PURE__ */ jsx5("circle", { cx: "9", cy: "18", r: "3.5", fill: "#0ACF83" })
-  ] });
-}
-function NotionMark() {
-  return /* @__PURE__ */ jsxs3("svg", { viewBox: "0 0 24 24", width: 26, height: 26, "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx5("rect", { x: "3", y: "3", width: "18", height: "18", rx: "3", fill: "#fff" }),
-    /* @__PURE__ */ jsx5(
-      "path",
-      {
-        d: "M8 7 V17 M8 7 L16 17 M16 7 V17",
-        stroke: "#0a0a0a",
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        fill: "none"
-      }
-    )
-  ] });
-}
-function DiscordMark() {
-  return /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", width: 28, height: 28, "aria-hidden": "true", children: /* @__PURE__ */ jsx5(
-    "path",
-    {
-      fill: "#fff",
-      d: "M19.5 4.7A18 18 0 0 0 15 3.3l-.2.4a16.5 16.5 0 0 0-5.6 0L9 3.3a18 18 0 0 0-4.5 1.4C2 8.7 1.4 12.5 1.7 16.3a18 18 0 0 0 5.5 2.8l.4-.6a13 13 0 0 1-2-1l.5-.4a13 13 0 0 0 11.7 0l.5.4a13 13 0 0 1-2 1l.4.6a18 18 0 0 0 5.5-2.8c.4-4.4-.6-8.2-2.7-11.6zM8.5 14c-.9 0-1.7-.9-1.7-2s.8-2 1.7-2 1.7.9 1.7 2-.8 2-1.7 2zm7 0c-.9 0-1.7-.9-1.7-2s.8-2 1.7-2 1.7.9 1.7 2-.8 2-1.7 2z"
-    }
-  ) });
-}
-var SATELLITE_BRANDS = [
-  { Logo: GitHubMark, bg: "#1f1f23" },
-  { Logo: VercelMark, bg: "#0a0a0a" },
-  { Logo: StripeMark, bg: "#635bff" },
-  { Logo: SlackMark, bg: "#1a1d21" },
-  { Logo: LinearMark, bg: "#5e6ad2" },
-  { Logo: FigmaMark, bg: "#1e1e1e" },
-  { Logo: NotionMark, bg: "#1a1a1a" },
-  { Logo: DiscordMark, bg: "#5865f2" }
-];
-function EcosystemConstellation({
-  satelliteCount = 6,
-  centerLabel = "V",
-  accentColor = VIOLET,
-  speed = 1,
-  className
-}) {
-  const frame = useCurrentFrame5() * speed;
-  const { fps } = useVideoConfig4();
-  const count = Math.max(
-    3,
-    Math.min(SATELLITE_BRANDS.length, Math.floor(satelliteCount))
-  );
-  const pulse = (Math.sin(frame / 12) + 1) / 2;
-  const centerScale = 1 + pulse * 0.06;
-  const cx = 640;
-  const cy = 360;
-  const baseRadiusX = 230;
-  const baseRadiusY = 180;
-  const offscreenRadius = 1200;
-  const satellites = Array.from({ length: count }).map((_, i) => {
-    const stagger = i * 4;
-    const sp = spring3({
-      frame: frame - stagger,
-      fps,
-      config: { mass: 1.1, damping: 16, stiffness: 70 },
-      durationInFrames: 50
-    });
-    const radiusFactor = interpolate(sp, [0, 1], [offscreenRadius, 1]);
-    const orbitOffset = i * 22;
-    const rX = baseRadiusX + orbitOffset;
-    const rY = baseRadiusY + orbitOffset * 0.7;
-    const angularSpeed = 0.012 - i * 8e-4;
-    const baseAngle = i / count * Math.PI * 2;
-    const angle = baseAngle + frame * angularSpeed;
-    const x = cx + Math.cos(angle) * rX * radiusFactor;
-    const y = cy + Math.sin(angle) * rY * radiusFactor;
-    const activeIdx = Math.floor(frame / 30) % count;
-    const isActive = activeIdx === i;
-    const localFrame = frame - Math.floor(frame / 30) * 30;
-    const lineOpacity = isActive ? interpolate(localFrame, [0, 8, 22, 30], [0.15, 0.9, 0.9, 0.15], {
-      extrapolateLeft: "clamp",
-      extrapolateRight: "clamp"
-    }) : 0.15;
-    const satScale = isActive ? interpolate(localFrame, [0, 8, 22, 30], [1, 1.1, 1.1, 1], {
-      extrapolateLeft: "clamp",
-      extrapolateRight: "clamp"
-    }) : 1;
-    const brand = SATELLITE_BRANDS[i % SATELLITE_BRANDS.length];
-    return {
-      x,
-      y,
-      Logo: brand.Logo,
-      color: brand.bg,
-      lineOpacity,
-      satScale,
-      visible: sp > 0.02
-    };
-  });
-  return /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      className,
-      style: {
-        position: "absolute",
-        inset: 0,
-        overflow: "hidden",
-        background: `radial-gradient(ellipse at center, ${BG} 0%, ${BG_DEEP} 75%)`,
-        fontFamily: FONT_FAMILY
-      },
-      children: [
-        /* @__PURE__ */ jsxs3(
-          "svg",
-          {
-            width: "100%",
-            height: "100%",
-            viewBox: "0 0 1280 720",
-            style: { position: "absolute", inset: 0 },
-            children: [
-              satellites.map((s, i) => /* @__PURE__ */ jsx5(
-                "line",
-                {
-                  x1: cx,
-                  y1: cy,
-                  x2: s.x,
-                  y2: s.y,
-                  stroke: accentColor,
-                  strokeWidth: 2,
-                  strokeLinecap: "round",
-                  opacity: s.visible ? s.lineOpacity : 0
-                },
-                `line-${i}`
-              )),
-              /* @__PURE__ */ jsx5(
-                "circle",
-                {
-                  cx,
-                  cy,
-                  r: 70 + pulse * 8,
-                  fill: accentColor,
-                  opacity: 0.12
-                }
-              ),
-              /* @__PURE__ */ jsx5(
-                "circle",
-                {
-                  cx,
-                  cy,
-                  r: 50 + pulse * 4,
-                  fill: accentColor,
-                  opacity: 0.2
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx5(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: cx,
-              top: cy,
-              width: 96,
-              height: 96,
-              marginLeft: -48,
-              marginTop: -48,
-              borderRadius: 24,
-              background: `linear-gradient(180deg, ${accentColor} 0%, ${accentColor}cc 100%)`,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              color: "white",
-              fontWeight: 800,
-              fontSize: 52,
-              letterSpacing: "-0.05em",
-              transform: `scale(${centerScale})`,
-              border: "1px solid rgba(255,255,255,0.15)"
-            },
-            children: centerLabel
-          }
-        ),
-        satellites.map((s, i) => {
-          const Logo = s.Logo;
-          return /* @__PURE__ */ jsx5(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                left: s.x,
-                top: s.y,
-                width: 56,
-                height: 56,
-                marginLeft: -28,
-                marginTop: -28,
-                borderRadius: 14,
-                background: `linear-gradient(180deg, ${s.color} 0%, ${s.color}dd 100%)`,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                transform: `scale(${s.satScale})`,
-                border: "1px solid rgba(255,255,255,0.12)",
-                opacity: s.visible ? 1 : 0,
-                willChange: "transform"
-              },
-              children: /* @__PURE__ */ jsx5(Logo, {})
-            },
-            `sat-${i}`
-          );
-        })
-      ]
-    }
-  );
-}
-
-// src/backgrounds/infinite-marquee/index.tsx
-import { useCurrentFrame as useCurrentFrame6 } from "remotion";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-function InfiniteMarquee({
-  text = "ship \xB7 build \xB7 animate \xB7 ",
-  fontSize = 120,
-  color = SURFACE,
-  fontWeight = 900,
-  pixelsPerFrame = 4,
-  stroke = false,
-  strokeColor = SURFACE,
-  background = TEXT_HI,
-  speed = 1,
-  className
-}) {
-  const frame = useCurrentFrame6() * speed;
-  const approxWidth = text.length * fontSize * 0.55;
-  const offset = -(frame * pixelsPerFrame % approxWidth);
-  const spanStyle = {
-    fontSize,
-    fontWeight,
-    fontFamily: "inherit",
-    color: stroke ? "transparent" : color,
-    WebkitTextStroke: stroke ? `2px ${strokeColor}` : void 0,
-    paddingRight: "0.4em",
-    letterSpacing: "-0.03em"
-  };
-  return /* @__PURE__ */ jsx6(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        inset: 0,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        background
-      },
-      children: /* @__PURE__ */ jsxs4(
-        "div",
-        {
-          className,
-          style: {
-            display: "flex",
-            whiteSpace: "nowrap",
-            transform: `translateX(${offset}px)`
-          },
-          children: [
-            /* @__PURE__ */ jsx6("span", { style: spanStyle, children: text }),
-            /* @__PURE__ */ jsx6("span", { style: spanStyle, children: text }),
-            /* @__PURE__ */ jsx6("span", { style: spanStyle, children: text })
-          ]
-        }
-      )
-    }
-  );
-}
-
-// src/backgrounds/mesh-gradient-bg/index.tsx
-import { useCurrentFrame as useCurrentFrame7, useVideoConfig as useVideoConfig5 } from "remotion";
-import { jsx as jsx7 } from "react/jsx-runtime";
-function MeshGradientBg({
-  colors = [BLUE, VIOLET, TEAL],
-  speed = 1,
-  background = BG,
-  blur = 100,
-  className
-}) {
-  const frame = useCurrentFrame7();
-  const { fps } = useVideoConfig5();
-  const isDark = isColorDark(background);
-  const blendMode = isDark ? "screen" : "multiply";
-  const t = frame / fps * speed;
-  const blobs = colors.map((color, i) => {
-    const phase = i * 1.7;
-    const f1 = 0.045 + i * 0.013;
-    const f2 = 0.06 + i * 0.011;
-    const f3 = 0.05 + i * 0.017;
-    const left = 50 + Math.sin(2 * Math.PI * f1 * t + phase) * 22;
-    const top = 50 + Math.cos(2 * Math.PI * f2 * t + phase * 0.6) * 20;
-    const scale = 1 + Math.sin(2 * Math.PI * f3 * t + phase * 1.3) * 0.12;
-    return { color, left, top, scale, key: `blob-${i}` };
-  });
-  return /* @__PURE__ */ jsx7(
-    "div",
-    {
-      className,
-      style: {
-        position: "absolute",
-        inset: 0,
-        background,
-        overflow: "hidden"
-      },
-      children: blobs.map((b) => /* @__PURE__ */ jsx7(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            left: `${b.left}%`,
-            top: `${b.top}%`,
-            width: "55%",
-            height: "55%",
-            borderRadius: "50%",
-            background: `radial-gradient(circle, ${b.color}f2 0%, ${b.color}99 38%, ${b.color}33 62%, ${b.color}00 80%)`,
-            filter: `blur(${blur}px)`,
-            mixBlendMode: blendMode,
-            transform: `translate(-50%, -50%) scale(${b.scale})`,
-            willChange: "transform"
-          }
-        },
-        b.key
-      ))
-    }
-  );
-}
-function isColorDark(hex) {
-  const m = hex.replace("#", "");
-  if (m.length !== 6 && m.length !== 3) return true;
-  const full = m.length === 3 ? m.split("").map((c) => c + c).join("") : m;
-  const r = parseInt(full.slice(0, 2), 16);
-  const g = parseInt(full.slice(2, 4), 16);
-  const b = parseInt(full.slice(4, 6), 16);
-  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-  return luminance < 0.5;
-}
-
-// src/backgrounds/perspective-marquee/index.tsx
-import { useCurrentFrame as useCurrentFrame8 } from "remotion";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
-var FONT_FAMILY2 = "inherit";
-var DEFAULT_ITEMS = [
-  "Vercel",
-  "Linear",
-  "Stripe",
-  "Figma",
-  "Notion",
-  "Raycast",
-  "Arc",
-  "Cursor"
-];
-function PerspectiveMarquee({
-  items = DEFAULT_ITEMS,
-  fontSize = 84,
-  color = TEXT_HI,
-  fontWeight = 700,
-  pixelsPerFrame = 2,
-  rotateY = -28,
-  rotateX = 8,
-  perspective = 1200,
-  fadeColor = BG,
-  background = BG,
-  speed = 1,
-  className
-}) {
-  const frame = useCurrentFrame8() * speed;
-  const itemPadding = fontSize * 0.9;
-  const approxItemWidth = items.reduce(
-    (acc, item) => acc + item.length * fontSize * 0.6 + itemPadding,
-    0
-  );
-  const offset = -(frame * pixelsPerFrame % approxItemWidth);
-  const rendered = [...items, ...items, ...items];
-  return /* @__PURE__ */ jsxs5(
-    "div",
-    {
-      className,
-      style: {
-        position: "absolute",
-        inset: 0,
-        background,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        overflow: "hidden",
-        perspective: `${perspective}px`
-      },
-      children: [
-        /* @__PURE__ */ jsx8(
-          "div",
-          {
-            style: {
-              width: "100%",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "flex-start",
-              transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`,
-              transformStyle: "preserve-3d"
-            },
-            children: /* @__PURE__ */ jsx8(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  whiteSpace: "nowrap",
-                  transform: `translateX(${offset}px)`
-                },
-                children: rendered.map((item, i) => {
-                  const itemCenter = i * (approxItemWidth / items.length) + approxItemWidth / items.length / 2 + offset;
-                  const norm = (itemCenter - 640) / 640;
-                  const distance = Math.min(1, Math.abs(norm));
-                  const blurPx = distance * 6;
-                  const opacity = 1 - distance * 0.4;
-                  return /* @__PURE__ */ jsx8(
-                    "span",
-                    {
-                      style: {
-                        display: "inline-block",
-                        fontFamily: FONT_FAMILY2,
-                        fontSize,
-                        fontWeight,
-                        color,
-                        letterSpacing: "-0.03em",
-                        paddingRight: itemPadding,
-                        filter: `blur(${blurPx}px)`,
-                        opacity
-                      },
-                      children: item
-                    },
-                    i
-                  );
-                })
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx8(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              inset: 0,
-              pointerEvents: "none",
-              background: `linear-gradient(90deg, ${fadeColor} 0%, transparent 18%, transparent 82%, ${fadeColor} 100%)`
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx8(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              inset: 0,
-              pointerEvents: "none",
-              background: `linear-gradient(180deg, ${fadeColor} 0%, transparent 25%, transparent 75%, ${fadeColor} 100%)`
-            }
-          }
-        )
-      ]
-    }
-  );
-}
-
-// src/backgrounds/silk-flow-bg/index.tsx
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
-import { useCurrentFrame as useCurrentFrame9, useVideoConfig as useVideoConfig6 } from "remotion";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-function hash22(ix, iy, seed) {
-  let h = Math.imul(ix, 374761393) + Math.imul(iy, 668265263) + Math.imul(seed, 1013904223);
-  h = Math.imul(h ^ h >>> 13, 1274126177);
-  h ^= h >>> 16;
-  return (h >>> 0) / 4294967295;
-}
-function smoother2(f) {
-  return f * f * f * (f * (f * 6 - 15) + 10);
-}
-function noise22(x, y, seed) {
-  const ix = Math.floor(x);
-  const iy = Math.floor(y);
-  const u = smoother2(x - ix);
-  const v = smoother2(y - iy);
-  const a = hash22(ix, iy, seed);
-  const b = hash22(ix + 1, iy, seed);
-  const c = hash22(ix, iy + 1, seed);
-  const d = hash22(ix + 1, iy + 1, seed);
-  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;
-}
-function fbm2(x, y, seed) {
-  return noise22(x, y, seed) * 0.667 + noise22(x * 2.13 + 7.3, y * 2.13 + 3.1, seed + 101) * 0.333;
-}
-function seededRandom(seed) {
-  let s = seed > 0 ? seed : 1;
-  return () => {
-    s = s * 16807 % 2147483647;
-    return (s - 1) / 2147483646;
-  };
-}
-function isColorDark2(hex) {
-  const m = hex.replace("#", "");
-  const r = parseInt(m.slice(0, 2), 16);
-  const g = parseInt(m.slice(2, 4), 16);
-  const b = parseInt(m.slice(4, 6), 16);
-  return (0.299 * r + 0.587 * g + 0.114 * b) / 255 < 0.5;
-}
-function pickColor(colors, r) {
-  if (colors.length === 1) return colors[0];
-  if (r < 0.7) return colors[0];
-  const rest = colors.length - 1;
-  return colors[1 + Math.min(rest - 1, Math.floor((r - 0.7) / 0.3 * rest))];
-}
-function SilkFlowBg({
-  colors = [BLUE, VIOLET, TEAL],
-  background = BG,
-  density = 1,
-  speed = 1,
-  glow = 0.55,
-  grain = 0.07,
-  vignette = 0.45,
-  angle = -16,
-  seed = 7,
-  className
-}) {
-  const frame = useCurrentFrame9();
-  const { fps, width, height } = useVideoConfig6();
-  const canvasRef = useRef2(null);
-  const grainRef = useRef2(null);
-  const sceneRef = useRef2(null);
-  const isDark = isColorDark2(background);
-  const t = frame / fps * speed;
-  useEffect2(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-    canvas.width = width;
-    canvas.height = height;
-    if (!sceneRef.current) sceneRef.current = document.createElement("canvas");
-    const scene = sceneRef.current;
-    scene.width = width;
-    scene.height = height;
-    const sctx = scene.getContext("2d");
-    if (!sctx) return;
-    sctx.clearRect(0, 0, width, height);
-    sctx.lineCap = "round";
-    sctx.lineJoin = "round";
-    sctx.globalCompositeOperation = isDark ? "lighter" : "source-over";
-    const aspect = width / height;
-    const baseAngle = angle * Math.PI / 180;
-    const nLines = Math.round(170 * density);
-    const STEPS = 88;
-    const CHUNK = 8;
-    const stepLen = 0.011;
-    const NOISE_SCALE = 1.15;
-    const CURL = 2.2;
-    const swayPhase = t * 0.055 * 2 * Math.PI;
-    const px = new Float64Array(STEPS);
-    const py = new Float64Array(STEPS);
-    for (let i = 0; i < nLines; i++) {
-      const r1 = hash22(i, 11, seed);
-      const r2 = hash22(i, 23, seed);
-      const r3 = hash22(i, 37, seed);
-      const r4 = hash22(i, 53, seed);
-      const r5 = hash22(i, 71, seed);
-      const r6 = hash22(i, 89, seed);
-      let x = -0.08 + (aspect + 0.16) * (i * 0.6180339887 % 1);
-      let y = -0.08 + 1.16 * (i * 0.7548776662 % 1);
-      for (let s = 0; s < STEPS; s++) {
-        px[s] = x;
-        py[s] = y;
-        const n = fbm2(x * NOISE_SCALE, y * NOISE_SCALE, seed);
-        const sway = Math.sin(swayPhase + fbm2(x * 0.9 + 31.7, y * 0.9 + 17.3, seed + 999) * 6.28318) * 0.16;
-        const th = baseAngle + (n - 0.5) * CURL + sway;
-        x += Math.cos(th) * stepLen;
-        y += Math.sin(th) * stepLen;
-      }
-      const color = pickColor(colors, r1);
-      const w = (0.9 + r2 * 1.5) * (height / 1080);
-      const baseAlpha = 0.22 + r3 * 0.4;
-      const breathe = 0.75 + 0.25 * Math.sin(2 * Math.PI * (0.045 + r4 * 0.05) * t + r5 * 6.283);
-      const p = (t / 10 + r6) % 1;
-      sctx.strokeStyle = color;
-      for (let c0 = 0; c0 < STEPS - 1; c0 += CHUNK) {
-        const c1 = Math.min(c0 + CHUNK, STEPS - 1);
-        const sMid = (c0 + c1) / 2 / (STEPS - 1);
-        const env = Math.sin(Math.PI * sMid) ** 0.9;
-        let d = Math.abs(sMid - p);
-        d = Math.min(d, 1 - d);
-        const shim = Math.exp(-(d * d) / (2 * 0.05 * 0.05));
-        sctx.globalAlpha = Math.min(1, baseAlpha * env * breathe * (1 + 1.8 * shim));
-        sctx.lineWidth = w * (1 + shim * 1.2);
-        sctx.beginPath();
-        sctx.moveTo(px[c0] * height, py[c0] * height);
-        for (let s = c0 + 1; s <= c1; s++) sctx.lineTo(px[s] * height, py[s] * height);
-        sctx.stroke();
-      }
-    }
-    ctx.clearRect(0, 0, width, height);
-    if (glow > 0) {
-      ctx.save();
-      ctx.filter = `blur(${Math.round(18 * (height / 1080))}px)`;
-      ctx.globalAlpha = Math.min(1, glow);
-      ctx.globalCompositeOperation = isDark ? "lighter" : "multiply";
-      ctx.drawImage(scene, 0, 0);
-      ctx.restore();
-    }
-    ctx.filter = "none";
-    ctx.globalAlpha = 1;
-    ctx.globalCompositeOperation = "source-over";
-    ctx.drawImage(scene, 0, 0);
-  }, [frame, fps, width, height, colors, density, speed, glow, angle, seed, isDark, t]);
-  useEffect2(() => {
-    if (grain <= 0) return;
-    const canvas = grainRef.current;
-    if (!canvas) return;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-    const gw = Math.ceil(width * 0.25);
-    const gh = Math.ceil(height * 0.25);
-    canvas.width = gw;
-    canvas.height = gh;
-    const img = ctx.createImageData(gw, gh);
-    const rand = seededRandom(Math.floor(frame) * 7919 + seed + 1);
-    for (let i = 0; i < img.data.length; i += 4) {
-      const v = Math.floor(rand() * 256);
-      img.data[i] = v;
-      img.data[i + 1] = v;
-      img.data[i + 2] = v;
-      img.data[i + 3] = 255;
-    }
-    ctx.putImageData(img, 0, 0);
-  }, [frame, grain, width, height, seed]);
-  return /* @__PURE__ */ jsxs6(
-    "div",
-    {
-      className,
-      style: { position: "absolute", inset: 0, background, overflow: "hidden" },
-      children: [
-        /* @__PURE__ */ jsx9(
-          "canvas",
-          {
-            ref: canvasRef,
-            style: { position: "absolute", inset: 0, width: "100%", height: "100%" }
-          }
-        ),
-        vignette > 0 && /* @__PURE__ */ jsx9(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              inset: 0,
-              pointerEvents: "none",
-              background: `radial-gradient(ellipse 130% 100% at 50% 46%, transparent 52%, ${background} 128%)`,
-              opacity: vignette
-            }
-          }
-        ),
-        grain > 0 && /* @__PURE__ */ jsx9(
-          "canvas",
-          {
-            ref: grainRef,
-            style: {
-              position: "absolute",
-              inset: 0,
-              width: "100%",
-              height: "100%",
-              mixBlendMode: "overlay",
-              opacity: grain,
-              pointerEvents: "none"
-            }
-          }
-        )
-      ]
-    }
-  );
-}
-
-// src/backgrounds/vector-field/index.tsx
-import { useEffect as useEffect3, useRef as useRef3 } from "react";
-import { useCurrentFrame as useCurrentFrame10, useVideoConfig as useVideoConfig7 } from "remotion";
-import { jsx as jsx10 } from "react/jsx-runtime";
-function hash23(ix, iy, seed) {
-  let h = Math.imul(ix, 374761393) + Math.imul(iy, 668265263) + Math.imul(seed, 1013904223);
-  h = Math.imul(h ^ h >>> 13, 1274126177);
-  h ^= h >>> 16;
-  return (h >>> 0) / 4294967295;
-}
-function hexToRgb2(hex) {
-  const m = hex.replace("#", "");
-  return [parseInt(m.slice(0, 2), 16), parseInt(m.slice(2, 4), 16), parseInt(m.slice(4, 6), 16)];
-}
-function VectorField({
-  pointCount = 140,
-  color = BLUE,
-  accentColor = ACCENT,
-  background = BG,
-  queryAt = 40,
-  neighbors = 6,
-  seed = 7,
-  className
-}) {
-  const frame = useCurrentFrame10();
-  const { fps, width, height } = useVideoConfig7();
-  const canvasRef = useRef3(null);
-  const t = frame / fps;
-  useEffect3(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-    canvas.width = width;
-    canvas.height = height;
-    ctx.clearRect(0, 0, width, height);
-    const [cr, cg, cb] = hexToRgb2(color);
-    const [ar, ag, ab] = hexToRgb2(accentColor);
-    const qx0 = width * 0.58;
-    const qy0 = height * 0.46;
-    const qIn = Math.min(1, Math.max(0, (frame - queryAt) / 12));
-    const qEase = 1 - (1 - qIn) * (1 - qIn);
-    const queryLive = frame >= queryAt;
-    const pts = [];
-    for (let i = 0; i < pointCount; i++) {
-      const r1 = hash23(i, 11, seed);
-      const r2 = hash23(i, 23, seed);
-      const r3 = hash23(i, 37, seed);
-      const r4 = hash23(i, 53, seed);
-      const bx = (0.06 + r1 * 0.88) * width;
-      const by = (0.08 + r2 * 0.84) * height;
-      const f1 = 0.03 + r3 * 0.03;
-      const f2 = 0.025 + r4 * 0.03;
-      let x = bx + Math.sin(2 * Math.PI * f1 * t + r1 * 6.28) * width * 0.012;
-      let y = by + Math.cos(2 * Math.PI * f2 * t + r2 * 6.28) * height * 0.016;
-      const d = Math.hypot(x - qx0, y - qy0);
-      if (queryLive && d < Math.min(width, height) * 0.4) {
-        const pull = qEase * 0.04 * (1 - d / (Math.min(width, height) * 0.4));
-        x += (qx0 - x) * pull;
-        y += (qy0 - y) * pull;
-      }
-      pts.push({ x, y, r: 2.8 + r3 * 3.2, d: Math.hypot(x - qx0, y - qy0) });
-    }
-    const nearest = queryLive ? [...pts].sort((a, b) => a.d - b.d).slice(0, neighbors) : [];
-    if (queryLive) {
-      const shimmer = 0.55 + Math.sin(2 * Math.PI * 0.5 * t) * 0.25;
-      for (const p of nearest) {
-        const grad = ctx.createLinearGradient(qx0, qy0, p.x, p.y);
-        grad.addColorStop(0, `rgba(${ar},${ag},${ab},${0.65 * qEase * shimmer})`);
-        grad.addColorStop(1, `rgba(${ar},${ag},${ab},0.06)`);
-        ctx.strokeStyle = grad;
-        ctx.lineWidth = 1.6;
-        ctx.beginPath();
-        ctx.moveTo(qx0, qy0);
-        ctx.lineTo(p.x, p.y);
-        ctx.stroke();
-      }
-    }
-    for (const p of pts) {
-      const isNear = queryLive && nearest.includes(p);
-      const alpha = isNear ? 0.95 : 0.6;
-      ctx.fillStyle = isNear ? `rgba(${ar},${ag},${ab},${alpha})` : `rgba(${cr},${cg},${cb},${alpha})`;
-      ctx.beginPath();
-      ctx.arc(p.x, p.y, isNear ? p.r * 1.5 : p.r, 0, Math.PI * 2);
-      ctx.fill();
-    }
-    if (queryLive) {
-      const ringAge = (frame - queryAt) / 20;
-      if (ringAge < 1.6) {
-        ctx.strokeStyle = `rgba(${ar},${ag},${ab},${Math.max(0, 0.7 - ringAge * 0.45)})`;
-        ctx.lineWidth = 2;
-        ctx.beginPath();
-        ctx.arc(qx0, qy0, 14 + ringAge * 46, 0, Math.PI * 2);
-        ctx.stroke();
-      }
-      const idlePulse = 1 + Math.sin(2 * Math.PI * 0.55 * t) * 0.12;
-      ctx.fillStyle = `rgba(${ar},${ag},${ab},${qEase})`;
-      ctx.shadowColor = accentColor;
-      ctx.shadowBlur = 22;
-      ctx.beginPath();
-      ctx.arc(qx0, qy0, 8 * qEase * idlePulse, 0, Math.PI * 2);
-      ctx.fill();
-      ctx.shadowBlur = 0;
-    }
-  }, [frame, fps, width, height, pointCount, color, accentColor, background, queryAt, neighbors, seed, t]);
-  return /* @__PURE__ */ jsx10(
-    "div",
-    {
-      className,
-      style: { position: "absolute", inset: 0, background, overflow: "hidden" },
-      children: /* @__PURE__ */ jsx10(
-        "canvas",
-        {
-          ref: canvasRef,
-          style: { position: "absolute", inset: 0, width: "100%", height: "100%" }
-        }
-      )
-    }
-  );
-}
-
-// src/backgrounds/volumetric-rays/index.tsx
-import { interpolate as interpolate2, useCurrentFrame as useCurrentFrame11 } from "remotion";
-import { fitTextOnNLines } from "@remotion/layout-utils";
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
-var FONT_FAMILY3 = "inherit";
-function VolumetricRays({
-  text = "REMOCN",
-  fontSize = 240,
-  fontWeight = 800,
-  rayColor = ACCENT,
-  background = BG,
-  textColor = BG,
-  intensity = 1,
-  speed = 1,
-  className
-}) {
-  const frame = useCurrentFrame11() * speed;
-  const RAYS_MAX_WIDTH = 1400;
-  let singleLineFit = fontSize;
-  if (text.trim().length > 0) {
-    try {
-      const { fontSize: fit } = fitTextOnNLines({
-        text,
-        maxLines: 1,
-        maxBoxWidth: RAYS_MAX_WIDTH,
-        fontFamily: FONT_FAMILY3,
-        fontWeight,
-        letterSpacing: "-0.04em",
-        maxFontSize: fontSize,
-        validateFontIsLoaded: false
-      });
-      singleLineFit = fit;
-    } catch {
-      singleLineFit = fontSize;
-    }
-  }
-  const { fontSize: fittedFontSize } = resolveFitFontSize({
-    singleLineFitFontSize: singleLineFit,
-    minFontSize: Math.round(fontSize * 0.55),
-    maxFontSize: fontSize
-  });
-  const rotation = interpolate2(frame, [0, 240], [-4, 8]);
-  const bloomOpacity = interpolate2(frame, [0, 30], [0, 0.95 * intensity], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp"
-  });
-  const haloPulse = 0.6 + Math.sin(frame / 14) * 0.15;
-  const sharedTextStyle = {
-    position: "absolute",
-    inset: 0,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontFamily: FONT_FAMILY3,
-    fontSize: fittedFontSize,
-    fontWeight,
-    letterSpacing: "-0.04em",
-    textAlign: "center",
-    whiteSpace: "nowrap"
-  };
-  return /* @__PURE__ */ jsxs7(
-    "div",
-    {
-      className,
-      style: {
-        position: "absolute",
-        inset: 0,
-        background,
-        overflow: "hidden"
-      },
-      children: [
-        /* @__PURE__ */ jsx11(
-          "div",
-          {
-            style: {
-              ...sharedTextStyle,
-              color: rayColor,
-              filter: `blur(${60 * intensity}px)`,
-              transform: "scale(1.2, 1.6)",
-              transformOrigin: "center bottom",
-              opacity: bloomOpacity * haloPulse
-            },
-            children: text
-          }
-        ),
-        /* @__PURE__ */ jsx11(
-          "div",
-          {
-            style: {
-              ...sharedTextStyle,
-              backgroundImage: `conic-gradient(from ${rotation}deg at 50% 100%,
-            transparent 0deg,
-            ${rayColor} 20deg,
-            transparent 40deg,
-            ${rayColor} 80deg,
-            transparent 100deg,
-            ${rayColor} 140deg,
-            transparent 160deg,
-            ${rayColor} 200deg,
-            transparent 220deg,
-            ${rayColor} 260deg,
-            transparent 280deg,
-            ${rayColor} 320deg,
-            transparent 360deg)`,
-              color: "transparent",
-              WebkitBackgroundClip: "text",
-              backgroundClip: "text",
-              opacity: 0.5 * intensity,
-              filter: "blur(2px)"
-            },
-            children: text
-          }
-        ),
-        /* @__PURE__ */ jsx11(
-          "div",
-          {
-            style: {
-              ...sharedTextStyle,
-              color: textColor,
-              textShadow: `0 0 ${30 * intensity}px ${rayColor}`
-            },
-            children: text
-          }
-        ),
-        /* @__PURE__ */ jsx11(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: 0,
-              right: 0,
-              bottom: 0,
-              height: 200,
-              pointerEvents: "none",
-              background: `radial-gradient(ellipse at 50% 100%, ${rayColor}55 0%, transparent 60%)`,
-              opacity: bloomOpacity
-            }
-          }
-        )
-      ]
-    }
-  );
-}
-
-// src/backgrounds/animated-bar-chart/config.ts
-import { z } from "zod";
-var paramsSchema = z.object({
-  data: z.array(z.number().min(0)).min(2).max(24).default([35, 60, 45, 80, 55, 70, 90, 65]).describe(
-    "Bar values. Any non-negative numbers; the primitive auto-scales to the max. 6\u201310 bars reads cleanest."
-  ),
-  labels: z.array(z.string().max(24)).optional().describe(
-    "Optional x-axis labels, one per data point. Omit for an unlabeled, pure-shape chart."
-  ),
-  width: z.number().min(400).max(1920).default(1e3).describe("Chart width in pixels (the SVG inner box)."),
-  height: z.number().min(200).max(1080).default(500).describe("Chart height in pixels."),
-  barColor: z.string().default(ACCENT).describe(
-    "Bar fill color. Use a single brand color \u2014 chart is monochromatic by design."
-  ),
-  accentColor: z.string().default(TEAL).describe("Peak (max value) bar accent \u2014 the number that lands. Set equal to barColor to disable."),
-  valueLabels: z.boolean().default(true).describe("Counting value labels above the bars."),
-  background: z.string().default(BG).describe("Frame background behind the chart."),
-  gap: z.number().min(0).max(60).default(16).describe("Gap between bars in pixels."),
-  staggerFrames: z.number().int().min(0).max(30).default(6).describe(
-    "Frames between each bar's spring-up entrance. 4\u20138 reads as confident; 0 lands them all at once."
-  ),
-  speed: z.number().min(0.25).max(4).default(1).describe("Playback speed multiplier.")
-}).passthrough();
-var config = {
-  id: "animated-bar-chart",
-  component: AnimatedBarChart,
-  name: "Animated Bar Chart",
-  category: "backgrounds",
-  kind: "component",
-  version: "0.2.1",
-  intent: "render-chart",
-  description: "Spring-driven bar chart that scales each bar up from the baseline with a configurable stagger. SVG-based, clean flat bars. Designed as a hero data visualization \u2014 full-frame, single accent color, no chart junk.",
-  useWhen: 'Quarterly numbers, growth charts, "we shipped X this month" data beats, single-metric storytelling. Avoid for >12 bars (axis becomes unreadable at 1920\xD71080) and avoid when the data range crosses zero \u2014 this primitive only renders non-negative bars.',
-  pairsWith: ["kinetic-type", "cinematic-title", "lower-third", "mesh-gradient-bg"],
-  avoidWith: ["animated-line-chart"],
-  tier: "standard",
-  useCase: ["explainer"],
-  tags: ["background", "chart", "bar", "data", "analytics", "metric", "svg"],
-  mood: ["corporate", "editorial", "tech-demo", "minimal"],
-  paramsSchema,
-  propDefaults: {
-    data: [35, 60, 45, 80, 55, 70, 90, 65],
-    width: 1e3,
-    height: 500,
-    barColor: ACCENT,
-    accentColor: TEAL,
-    background: BG,
-    valueLabels: true,
-    gap: 16,
-    staggerFrames: 5,
-    speed: 1
-  },
-  examples: [
-    {
-      name: "quarterly-revenue",
-      mood: ["corporate"],
-      params: {
-        data: [120, 180, 240, 360],
-        labels: ["Q1", "Q2", "Q3", "Q4"],
-        barColor: SUCCESS,
-        staggerFrames: 8
-      },
-      description: "Four quarters, growing bars, green for revenue."
-    },
-    {
-      name: "monthly-active-users",
-      mood: ["tech-demo", "editorial"],
-      params: {
-        data: [12, 18, 24, 31, 42, 58, 76, 94, 110, 142, 168, 215],
-        labels: ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"],
-        barColor: VIOLET,
-        gap: 10,
-        staggerFrames: 4
-      },
-      description: "12-month MAU growth chart."
-    }
-  ],
-  textParam: null,
-  subtextParam: null,
-  tokens: [
-    { propPath: "barColor", cssVar: "--cf-accent", fallback: ACCENT, brandKitPath: "colors.accent" },
-    { propPath: "background", cssVar: "--cf-bg", fallback: BG, brandKitPath: "colors.background" }
-  ],
-  durationInFrames: 90,
-  fps: 30,
-  width: 1920,
-  height: 1080,
-  preview: { thumbnailFrame: 60, mode: "oneshot", defaultExample: "quarterly-revenue" }
-};
-
-// src/backgrounds/animated-line-chart/config.ts
-import { z as z2 } from "zod";
-var paramsSchema2 = z2.object({
-  data: z2.array(z2.number()).min(2).max(60).default([12, 19, 8, 15, 22, 18, 28, 25, 32]).describe(
-    "Y-values. Any numbers; auto-scaled to fit. 8\u201314 points reads as a clean trend line."
-  ),
-  width: z2.number().min(400).max(1920).default(1e3).describe("Chart width in pixels."),
-  height: z2.number().min(200).max(1080).default(500).describe("Chart height in pixels."),
-  strokeColor: z2.string().default(ACCENT).describe(
-    "Line + dot color. Single accent \u2014 green reads as growth, red as alarm."
-  ),
-  accentColor: z2.string().default(TEAL).describe("Endpoint dot + value accent."),
-  endpointValue: z2.boolean().default(true).describe("Endpoint value counts up with the draw and holds."),
-  strokeWidth: z2.number().min(1).max(16).default(4).describe("Line thickness in pixels."),
-  background: z2.string().default(BG).describe("Frame background."),
-  gridColor: z2.string().default("rgba(255,255,255,0.07)").describe("Grid line color. Keep dim \u2014 grid sits behind the line."),
-  showDot: z2.boolean().default(true).describe("Show the leading dot that traces the line as it draws."),
-  speed: z2.number().min(0.25).max(4).default(1).describe("Playback speed multiplier.")
-}).passthrough();
-var config2 = {
-  id: "animated-line-chart",
-  component: AnimatedLineChart,
-  name: "Animated Line Chart",
-  category: "backgrounds",
-  kind: "component",
-  version: "0.2.1",
-  intent: "render-chart",
-  description: "SVG line chart with stroke-dasharray draw-on animation and a leading dot that traces the path in realtime. Spring-driven progress with no bounce. Includes a faint background grid and a clean, crisp line.",
-  useWhen: 'Trend lines (revenue, users, latency), "the chart goes up" hero beats, time-series narratives. Avoid for unordered categorical data (use animated-bar-chart) and avoid for >40 points at 1920\xD71080 (line becomes a noisy zigzag).',
-  pairsWith: ["kinetic-type", "cinematic-title", "lower-third", "pulsing-indicator"],
-  avoidWith: ["animated-bar-chart"],
-  tier: "standard",
-  useCase: ["explainer"],
-  tags: ["background", "chart", "line", "data", "trend", "analytics", "svg", "time-series"],
-  mood: ["corporate", "editorial", "tech-demo", "minimal"],
-  paramsSchema: paramsSchema2,
-  propDefaults: {
-    data: [12, 19, 8, 15, 22, 18, 28, 25, 32],
-    width: 1e3,
-    height: 500,
-    strokeColor: ACCENT,
-    accentColor: TEAL,
-    strokeWidth: 4,
-    background: BG,
-    gridColor: "rgba(255,255,255,0.07)",
-    endpointValue: true,
-    showDot: true,
-    speed: 1
-  },
-  examples: [
-    {
-      name: "growth-curve",
-      mood: ["corporate", "tech-demo"],
-      params: {
-        data: [10, 14, 18, 22, 28, 35, 44, 56, 72, 95],
-        strokeColor: SUCCESS
-      },
-      description: "Up-and-to-the-right growth chart, green."
-    },
-    {
-      name: "latency-drop",
-      mood: ["tech-demo", "editorial"],
-      params: {
-        data: [820, 740, 680, 540, 420, 320, 240, 180, 140, 110],
-        strokeColor: TEAL,
-        strokeWidth: 5
-      },
-      description: 'Latency-down chart, blue. "We made it 7\xD7 faster".'
-    }
-  ],
-  textParam: null,
-  subtextParam: null,
-  tokens: [
-    { propPath: "strokeColor", cssVar: "--cf-accent", fallback: ACCENT, brandKitPath: "colors.accent" },
-    { propPath: "background", cssVar: "--cf-bg", fallback: BG, brandKitPath: "colors.background" }
-  ],
-  durationInFrames: 120,
-  fps: 30,
-  width: 1920,
-  height: 1080,
-  preview: { thumbnailFrame: 90, mode: "oneshot", defaultExample: "growth-curve" }
-};
-
-// src/backgrounds/dither-gradient-bg/config.ts
-import { z as z3 } from "zod";
-var hexColor = z3.string().regex(/^#[0-9a-fA-F]{6}$/, "hex #rrggbb");
-var paramsSchema3 = z3.object({
-  color: hexColor.default(BLUE).describe("Ink color of the dither dots."),
-  color2: hexColor.default(TEAL).describe("Second ink \u2014 dots blend between the two along the field."),
-  background: hexColor.default(BG).describe("Ground behind the dots."),
-  pixelSize: z3.number().int().min(3).max(24).default(8).describe("Dither cell size in px at 1080p. 6\u201310 reads deliberate; larger goes retro."),
-  angle: z3.number().min(-180).max(180).default(-30).describe("Base gradient direction in degrees."),
-  speed: z3.number().min(0.1).max(3).default(1).describe("Field drift speed."),
-  seed: z3.number().int().min(0).max(9999).default(7).describe("Field seed \u2014 different warp layouts.")
-}).passthrough();
-var config3 = {
-  id: "dither-gradient-bg",
-  component: DitherGradientBg,
-  name: "Dither Gradient Background",
-  category: "backgrounds",
-  kind: "component",
-  version: "0.1.1",
-  intent: "gradient-fill",
-  description: "Ordered-dither gradient \u2014 an animated luminance field quantized through a Bayer 8\xD78 matrix into hard pixel dots that drift and warp slowly. The pixel-craft dev-tool aesthetic: texture with intent, zero banding by construction. Sits between silk-flow-bg (organic threads) and mesh-gradient-bg (soft wash) as the technical register.",
-  useWhen: "Dev-tool launches, terminal/CLI product beats, changelog and release videos \u2014 anywhere the brand voice is precise and software-native. Title-safe by default (ambient drift). Pair with typewriter / terminal-simulator / glass-code-block.",
-  pairsWith: ["typewriter", "terminal-simulator", "glass-code-block", "stat-counter", "cinematic-title"],
-  avoidWith: ["mesh-gradient-bg", "silk-flow-bg", "dynamic-grid"],
-  tier: "recommended",
-  useCase: ["background", "intro"],
-  tags: ["background", "dither", "bayer", "pixel", "gradient", "retro-digital", "dev-tool"],
-  mood: ["tech-demo", "minimal", "editorial"],
-  paramsSchema: paramsSchema3,
-  propDefaults: {
-    color: BLUE,
-    color2: TEAL,
-    background: BG,
-    pixelSize: 8,
-    angle: -30,
-    speed: 1,
-    seed: 7
-  },
-  examples: [
-    { name: "indigo-terminal", mood: ["tech-demo"], params: { color: BLUE, color2: TEAL, background: BG, pixelSize: 8, angle: -30, speed: 1, seed: 7 } },
-    { name: "phosphor", mood: ["tech-demo", "minimal"], params: { color: SUCCESS, color2: SUCCESS_SOFT, background: BG_DEEP, pixelSize: 6, angle: -15, speed: 0.8, seed: 21 } },
-    { name: "paper-print", mood: ["editorial", "minimal"], params: { color: "#334155", color2: "#94a3b8", background: "#f5f1e8", pixelSize: 7, angle: -40, speed: 0.6, seed: 12 } }
-  ],
-  textParam: null,
-  subtextParam: null,
-  tokens: [
-    { propPath: "background", cssVar: "--cf-bg", fallback: BG, brandKitPath: "colors.background" },
-    { propPath: "color", cssVar: "--cf-accent", fallback: BLUE, brandKitPath: "colors.accent" }
-  ],
-  durationInFrames: 300,
-  fps: 30,
-  width: 1920,
-  height: 1080,
-  preview: { thumbnailFrame: 90, mode: "loop", defaultExample: "indigo-terminal" }
-};
-
-// src/backgrounds/dynamic-grid/config.ts
-import { z as z4 } from "zod";
-var paramsSchema4 = z4.object({
-  cellSize: z4.number().min(20).max(200).default(60).describe("Grid cell size in pixels at 1920\xD71080."),
-  lineColor: z4.string().default("rgba(255,255,255,0.22)").describe("Grid line color. Low-alpha keeps it underneath \u2014 but stay above ~0.15 or H.264 crushes it to black."),
-  background: z4.string().default(BG).describe("Frame background."),
-  direction: z4.enum(["diagonal", "horizontal", "vertical"]).default("diagonal").describe("Animation direction."),
-  speed: z4.number().min(0.25).max(4).default(1).describe("Playback speed.")
-}).passthrough();
-var config4 = {
-  id: "dynamic-grid",
-  component: DynamicGrid,
-  name: "Dynamic Grid",
-  category: "backgrounds",
-  kind: "component",
-  version: "0.1.2",
-  intent: "pattern-fill",
-  description: 'Slowly translating grid lines across a dark background. The "tech-product" background for code, terminal, or product-demo content. Three directions of motion (diagonal/horizontal/vertical).',
-  useWhen: "Tech demos, code reveals, dark-mode UI showcases, anywhere a clean grid sits underneath the content. Pair with terminal-simulator or glass-code-block for the full developer aesthetic.",
-  pairsWith: ["terminal-simulator", "glass-code-block", "typewriter", "pulsing-indicator"],
-  avoidWith: ["mesh-gradient-bg"],
-  tier: "standard",
-  useCase: ["background"],
-  tags: ["background", "grid", "tech", "lines", "pattern", "minimal"],
-  mood: ["tech-demo", "minimal", "corporate"],
-  paramsSchema: paramsSchema4,
-  propDefaults: { cellSize: 60, lineColor: "rgba(255,255,255,0.22)", background: BG, direction: "diagonal", speed: 1 },
-  examples: [
-    { name: "tech-default", mood: ["tech-demo"], params: { cellSize: 60, lineColor: "rgba(255,255,255,0.22)", background: BG, direction: "diagonal", speed: 1 } },
-    { name: "tight-horizontal", mood: ["minimal"], params: { cellSize: 40, lineColor: "rgba(255,255,255,0.06)", background: BG, direction: "horizontal", speed: 0.7 } }
-  ],
-  textParam: null,
-  subtextParam: null,
-  tokens: [
-    { propPath: "background", cssVar: "--cf-bg", fallback: BG, brandKitPath: "colors.background" },
-    { propPath: "lineColor", cssVar: "--cf-grid-line", fallback: "rgba(255,255,255,0.22)", brandKitPath: "colors.gridLine" }
-  ],
-  durationInFrames: 240,
-  fps: 30,
-  width: 1920,
-  height: 1080,
-  preview: { thumbnailFrame: 60, mode: "loop", defaultExample: "tech-default" }
-};
-
-// src/backgrounds/ecosystem-constellation/config.ts
-import { z as z5 } from "zod";
-var paramsSchema5 = z5.object({
-  satelliteCount: z5.number().int().min(3).max(8).default(6).describe(
-    "How many satellite logos orbit the center. 5\u20137 reads as a busy ecosystem; 3\u20134 feels focused."
-  ),
-  centerLabel: z5.string().min(1).max(3).default("V").describe(
-    'Single character (or short monogram) shown in the center hub. The "your brand" letter.'
-  ),
-  accentColor: z5.string().default(VIOLET).describe(
-    "Center hub gradient and connection-line color. Brand accent."
-  ),
-  speed: z5.number().min(0.25).max(4).default(1).describe("Playback speed multiplier (orbit + pulse + data-fire).")
-}).passthrough();
-var config5 = {
-  id: "ecosystem-constellation",
-  component: EcosystemConstellation,
-  name: "Ecosystem Constellation",
-  category: "backgrounds",
-  kind: "component",
-  version: "0.1.1",
-  intent: "fill-background",
-  description: 'Center brand hub with satellite logos (GitHub, Vercel, Stripe, Slack, Linear, Figma, Notion, Discord) orbiting on elliptical paths. Connection lines pulse on a 30-frame cycle, illuminating one satellite at a time to suggest "data flowing". Satellites assemble from offscreen on a staggered spring at frame 0.',
-  useWhen: `Integration showcases ("works with all your tools"), platform-overview heroes, ecosystem maps, "we connect your stack" beats. Avoid when the integrations shown don't match the audience's stack \u2014 the brand list is fixed in this primitive.`,
-  pairsWith: ["cinematic-title", "kinetic-type", "lower-third", "volumetric-rays"],
-  avoidWith: ["perspective-marquee", "infinite-bento-pan"],
-  tier: "standard",
-  useCase: ["explainer", "background"],
-  tags: ["background", "ecosystem", "integrations", "orbit", "constellation", "logos", "platform"],
-  mood: ["tech-demo", "cinematic", "corporate"],
-  paramsSchema: paramsSchema5,
-  propDefaults: { satelliteCount: 6, centerLabel: "V", accentColor: VIOLET, speed: 1 },
-  examples: [
-    {
-      name: "platform-hub",
-      mood: ["tech-demo"],
-      params: { satelliteCount: 6, centerLabel: "V", accentColor: VIOLET },
-      description: "Default 6-satellite purple hub."
-    },
-    {
-      name: "tight-trio",
-      mood: ["minimal", "corporate"],
-      params: { satelliteCount: 3, centerLabel: "C", accentColor: BLUE },
-      description: "Three satellites only \u2014 focused integration story."
-    }
-  ],
-  textParam: "centerLabel",
-  subtextParam: null,
-  tokens: [
-    { propPath: "accentColor", cssVar: "--cf-accent", fallback: VIOLET, brandKitPath: "colors.accent" }
-  ],
-  durationInFrames: 240,
-  fps: 30,
-  width: 1920,
-  height: 1080,
-  preview: { thumbnailFrame: 120, mode: "loop", defaultExample: "platform-hub" }
-};
-
-// src/backgrounds/infinite-marquee/config.ts
-import { z as z6 } from "zod";
-var paramsSchema6 = z6.object({
-  text: z6.string().default("CUEFRAME / NEXT / NEW / NOW / ").describe('Repeating marquee text. End with a separator (" / " or "  \u2022  ") for clean repetition.'),
-  fontSize: z6.number().min(20).max(280).default(120).describe("Font size in pixels."),
-  color: z6.string().default(SURFACE).describe("Text color."),
-  fontWeight: z6.number().min(100).max(900).default(800).describe("Font weight. Heavy reads as the news-ticker / runway feel."),
-  pixelsPerFrame: z6.number().min(0.5).max(20).default(4).describe("Scroll speed in px/frame. 4 reads steady; >8 reads frantic."),
-  stroke: z6.boolean().default(false).describe("Render as outline-only (stroke) text."),
-  strokeColor: z6.string().default(SURFACE).describe("Stroke color when stroke=true."),
-  background: z6.string().default(TEXT_HI).describe("Frame background."),
-  speed: z6.number().min(0.25).max(4).default(1).describe("Playback speed multiplier.")
-}).passthrough();
-var config6 = {
-  id: "infinite-marquee",
-  component: InfiniteMarquee,
-  name: "Infinite Marquee",
-  category: "backgrounds",
-  kind: "component",
-  version: "0.1.1",
-  intent: "pattern-fill",
-  description: "Endlessly scrolling text band. Repeating word/phrase scrolling left across the frame as a background. Stripe / fashion-runway / news-ticker aesthetic.",
-  useWhen: "Lower-third tickers, product-page bands, brand statement loops. Stack two with opposite directions for an even more graphic feel. Avoid for moments that need narrative attention \u2014 the constant motion is hypnotic.",
-  pairsWith: ["cinematic-title", "lower-third", "shimmer-sweep"],
-  avoidWith: [],
-  tier: "niche",
-  useCase: ["background"],
-  tags: ["background", "marquee", "ticker", "scrolling", "repeating", "loop"],
-  mood: ["breaking-news", "corporate", "aggressive"],
-  paramsSchema: paramsSchema6,
-  propDefaults: { text: "CUEFRAME / NEXT / NEW / NOW / ", fontSize: 120, color: SURFACE, fontWeight: 800, pixelsPerFrame: 4, stroke: false, strokeColor: SURFACE, background: TEXT_HI, speed: 1 },
-  examples: [
-    { name: "product-band", mood: ["corporate"], params: { text: "cueframe / cueframe / cueframe / ", fontSize: 100, color: SURFACE, fontWeight: 800, pixelsPerFrame: 4, stroke: false, strokeColor: SURFACE, background: TEXT_HI, speed: 1 } },
-    { name: "breaking-ticker", mood: ["breaking-news"], params: { text: "BREAKING / LIVE / NOW / ", fontSize: 140, color: DANGER, fontWeight: 900, pixelsPerFrame: 6, stroke: false, strokeColor: DANGER, background: BG, speed: 1 } },
-    { name: "outline-runway", mood: ["minimal"], params: { text: "PREMIUM / PREMIUM / PREMIUM / ", fontSize: 160, color: "transparent", fontWeight: 900, pixelsPerFrame: 3, stroke: true, strokeColor: BG, background: TEXT_HI, speed: 1 } }
-  ],
-  textParam: "text",
-  subtextParam: null,
-  tokens: [
-    { propPath: "color", cssVar: "--cf-text", fallback: SURFACE, brandKitPath: "colors.text" },
-    { propPath: "background", cssVar: "--cf-bg", fallback: TEXT_HI, brandKitPath: "colors.background" }
-  ],
-  durationInFrames: 240,
-  fps: 30,
-  width: 1920,
-  height: 1080,
-  preview: { thumbnailFrame: 60, mode: "loop", defaultExample: "product-band" }
-};
-
-// src/backgrounds/mesh-gradient-bg/config.ts
-import { z as z7 } from "zod";
-var paramsSchema7 = z7.object({
-  colors: z7.array(z7.string()).min(2).max(8).default([BLUE, VIOLET, TEAL]).describe("Mesh blob colors. 2\u20133 analogous hues read premium; whole-wheel rainbows read templated."),
-  speed: z7.number().min(0.25).max(4).default(1).describe("Animation speed."),
-  background: z7.string().default(BG).describe("Frame background underneath the blobs."),
-  blur: z7.number().min(0).max(160).default(100).describe("Gaussian blur radius for the mesh \u2014 high values create the soft mesh look.")
-}).passthrough();
-var config7 = {
-  id: "mesh-gradient-bg",
-  component: MeshGradientBg,
-  name: "Mesh Gradient Background",
-  category: "backgrounds",
-  kind: "component",
-  version: "0.2.1",
-  intent: "gradient-fill",
-  description: "Animated mesh gradient \u2014 multiple soft-blurred color blobs drifting across the frame. The Stripe / Linear / Vercel marketing-page background, in motion. Universal warm/cool/brand-tinted background.",
-  useWhen: "Default background for any text-overlay primitive, hero frames, brand pages, anywhere a static color would feel flat. Pair with brand-kit colors for cascade theming.",
-  pairsWith: ["blur-reveal", "cinematic-title", "kinetic-type", "shimmer-sweep"],
-  avoidWith: ["dynamic-grid"],
-  tier: "standard",
-  useCase: ["background"],
-  tags: ["background", "mesh", "gradient", "blobs", "soft", "animated"],
-  mood: ["minimal", "soft", "corporate", "cinematic"],
-  paramsSchema: paramsSchema7,
-  propDefaults: { colors: [BLUE, VIOLET, TEAL], speed: 1, background: BG, blur: 100 },
-  examples: [
-    { name: "launch-wash", mood: ["minimal", "corporate"], params: { colors: [BLUE, VIOLET, TEAL], speed: 1, background: BG, blur: 100 } },
-    { name: "brand-warm", mood: ["corporate"], params: { colors: [ACCENT_STRONG, ACCENT, WARNING], speed: 0.7, background: BG, blur: 100 } },
-    { name: "cinema-dark", mood: ["cinematic"], params: { colors: ["#1e3a5f", "#3b1f5e", "#1e293b"], speed: 0.5, background: BG, blur: 120 } }
-  ],
-  textParam: null,
-  subtextParam: null,
-  tokens: [
-    { propPath: "background", cssVar: "--cf-bg", fallback: BG, brandKitPath: "colors.background" }
-  ],
-  durationInFrames: 240,
-  fps: 30,
-  width: 1920,
-  height: 1080,
-  preview: { thumbnailFrame: 120, mode: "loop", defaultExample: "launch-wash" }
-};
-
-// src/backgrounds/perspective-marquee/config.ts
-import { z as z8 } from "zod";
-var paramsSchema8 = z8.object({
-  items: z8.array(z8.string().min(1).max(80)).min(2).max(40).default([
-    "Northwind",
-    "Vertex",
-    "Lumina",
-    "Datum",
-    "Forgeworks",
-    "Overture",
-    "Solace",
-    "Pinnacle"
-  ]).describe(
-    "Items to scroll across the marquee. Brand names, feature words, customer logos-as-text. 6\u201312 items loops cleanly."
-  ),
-  fontSize: z8.number().min(40).max(240).default(84).describe("Item font size in pixels at 1920\xD71080."),
-  color: z8.string().default(TEXT_HI).describe("Item text color."),
-  fontWeight: z8.number().min(100).max(900).default(700).describe("CSS font weight. 700\u2013800 reads as confident logo wall."),
-  pixelsPerFrame: z8.number().min(0.25).max(20).default(2).describe("Marquee scroll rate. 1\u20133 is the readable sweet spot."),
-  rotateY: z8.number().min(-60).max(60).default(-28).describe(
-    "Y-axis 3D rotation in degrees. Negative tilts the row to the left. 0 disables the perspective effect."
-  ),
-  rotateX: z8.number().min(-30).max(30).default(8).describe("X-axis tilt in degrees."),
-  perspective: z8.number().min(400).max(3e3).default(1200).describe(
-    "CSS perspective in pixels. Lower = more dramatic foreshortening; 1000\u20131400 reads as cinematic."
-  ),
-  fadeColor: z8.string().default(BG).describe("Edge-fade color. Match the background for a clean vignette."),
-  background: z8.string().default(BG).describe("Frame background."),
-  speed: z8.number().min(0.25).max(4).default(1).describe("Playback speed multiplier.")
-}).passthrough();
-var config8 = {
-  id: "perspective-marquee",
-  component: PerspectiveMarquee,
-  name: "Perspective Marquee",
-  category: "backgrounds",
-  kind: "component",
-  version: "0.1.2",
-  intent: "fill-background",
-  description: 'Infinite horizontal marquee tilted in 3D with rotateX/rotateY perspective. Items fade and blur toward the edges via depth-of-field calculation, with a vignette fade to background on all four sides. The "logo wall in motion" \u2014 modern alternative to the flat infinite-marquee.',
-  useWhen: 'Brand walls ("trusted by"), feature word-clouds, customer logo strips, modern hero backgrounds for product launches. Avoid when items must remain individually readable through the entire scroll (edge blur reduces legibility) \u2014 use infinite-marquee for that.',
-  pairsWith: ["cinematic-title", "kinetic-type", "volumetric-rays", "grain"],
-  avoidWith: ["infinite-marquee", "mesh-gradient-bg"],
-  tier: "standard",
-  useCase: ["background"],
-  tags: ["background", "marquee", "perspective", "3d", "logo-wall", "scrolling", "tilted"],
-  mood: ["cinematic", "tech-demo", "editorial", "corporate"],
-  paramsSchema: paramsSchema8,
-  propDefaults: {
-    items: ["Northwind", "Vertex", "Lumina", "Datum", "Forgeworks", "Overture", "Arc", "Cursor"],
-    fontSize: 84,
-    color: TEXT_HI,
-    fontWeight: 700,
-    pixelsPerFrame: 2,
-    rotateY: -28,
-    rotateX: 8,
-    perspective: 1200,
-    fadeColor: BG,
-    background: BG,
-    speed: 1
-  },
-  examples: [
-    {
-      name: "logo-wall",
-      mood: ["tech-demo", "corporate"],
-      params: {
-        items: ["Northwind", "Vertex", "Lumina", "Datum", "Forgeworks", "Overture"],
-        rotateY: -28,
-        rotateX: 8
-      },
-      description: "Default tilted brand-wall."
-    },
-    {
-      name: "feature-keywords",
-      mood: ["editorial", "cinematic"],
-      params: {
-        items: ["Streaming", "Caching", "Tools", "Eval", "Tracing", "Costs", "Routing"],
-        fontSize: 100,
-        rotateY: -20,
-        rotateX: 4,
-        color: WARNING
-      },
-      description: "Feature words, gold, gentler tilt \u2014 editorial hero."
-    }
-  ],
-  textParam: null,
-  subtextParam: null,
-  tokens: [
-    { propPath: "background", cssVar: "--cf-bg", fallback: BG, brandKitPath: "colors.background" },
-    { propPath: "fadeColor", cssVar: "--cf-bg", fallback: BG, brandKitPath: "colors.background" },
-    { propPath: "color", cssVar: "--cf-fg", fallback: TEXT_HI, brandKitPath: "colors.textOnMedia" }
-  ],
-  durationInFrames: 240,
-  fps: 30,
-  width: 1920,
-  height: 1080,
-  preview: { thumbnailFrame: 120, mode: "loop", defaultExample: "logo-wall" }
-};
-
-// src/backgrounds/silk-flow-bg/config.ts
-import { z as z9 } from "zod";
-var hexColor2 = z9.string().regex(/^#[0-9a-fA-F]{6}$/, "hex #rrggbb");
-var paramsSchema9 = z9.object({
-  colors: z9.array(hexColor2).min(1).max(5).default([BLUE, VIOLET, TEAL]).describe("Thread hues. First = dominant (~70% of threads), rest = sparse accents. 2\u20133 is the sweet spot."),
-  background: hexColor2.default(BG).describe("Ground color. Dark grounds get luminous additive threads; light grounds get ink-on-paper strokes."),
-  density: z9.number().min(0.2).max(2).default(1).describe("Thread-count multiplier (1 \u2248 170 threads)."),
-  speed: z9.number().min(0.1).max(3).default(1).describe("Motion speed \u2014 travelling light + silk sway."),
-  glow: z9.number().min(0).max(1).default(0.55).describe("Bloom intensity around the threads."),
-  grain: z9.number().min(0).max(0.3).default(0.07).describe("Film-grain opacity. Kills gradient banding; 0 disables."),
-  vignette: z9.number().min(0).max(1).default(0.45).describe("Edge falloff that seats a centered title. 0 disables."),
-  angle: z9.number().min(-180).max(180).default(-16).describe("Base flow direction in degrees."),
-  seed: z9.number().int().min(0).max(9999).default(7).describe("Field seed \u2014 different seeds give different silk layouts.")
-}).passthrough();
-var config9 = {
-  id: "silk-flow-bg",
-  component: SilkFlowBg,
-  name: "Silk Flow Background",
-  category: "backgrounds",
-  kind: "component",
-  version: "0.1.1",
-  intent: "gradient-fill",
-  description: "Luminous flow-field silk \u2014 hundreds of fine threads drawn through an organic noise current, with travelling light, bloom, film grain and vignette. Generative-art-grade texture that reads authored, not generated: the title-sequence background for product launches. On light grounds it becomes an ink-etching on paper.",
-  useWhen: "Hero backgrounds for product launch and marketing videos, behind cinematic-title / hero text, brand films \u2014 anywhere the background must feel designed. Prefer over mesh-gradient-bg when the video sells a product.",
-  pairsWith: ["cinematic-title", "blur-reveal", "masked-slide-reveal", "kinetic-type"],
-  avoidWith: ["mesh-gradient-bg", "dynamic-grid", "particles"],
-  tier: "recommended",
-  useCase: ["background", "intro"],
-  tags: ["background", "silk", "flow-field", "threads", "generative", "luminous", "grain", "launch"],
-  mood: ["cinematic", "editorial", "minimal", "corporate"],
-  paramsSchema: paramsSchema9,
-  propDefaults: {
-    colors: [BLUE, VIOLET, TEAL],
-    background: BG,
-    density: 1,
-    speed: 1,
-    glow: 0.55,
-    grain: 0.07,
-    vignette: 0.45,
-    angle: -16,
-    seed: 7
-  },
-  examples: [
-    { name: "launch-night", mood: ["cinematic", "corporate"], params: { colors: [BLUE, VIOLET, TEAL], background: BG, density: 1, speed: 1, glow: 0.55, grain: 0.07, vignette: 0.45, angle: -16, seed: 7 } },
-    { name: "ember", mood: ["cinematic"], params: { colors: [ACCENT_STRONG, ACCENT, ACCENT_SOFT], background: BG, density: 0.9, speed: 0.8, glow: 0.6, grain: 0.08, vignette: 0.5, angle: -30, seed: 21 } },
-    { name: "aurora", mood: ["cinematic", "minimal"], params: { colors: [SUCCESS, TEAL, BLUE], background: BG, density: 1.1, speed: 0.7, glow: 0.65, grain: 0.06, vignette: 0.4, angle: -60, seed: 4 } },
-    { name: "ink-paper", mood: ["editorial", "minimal"], params: { colors: ["#334155", "#0f172a", "#b45309"], background: "#f5f1e8", density: 0.8, speed: 0.6, glow: 0.25, grain: 0.05, vignette: 0.3, angle: -12, seed: 12 } },
-    { name: "mono-wire", mood: ["minimal"], params: { colors: [TEXT_FAINT], background: BG, density: 0.7, speed: 0.9, glow: 0.4, grain: 0.06, vignette: 0.4, angle: -8, seed: 33 } }
-  ],
-  textParam: null,
-  subtextParam: null,
-  tokens: [
-    { propPath: "background", cssVar: "--cf-bg", fallback: BG, brandKitPath: "colors.background" }
-  ],
-  durationInFrames: 300,
-  fps: 30,
-  width: 1920,
-  height: 1080,
-  preview: { thumbnailFrame: 90, mode: "loop", defaultExample: "launch-night" }
-};
-
-// src/backgrounds/vector-field/config.ts
-import { z as z10 } from "zod";
-var hexColor3 = z10.string().regex(/^#[0-9a-fA-F]{6}$/, "hex #rrggbb");
-var paramsSchema10 = z10.object({
-  pointCount: z10.number().int().min(30).max(400).default(140).describe("Embedding points in the field."),
-  color: hexColor3.default(BLUE).describe("Base point color."),
-  accentColor: hexColor3.default(ACCENT).describe("Query point + neighbor-edge accent."),
-  background: hexColor3.default(BG).describe("Ground."),
-  queryAt: z10.number().int().min(0).max(200).default(40).describe("Frame the query point lands (ring pulse + neighbor pull)."),
-  neighbors: z10.number().int().min(2).max(14).default(6).describe("Nearest neighbors that brighten and connect."),
-  seed: z10.number().int().min(0).max(9999).default(7).describe("Layout seed \u2014 different point fields.")
-}).passthrough();
-var config10 = {
-  id: "vector-field",
-  component: VectorField,
-  name: "Vector Field",
-  category: "backgrounds",
-  kind: "component",
-  version: "0.1.1",
-  intent: "gradient-fill",
-  description: "Embedding space, cinematized: a drifting field of points; a query lands with a ring pulse, its nearest neighbors brighten and draw shimmering edges to it, and the local cluster leans in. Semantic search made visible. Ambient enough to hold a title.",
-  useWhen: 'RAG/search product beats, "understands meaning" claims, memory/recall features, vector-DB launches. Title-safe ambient; the query beat lands ~1.5s in. For app-icon orbits use ecosystem-constellation instead.',
-  pairsWith: ["token-stream", "stat-counter", "cinematic-title", "vignette"],
-  avoidWith: ["ecosystem-constellation", "particles", "data-flow-pipes"],
-  tier: "recommended",
-  useCase: ["background", "intro", "explainer"],
-  tags: ["background", "ai", "embeddings", "vectors", "semantic-search", "rag", "points"],
-  mood: ["tech-demo", "minimal", "cinematic"],
-  paramsSchema: paramsSchema10,
-  propDefaults: {
-    pointCount: 140,
-    color: BLUE,
-    accentColor: ACCENT,
-    background: BG,
-    queryAt: 40,
-    neighbors: 6,
-    seed: 7
-  },
-  examples: [
-    { name: "semantic-search", mood: ["tech-demo"], params: { pointCount: 140, color: BLUE, accentColor: ACCENT, background: BG, queryAt: 40, neighbors: 6, seed: 7 } },
-    { name: "memory-recall", mood: ["cinematic", "minimal"], params: { pointCount: 220, color: BLUE, accentColor: VIOLET, background: BG, queryAt: 55, neighbors: 8, seed: 21 } }
-  ],
-  textParam: null,
-  subtextParam: null,
-  tokens: [
-    { propPath: "background", cssVar: "--cf-bg", fallback: BG, brandKitPath: "colors.background" },
-    { propPath: "accentColor", cssVar: "--cf-accent", fallback: ACCENT, brandKitPath: "colors.accent" }
-  ],
-  durationInFrames: 240,
-  fps: 30,
-  width: 1920,
-  height: 1080,
-  preview: { thumbnailFrame: 80, mode: "loop", defaultExample: "semantic-search" }
-};
-
-// src/backgrounds/volumetric-rays/config.ts
-import { z as z11 } from "zod";
-var paramsSchema11 = z11.object({
-  text: z11.string().min(1).max(48).default("REMOCN").describe(
-    "Text the rays pour through. 4\u20138 characters reads best \u2014 longer strings shrink and lose the god-rays effect. Auto-fits (shrinks to one line)."
-  ),
-  fontSize: z11.number().min(80).max(480).default(240).describe("Font size in pixels at 1920\xD71080."),
-  fontWeight: z11.number().min(100).max(900).default(800).describe(
-    "Font weight. 700\u2013900 reads dramatic; <600 looks washed out by the bloom."
-  ),
-  rayColor: z11.string().default(ACCENT).describe(
-    "Ray + bloom color. Warm yellows and oranges read as sun; cool cyans read as data/sci-fi."
-  ),
-  background: z11.string().default(BG).describe("Frame background. Should be near-black for the rays to read."),
-  textColor: z11.string().default(BG).describe(
-    "Front silhouette color. Match background to make the letters read as cut-outs against the light."
-  ),
-  intensity: z11.number().min(0).max(2).default(1).describe(
-    "Bloom + ray strength multiplier. 0.5 reads subtle; 1 is canonical; >1.5 starts blowing out."
-  ),
-  speed: z11.number().min(0.25).max(4).default(1).describe("Playback speed multiplier (rotation + bloom ramp).")
-}).passthrough();
-var config11 = {
-  id: "volumetric-rays",
-  component: VolumetricRays,
-  name: "Volumetric Rays",
-  category: "backgrounds",
-  kind: "component",
-  version: "0.1.1",
-  intent: "animate-rays",
-  description: "God-rays / volumetric-light effect built entirely from CSS + SVG masks. Same text rendered three times: a heavily-blurred halo behind, a conic-gradient ray mask clipped to the text shape, and a solid silhouette in front. The result reads as light pouring through cut-out lettering. Slow rotation + sine-wave halo pulse keep the scene from feeling frozen.",
-  useWhen: 'Cinematic title cards, "the announcement" reveals, brand-name heroes, dramatic openers. Avoid for body copy or anything that needs to be read quickly (the bloom obscures text edges) and avoid stacking with other heavy bloom/glow effects (kinetic-type, mesh-gradient-bg).',
-  pairsWith: ["cinematic-title", "grain", "vignette", "perspective-marquee"],
-  avoidWith: ["mesh-gradient-bg", "kinetic-type"],
-  tier: "standard",
-  useCase: ["intro", "background"],
-  tags: ["background", "rays", "volumetric", "god-rays", "bloom", "cinematic", "title"],
-  mood: ["cinematic", "aggressive", "editorial"],
-  paramsSchema: paramsSchema11,
-  propDefaults: {
-    text: "REMOCN",
-    fontSize: 240,
-    fontWeight: 800,
-    rayColor: ACCENT,
-    background: BG,
-    textColor: BG,
-    intensity: 1,
-    speed: 1
-  },
-  examples: [
-    {
-      name: "golden-hero",
-      mood: ["cinematic", "editorial"],
-      params: { text: "LAUNCH", rayColor: ACCENT, intensity: 1 },
-      description: "Default warm-yellow god-rays for a brand reveal."
-    },
-    {
-      name: "cyber-blue",
-      mood: ["cinematic", "aggressive"],
-      params: { text: "2026", rayColor: TEAL, fontSize: 280, intensity: 1.2 },
-      description: "Cyan rays \u2014 sci-fi / cyber feel."
-    }
-  ],
-  textParam: "text",
-  subtextParam: null,
-  tokens: [
-    { propPath: "rayColor", cssVar: "--cf-accent", fallback: ACCENT, brandKitPath: "colors.accent" },
-    { propPath: "background", cssVar: "--cf-bg", fallback: BG, brandKitPath: "colors.background" },
-    { propPath: "textColor", cssVar: "--cf-bg", fallback: BG, brandKitPath: "colors.background" }
-  ],
-  durationInFrames: 240,
-  fps: 30,
-  width: 1920,
-  height: 1080,
-  preview: { thumbnailFrame: 90, mode: "loop", defaultExample: "golden-hero" }
-};
-
-// src/backgrounds/index.ts
-var catalog = [
-  config,
-  config2,
-  config3,
-  config4,
-  config5,
-  config6,
-  config7,
-  config8,
-  config9,
-  config10,
-  config11
-];
-
-export {
-  AnimatedBarChart,
-  AnimatedLineChart,
-  DitherGradientBg,
-  DynamicGrid,
-  EcosystemConstellation,
-  InfiniteMarquee,
-  MeshGradientBg,
-  PerspectiveMarquee,
-  SilkFlowBg,
-  VectorField,
-  VolumetricRays,
-  catalog
-};
-//# sourceMappingURL=chunk-E3KNUSFG.js.map