Canvas Background

1"use client";
2 
3import * as React from "react";
4import { backdropPalette, type CanvasRamp, type CanvasStyle, createCanvas, useBackdropTint } from "@/lib/canvas-background-utils";
5 
6interface CanvasBackgroundProps {
7  /** Canvas style: gradient | lava | circle. */
8  style?: CanvasStyle;
9  /** Hue override (deg). When set, drives the canvas color instead of the live --glass-tint-h. */
10  hue?: number;
11  /** Ramp axis the colors follow (lightness = "linear"). */
12  ramp?: CanvasRamp;
13  /** Steps per side (4–12). */
14  steps?: number;
15  /** Gradient angle in degrees (gradient style). */
16  angle?: number;
17  /** Animation pace (0 = static). */
18  speed?: number;
19  /** Whether to animate. */
20  animated?: boolean;
21  /** Seed for deterministic placement. */
22  seed?: string;
23  className?: string;
24  /** Opacity of the background (0–1). */
25  opacity?: number;
26  /** Blur the canvas. */
27  blur?: boolean;
28}
29 
30export function CanvasBackground({
31  style: canvasStyle = "gradient",
32  hue,
33  ramp = "tonal",
34  steps = 6,
35  angle = 90,
36  speed = 1,
37  animated = false,
38  seed,
39  className = "",
40  opacity = 1,
41  blur = false,
42}: CanvasBackgroundProps) {
43  const canvasRef = React.useRef<HTMLCanvasElement>(null);
44  const frameRef = React.useRef<number | undefined>(undefined);
45  const [dimensions, setDimensions] = React.useState({
46    width: 1920,
47    height: 1080,
48    dpr: 1,
49  });
50  // Live base color tracks the glass tint, so the canvas recolors with the theme (shared with the
51  // CSS gradient background).
52  const tint = useBackdropTint();
53 
54  React.useEffect(() => {
55    const update = () => {
56      // Back the canvas at device resolution (capped 2×) so it isn't upscaled/blurry on HiDPI.
57      const dpr = Math.min(2, window.devicePixelRatio || 1);
58      setDimensions({
59        width: Math.round(window.innerWidth * dpr),
60        height: Math.round(window.innerHeight * dpr),
61        dpr,
62      });
63    };
64    update();
65    window.addEventListener("resize", update);
66    return () => window.removeEventListener("resize", update);
67  }, []);
68 
69  React.useEffect(() => {
70    const canvas = canvasRef.current;
71    if (!canvas) return;
72    const ctx = canvas.getContext("2d", {
73      colorSpace: "display-p3",
74    });
75    if (!ctx) return;
76    canvas.width = dimensions.width;
77    canvas.height = dimensions.height;
78 
79    // Shared with GradientBackground: theme-tracking base + fresco palette (`hue` prop overrides both).
80    const { base, frescoColors } = backdropPalette(tint, hue);
81// … truncated