Gradient Utils

1/**
2 * Utility functions for generating random gradient backgrounds (OKLCH color space)
3 */
4 
5export interface GradientColor {
6  /** Lightness (0-100%) */
7  l: number;
8  /** Chroma (0-0.4) */
9  c: number;
10  /** Hue (0-360) */
11  h: number;
12}
13 
14export interface Gradient {
15  colors: GradientColor[];
16  angle: number;
17  stops: number[];
18}
19 
20/**
21 * Generate a random color in OKLCH
22 */
23export function randomColor(): GradientColor {
24  return {
25    l: Math.random() * 60 + 30, // 30-90% lightness
26    c: Math.random() * 0.25 + 0.05, // 0.05-0.30 chroma
27    h: Math.random() * 360, // full hue range
28  };
29}
30 
31/**
32 * Generate a random gradient with 2-4 colors
33 */
34export function generateRandomGradient(): Gradient {
35  const numColors = Math.floor(Math.random() * 3) + 2;
36  const colors: GradientColor[] = [];
37  const stops: number[] = [];
38 
39  for (let i = 0; i < numColors; i++) {
40    colors.push(randomColor());
41    stops.push((i / (numColors - 1)) * 100);
42  }
43 
44  const angle = Math.floor(Math.random() * 360);
45 
46  return {
47    colors,
48    angle,
49    stops,
50  };
51}
52 
53/**
54 * Convert gradient to CSS linear-gradient string (oklch)
55 */
56export function gradientToCSS(gradient: Gradient): string {
57  const colorStops = gradient.colors
58    .map((color, index) => {
59      const stop = gradient.stops[index];
60      return `oklch(${color.l.toFixed(1)}% ${color.c.toFixed(3)} ${color.h.toFixed(1)} / 0.8) ${stop}%`;
61    })
62    .join(", ");
63 
64  return `linear-gradient(${gradient.angle}deg in oklch, ${colorStops})`;
65}
66 
67/**
68 * Generate a seeded random gradient based on a string (for consistent per-page gradients)
69 */
70export function generateSeededGradient(seed: string): Gradient {
71  let hash = 0;
72  for (let i = 0; i < seed.length; i++) {
73    const char = seed.charCodeAt(i);
74    hash = (hash << 5) - hash + char;
75    hash = hash & hash;
76  }
77 
78  const rng = (seed: number) => {
79    const x = Math.sin(seed) * 10000;
80    return x - Math.floor(x);
81  };
82 
83  const numColors = Math.floor(rng(hash) * 3) + 2;
84  const colors: GradientColor[] = [];
85  const stops: number[] = [];
86 
87  for (let i = 0; i < numColors; i++) {
88    const colorHash = hash + i * 1000;
89    colors.push({
90      l: rng(colorHash) * 60 + 30,
91      c: rng(colorHash + 1) * 0.25 + 0.05,
92      h: rng(colorHash + 2) * 360,
93    });
94    stops.push((i / (numColors - 1)) * 100);
95  }
96 
97  const angle = Math.floor(rng(hash + 10000) * 360);
98 
99  return {
100    colors,
101    angle,
102    stops,
103  };
104}
105 
106// … truncated