@heyramzi/ui 0.0.0-stage → 6.1.0

package/src/effects/border-beam/presets.ts

@@ -0,0 +1,699 @@
+export type BorderBeamSize = "sm" | "md" | "line";
+export type BorderBeamColorVariant = "colorful" | "mono" | "ocean" | "sunset";
+export type BorderBeamTheme = "dark" | "light" | "auto";
+export type ResolvedTheme = "dark" | "light";
+
+export interface SizeConfig {
+  borderRadius: number;
+  borderWidth: number;
+  width?: number;
+  height?: number;
+}
+
+export interface ThemeColors {
+  strokeOpacity: number;
+  innerOpacity: number;
+  bloomOpacity: number;
+  innerShadow: string;
+  saturation: number;
+}
+
+export const sizePresets: Record<BorderBeamSize, SizeConfig> = {
+  sm: { borderRadius: 18, borderWidth: 1, width: 70, height: 36 },
+  md: { borderRadius: 16, borderWidth: 1 },
+  line: { borderRadius: 16, borderWidth: 1 },
+};
+
+export const sizeThemePresets: Record<BorderBeamSize, Record<ResolvedTheme, ThemeColors>> = {
+  sm: {
+    dark: {
+      strokeOpacity: 0.48,
+      innerOpacity: 0.7,
+      bloomOpacity: 0.8,
+      innerShadow: "rgba(255, 255, 255, 0.3)",
+      saturation: 1.2,
+    },
+    light: {
+      strokeOpacity: 0.33,
+      innerOpacity: 0.46,
+      bloomOpacity: 0.54,
+      innerShadow: "rgba(0, 0, 0, 0.14)",
+      saturation: 0.96,
+    },
+  },
+  md: {
+    dark: {
+      strokeOpacity: 0.48,
+      innerOpacity: 0.7,
+      bloomOpacity: 0.8,
+      innerShadow: "rgba(255, 255, 255, 0.27)",
+      saturation: 1.2,
+    },
+    light: {
+      strokeOpacity: 0.33,
+      innerOpacity: 0.46,
+      bloomOpacity: 0.54,
+      innerShadow: "rgba(0, 0, 0, 0.14)",
+      saturation: 0.96,
+    },
+  },
+  line: {
+    dark: {
+      strokeOpacity: 0.72,
+      innerOpacity: 0.7,
+      bloomOpacity: 0.8,
+      innerShadow: "rgba(255, 255, 255, 0.1)",
+      saturation: 1.2,
+    },
+    light: {
+      strokeOpacity: 0.72,
+      innerOpacity: 0.7,
+      bloomOpacity: 0.8,
+      innerShadow: "rgba(0, 0, 0, 0.14)",
+      saturation: 1.2,
+    },
+  },
+};
+
+export const themeColors: Record<ResolvedTheme, ThemeColors> = {
+  dark: { ...sizeThemePresets.md.dark },
+  light: { ...sizeThemePresets.md.light },
+};
+
+type GradientStop = { color: string; pos: string; size: string };
+type SpikeColors = { primary: string; secondary: string };
+type BorderColorConfig = {
+  border: GradientStop[];
+  spike: SpikeColors;
+  spikeLt: SpikeColors;
+};
+
+const borderColors: Record<BorderBeamColorVariant, BorderColorConfig> = {
+  colorful: {
+    border: [
+      { color: "rgb(255, 50, 100)", pos: "33% -7.4%", size: "70px 40px" },
+      { color: "rgb(40, 140, 255)", pos: "12% -5%", size: "60px 35px" },
+      { color: "rgb(50, 200, 80)", pos: "2.1% 68.3%", size: "40px 70px" },
+      { color: "rgb(30, 185, 170)", pos: "2.1% 68.3%", size: "20px 35px" },
+      { color: "rgb(100, 70, 255)", pos: "74.4% 100%", size: "180px 32px" },
+      { color: "rgb(40, 140, 255)", pos: "55% 100%", size: "85px 26px" },
+      { color: "rgb(255, 120, 40)", pos: "93.9% 0%", size: "74px 32px" },
+      { color: "rgb(240, 50, 180)", pos: "100% 27.1%", size: "26px 42px" },
+      { color: "rgb(180, 40, 240)", pos: "100% 27.1%", size: "52px 48px" },
+    ],
+    spike: { primary: "rgb(255, 60, 80)", secondary: "rgba(40, 190, 180, 0.98)" },
+    spikeLt: { primary: "rgb(200, 30, 60)", secondary: "rgb(20, 150, 140)" },
+  },
+  mono: {
+    border: [
+      { color: "rgb(180, 180, 180)", pos: "33% -7.4%", size: "70px 40px" },
+      { color: "rgb(140, 140, 140)", pos: "12% -5%", size: "60px 35px" },
+      { color: "rgb(160, 160, 160)", pos: "2.1% 68.3%", size: "40px 70px" },
+      { color: "rgb(130, 130, 130)", pos: "2.1% 68.3%", size: "20px 35px" },
+      { color: "rgb(170, 170, 170)", pos: "74.4% 100%", size: "180px 32px" },
+      { color: "rgb(150, 150, 150)", pos: "55% 100%", size: "85px 26px" },
+      { color: "rgb(190, 190, 190)", pos: "93.9% 0%", size: "74px 32px" },
+      { color: "rgb(145, 145, 145)", pos: "100% 27.1%", size: "26px 42px" },
+      { color: "rgb(165, 165, 165)", pos: "100% 27.1%", size: "52px 48px" },
+    ],
+    spike: { primary: "rgb(200, 200, 200)", secondary: "rgb(170, 170, 170)" },
+    spikeLt: { primary: "rgb(80, 80, 80)", secondary: "rgb(120, 120, 120)" },
+  },
+  ocean: {
+    border: [
+      { color: "rgb(100, 80, 220)", pos: "33% -7.4%", size: "70px 40px" },
+      { color: "rgb(60, 120, 255)", pos: "12% -5%", size: "60px 35px" },
+      { color: "rgb(80, 100, 200)", pos: "2.1% 68.3%", size: "40px 70px" },
+      { color: "rgb(50, 140, 220)", pos: "2.1% 68.3%", size: "20px 35px" },
+      { color: "rgb(120, 80, 255)", pos: "74.4% 100%", size: "180px 32px" },
+      { color: "rgb(70, 130, 255)", pos: "55% 100%", size: "85px 26px" },
+      { color: "rgb(140, 100, 240)", pos: "93.9% 0%", size: "74px 32px" },
+      { color: "rgb(90, 110, 230)", pos: "100% 27.1%", size: "26px 42px" },
+      { color: "rgb(130, 70, 255)", pos: "100% 27.1%", size: "52px 48px" },
+    ],
+    spike: { primary: "rgb(100, 120, 255)", secondary: "rgba(130, 100, 220, 0.98)" },
+    spikeLt: { primary: "rgb(60, 60, 180)", secondary: "rgb(80, 100, 200)" },
+  },
+  sunset: {
+    border: [
+      { color: "rgb(255, 80, 50)", pos: "33% -7.4%", size: "70px 40px" },
+      { color: "rgb(255, 160, 40)", pos: "12% -5%", size: "60px 35px" },
+      { color: "rgb(255, 120, 60)", pos: "2.1% 68.3%", size: "40px 70px" },
+      { color: "rgb(255, 200, 50)", pos: "2.1% 68.3%", size: "20px 35px" },
+      { color: "rgb(255, 100, 80)", pos: "74.4% 100%", size: "180px 32px" },
+      { color: "rgb(255, 180, 60)", pos: "55% 100%", size: "85px 26px" },
+      { color: "rgb(255, 60, 60)", pos: "93.9% 0%", size: "74px 32px" },
+      { color: "rgb(255, 140, 50)", pos: "100% 27.1%", size: "26px 42px" },
+      { color: "rgb(255, 90, 70)", pos: "100% 27.1%", size: "52px 48px" },
+    ],
+    spike: { primary: "rgb(255, 140, 80)", secondary: "rgba(255, 100, 60, 0.98)" },
+    spikeLt: { primary: "rgb(200, 80, 40)", secondary: "rgb(220, 120, 30)" },
+  },
+};
+
+type SmGradient = { color: string; pos: string; size: string };
+const smGradients: Record<BorderBeamColorVariant, { border: SmGradient[]; inner: SmGradient[] }> = {
+  colorful: {
+    border: [
+      { color: "rgb(50, 200, 80)", pos: "2% 68%", size: "9px 18px" },
+      { color: "rgb(30, 185, 170)", pos: "2% 68%", size: "4px 8px" },
+      { color: "rgb(255, 120, 40)", pos: "72% -3%", size: "59px 9px" },
+      { color: "rgb(100, 70, 255)", pos: "74% 100%", size: "42px 7px" },
+      { color: "rgb(240, 50, 180)", pos: "100% 27%", size: "10px 17px" },
+      { color: "rgb(180, 40, 240)", pos: "100% 27%", size: "10px 18px" },
+      { color: "rgb(40, 140, 255)", pos: "100% 27%", size: "5px 10px" },
+      { color: "rgb(255, 50, 100)", pos: "100% 27%", size: "11px 12px" },
+    ],
+    inner: [
+      { color: "rgba(50, 200, 80, 0.5)", pos: "2% 68%", size: "9px 18px" },
+      { color: "rgba(30, 185, 170, 0.45)", pos: "2% 68%", size: "4px 8px" },
+      { color: "rgba(255, 120, 40, 0.35)", pos: "72% -3%", size: "59px 9px" },
+      { color: "rgba(100, 70, 255, 0.35)", pos: "74% 100%", size: "42px 7px" },
+      { color: "rgba(240, 50, 180, 0.3)", pos: "100% 27%", size: "10px 17px" },
+      { color: "rgba(180, 40, 240, 0.4)", pos: "100% 27%", size: "10px 18px" },
+      { color: "rgba(40, 140, 255, 0.3)", pos: "100% 27%", size: "5px 10px" },
+      { color: "rgba(255, 50, 100, 0.3)", pos: "100% 27%", size: "11px 12px" },
+    ],
+  },
+  mono: {
+    border: [
+      { color: "rgb(160, 160, 160)", pos: "2% 68%", size: "9px 18px" },
+      { color: "rgb(140, 140, 140)", pos: "2% 68%", size: "4px 8px" },
+      { color: "rgb(180, 180, 180)", pos: "72% -3%", size: "59px 9px" },
+      { color: "rgb(150, 150, 150)", pos: "74% 100%", size: "42px 7px" },
+      { color: "rgb(170, 170, 170)", pos: "100% 27%", size: "10px 17px" },
+      { color: "rgb(155, 155, 155)", pos: "100% 27%", size: "10px 18px" },
+      { color: "rgb(145, 145, 145)", pos: "100% 27%", size: "5px 10px" },
+      { color: "rgb(165, 165, 165)", pos: "100% 27%", size: "11px 12px" },
+    ],
+    inner: [
+      { color: "rgba(160, 160, 160, 0.25)", pos: "2% 68%", size: "9px 18px" },
+      { color: "rgba(140, 140, 140, 0.22)", pos: "2% 68%", size: "4px 8px" },
+      { color: "rgba(180, 180, 180, 0.17)", pos: "72% -3%", size: "59px 9px" },
+      { color: "rgba(150, 150, 150, 0.17)", pos: "74% 100%", size: "42px 7px" },
+      { color: "rgba(170, 170, 170, 0.15)", pos: "100% 27%", size: "10px 17px" },
+      { color: "rgba(155, 155, 155, 0.20)", pos: "100% 27%", size: "10px 18px" },
+      { color: "rgba(145, 145, 145, 0.15)", pos: "100% 27%", size: "5px 10px" },
+      { color: "rgba(165, 165, 165, 0.15)", pos: "100% 27%", size: "11px 12px" },
+    ],
+  },
+  ocean: {
+    border: [
+      { color: "rgb(60, 140, 200)", pos: "2% 68%", size: "9px 18px" },
+      { color: "rgb(50, 120, 180)", pos: "2% 68%", size: "4px 8px" },
+      { color: "rgb(100, 80, 220)", pos: "72% -3%", size: "59px 9px" },
+      { color: "rgb(80, 100, 255)", pos: "74% 100%", size: "42px 7px" },
+      { color: "rgb(120, 70, 240)", pos: "100% 27%", size: "10px 17px" },
+      { color: "rgb(90, 80, 220)", pos: "100% 27%", size: "10px 18px" },
+      { color: "rgb(70, 110, 255)", pos: "100% 27%", size: "5px 10px" },
+      { color: "rgb(110, 90, 230)", pos: "100% 27%", size: "11px 12px" },
+    ],
+    inner: [
+      { color: "rgba(60, 140, 200, 0.5)", pos: "2% 68%", size: "9px 18px" },
+      { color: "rgba(50, 120, 180, 0.45)", pos: "2% 68%", size: "4px 8px" },
+      { color: "rgba(100, 80, 220, 0.35)", pos: "72% -3%", size: "59px 9px" },
+      { color: "rgba(80, 100, 255, 0.35)", pos: "74% 100%", size: "42px 7px" },
+      { color: "rgba(120, 70, 240, 0.3)", pos: "100% 27%", size: "10px 17px" },
+      { color: "rgba(90, 80, 220, 0.4)", pos: "100% 27%", size: "10px 18px" },
+      { color: "rgba(70, 110, 255, 0.3)", pos: "100% 27%", size: "5px 10px" },
+      { color: "rgba(110, 90, 230, 0.3)", pos: "100% 27%", size: "11px 12px" },
+    ],
+  },
+  sunset: {
+    border: [
+      { color: "rgb(255, 180, 50)", pos: "2% 68%", size: "9px 18px" },
+      { color: "rgb(255, 150, 40)", pos: "2% 68%", size: "4px 8px" },
+      { color: "rgb(255, 80, 60)", pos: "72% -3%", size: "59px 9px" },
+      { color: "rgb(255, 100, 80)", pos: "74% 100%", size: "42px 7px" },
+      { color: "rgb(255, 60, 80)", pos: "100% 27%", size: "10px 17px" },
+      { color: "rgb(255, 120, 60)", pos: "100% 27%", size: "10px 18px" },
+      { color: "rgb(255, 200, 50)", pos: "100% 27%", size: "5px 10px" },
+      { color: "rgb(255, 90, 70)", pos: "100% 27%", size: "11px 12px" },
+    ],
+    inner: [
+      { color: "rgba(255, 180, 50, 0.5)", pos: "2% 68%", size: "9px 18px" },
+      { color: "rgba(255, 150, 40, 0.45)", pos: "2% 68%", size: "4px 8px" },
+      { color: "rgba(255, 80, 60, 0.35)", pos: "72% -3%", size: "59px 9px" },
+      { color: "rgba(255, 100, 80, 0.35)", pos: "74% 100%", size: "42px 7px" },
+      { color: "rgba(255, 60, 80, 0.3)", pos: "100% 27%", size: "10px 17px" },
+      { color: "rgba(255, 120, 60, 0.4)", pos: "100% 27%", size: "10px 18px" },
+      { color: "rgba(255, 200, 50, 0.3)", pos: "100% 27%", size: "5px 10px" },
+      { color: "rgba(255, 90, 70, 0.3)", pos: "100% 27%", size: "11px 12px" },
+    ],
+  },
+};
+
+// WHY: parses #rgb, #rrggbb, rgb(...), rgba(...) into rgba(...) at the given
+// alpha. Used to recolor inner/spike gradients with caller-supplied colors
+// while preserving the alpha cadence the existing presets rely on.
+function toRgba(input: string, alpha: number): string {
+  const hex = input.trim().match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+  if (hex) {
+    const h = hex[1];
+    const r = parseInt(h.length === 3 ? h[0] + h[0] : h.slice(0, 2), 16);
+    const g = parseInt(h.length === 3 ? h[1] + h[1] : h.slice(2, 4), 16);
+    const b = parseInt(h.length === 3 ? h[2] + h[2] : h.slice(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
+  const rgba = input.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/);
+  if (rgba) return `rgba(${rgba[1]}, ${rgba[2]}, ${rgba[3]}, ${alpha})`;
+  return input;
+}
+
+function pickColor(customColors: string[] | undefined, presetColor: string, index: number): string {
+  if (!customColors || customColors.length === 0) return presetColor;
+  return customColors[index % customColors.length];
+}
+
+function pickColorAtAlpha(
+  customColors: string[] | undefined,
+  presetColor: string,
+  index: number,
+  alpha: number,
+): string {
+  if (!customColors || customColors.length === 0) {
+    return presetColor.replace("rgb(", "rgba(").replace(")", `, ${alpha})`);
+  }
+  return toRgba(customColors[index % customColors.length], alpha);
+}
+
+export function smBorderGradient(variant: BorderBeamColorVariant, customColors?: string[]): string {
+  return smGradients[variant].border
+    .map(
+      (s, i) =>
+        `radial-gradient(ellipse ${s.size} at ${s.pos}, ${pickColor(customColors, s.color, i)}, transparent)`,
+    )
+    .join(",\n    ");
+}
+
+export function smInnerGradient(variant: BorderBeamColorVariant, customColors?: string[]): string {
+  return smGradients[variant].inner
+    .map((s, i) => {
+      if (!customColors || customColors.length === 0) {
+        return `radial-gradient(ellipse ${s.size} at ${s.pos}, ${s.color}, transparent)`;
+      }
+      const alphaMatch = s.color.match(/[\d.]+\s*\)$/);
+      const alpha = alphaMatch ? parseFloat(alphaMatch[0]) : 0.4;
+      return `radial-gradient(ellipse ${s.size} at ${s.pos}, ${toRgba(customColors[i % customColors.length], alpha)}, transparent)`;
+    })
+    .join(",\n    ");
+}
+
+export function mdBorderGradient(variant: BorderBeamColorVariant, customColors?: string[]): string {
+  return borderColors[variant].border
+    .map(
+      (s, i) =>
+        `radial-gradient(ellipse ${s.size} at ${s.pos}, ${pickColor(customColors, s.color, i)}, transparent)`,
+    )
+    .join(",\n    ");
+}
+
+export function mdInnerGradient(variant: BorderBeamColorVariant, customColors?: string[]): string {
+  const cfg = borderColors[variant];
+  const alpha = variant === "mono" ? 0.225 : 0.45;
+  return cfg.border
+    .map((s, i) => {
+      const color = pickColorAtAlpha(customColors, s.color, i, alpha);
+      const size = s.size
+        .split(" ")
+        .map((v) => `${Math.round(parseInt(v) * 0.9)}px`)
+        .join(" ");
+      return `radial-gradient(ellipse ${size} at ${s.pos}, ${color}, transparent)`;
+    })
+    .join(",\n    ");
+}
+
+export function spikeColors(
+  variant: BorderBeamColorVariant,
+  dark: boolean,
+  customColors?: string[],
+): SpikeColors {
+  if (customColors && customColors.length > 0) {
+    const primary = customColors[0];
+    const secondary = customColors[customColors.length - 1] ?? customColors[0];
+    return { primary, secondary };
+  }
+  const cfg = borderColors[variant];
+  return dark ? cfg.spike : cfg.spikeLt;
+}
+
+type LineGradient = {
+  color: string;
+  sizeW: number;
+  sizeH: number;
+  offsetX: number;
+  offsetY: number;
+};
+const lineBorderGradients: Record<BorderBeamColorVariant, Record<ResolvedTheme, LineGradient[]>> = {
+  colorful: {
+    dark: [
+      { color: "rgb(255, 50, 100)", sizeW: 36, sizeH: 36, offsetX: 0, offsetY: 2 },
+      { color: "rgb(40, 180, 220)", sizeW: 30, sizeH: 32, offsetX: 39, offsetY: 0 },
+      { color: "rgb(50, 200, 80)", sizeW: 33, sizeH: 28, offsetX: -36, offsetY: 2 },
+      { color: "rgb(180, 40, 240)", sizeW: 29, sizeH: 34, offsetX: -54, offsetY: 0 },
+      { color: "rgb(255, 160, 30)", sizeW: 27, sizeH: 30, offsetX: 51, offsetY: -1 },
+      { color: "rgb(100, 70, 255)", sizeW: 36, sizeH: 24, offsetX: 21, offsetY: 1 },
+      { color: "rgb(40, 140, 255)", sizeW: 30, sizeH: 22, offsetX: -21, offsetY: 0 },
+      { color: "rgb(240, 50, 180)", sizeW: 25, sizeH: 28, offsetX: 66, offsetY: 1 },
+      { color: "rgb(30, 185, 170)", sizeW: 23, sizeH: 30, offsetX: -66, offsetY: -1 },
+    ],
+    light: [
+      { color: "rgb(255, 50, 100)", sizeW: 45, sizeH: 36, offsetX: 0, offsetY: 2 },
+      { color: "rgb(40, 140, 255)", sizeW: 35, sizeH: 32, offsetX: 65, offsetY: 0 },
+      { color: "rgb(50, 200, 80)", sizeW: 40, sizeH: 28, offsetX: -60, offsetY: 2 },
+      { color: "rgb(180, 40, 240)", sizeW: 35, sizeH: 34, offsetX: -90, offsetY: 0 },
+      { color: "rgb(30, 185, 170)", sizeW: 38, sizeH: 30, offsetX: 85, offsetY: -1 },
+      { color: "rgb(100, 70, 255)", sizeW: 50, sizeH: 24, offsetX: 35, offsetY: 1 },
+      { color: "rgb(40, 140, 255)", sizeW: 40, sizeH: 22, offsetX: -35, offsetY: 0 },
+      { color: "rgb(255, 120, 40)", sizeW: 35, sizeH: 28, offsetX: 110, offsetY: 1 },
+      { color: "rgb(240, 50, 180)", sizeW: 30, sizeH: 30, offsetX: -110, offsetY: -1 },
+    ],
+  },
+  mono: {
+    dark: [
+      { color: "rgb(200, 200, 200)", sizeW: 36, sizeH: 36, offsetX: 0, offsetY: 2 },
+      { color: "rgb(170, 170, 170)", sizeW: 30, sizeH: 32, offsetX: 39, offsetY: 0 },
+      { color: "rgb(155, 155, 155)", sizeW: 33, sizeH: 28, offsetX: -36, offsetY: 2 },
+      { color: "rgb(185, 185, 185)", sizeW: 29, sizeH: 34, offsetX: -54, offsetY: 0 },
+      { color: "rgb(165, 165, 165)", sizeW: 27, sizeH: 30, offsetX: 51, offsetY: -1 },
+      { color: "rgb(180, 180, 180)", sizeW: 36, sizeH: 24, offsetX: 21, offsetY: 1 },
+      { color: "rgb(160, 160, 160)", sizeW: 30, sizeH: 22, offsetX: -21, offsetY: 0 },
+      { color: "rgb(175, 175, 175)", sizeW: 25, sizeH: 28, offsetX: 66, offsetY: 1 },
+      { color: "rgb(190, 190, 190)", sizeW: 23, sizeH: 30, offsetX: -66, offsetY: -1 },
+    ],
+    light: [
+      { color: "rgb(100, 100, 100)", sizeW: 45, sizeH: 36, offsetX: 0, offsetY: 2 },
+      { color: "rgb(80, 80, 80)", sizeW: 35, sizeH: 32, offsetX: 65, offsetY: 0 },
+      { color: "rgb(90, 90, 90)", sizeW: 40, sizeH: 28, offsetX: -60, offsetY: 2 },
+      { color: "rgb(70, 70, 70)", sizeW: 35, sizeH: 34, offsetX: -90, offsetY: 0 },
+      { color: "rgb(85, 85, 85)", sizeW: 38, sizeH: 30, offsetX: 85, offsetY: -1 },
+      { color: "rgb(95, 95, 95)", sizeW: 50, sizeH: 24, offsetX: 35, offsetY: 1 },
+      { color: "rgb(75, 75, 75)", sizeW: 40, sizeH: 22, offsetX: -35, offsetY: 0 },
+      { color: "rgb(105, 105, 105)", sizeW: 35, sizeH: 28, offsetX: 110, offsetY: 1 },
+      { color: "rgb(65, 65, 65)", sizeW: 30, sizeH: 30, offsetX: -110, offsetY: -1 },
+    ],
+  },
+  ocean: {
+    dark: [
+      { color: "rgb(100, 80, 220)", sizeW: 36, sizeH: 36, offsetX: 0, offsetY: 2 },
+      { color: "rgb(60, 120, 255)", sizeW: 30, sizeH: 32, offsetX: 39, offsetY: 0 },
+      { color: "rgb(80, 100, 200)", sizeW: 33, sizeH: 28, offsetX: -36, offsetY: 2 },
+      { color: "rgb(130, 70, 255)", sizeW: 29, sizeH: 34, offsetX: -54, offsetY: 0 },
+      { color: "rgb(70, 130, 255)", sizeW: 27, sizeH: 30, offsetX: 51, offsetY: -1 },
+      { color: "rgb(120, 80, 255)", sizeW: 36, sizeH: 24, offsetX: 21, offsetY: 1 },
+      { color: "rgb(90, 110, 230)", sizeW: 30, sizeH: 22, offsetX: -21, offsetY: 0 },
+      { color: "rgb(110, 90, 240)", sizeW: 25, sizeH: 28, offsetX: 66, offsetY: 1 },
+      { color: "rgb(140, 100, 255)", sizeW: 23, sizeH: 30, offsetX: -66, offsetY: -1 },
+    ],
+    light: [
+      { color: "rgb(80, 60, 200)", sizeW: 45, sizeH: 36, offsetX: 0, offsetY: 2 },
+      { color: "rgb(50, 100, 220)", sizeW: 35, sizeH: 32, offsetX: 65, offsetY: 0 },
+      { color: "rgb(70, 90, 190)", sizeW: 40, sizeH: 28, offsetX: -60, offsetY: 2 },
+      { color: "rgb(110, 60, 220)", sizeW: 35, sizeH: 34, offsetX: -90, offsetY: 0 },
+      { color: "rgb(60, 110, 230)", sizeW: 38, sizeH: 30, offsetX: 85, offsetY: -1 },
+      { color: "rgb(100, 70, 240)", sizeW: 50, sizeH: 24, offsetX: 35, offsetY: 1 },
+      { color: "rgb(80, 100, 210)", sizeW: 40, sizeH: 22, offsetX: -35, offsetY: 0 },
+      { color: "rgb(90, 80, 225)", sizeW: 35, sizeH: 28, offsetX: 110, offsetY: 1 },
+      { color: "rgb(120, 90, 245)", sizeW: 30, sizeH: 30, offsetX: -110, offsetY: -1 },
+    ],
+  },
+  sunset: {
+    dark: [
+      { color: "rgb(255, 100, 60)", sizeW: 36, sizeH: 36, offsetX: 0, offsetY: 2 },
+      { color: "rgb(255, 180, 50)", sizeW: 30, sizeH: 32, offsetX: 39, offsetY: 0 },
+      { color: "rgb(255, 140, 70)", sizeW: 33, sizeH: 28, offsetX: -36, offsetY: 2 },
+      { color: "rgb(255, 80, 80)", sizeW: 29, sizeH: 34, offsetX: -54, offsetY: 0 },
+      { color: "rgb(255, 200, 60)", sizeW: 27, sizeH: 30, offsetX: 51, offsetY: -1 },
+      { color: "rgb(255, 120, 50)", sizeW: 36, sizeH: 24, offsetX: 21, offsetY: 1 },
+      { color: "rgb(255, 160, 80)", sizeW: 30, sizeH: 22, offsetX: -21, offsetY: 0 },
+      { color: "rgb(255, 90, 60)", sizeW: 25, sizeH: 28, offsetX: 66, offsetY: 1 },
+      { color: "rgb(255, 70, 70)", sizeW: 23, sizeH: 30, offsetX: -66, offsetY: -1 },
+    ],
+    light: [
+      { color: "rgb(220, 80, 40)", sizeW: 45, sizeH: 36, offsetX: 0, offsetY: 2 },
+      { color: "rgb(230, 150, 30)", sizeW: 35, sizeH: 32, offsetX: 65, offsetY: 0 },
+      { color: "rgb(210, 110, 50)", sizeW: 40, sizeH: 28, offsetX: -60, offsetY: 2 },
+      { color: "rgb(200, 60, 60)", sizeW: 35, sizeH: 34, offsetX: -90, offsetY: 0 },
+      { color: "rgb(220, 170, 40)", sizeW: 38, sizeH: 30, offsetX: 85, offsetY: -1 },
+      { color: "rgb(210, 100, 30)", sizeW: 50, sizeH: 24, offsetX: 35, offsetY: 1 },
+      { color: "rgb(230, 130, 60)", sizeW: 40, sizeH: 22, offsetX: -35, offsetY: 0 },
+      { color: "rgb(190, 70, 50)", sizeW: 35, sizeH: 28, offsetX: 110, offsetY: 1 },
+      { color: "rgb(180, 50, 50)", sizeW: 30, sizeH: 30, offsetX: -110, offsetY: -1 },
+    ],
+  },
+};
+
+export function lineBorderGradient(
+  variant: BorderBeamColorVariant,
+  dark: boolean,
+  id: string,
+  customColors?: string[],
+): string {
+  return lineBorderGradients[variant][dark ? "dark" : "light"]
+    .map((s, i) => {
+      const ox =
+        s.offsetX === 0 ? "" : s.offsetX > 0 ? ` + ${s.offsetX}px` : ` - ${Math.abs(s.offsetX)}px`;
+      const oy =
+        s.offsetY === 0 ? "" : s.offsetY > 0 ? ` + ${s.offsetY}px` : ` - ${Math.abs(s.offsetY)}px`;
+      const color = pickColor(customColors, s.color, i);
+      return `radial-gradient(ellipse calc(${s.sizeW}px * var(--beam-w-${id})) calc(${s.sizeH}px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%${ox}) calc(100%${oy}), ${color}, transparent)`;
+    })
+    .join(",\n       ");
+}
+
+type LineInner = { color: string; sizeW: number; sizeH: number; offsetX: number; offsetY: number };
+const lineInnerGradients: Record<BorderBeamColorVariant, LineInner[]> = {
+  colorful: [
+    { color: "rgba(255, 50, 100, 0.48)", sizeW: 33, sizeH: 30, offsetX: 0, offsetY: 0 },
+    { color: "rgba(40, 180, 220, 0.42)", sizeW: 24, sizeH: 26, offsetX: 39, offsetY: -3 },
+    { color: "rgba(50, 200, 80, 0.48)", sizeW: 27, sizeH: 24, offsetX: -36, offsetY: 0 },
+    { color: "rgba(180, 40, 240, 0.42)", sizeW: 23, sizeH: 28, offsetX: -54, offsetY: -2 },
+    { color: "rgba(255, 160, 30, 0.50)", sizeW: 24, sizeH: 24, offsetX: 51, offsetY: -1 },
+    { color: "rgba(100, 70, 255, 0.45)", sizeW: 30, sizeH: 20, offsetX: 21, offsetY: 0 },
+    { color: "rgba(40, 140, 255, 0.40)", sizeW: 25, sizeH: 18, offsetX: -21, offsetY: -2 },
+    { color: "rgba(240, 50, 180, 0.45)", sizeW: 21, sizeH: 24, offsetX: 66, offsetY: 0 },
+    { color: "rgba(30, 185, 170, 0.52)", sizeW: 18, sizeH: 26, offsetX: -66, offsetY: -1 },
+  ],
+  mono: [
+    { color: "rgba(200, 200, 200, 0.48)", sizeW: 33, sizeH: 30, offsetX: 0, offsetY: 0 },
+    { color: "rgba(170, 170, 170, 0.42)", sizeW: 24, sizeH: 26, offsetX: 39, offsetY: -3 },
+    { color: "rgba(155, 155, 155, 0.48)", sizeW: 27, sizeH: 24, offsetX: -36, offsetY: 0 },
+    { color: "rgba(185, 185, 185, 0.42)", sizeW: 23, sizeH: 28, offsetX: -54, offsetY: -2 },
+    { color: "rgba(165, 165, 165, 0.50)", sizeW: 24, sizeH: 24, offsetX: 51, offsetY: -1 },
+    { color: "rgba(180, 180, 180, 0.45)", sizeW: 30, sizeH: 20, offsetX: 21, offsetY: 0 },
+    { color: "rgba(160, 160, 160, 0.40)", sizeW: 25, sizeH: 18, offsetX: -21, offsetY: -2 },
+    { color: "rgba(175, 175, 175, 0.45)", sizeW: 21, sizeH: 24, offsetX: 66, offsetY: 0 },
+    { color: "rgba(190, 190, 190, 0.52)", sizeW: 18, sizeH: 26, offsetX: -66, offsetY: -1 },
+  ],
+  ocean: [
+    { color: "rgba(100, 80, 220, 0.48)", sizeW: 33, sizeH: 30, offsetX: 0, offsetY: 0 },
+    { color: "rgba(60, 120, 255, 0.42)", sizeW: 24, sizeH: 26, offsetX: 39, offsetY: -3 },
+    { color: "rgba(80, 100, 200, 0.48)", sizeW: 27, sizeH: 24, offsetX: -36, offsetY: 0 },
+    { color: "rgba(130, 70, 255, 0.42)", sizeW: 23, sizeH: 28, offsetX: -54, offsetY: -2 },
+    { color: "rgba(70, 130, 255, 0.50)", sizeW: 24, sizeH: 24, offsetX: 51, offsetY: -1 },
+    { color: "rgba(120, 80, 255, 0.45)", sizeW: 30, sizeH: 20, offsetX: 21, offsetY: 0 },
+    { color: "rgba(90, 110, 230, 0.40)", sizeW: 25, sizeH: 18, offsetX: -21, offsetY: -2 },
+    { color: "rgba(110, 90, 240, 0.45)", sizeW: 21, sizeH: 24, offsetX: 66, offsetY: 0 },
+    { color: "rgba(140, 100, 255, 0.52)", sizeW: 18, sizeH: 26, offsetX: -66, offsetY: -1 },
+  ],
+  sunset: [
+    { color: "rgba(255, 100, 60, 0.48)", sizeW: 33, sizeH: 30, offsetX: 0, offsetY: 0 },
+    { color: "rgba(255, 180, 50, 0.42)", sizeW: 24, sizeH: 26, offsetX: 39, offsetY: -3 },
+    { color: "rgba(255, 140, 70, 0.48)", sizeW: 27, sizeH: 24, offsetX: -36, offsetY: 0 },
+    { color: "rgba(255, 80, 80, 0.42)", sizeW: 23, sizeH: 28, offsetX: -54, offsetY: -2 },
+    { color: "rgba(255, 200, 60, 0.50)", sizeW: 24, sizeH: 24, offsetX: 51, offsetY: -1 },
+    { color: "rgba(255, 120, 50, 0.45)", sizeW: 30, sizeH: 20, offsetX: 21, offsetY: 0 },
+    { color: "rgba(255, 160, 80, 0.40)", sizeW: 25, sizeH: 18, offsetX: -21, offsetY: -2 },
+    { color: "rgba(255, 90, 60, 0.45)", sizeW: 21, sizeH: 24, offsetX: 66, offsetY: 0 },
+    { color: "rgba(255, 70, 70, 0.52)", sizeW: 18, sizeH: 26, offsetX: -66, offsetY: -1 },
+  ],
+};
+
+export function lineInnerGradient(
+  variant: BorderBeamColorVariant,
+  id: string,
+  customColors?: string[],
+): string {
+  return lineInnerGradients[variant]
+    .map((s, i) => {
+      const ox =
+        s.offsetX === 0 ? "" : s.offsetX > 0 ? ` + ${s.offsetX}px` : ` - ${Math.abs(s.offsetX)}px`;
+      const oy = s.offsetY === 0 ? "" : ` - ${Math.abs(s.offsetY)}px`;
+      let color = s.color;
+      if (customColors && customColors.length > 0) {
+        const alphaMatch = s.color.match(/[\d.]+\s*\)$/);
+        const alpha = alphaMatch ? parseFloat(alphaMatch[0]) : 0.45;
+        color = toRgba(customColors[i % customColors.length], alpha);
+      }
+      return `radial-gradient(ellipse calc(${s.sizeW}px * var(--beam-w-${id})) calc(${s.sizeH}px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%${ox}) calc(100%${oy}), ${color}, transparent)`;
+    })
+    .join(",\n    ");
+}
+
+type SpikePair = { color1: string; color2: string };
+const lineSpikeColors: Record<
+  BorderBeamColorVariant,
+  Record<ResolvedTheme, { spikes: SpikePair[] }>
+> = {
+  colorful: {
+    dark: {
+      spikes: [
+        { color1: "rgb(100, 70, 255)", color2: "rgba(100, 70, 255, 1)" },
+        { color1: "rgba(255, 170, 40, 0.59)", color2: "rgba(255, 170, 40, 0.29)" },
+        { color1: "rgb(50, 200, 100)", color2: "rgba(50, 200, 100, 1)" },
+        { color1: "rgba(200, 50, 240, 0.91)", color2: "rgba(200, 50, 240, 0.45)" },
+        { color1: "rgb(40, 140, 255)", color2: "rgba(40, 140, 255, 1)" },
+      ],
+    },
+    light: {
+      spikes: [
+        { color1: "rgb(80, 50, 200)", color2: "rgba(80, 50, 200, 0.8)" },
+        { color1: "rgba(210, 130, 0, 0.7)", color2: "rgba(210, 130, 0, 0.46)" },
+        { color1: "rgb(30, 160, 70)", color2: "rgba(30, 160, 70, 0.82)" },
+        { color1: "rgb(160, 30, 190)", color2: "rgba(160, 30, 190, 0.7)" },
+        { color1: "rgb(30, 100, 200)", color2: "rgba(30, 100, 200, 0.78)" },
+      ],
+    },
+  },
+  mono: {
+    dark: {
+      spikes: [
+        { color1: "rgb(200, 200, 200)", color2: "rgba(200, 200, 200, 1)" },
+        { color1: "rgba(180, 180, 180, 0.59)", color2: "rgba(180, 180, 180, 0.29)" },
+        { color1: "rgb(190, 190, 190)", color2: "rgba(190, 190, 190, 1)" },
+        { color1: "rgba(170, 170, 170, 0.91)", color2: "rgba(170, 170, 170, 0.45)" },
+        { color1: "rgb(185, 185, 185)", color2: "rgba(185, 185, 185, 1)" },
+      ],
+    },
+    light: {
+      spikes: [
+        { color1: "rgb(80, 80, 80)", color2: "rgba(80, 80, 80, 0.8)" },
+        { color1: "rgba(100, 100, 100, 0.7)", color2: "rgba(100, 100, 100, 0.46)" },
+        { color1: "rgb(70, 70, 70)", color2: "rgba(70, 70, 70, 0.82)" },
+        { color1: "rgb(90, 90, 90)", color2: "rgba(90, 90, 90, 0.7)" },
+        { color1: "rgb(85, 85, 85)", color2: "rgba(85, 85, 85, 0.78)" },
+      ],
+    },
+  },
+  ocean: {
+    dark: {
+      spikes: [
+        { color1: "rgb(100, 80, 255)", color2: "rgb(100, 80, 255)" },
+        { color1: "rgba(80, 130, 220, 0.59)", color2: "rgba(80, 130, 220, 0.29)" },
+        { color1: "rgb(60, 100, 255)", color2: "rgb(60, 100, 255)" },
+        { color1: "rgba(90, 120, 200, 0.91)", color2: "rgba(90, 120, 200, 0.45)" },
+        { color1: "rgb(120, 90, 255)", color2: "rgb(120, 90, 255)" },
+      ],
+    },
+    light: {
+      spikes: [
+        { color1: "rgb(50, 40, 180)", color2: "rgba(50, 40, 180, 0.8)" },
+        { color1: "rgba(40, 80, 200, 0.7)", color2: "rgba(40, 80, 200, 0.46)" },
+        { color1: "rgb(30, 50, 190)", color2: "rgba(30, 50, 190, 0.82)" },
+        { color1: "rgb(60, 90, 180)", color2: "rgba(60, 90, 180, 0.7)" },
+        { color1: "rgb(70, 60, 200)", color2: "rgba(70, 60, 200, 0.78)" },
+      ],
+    },
+  },
+  sunset: {
+    dark: {
+      spikes: [
+        { color1: "rgb(255, 100, 80)", color2: "rgb(255, 100, 80)" },
+        { color1: "rgba(255, 150, 80, 0.59)", color2: "rgba(255, 150, 80, 0.29)" },
+        { color1: "rgb(255, 80, 60)", color2: "rgb(255, 80, 60)" },
+        { color1: "rgba(255, 120, 50, 0.91)", color2: "rgba(255, 120, 50, 0.45)" },
+        { color1: "rgb(255, 140, 70)", color2: "rgb(255, 140, 70)" },
+      ],
+    },
+    light: {
+      spikes: [
+        { color1: "rgb(200, 60, 30)", color2: "rgba(200, 60, 30, 0.8)" },
+        { color1: "rgba(220, 100, 20, 0.7)", color2: "rgba(220, 100, 20, 0.46)" },
+        { color1: "rgb(180, 40, 20)", color2: "rgba(180, 40, 20, 0.82)" },
+        { color1: "rgb(210, 80, 10)", color2: "rgba(210, 80, 10, 0.7)" },
+        { color1: "rgb(190, 70, 30)", color2: "rgba(190, 70, 30, 0.78)" },
+      ],
+    },
+  },
+};
+
+function colorWithAlpha(color: string, alpha: number): string {
+  const rgba = color.match(/^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*[\d.]+\s*\)$/);
+  if (rgba) return `rgba(${rgba[1]}, ${rgba[2]}, ${rgba[3]}, ${alpha})`;
+  const rgb = color.match(/^rgb\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);
+  return rgb ? `rgba(${rgb[1]}, ${rgb[2]}, ${rgb[3]}, ${alpha})` : color;
+}
+
+function monoLineBloom(dark: boolean, id: string): string {
+  return dark
+    ? `radial-gradient(ellipse calc(18px * var(--beam-spike-${id})) calc(30px * var(--beam-h-${id})) at 8% calc(100% - 2px), rgba(200, 200, 200, 0.35), rgba(200, 200, 200, 0.12) 50%, transparent 100%),
+       radial-gradient(ellipse calc(14px * var(--beam-spike2-${id})) calc(28px * var(--beam-h-${id})) at 22% calc(100% - 4px), rgba(170, 170, 170, 0.3), rgba(170, 170, 170, 0.1) 50%, transparent 100%),
+       radial-gradient(ellipse calc(16px * var(--beam-spike-${id})) calc(32px * var(--beam-h-${id})) at 36% calc(100% - 3px), rgba(190, 190, 190, 0.35), rgba(190, 190, 190, 0.12) 50%, transparent 100%),
+       radial-gradient(ellipse calc(20px * var(--beam-spike2-${id})) calc(25px * var(--beam-h-${id})) at 50% calc(100% - 2px), rgba(180, 180, 180, 0.25), rgba(180, 180, 180, 0.08) 55%, transparent 100%),
+       radial-gradient(ellipse calc(15px * var(--beam-spike2-${id})) calc(30px * var(--beam-h-${id})) at 64% calc(100% - 4px), rgba(185, 185, 185, 0.32), rgba(185, 185, 185, 0.1) 50%, transparent 100%),
+       radial-gradient(ellipse calc(12px * var(--beam-spike-${id})) calc(28px * var(--beam-h-${id})) at 78% calc(100% - 2px), rgba(175, 175, 175, 0.28), rgba(175, 175, 175, 0.09) 50%, transparent 100%),
+       radial-gradient(ellipse calc(17px * var(--beam-spike-${id})) calc(26px * var(--beam-h-${id})) at 92% calc(100% - 3px), rgba(195, 195, 195, 0.3), rgba(195, 195, 195, 0.1) 50%, transparent 100%),
+       radial-gradient(ellipse calc(21px * var(--beam-spike-${id})) calc(15px * var(--beam-spike2-${id})) at calc(var(--beam-x-${id}) * 100%) calc(100% + 1px), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.5) 50%, transparent 100%),
+       radial-gradient(ellipse calc(42px * var(--beam-w-${id})) calc(40px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) 100%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.12) 25%, rgba(255, 255, 255, 0.03) 55%, transparent 80%)`
+    : `radial-gradient(ellipse calc(18px * var(--beam-spike-${id})) calc(30px * var(--beam-h-${id})) at 8% calc(100% - 2px), rgba(80, 80, 80, 0.3), rgba(80, 80, 80, 0.1) 50%, transparent 100%),
+       radial-gradient(ellipse calc(14px * var(--beam-spike2-${id})) calc(28px * var(--beam-h-${id})) at 22% calc(100% - 4px), rgba(100, 100, 100, 0.25), rgba(100, 100, 100, 0.08) 50%, transparent 100%),
+       radial-gradient(ellipse calc(16px * var(--beam-spike-${id})) calc(32px * var(--beam-h-${id})) at 36% calc(100% - 3px), rgba(70, 70, 70, 0.3), rgba(70, 70, 70, 0.1) 50%, transparent 100%),
+       radial-gradient(ellipse calc(20px * var(--beam-spike2-${id})) calc(25px * var(--beam-h-${id})) at 50% calc(100% - 2px), rgba(90, 90, 90, 0.22), rgba(90, 90, 90, 0.07) 55%, transparent 100%),
+       radial-gradient(ellipse calc(15px * var(--beam-spike2-${id})) calc(30px * var(--beam-h-${id})) at 64% calc(100% - 4px), rgba(85, 85, 85, 0.28), rgba(85, 85, 85, 0.09) 50%, transparent 100%),
+       radial-gradient(ellipse calc(12px * var(--beam-spike-${id})) calc(28px * var(--beam-h-${id})) at 78% calc(100% - 2px), rgba(95, 95, 95, 0.24), rgba(95, 95, 95, 0.08) 50%, transparent 100%),
+       radial-gradient(ellipse calc(17px * var(--beam-spike-${id})) calc(26px * var(--beam-h-${id})) at 92% calc(100% - 3px), rgba(75, 75, 75, 0.26), rgba(75, 75, 75, 0.08) 50%, transparent 100%),
+       radial-gradient(ellipse calc(50px * var(--beam-w-${id})) calc(32px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) calc(100%), rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%)`;
+}
+
+export function lineBloomGradient(
+  variant: BorderBeamColorVariant,
+  dark: boolean,
+  id: string,
+  customColors?: string[],
+): string {
+  const spike = spikeColors(variant, dark, customColors);
+  const primary = spike.primary;
+  const secondary = spike.secondary;
+  // WHY: when callers supply colors, recolor the 5 paired spike stops by cycling the palette and reusing the preset's alpha cadence so the shimmer rhythm is preserved.
+
+  // Mono is the tonal exception.
+  const presetSpikes = lineSpikeColors[variant][dark ? "dark" : "light"].spikes;
+  const spikes =
+    customColors && customColors.length > 0
+      ? presetSpikes.map((s, i) => {
+          const c = customColors[i % customColors.length];
+          const a1 = parseFloat(s.color1.match(/[\d.]+\s*\)$/)?.[0] ?? "1");
+          const a2 = parseFloat(s.color2.match(/[\d.]+\s*\)$/)?.[0] ?? "1");
+          return { color1: toRgba(c, a1), color2: toRgba(c, a2) };
+        })
+      : presetSpikes;
+  if (variant === "mono" && (!customColors || customColors.length === 0))
+    return monoLineBloom(dark, id);
+  if (dark) {
+    const c = primary;
+    const f = primary;
+    const i = secondary;
+    const n = colorWithAlpha(secondary, 0.49);
+    return `radial-gradient(ellipse calc(0.8px * var(--beam-spike-${id})) calc(92px * var(--beam-h-${id})) at 8% calc(100% - 2px), ${c}, ${f} 30%, transparent 88%),
+       radial-gradient(ellipse calc(10px * var(--beam-spike2-${id})) calc(35px * var(--beam-h-${id})) at 22% calc(100% - 4px), ${i}, ${n} 50%, transparent 95%),
+       radial-gradient(ellipse calc(2px * (2 - var(--beam-spike-${id}))) calc(72px * var(--beam-h-${id})) at 36% calc(100% - 3px), ${spikes[0].color1}, ${spikes[0].color2} 40%, transparent 90%),
+       radial-gradient(ellipse calc(14px * var(--beam-spike2-${id})) calc(28px * var(--beam-h-${id})) at 50% calc(100% - 2px), ${spikes[1].color1}, ${spikes[1].color2} 55%, transparent 96%),
+       radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2-${id}))) calc(85px * var(--beam-h-${id})) at 64% calc(100% - 4px), ${spikes[2].color1}, ${spikes[2].color2} 35%, transparent 89%),
+       radial-gradient(ellipse calc(7px * var(--beam-spike-${id})) calc(45px * var(--beam-h-${id})) at 78% calc(100% - 2px), ${spikes[3].color1}, ${spikes[3].color2} 48%, transparent 94%),
+       radial-gradient(ellipse calc(0.6px * (2 - var(--beam-spike-${id}))) calc(60px * var(--beam-h-${id})) at 92% calc(100% - 3px), ${spikes[4].color1}, ${spikes[4].color2} 42%, transparent 91%),
+       radial-gradient(ellipse calc(21px * var(--beam-spike-${id})) calc(15px * var(--beam-spike2-${id})) at calc(var(--beam-x-${id}) * 100%) calc(100% + 1px), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.5) 50%, transparent 100%),
+       radial-gradient(ellipse calc(42px * var(--beam-w-${id})) calc(40px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) 100%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.12) 25%, rgba(255, 255, 255, 0.03) 55%, transparent 80%)`;
+  }
+  const c = primary;
+  const f = colorWithAlpha(primary, 0.85);
+  const i = secondary;
+  const n = colorWithAlpha(secondary, 0.7);
+  return `radial-gradient(ellipse calc(0.8px * var(--beam-spike-${id})) calc(92px * var(--beam-h-${id})) at 8% calc(100% - 2px), ${c}, ${f} 30%, transparent 88%),
+       radial-gradient(ellipse calc(10px * var(--beam-spike2-${id})) calc(35px * var(--beam-h-${id})) at 22% calc(100% - 4px), ${i}, ${n} 50%, transparent 95%),
+       radial-gradient(ellipse calc(2px * (2 - var(--beam-spike-${id}))) calc(72px * var(--beam-h-${id})) at 36% calc(100% - 3px), ${spikes[0].color1}, ${spikes[0].color2} 40%, transparent 90%),
+       radial-gradient(ellipse calc(14px * var(--beam-spike2-${id})) calc(28px * var(--beam-h-${id})) at 50% calc(100% - 2px), ${spikes[1].color1}, ${spikes[1].color2} 55%, transparent 96%),
+       radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2-${id}))) calc(85px * var(--beam-h-${id})) at 64% calc(100% - 4px), ${spikes[2].color1}, ${spikes[2].color2} 35%, transparent 89%),
+       radial-gradient(ellipse calc(7px * var(--beam-spike-${id})) calc(45px * var(--beam-h-${id})) at 78% calc(100% - 2px), ${spikes[3].color1}, ${spikes[3].color2} 48%, transparent 94%),
+       radial-gradient(ellipse calc(1px * (2 - var(--beam-spike-${id}))) calc(60px * var(--beam-h-${id})) at 92% calc(100% - 3px), ${spikes[4].color1}, ${spikes[4].color2} 42%, transparent 91%),
+       radial-gradient(ellipse calc(50px * var(--beam-w-${id})) calc(32px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) calc(100%), rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%)`;
+}