radiant-docs 0.1.41 → 0.1.42

package/template/src/components/user/CardGradient.astro

@@ -0,0 +1,964 @@
+---
+import Icon from "../ui/Icon.astro";
+
+interface Props {
+  title: string;
+  icon?: string;
+  text?: string;
+  interactive?: boolean;
+  glass?: boolean;
+  colors?: string[];
+  patternSeed?: string;
+  colorSeed?: string;
+  useThemeColor?: boolean;
+}
+
+const {
+  title,
+  icon,
+  text,
+  interactive = false,
+  glass = false,
+  colors,
+  patternSeed,
+  colorSeed,
+  useThemeColor = false,
+} = Astro.props as Props;
+
+const DEFAULT_COVER_COLORS = ["#fb7185", "#fb923c", "#fcd34d", "#f9a8d4"];
+
+function hashString(value: string): number {
+  let hash = 2166136261;
+  for (let index = 0; index < value.length; index += 1) {
+    hash ^= value.charCodeAt(index);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+}
+
+function seededRatio(seed: number, salt: number): number {
+  let value = seed ^ Math.imul(salt, 0x9e3779b1);
+  value ^= value >>> 16;
+  value = Math.imul(value, 0x85ebca6b);
+  value ^= value >>> 13;
+  value = Math.imul(value, 0xc2b2ae35);
+  value ^= value >>> 16;
+  return (value >>> 0) / 4294967295;
+}
+
+function range(seed: number, salt: number, min: number, max: number): number {
+  return min + (max - min) * seededRatio(seed, salt);
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+function hue(value: number): number {
+  return ((value % 360) + 360) % 360;
+}
+
+function parseRgb(value: string): { r: number; g: number; b: number } | null {
+  const hex = value
+    .trim()
+    .match(/^#([a-f\d]{3}|[a-f\d]{4}|[a-f\d]{6}|[a-f\d]{8})$/i);
+  if (hex?.[1]) {
+    const raw =
+      hex[1].length === 3 || hex[1].length === 4
+        ? hex[1]
+            .slice(0, 3)
+            .split("")
+            .map((part) => `${part}${part}`)
+            .join("")
+        : hex[1].slice(0, 6);
+    return {
+      r: Number.parseInt(raw.slice(0, 2), 16),
+      g: Number.parseInt(raw.slice(2, 4), 16),
+      b: Number.parseInt(raw.slice(4, 6), 16),
+    };
+  }
+
+  return null;
+}
+
+function rgbToHsl({ r, g, b }: { r: number; g: number; b: number }): {
+  h: number;
+  s: number;
+  l: number;
+} {
+  const red = r / 255;
+  const green = g / 255;
+  const blue = b / 255;
+  const max = Math.max(red, green, blue);
+  const min = Math.min(red, green, blue);
+  const lightness = (max + min) / 2;
+  const delta = max - min;
+
+  if (delta === 0) return { h: 0, s: 0, l: lightness * 100 };
+
+  const saturation = delta / (1 - Math.abs(2 * lightness - 1));
+  let hueValue = 0;
+
+  if (max === red) {
+    hueValue = ((green - blue) / delta) % 6;
+  } else if (max === green) {
+    hueValue = (blue - red) / delta + 2;
+  } else {
+    hueValue = (red - green) / delta + 4;
+  }
+
+  return {
+    h: hue(hueValue * 60),
+    s: saturation * 100,
+    l: lightness * 100,
+  };
+}
+
+function hslColor(h: number, s: number, l: number): string {
+  return `hsl(${Math.round(hue(h))}, ${Math.round(
+    clamp(s, 0, 100),
+  )}%, ${Math.round(clamp(l, 0, 100))}%)`;
+}
+
+function hueDistance(first: number, second: number): number {
+  const distance = Math.abs(hue(first) - hue(second));
+  return Math.min(distance, 360 - distance);
+}
+
+type PaletteRecipe = {
+  offsets: [number, number, number];
+  jitter: number;
+  saturation: [number, number, number];
+  lightness: [number, number, number];
+};
+
+const DEFAULT_PALETTE_RECIPE: PaletteRecipe = {
+  offsets: [-32, 28, 54],
+  jitter: 14,
+  saturation: [1.02, 0.96, 0.92],
+  lightness: [8, 0, 10],
+};
+
+const SEEDED_PALETTE_RECIPES: PaletteRecipe[] = [
+  DEFAULT_PALETTE_RECIPE,
+  {
+    offsets: [142, 190, -26],
+    jitter: 22,
+    saturation: [0.88, 0.8, 1.04],
+    lightness: [10, 14, 4],
+  },
+  {
+    offsets: [118, 238, 34],
+    jitter: 18,
+    saturation: [0.9, 0.86, 1.06],
+    lightness: [9, 8, 1],
+  },
+  {
+    offsets: [20, 46, -20],
+    jitter: 20,
+    saturation: [1.08, 0.98, 1.04],
+    lightness: [5, 12, 2],
+  },
+  {
+    offsets: [164, 210, 30],
+    jitter: 20,
+    saturation: [0.86, 0.78, 1.02],
+    lightness: [12, 16, 3],
+  },
+  {
+    offsets: [176, 32, 220],
+    jitter: 26,
+    saturation: [0.64, 0.72, 0.62],
+    lightness: [18, 14, 20],
+  },
+  {
+    offsets: [88, 178, 274],
+    jitter: 24,
+    saturation: [1.16, 1.04, 1.08],
+    lightness: [2, 8, 4],
+  },
+];
+
+function getPaletteRecipe(seed: number, hasSeedValue: boolean): PaletteRecipe {
+  if (!hasSeedValue) return DEFAULT_PALETTE_RECIPE;
+  return SEEDED_PALETTE_RECIPES[seed % SEEDED_PALETTE_RECIPES.length];
+}
+
+function getGeneratedPalette(seedSource: string, baseColor: string): string[] {
+  const baseRgb = parseRgb(baseColor) ?? { r: 31, g: 111, b: 235 };
+  const preferred = rgbToHsl(baseRgb);
+  const isNeutralPreference =
+    preferred.s < 12 || preferred.l < 16 || preferred.l > 88;
+  const colorSeed = hashString(seedSource);
+  const hasSeedValue = seedSource.includes("::");
+  const recipe = getPaletteRecipe(colorSeed, hasSeedValue);
+  const baseHue = isNeutralPreference
+    ? range(colorSeed, 20, 8, 348)
+    : preferred.h;
+  const baseSaturation = isNeutralPreference
+    ? range(colorSeed, 21, 62, 78)
+    : preferred.s;
+  const baseLightness = isNeutralPreference
+    ? range(colorSeed, 22, 56, 68)
+    : preferred.l;
+  const usedHues = [baseHue];
+
+  return recipe.offsets.map((offset, index) => {
+    let colorHue =
+      baseHue +
+      offset +
+      range(colorSeed, 30 + index, -recipe.jitter, recipe.jitter);
+
+    for (let attempt = 0; attempt < 3; attempt += 1) {
+      if (usedHues.every((usedHue) => hueDistance(colorHue, usedHue) >= 18)) {
+        break;
+      }
+      colorHue += range(colorSeed, 40 + index + attempt, 28, 58);
+    }
+
+    usedHues.push(colorHue);
+    return hslColor(
+      colorHue,
+      baseSaturation * recipe.saturation[index] +
+        range(colorSeed, 50 + index, -9, 9),
+      62 +
+        (baseLightness - 50) * 0.18 +
+        recipe.lightness[index] +
+        range(colorSeed, 60 + index, -6, 6),
+    );
+  });
+}
+
+function completePalette(
+  inputColors?: string[],
+  seedValue?: string,
+): string[] | undefined {
+  const palette = inputColors
+    ?.map((color) => color.trim())
+    .filter(Boolean)
+    .slice(0, 4);
+  if (!palette?.length) return undefined;
+  if (palette.length === 4) return palette;
+
+  const seedSource = seedValue
+    ? `${palette.join("|")}::${seedValue}`
+    : palette.join("|");
+  const generated = getGeneratedPalette(seedSource, palette[0]);
+  for (const color of generated) {
+    if (palette.length === 4) break;
+    palette.push(color);
+  }
+
+  return palette;
+}
+
+const patternSeedSource = patternSeed ? `${title}::${patternSeed}` : title;
+const seed = hashString(patternSeedSource);
+const explicitPalette = completePalette(colors, colorSeed);
+const defaultPalette =
+  colorSeed !== undefined
+    ? completePalette([DEFAULT_COVER_COLORS[0]], colorSeed)
+    : DEFAULT_COVER_COLORS;
+const staticPalette =
+  explicitPalette ?? (useThemeColor ? undefined : defaultPalette);
+const gradientColors = staticPalette ?? [
+  "color-mix(in oklab, var(--color-theme) 62%, #fda4af)",
+  "color-mix(in oklab, var(--color-theme) 48%, #93c5fd)",
+  "color-mix(in oklab, var(--color-theme) 56%, #f0abfc)",
+  "color-mix(in oklab, var(--color-theme) 58%, #60a5fa)",
+];
+const gradientStyle = [
+  `--rd-card-gradient-angle: ${Math.round(range(seed, 1, 112, 154))}deg`,
+  `--rd-card-gradient-x: ${Math.round(range(seed, 2, 12, 88))}%`,
+  `--rd-card-gradient-y: ${Math.round(range(seed, 3, 4, 44))}%`,
+  `--rd-card-gradient-x-2: ${Math.round(range(seed, 4, 32, 92))}%`,
+  `--rd-card-gradient-y-2: ${Math.round(range(seed, 5, 54, 96))}%`,
+  `--rd-card-gradient-color-1: ${gradientColors[0]}`,
+  `--rd-card-gradient-color-2: ${gradientColors[1]}`,
+  `--rd-card-gradient-color-3: ${gradientColors[2]}`,
+  `--rd-card-gradient-color-4: ${gradientColors[3]}`,
+].join("; ");
+const gradientColorData = staticPalette
+  ? JSON.stringify(staticPalette)
+  : undefined;
+const isIconOnly = Boolean(icon && !text);
+const textSizeClass = icon ? "text-lg sm:text-xl" : "text-xl sm:text-2xl";
+---
+
+<div
+  class="rd-card-gradient-frame relative isolate flex min-h-44 w-full items-center justify-center overflow-hidden rounded-xl bg-transparent"
+>
+  <div
+    class="rd-card-gradient-scale absolute inset-0 flex items-center justify-center"
+  >
+    <div
+      data-rd-card-gradient
+      data-rd-card-motion={interactive ? "true" : "false"}
+      data-rd-card-seed={patternSeedSource}
+      data-rd-card-color-seed={colorSeed}
+      data-rd-card-colors={gradientColorData}
+      style={gradientStyle}
+      class="rd-card-gradient absolute inset-0 isolate overflow-hidden bg-transparent"
+    >
+      <div class="rd-card-gradient-fallback absolute inset-0 -z-20"></div>
+      <div
+        class="pointer-events-none absolute inset-0 z-0 bg-[linear-gradient(120deg,rgba(255,255,255,0.36),rgba(255,255,255,0.06)_38%,rgba(255,255,255,0.18)_72%,rgba(255,255,255,0.04))]"
+      >
+      </div>
+    </div>
+    <div
+      class:list={[
+        "rd-card-gradient-content relative z-10 flex flex-col items-center justify-center gap-2 px-5 text-center text-white drop-shadow-[0_1px_10px_rgba(0,0,0,0.18)]",
+        glass && "rd-card-gradient-content-glass rounded-2xl",
+        glass && isIconOnly && "rd-card-gradient-content-glass-icon",
+      ]}
+    >
+      {icon && <Icon name={icon} class="size-9 text-white/70" />}
+      {
+        text && (
+          <span
+            class:list={[
+              "max-w-full wrap-break-word font-semibold leading-tight text-white/70",
+              textSizeClass,
+            ]}
+          >
+            {text}
+          </span>
+        )
+      }
+    </div>
+  </div>
+</div>
+
+<script>
+  type ShaderModule = typeof import("@paper-design/shaders");
+  type ShaderMountInstance = InstanceType<ShaderModule["ShaderMount"]>;
+  type GradientState = {
+    mount: ShaderMountInstance;
+    hoverSpeed: number;
+    motionBound: boolean;
+  };
+  type CardGradientWindow = Window & {
+    __rdCardGradientListenersBound?: boolean;
+    __rdCardGradientPending?: WeakSet<HTMLElement>;
+    __rdCardGradientRegistry?: WeakMap<HTMLElement, GradientState>;
+    __rdCardShaderModulePromise?: Promise<ShaderModule>;
+  };
+
+  const cardWindow = window as CardGradientWindow;
+  const registry = (cardWindow.__rdCardGradientRegistry ??= new WeakMap());
+  const pending = (cardWindow.__rdCardGradientPending ??= new WeakSet());
+  const CARD_GRADIENT_GRAIN_MIXER = 0.075;
+  const CARD_GRADIENT_GRAIN_OVERLAY = 0.055;
+  const CARD_GRADIENT_HOVER_SPEED = 0.32;
+
+  function loadShaders(): Promise<ShaderModule> {
+    return (cardWindow.__rdCardShaderModulePromise ??=
+      import("@paper-design/shaders"));
+  }
+
+  function hashString(value: string): number {
+    let hash = 2166136261;
+    for (let index = 0; index < value.length; index += 1) {
+      hash ^= value.charCodeAt(index);
+      hash = Math.imul(hash, 16777619);
+    }
+    return hash >>> 0;
+  }
+
+  function seededRatio(seed: number, salt: number): number {
+    let value = seed ^ Math.imul(salt, 0x9e3779b1);
+    value ^= value >>> 16;
+    value = Math.imul(value, 0x85ebca6b);
+    value ^= value >>> 13;
+    value = Math.imul(value, 0xc2b2ae35);
+    value ^= value >>> 16;
+    return (value >>> 0) / 4294967295;
+  }
+
+  function range(seed: number, salt: number, min: number, max: number): number {
+    return min + (max - min) * seededRatio(seed, salt);
+  }
+
+  function clamp(value: number, min: number, max: number): number {
+    return Math.min(Math.max(value, min), max);
+  }
+
+  function hue(value: number): number {
+    return ((value % 360) + 360) % 360;
+  }
+
+  function parseRgb(value: string): { r: number; g: number; b: number } | null {
+    const hex = value
+      .trim()
+      .match(/^#([a-f\d]{3}|[a-f\d]{4}|[a-f\d]{6}|[a-f\d]{8})$/i);
+    if (hex?.[1]) {
+      const raw =
+        hex[1].length === 3 || hex[1].length === 4
+          ? hex[1]
+              .slice(0, 3)
+              .split("")
+              .map((part) => `${part}${part}`)
+              .join("")
+          : hex[1].slice(0, 6);
+      return {
+        r: Number.parseInt(raw.slice(0, 2), 16),
+        g: Number.parseInt(raw.slice(2, 4), 16),
+        b: Number.parseInt(raw.slice(4, 6), 16),
+      };
+    }
+
+    const rgb = value
+      .trim()
+      .match(/^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/i);
+    if (!rgb) return null;
+
+    return {
+      r: Number.parseFloat(rgb[1] ?? "0"),
+      g: Number.parseFloat(rgb[2] ?? "0"),
+      b: Number.parseFloat(rgb[3] ?? "0"),
+    };
+  }
+
+  function rgbToHsl({ r, g, b }: { r: number; g: number; b: number }): {
+    h: number;
+    s: number;
+    l: number;
+  } {
+    const red = r / 255;
+    const green = g / 255;
+    const blue = b / 255;
+    const max = Math.max(red, green, blue);
+    const min = Math.min(red, green, blue);
+    const lightness = (max + min) / 2;
+    const delta = max - min;
+
+    if (delta === 0) return { h: 0, s: 0, l: lightness * 100 };
+
+    const saturation = delta / (1 - Math.abs(2 * lightness - 1));
+    let hueValue = 0;
+
+    if (max === red) {
+      hueValue = ((green - blue) / delta) % 6;
+    } else if (max === green) {
+      hueValue = (blue - red) / delta + 2;
+    } else {
+      hueValue = (red - green) / delta + 4;
+    }
+
+    return {
+      h: hue(hueValue * 60),
+      s: saturation * 100,
+      l: lightness * 100,
+    };
+  }
+
+  function hslColor(h: number, s: number, l: number): string {
+    return `hsl(${Math.round(hue(h))}, ${Math.round(
+      clamp(s, 0, 100),
+    )}%, ${Math.round(clamp(l, 0, 100))}%)`;
+  }
+
+  function hueDistance(first: number, second: number): number {
+    const distance = Math.abs(hue(first) - hue(second));
+    return Math.min(distance, 360 - distance);
+  }
+
+  type PaletteRecipe = {
+    offsets: [number, number, number];
+    jitter: number;
+    saturation: [number, number, number];
+    lightness: [number, number, number];
+  };
+
+  const DEFAULT_PALETTE_RECIPE: PaletteRecipe = {
+    offsets: [-32, 28, 54],
+    jitter: 14,
+    saturation: [1.02, 0.96, 0.92],
+    lightness: [8, 0, 10],
+  };
+
+  const SEEDED_PALETTE_RECIPES: PaletteRecipe[] = [
+    DEFAULT_PALETTE_RECIPE,
+    {
+      offsets: [142, 190, -26],
+      jitter: 22,
+      saturation: [0.88, 0.8, 1.04],
+      lightness: [10, 14, 4],
+    },
+    {
+      offsets: [118, 238, 34],
+      jitter: 18,
+      saturation: [0.9, 0.86, 1.06],
+      lightness: [9, 8, 1],
+    },
+    {
+      offsets: [20, 46, -20],
+      jitter: 20,
+      saturation: [1.08, 0.98, 1.04],
+      lightness: [5, 12, 2],
+    },
+    {
+      offsets: [164, 210, 30],
+      jitter: 20,
+      saturation: [0.86, 0.78, 1.02],
+      lightness: [12, 16, 3],
+    },
+    {
+      offsets: [176, 32, 220],
+      jitter: 26,
+      saturation: [0.64, 0.72, 0.62],
+      lightness: [18, 14, 20],
+    },
+    {
+      offsets: [88, 178, 274],
+      jitter: 24,
+      saturation: [1.16, 1.04, 1.08],
+      lightness: [2, 8, 4],
+    },
+  ];
+
+  function getPaletteRecipe(
+    seed: number,
+    hasSeedValue: boolean,
+  ): PaletteRecipe {
+    if (!hasSeedValue) return DEFAULT_PALETTE_RECIPE;
+    return SEEDED_PALETTE_RECIPES[seed % SEEDED_PALETTE_RECIPES.length];
+  }
+
+  function getGeneratedPalette(
+    seedSource: string,
+    baseColor: string,
+  ): string[] {
+    const baseRgb = parseRgb(baseColor) ?? { r: 31, g: 111, b: 235 };
+    const preferred = rgbToHsl(baseRgb);
+    const isNeutralPreference =
+      preferred.s < 12 || preferred.l < 16 || preferred.l > 88;
+    const colorSeed = hashString(seedSource);
+    const hasSeedValue = seedSource.includes("::");
+    const recipe = getPaletteRecipe(colorSeed, hasSeedValue);
+    const baseHue = isNeutralPreference
+      ? range(colorSeed, 20, 8, 348)
+      : preferred.h;
+    const baseSaturation = isNeutralPreference
+      ? range(colorSeed, 21, 62, 78)
+      : preferred.s;
+    const baseLightness = isNeutralPreference
+      ? range(colorSeed, 22, 56, 68)
+      : preferred.l;
+    const usedHues = [baseHue];
+
+    return recipe.offsets.map((offset, index) => {
+      let colorHue =
+        baseHue +
+        offset +
+        range(colorSeed, 30 + index, -recipe.jitter, recipe.jitter);
+
+      for (let attempt = 0; attempt < 3; attempt += 1) {
+        if (usedHues.every((usedHue) => hueDistance(colorHue, usedHue) >= 18)) {
+          break;
+        }
+        colorHue += range(colorSeed, 40 + index + attempt, 28, 58);
+      }
+
+      usedHues.push(colorHue);
+      return hslColor(
+        colorHue,
+        baseSaturation * recipe.saturation[index] +
+          range(colorSeed, 50 + index, -9, 9),
+        62 +
+          (baseLightness - 50) * 0.18 +
+          recipe.lightness[index] +
+          range(colorSeed, 60 + index, -6, 6),
+      );
+    });
+  }
+
+  function completePalette(
+    inputColors: string[],
+    seedValue?: string,
+  ): string[] | null {
+    const palette = inputColors
+      .map((color) => color.trim())
+      .filter(Boolean)
+      .slice(0, 4);
+    if (palette.length === 0) return null;
+    if (palette.length === 4) return palette;
+
+    const seedSource = seedValue
+      ? `${palette.join("|")}::${seedValue}`
+      : palette.join("|");
+    const generated = getGeneratedPalette(seedSource, palette[0] ?? "");
+    for (const color of generated) {
+      if (palette.length === 4) break;
+      palette.push(color);
+    }
+
+    return palette;
+  }
+
+  function getElementPalette(element: HTMLElement): string[] | null {
+    const rawColors = element.dataset.rdCardColors;
+    if (!rawColors) return null;
+
+    try {
+      const parsedColors = JSON.parse(rawColors);
+      if (
+        Array.isArray(parsedColors) &&
+        parsedColors.every((color) => typeof color === "string")
+      ) {
+        return completePalette(parsedColors, element.dataset.rdCardColorSeed);
+      }
+    } catch {
+      return null;
+    }
+
+    return null;
+  }
+
+  function getThemeRgb(): { r: number; g: number; b: number } {
+    const themeColor = getComputedStyle(document.documentElement)
+      .getPropertyValue("--color-theme")
+      .trim();
+    return parseRgb(themeColor) ?? { r: 31, g: 111, b: 235 };
+  }
+
+  function rgbToHex({ r, g, b }: { r: number; g: number; b: number }): string {
+    const toHex = (channel: number) =>
+      Math.round(clamp(channel, 0, 255))
+        .toString(16)
+        .padStart(2, "0");
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+  }
+
+  function getThemePalette(element: HTMLElement): string[] {
+    const themeRgb = getThemeRgb();
+    const seedSource = element.dataset.rdCardColorSeed?.trim();
+    return (
+      completePalette([rgbToHex(themeRgb)], seedSource) ?? [
+        "#fb7185",
+        "#fb923c",
+        "#fcd34d",
+        "#f9a8d4",
+      ]
+    );
+  }
+
+  function getPalette(element: HTMLElement): string[] {
+    return getElementPalette(element) ?? getThemePalette(element);
+  }
+
+  function getUniforms(element: HTMLElement, shaders: ShaderModule) {
+    const seed = hashString(element.dataset.rdCardSeed ?? "");
+    const colors = getPalette(element);
+
+    return {
+      u_colors: colors.map(shaders.getShaderColorFromString),
+      u_colorsCount: colors.length,
+      u_distortion: range(seed, 30, 0.68, 0.86),
+      u_swirl: range(seed, 31, 0.08, 0.2),
+      u_grainMixer: CARD_GRADIENT_GRAIN_MIXER,
+      u_grainOverlay: CARD_GRADIENT_GRAIN_OVERLAY,
+      u_fit: shaders.ShaderFitOptions.cover,
+      u_scale: range(seed, 34, 1.08, 1.2),
+      u_rotation: range(seed, 35, -8, 8),
+      u_offsetX: range(seed, 36, -0.08, 0.08),
+      u_offsetY: range(seed, 37, -0.06, 0.06),
+      u_originX: 0.5,
+      u_originY: 0.5,
+      u_worldWidth: 0,
+      u_worldHeight: 0,
+    };
+  }
+
+  function bindMotion(element: HTMLElement, state: GradientState): void {
+    if (state.motionBound || element.dataset.rdCardMotion !== "true") return;
+
+    const root = element.closest<HTMLElement>("[data-rd-card-root]");
+    if (!root) return;
+
+    const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const start = () => {
+      if (!reducedMotion.matches) state.mount.setSpeed(state.hoverSpeed);
+    };
+    const stop = () => state.mount.setSpeed(0);
+
+    root.addEventListener("pointerenter", start);
+    root.addEventListener("pointerleave", stop);
+    root.addEventListener("focusin", start);
+    root.addEventListener("focusout", (event) => {
+      if (
+        event.relatedTarget instanceof Node &&
+        root.contains(event.relatedTarget)
+      ) {
+        return;
+      }
+      stop();
+    });
+
+    state.motionBound = true;
+  }
+
+  async function mountGradient(element: HTMLElement): Promise<void> {
+    const existing = registry.get(element);
+    if (existing) {
+      const shaders = await loadShaders();
+      existing.mount.setUniforms(getUniforms(element, shaders));
+      element.dataset.rdCardShaderReady = "true";
+      bindMotion(element, existing);
+      return;
+    }
+
+    if (pending.has(element)) return;
+    pending.add(element);
+
+    try {
+      const shaders = await loadShaders();
+      if (registry.has(element)) return;
+
+      const seed = hashString(element.dataset.rdCardSeed ?? "");
+      const mount = new shaders.ShaderMount(
+        element,
+        shaders.meshGradientFragmentShader,
+        getUniforms(element, shaders),
+        { alpha: true, antialias: true },
+        0,
+        Math.round(range(seed, 40, 4000, 32000)),
+        1.35,
+        900000,
+      );
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          if (registry.has(element)) {
+            element.dataset.rdCardShaderReady = "true";
+          }
+        });
+      });
+      const state = {
+        mount,
+        hoverSpeed: CARD_GRADIENT_HOVER_SPEED,
+        motionBound: false,
+      };
+      registry.set(element, state);
+      bindMotion(element, state);
+    } catch {
+      element.dataset.rdCardShaderUnavailable = "true";
+    } finally {
+      pending.delete(element);
+    }
+  }
+
+  function initCardGradients(): void {
+    const elements = document.querySelectorAll<HTMLElement>(
+      "[data-rd-card-gradient]",
+    );
+    if (elements.length === 0) return;
+    elements.forEach((element) => {
+      void mountGradient(element);
+    });
+  }
+
+  initCardGradients();
+
+  if (!cardWindow.__rdCardGradientListenersBound) {
+    document.addEventListener("astro:page-load", initCardGradients);
+    document.addEventListener("astro:after-swap", initCardGradients);
+
+    const observer = new MutationObserver(initCardGradients);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme", "style"],
+    });
+
+    cardWindow.__rdCardGradientListenersBound = true;
+  }
+</script>
+
+<style>
+  .rd-card-gradient-frame::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 30;
+    pointer-events: none;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 30%);
+  }
+
+  .rd-card-gradient :global(canvas) {
+    opacity: 0;
+    filter: blur(8px) saturate(0.94) brightness(1.02);
+    transform: scale(1.018);
+    transform-origin: center;
+    transition:
+      opacity 2200ms cubic-bezier(0.22, 1, 0.36, 1),
+      filter 2200ms cubic-bezier(0.22, 1, 0.36, 1),
+      transform 2400ms cubic-bezier(0.22, 1, 0.36, 1);
+    will-change: opacity, filter, transform;
+  }
+
+  .rd-card-gradient[data-rd-card-shader-ready="true"] :global(canvas) {
+    opacity: 0.92;
+    filter: blur(0) saturate(1) brightness(1);
+    transform: scale(1);
+  }
+
+  .rd-card-gradient-content {
+    max-width: calc(100% - 2rem);
+  }
+
+  .rd-card-gradient-content-glass {
+    isolation: isolate;
+    min-width: min(8.5rem, calc(100% - 2rem));
+    padding: 0.85rem 1.25rem;
+    overflow: hidden;
+    border: 1px solid rgb(255 255 255 / 22%);
+    background: linear-gradient(
+      180deg,
+      rgb(255 255 255 / 18%),
+      rgb(255 255 255 / 10%)
+    );
+    box-shadow:
+      inset 0 1px 0 rgb(255 255 255 / 20%),
+      inset 0 0 0 1px rgb(255 255 255 / 6%),
+      0 10px 26px rgb(0 0 0 / 5%);
+    filter: drop-shadow(0 1px 6px rgb(255 255 255 / 10%));
+    backdrop-filter: blur(10px) saturate(1.1);
+    -webkit-backdrop-filter: blur(12px);
+  }
+
+  .rd-card-gradient-content-glass-icon {
+    inline-size: 4.5rem;
+    block-size: 4.5rem;
+    min-width: 0;
+    padding: 0;
+  }
+
+  .rd-card-gradient-content-glass::before,
+  .rd-card-gradient-content-glass::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    pointer-events: none;
+    border-radius: inherit;
+  }
+
+  .rd-card-gradient-content-glass::before {
+    background: linear-gradient(
+      180deg,
+      rgb(255 255 255 / 22%),
+      rgb(255 255 255 / 5%) 44%,
+      transparent
+    );
+    opacity: 0.7;
+  }
+
+  .rd-card-gradient-content-glass::after {
+    inset: -40% -55%;
+    background: linear-gradient(
+      115deg,
+      transparent 37%,
+      rgb(255 255 255 / 28%) 48%,
+      transparent 59%
+    );
+    opacity: 0;
+    transform: translateX(-34%) rotate(7deg);
+  }
+
+  :global(
+    [data-rd-card-root][data-rd-card-link="true"]
+      .rd-card-gradient-content-glass::after
+  ) {
+    transition:
+      transform 850ms cubic-bezier(0.16, 1, 0.3, 1),
+      opacity 850ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  :global(
+    [data-rd-card-root][data-rd-card-link="true"]:hover
+      .rd-card-gradient-content-glass::after
+  ),
+  :global(
+    [data-rd-card-root][data-rd-card-link="true"]:focus-within
+      .rd-card-gradient-content-glass::after
+  ) {
+    opacity: 0.68;
+    transform: translateX(30%) rotate(7deg);
+  }
+
+  .rd-card-gradient-fallback {
+    background:
+      radial-gradient(
+        140% 112% at var(--rd-card-gradient-x) var(--rd-card-gradient-y),
+        color-mix(
+          in oklab,
+          var(--rd-card-gradient-color-2) 36%,
+          var(--rd-card-gradient-color-1) 64%
+        ),
+        transparent 62%
+      ),
+      radial-gradient(
+        128% 108% at var(--rd-card-gradient-x-2) var(--rd-card-gradient-y-2),
+        color-mix(
+          in oklab,
+          var(--rd-card-gradient-color-3) 30%,
+          var(--rd-card-gradient-color-1) 70%
+        ),
+        transparent 68%
+      ),
+      radial-gradient(
+        110% 92% at 6% 94%,
+        color-mix(in oklab, var(--rd-card-gradient-color-4) 24%, white 76%),
+        transparent 64%
+      ),
+      linear-gradient(
+        var(--rd-card-gradient-angle),
+        color-mix(
+          in oklab,
+          var(--rd-card-gradient-color-1) 76%,
+          var(--rd-card-gradient-color-2) 24%
+        ),
+        color-mix(
+            in oklab,
+            var(--rd-card-gradient-color-1) 78%,
+            var(--rd-card-gradient-color-4) 22%
+          )
+          54%,
+        color-mix(
+          in oklab,
+          var(--rd-card-gradient-color-1) 72%,
+          var(--rd-card-gradient-color-3) 28%
+        )
+      );
+    filter: saturate(1.08) blur(0.2px);
+  }
+
+  .rd-card-gradient-scale {
+    transform-origin: center;
+  }
+
+  :global(
+    [data-rd-card-root][data-rd-card-link="true"] .rd-card-gradient-scale
+  ) {
+    transition: transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  :global(
+    [data-rd-card-root][data-rd-card-link="true"]:hover .rd-card-gradient-scale
+  ),
+  :global(
+    [data-rd-card-root][data-rd-card-link="true"]:focus-within
+      .rd-card-gradient-scale
+  ) {
+    transform: scale(1.03);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .rd-card-gradient :global(canvas) {
+      transition: none;
+      filter: none;
+      transform: none;
+    }
+  }
+</style>