Background

1"use client";
2import type React from "react";
3import { useEffect, useRef } from "react";
4import styles from "./background.module.css";
5 
6const vertexShader = `
7  attribute vec2 a_position;
8  varying vec2 v_uv;
9 
10  void main() {
11    v_uv = a_position * 0.5 + 0.5;
12    gl_Position = vec4(a_position, 0.0, 1.0);
13  }
14`;
15 
16const fragmentShader = `
17  precision highp float;
18 
19  uniform float u_time;
20  uniform vec2 u_resolution;
21 
22  uniform vec3 u_primaryColor;
23  uniform vec3 u_secondaryColor;
24  uniform vec3 u_backgroundColor;
25  uniform float u_backgroundOpacity;
26 
27  // Animation uniforms
28  uniform float u_animationSpeed;
29  uniform float u_noiseScale;
30  uniform float u_intensity;
31 
32  uniform float u_octaves;
33  uniform float u_warpStrength;
34  varying vec2 v_uv;
35 
36  // Mathematical constants with high precision
37  const float PI = 3.1415926535897932384626433832795;
38  const float TAU = 6.2831853071795864769252867665590; // 2 * PI
39  const float INV_PI = 0.3183098861837906715377675267450;
40  const float SQRT_2 = 1.4142135623730950488016887242097;
41  const float SQRT_3 = 1.7320508075688772935274463415059;
42  const float PHI = 1.6180339887498948482045868343656; // Golden ratio
43 
44  // Simplex noise constants - mathematically derived for optimal distribution
45  const float F2 = 0.36602540378443864676372317075294; // (sqrt(3) - 1) / 2
46  const float G2 = 0.21132486540518713342105263157895; // (3 - sqrt(3)) / 6
47  const float G2_2 = 0.42264973081037426684210526315789; // 2 * G2
48  const float G2_MINUS_1 = -0.78867513459481286657894736842105; // 2 * G2 - 1
49 
50  // Improved permutation constants for better hash distribution
51  const float PERM_MOD = 289.0;
52  const float PERM_MUL = 34.0;
53  const float PERM_ADD = 1.0;
54 
55  // Optimized normalization constant for better noise range
56  const float NOISE_SCALE = 70.0; // Improved from 130.0 for better dynamic range
57 
58  // FBM configuration constants
59  const float FBM_LACUNARITY = 2.0;      // Frequency multiplier between octaves
60  const float FBM_PERSISTENCE = 0.5;     // Amplitude multiplier between octaves
61  const float FBM_INITIAL_AMP = 0.5;     // Starting amplitude
62 
63  // Domain warping offset vectors - using irrational numbers for better distribution
64  const vec2 WARP_OFFSET_1 = vec2(0.0, 0.0);
65  const vec2 WARP_OFFSET_2 = vec2(5.12, 1.41); // Approximations of sqrt(26.2144) and sqrt(2)
66  const vec2 WARP_OFFSET_3 = vec2(1.73, 9.17); // Approximations of sqrt(3) and sqrt(84.1)
67// … truncated