Gradient Background

1"use client";
2 
3import { backdropPalette, useBackdropTint } from "@/lib/canvas-background-utils";
4import { type GradientGeometry, type GradientShape, type RampGradientAxis, rampGradient, wrapGradient } from "@/lib/oklch-utils";
5 
6/**
7 * A ramp-driven gradient wallpaper. The gradient is one of our oklch ramps (hue / lightness / tonal
8 * / chroma) centered on the live glass-tint color (so it recolors with the theme) with the center as a
9 * slightly wider plateau, painted as a `linear`, `radial`, or `conic` gradient. Pure CSS — crisp at any DPI.
10 */
11export function GradientBackground({
12  axis = "tonal",
13  hue,
14  angle = 90,
15  shape = "linear",
16  position,
17  radialShape,
18  radialSize,
19}: {
20  axis?: RampGradientAxis;
21  /** Hue override (deg). When set, drives the gradient color instead of the live --glass-tint-h. */
22  hue?: number;
23  angle?: number;
24  shape?: GradientShape;
25} & GradientGeometry) {
26  const tint = useBackdropTint();
27  // Shared with CanvasBackground: theme-tracking base + fresco palette (the `hue` prop overrides both).
28  const { base, frescoColors } = backdropPalette(tint, hue);
29  const gradient = frescoColors
30    ? wrapGradient(shape, frescoColors.join(", "), {
31        angle,
32        position,
33        radialShape,
34        radialSize,
35      })
36    : rampGradient(axis, base, 5, {
37        angle,
38        gamut: tint.p3 ? "p3" : "srgb",
39        shape,
40        position,
41        radialShape,
42        radialSize,
43      });
44 
45  return (
46    <div
47      className="fixed inset-0 -z-10 pointer-events-none transition-[background] duration-500"
48      style={{
49        background: gradient,
50      }}
51    >
52      {/* Subtle organic highlight/shadow for depth — plain alpha layers, NO mix-blend-mode: a
53          blend-mode element on the page can disable backdrop-filter RENDERING in Chromium, killing
54          every glass blur above it (computed styles stay correct, paint silently fails). */}
55      <div
56        className="absolute inset-0"
57        style={{
58          background:
59            "radial-gradient(circle at 20% 25%, oklch(var(--shadow-highlight) / 0.1) 0%, transparent 45%), radial-gradient(circle at 80% 75%, oklch(var(--shadow-ink) / 0.1) 0%, transparent 45%)",
60        }}
61      />
62    </div>
63  );
64}