@cueframe/kernel 0.0.1

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

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