50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T7af4,'use client'; import { useEffect, useRef } from 'react'; const MAX_RIPPLES = 8; const MESH = { low: 150, medium: 210, high: 280 }; const AREA = [-42, -76, 84, 94]; const MAX_RENDER_DIM = 2400; const INTRO_SECONDS = 3; const REVEAL_SECONDS = 2.6; const REVEAL_REACH = 19; const ORIGIN = [0, -3]; const HOVER_EFFECTS = { press: 1, lift: -1, none: 0 }; const LIGHTING = { split: [ [7, 4.2, -4, 4, 4], [-8, 3.6, 3, 4, 4] ], backlit: [ [6, 1.6, -15, 5, 3], [-7, 1.4, -13, 5, 3] ], overhead: [ [3, 7.5, -4, 3, 3], [-3, 7, -1, 3, 3] ] }; const DEG = Math.PI / 180; const FIELD = ` uniform vec4 uRipples[${MAX_RIPPLES}]; uniform vec4 uWave; uniform float uSquare; uniform float uClock; uniform vec4 uSwell; uniform vec4 uHover; uniform vec4 uIntro; float reachOf(vec2 delta, out vec2 grad) { vec2 a = abs(delta); vec2 dir = vec2(delta.x < 0.0 ? -1.0 : 1.0, delta.y < 0.0 ? -1.0 : 1.0); float round_ = length(delta); vec2 roundGrad = delta / max(round_, 1e-4); float m = max(max(a.x, a.y), 1e-4); vec2 k = a / m; vec2 k3 = k * k * k; float sum = dot(k3, k); float root = sqrt(sqrt(sum)); float square = m * root; vec2 squareGrad = dir * k3 / (root * root * root); float d = mix(round_, square, uSquare); vec2 g = mix(roundGrad, squareGrad, uSquare); float soft = sqrt(d * d + 0.36); grad = g * d / soft; return soft - 0.6; } vec3 field(vec2 p) { float t = uSwell.w; float f = uSwell.y; vec2 k1 = vec2(0.19, 0.11) * f; vec2 k2 = vec2(-0.09, 0.23) * f; vec2 k3 = vec2(0.29, -0.17) * f; float a1 = dot(p, k1) + t * 0.55; float a2 = dot(p, k2) - t * 0.42 + 1.3; float a3 = dot(p, k3) + t * 0.74 + 2.1; float h = 0.55 * sin(a1) + 0.4 * sin(a2) + 0.22 * sin(a3); vec2 g = 0.55 * cos(a1) * k1 + 0.4 * cos(a2) * k2 + 0.22 * cos(a3) * k3; h *= uSwell.x; g *= uSwell.x; vec2 dg; for (int i = 0; i < ${MAX_RIPPLES}; i++) { vec4 r = uRipples[i]; if (r.w <= 0.0) continue; float age = uClock - r.z; if (age <= 0.0) continue; float d = reachOf(p - r.xy, dg); float radius = age * uWave.y; float x = (d - radius) / uWave.z; float life = clamp(1.0 - radius / uWave.w, 0.0, 1.0); float strength = r.w * uWave.x * life * life * smoothstep(0.0, 1.5, radius); float bump = exp(-x * x); h += bump * strength; g += -2.0 * x * bump * strength / uWave.z * dg; } if (uIntro.w > 0.0) { float d = reachOf(p - uIntro.xy, dg); float x = (d - uIntro.z) / 2.2; float bump = exp(-x * x) * uIntro.w; h += bump; g += -2.0 * x * bump / 2.2 * dg; } vec2 hd = p - uHover.xy; float hr = max(uHover.z, 1e-3); float hover = exp(-dot(hd, hd) / (hr * hr)) * uHover.w; h -= hover; g += 2.0 * hd / (hr * hr) * hover; return vec3(h, g); } `; const VERTEX = `#version 300 es precision highp float; ${FIELD} layout(location = 0) in vec2 aGrid; uniform mat4 uViewProj; uniform vec4 uArea; out vec2 vGround; out vec3 vWorld; void main() { vec2 ground = uArea.xy + aGrid * uArea.zw; vec3 f = field(ground); vWorld = vec3(ground.x, f.x, ground.y); vGround = ground; gl_Position = uViewProj * vec4(vWorld, 1.0); }`; const FRAGMENT = `#version 300 es precision highp float; ${FIELD} uniform vec3 uEye; uniform vec3 uColor; uniform vec3 uAccent; uniform vec3 uSecond; uniform vec3 uLightA; uniform vec3 uLightB; uniform float uTile; uniform float uAngle; uniform float uGap; uniform float uRound; uniform float uSoftness; uniform float uBulge; uniform float uGloss; uniform vec2 uRange; uniform float uBrightness; uniform float uGrain; uniform float uGrainScale; uniform float uLightMode; uniform float uOpacity; uniform vec4 uReveal; uniform vec2 uView; uniform float uFade; uniform float uFrame; in vec2 vGround; in vec3 vWorld; out vec4 outColor; float smoother(float x) { x = clamp(x, 0.0, 1.0); return x * x * x * (x * (x * 6.0 - 15.0) + 10.0); } float hash(vec3 p) { p = fract(p * 0.1031); p += dot(p, p.zyx + 31.32); return fract((p.x + p.y) * p.z); } void main() { vec3 f = field(vGround); vec3 n0 = normalize(vec3(-f.y, 1.0, -f.z)); vec3 tx = normalize(vec3(1.0, f.y, 0.0)); vec3 tz = normalize(cross(tx, n0)); tx = normalize(cross(n0, tz)); float c = cos(uAngle); float s = sin(uAngle); mat2 toTile = mat2(c, -s, s, c); vec2 q = toTile * vGround / uTile; vec2 cell = floor(q); vec2 local = q - cell - 0.5; float footprint = max(length(fwidth(q)), 1e-5); float on = 1.0; if (uReveal.w < 1.0) { vec2 centre = transpose(toTile) * (cell + 0.5) * uTile; vec2 dg; float d = reachOf(centre - uReveal.xy, dg); float delay = hash(vec3(cell, 7.0)) * 1.1; on = max(smoother((uReveal.z - d - delay) / 1.6), uReveal.w); } float half_ = (0.5 - uGap * 0.5) * mix(0.62, 1.0, on); float radius = min(uRound * half_, half_); vec2 dd = abs(local) - (half_ - radius); float d = length(max(dd, 0.0)) + min(max(dd.x, dd.y), 0.0) - radius; vec2 outward = dd.x > 0.0 || dd.y > 0.0 ? normalize(max(dd, 0.0) * sign(local)) : (dd.x > dd.y ? vec2(sign(local.x), 0.0) : vec2(0.0, sign(local.y))); float bevelWidth = max(mix(0.04, 0.42, uSoftness) * half_, footprint * 1.5); float edge = clamp((d + bevelWidth) / bevelWidth, 0.0, 1.0); float dome = uBulge * 0.5 * length(local) / max(half_, 1e-3); float theta = edge * edge * mix(0.7, 1.35, uSoftness) + dome; vec2 outwardGround = transpose(toTile) * outward; vec2 domeGround = transpose(toTile) * (local / max(length(local), 1e-4)); vec3 bend = normalize(tx * mix(domeGround.x, outwardGround.x, edge) + tz * mix(domeGround.y, outwardGround.y, edge)); float crowd = smoothstep(0.08, 0.3, footprint); theta *= 1.0 - crowd; vec3 n = normalize(n0 * cos(theta) + bend * sin(theta)); float inside = 1.0 - smoothstep(-footprint * 0.75, footprint * 0.75, d); float area = (2.0 * half_) * (2.0 * half_) - (4.0 - 3.14159) * radius * radius; inside = mix(inside, area, crowd) * on; vec3 toEye = uEye - vWorld; float dist = length(toEye); vec3 v = toEye / dist; vec3 la = uLightA - vWorld; vec3 lb = uLightB - vWorld; float da = length(la); float db = length(lb); la /= da; lb /= db; float fa = 1.0 / (1.0 + da * da * 0.02); float fb = 1.0 / (1.0 + db * db * 0.02); float ndv = clamp(dot(n, v), 0.0, 1.0); float fresnel = 0.04 + 0.96 * pow(1.0 - ndv, 5.0); vec3 ha = normalize(la + v); vec3 hb = normalize(lb + v); float shine = mix(10.0, 90.0, uGloss); float norm = (shine + 8.0) / 60.0; float specA = pow(max(dot(n, ha), 0.0), shine) * norm; float specB = pow(max(dot(n, hb), 0.0), shine) * norm; float sheenA = pow(max(dot(n, ha), 0.0), 8.0); float sheenB = pow(max(dot(n, hb), 0.0), 8.0); float diffA = max(dot(n, la), 0.0); float diffB = max(dot(n, lb), 0.0); vec3 r = reflect(-v, n); float rim = exp((dot(r, normalize(vec3(0.15, 0.55, -1.0))) - 1.0) * 6.0); float occlusion = mix(1.0, 0.35, edge * edge); float edgeLight = edge * edge; vec3 color; float alpha; if (uLightMode > 0.5) { float luma = dot(uColor, vec3(0.299, 0.587, 0.114)); vec3 body = mix(vec3(luma), uColor, 0.5) * 0.96; vec3 keyDir = normalize(vec3(-0.35, 0.85, 0.45)); float shade = clamp(dot(n, keyDir) * 0.6 + 0.5, 0.0, 1.0); float wa = clamp(diffA * fa * 9.0, 0.0, 1.0); float wb = clamp(diffB * fb * 9.0, 0.0, 1.0); vec3 hue = (uAccent * wa + uSecond * wb) / max(wa + wb, 1e-3); vec3 lit = body * mix(vec3(1.0), hue, clamp(wa + wb, 0.0, 1.0) * 0.42) * mix(0.7, 1.05, shade); lit += vec3(1.0) * (specA * fa + specB * fb) * 2.4 * uGloss; lit *= mix(1.0, 0.8, edgeLight * (1.0 - crowd)); color = lit; alpha = inside; } else { float luma = dot(uColor, vec3(0.299, 0.587, 0.114)); vec3 body = mix(vec3(luma), uColor, 0.35) + vec3(0.02); vec3 lit = body * 0.25; lit += body * (uAccent * diffA * fa + uSecond * diffB * fb) * 14.0; lit += uAccent * (specA * (0.55 + 1.6 * edgeLight) + sheenA * 0.3) * fa * 9.0 * uGloss; lit += uSecond * (specB * (0.55 + 1.6 * edgeLight) + sheenB * 0.3) * fb * 9.0 * uGloss; lit += mix(uSecond, vec3(1.0), 0.4) * rim * fresnel * 0.35 * uGloss; lit *= occlusion; color = lit * inside; alpha = inside; } float fade = 1.0 - smoother((dist - uRange.x) / max(uRange.y - uRange.x, 1e-3)); alpha *= fade * uOpacity; color *= uBrightness; if (uLightMode < 0.5) color = 1.0 - exp(-color * 1.1); vec2 grainCell = floor(gl_FragCoord.xy / uGrainScale); float grain = hash(vec3(grainCell, uFrame)) + hash(vec3(grainCell + 17.0, uFrame + 3.0)) - 1.0; float lum = dot(color, vec3(0.299, 0.587, 0.114)); color += grain * uGrain * (uLightMode > 0.5 ? 0.6 : 0.25 + 0.75 * sqrt(clamp(lum, 0.0, 1.0))); color = clamp(color, 0.0, 1.0); vec2 uv = gl_FragCoord.xy / uView; float edgeFade = max(uFade * 0.5, 1e-4); float mask = uFade > 0.0 ? smoother(uv.x / edgeFade) * smoother((1.0 - uv.x) / edgeFade) * smoother(uv.y / edgeFade) * smoother((1.0 - uv.y) / edgeFade) : 1.0; alpha *= mask; outColor = vec4(color * alpha, alpha); }`; const UNIFORMS = [ 'uRipples', 'uWave', 'uSquare', 'uClock', 'uSwell', 'uHover', 'uIntro', 'uViewProj', 'uArea', 'uEye', 'uColor', 'uAccent', 'uSecond', 'uLightA', 'uLightB', 'uTile', 'uAngle', 'uGap', 'uRound', 'uSoftness', 'uBulge', 'uGloss', 'uRange', 'uBrightness', 'uGrain', 'uGrainScale', 'uLightMode', 'uOpacity', 'uReveal', 'uView', 'uFade', 'uFrame' ]; const clamp = (value, min, max) => Math.min(max, Math.max(min, value)); const ease = x => { const t = clamp(x, 0, 1); return 1 - (1 - t) * (1 - t) * (1 - t); }; const glide = x => { const t = clamp(x, 0, 1); return t * t * t * (t * (t * 6 - 15) + 10); }; const smoothstep = (a, b, x) => { const t = clamp((x - a) / (b - a), 0, 1); return t * t * (3 - 2 * t); }; const compile = (gl, type, source) => { const shader = gl.createShader(type); if (!shader) return null; gl.shaderSource(shader, source); gl.compileShader(shader); if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader; gl.deleteShader(shader); return null; }; const link = (gl, vertexSource, fragmentSource) => { const vertex = compile(gl, gl.VERTEX_SHADER, vertexSource); const fragment = compile(gl, gl.FRAGMENT_SHADER, fragmentSource); const program = gl.createProgram(); if (!vertex || !fragment || !program) return null; gl.attachShader(program, vertex); gl.attachShader(program, fragment); gl.linkProgram(program); gl.deleteShader(vertex); gl.deleteShader(fragment); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { gl.deleteProgram(program); return null; } const uniforms = {}; for (const name of UNIFORMS) uniforms[name] = gl.getUniformLocation(program, name); return { program, uniforms }; }; const perspective = (fov, aspect, near, far) => { const f = 1 / Math.tan(fov / 2); const nf = 1 / (near - far); return [f / aspect, 0, 0, 0, 0, f, 0, 0, 0, 0, (far + near) * nf, -1, 0, 0, 2 * far * near * nf, 0]; }; const lookAt = (eye, target) => { let zx = eye[0] - target[0]; let zy = eye[1] - target[1]; let zz = eye[2] - target[2]; let len = Math.hypot(zx, zy, zz) || 1; zx /= len; zy /= len; zz /= len; let xx = zz; let xz = -zx; len = Math.hypot(xx, xz) || 1; xx /= len; xz /= len; const yx = zy * xz; const yy = zz * xx - zx * xz; const yz = -zy * xx; return [ xx, yx, zx, 0, 0, yy, zy, 0, xz, yz, zz, 0, -(xx * eye[0] + xz * eye[2]), -(yx * eye[0] + yy * eye[1] + yz * eye[2]), -(zx * eye[0] + zy * eye[1] + zz * eye[2]), 1 ]; }; const multiply = (a, b) => { const out = new Array(16); for (let col = 0; col < 4; col += 1) { for (let row = 0; row < 4; row += 1) { out[col * 4 + row] = a[row] * b[col * 4] + a[4 + row] * b[col * 4 + 1] + a[8 + row] * b[col * 4 + 2] + a[12 + row] * b[col * 4 + 3]; } } return out; }; const invert = a => { const b00 = a[0] * a[5] - a[1] * a[4]; const b01 = a[0] * a[6] - a[2] * a[4]; const b02 = a[0] * a[7] - a[3] * a[4]; const b03 = a[1] * a[6] - a[2] * a[5]; const b04 = a[1] * a[7] - a[3] * a[5]; const b05 = a[2] * a[7] - a[3] * a[6]; const b06 = a[8] * a[13] - a[9] * a[12]; const b07 = a[8] * a[14] - a[10] * a[12]; const b08 = a[8] * a[15] - a[11] * a[12]; const b09 = a[9] * a[14] - a[10] * a[13]; const b10 = a[9] * a[15] - a[11] * a[13]; const b11 = a[10] * a[15] - a[11] * a[14]; const det = b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06; const k = det ? 1 / det : 0; return [ (a[5] * b11 - a[6] * b10 + a[7] * b09) * k, (a[2] * b10 - a[1] * b11 - a[3] * b09) * k, (a[13] * b05 - a[14] * b04 + a[15] * b03) * k, (a[10] * b04 - a[9] * b05 - a[11] * b03) * k, (a[6] * b08 - a[4] * b11 - a[7] * b07) * k, (a[0] * b11 - a[2] * b08 + a[3] * b07) * k, (a[14] * b02 - a[12] * b05 - a[15] * b01) * k, (a[8] * b05 - a[10] * b02 + a[11] * b01) * k, (a[4] * b10 - a[5] * b08 + a[7] * b06) * k, (a[1] * b08 - a[0] * b10 - a[3] * b06) * k, (a[12] * b04 - a[13] * b02 + a[15] * b00) * k, (a[9] * b02 - a[8] * b04 - a[11] * b00) * k, (a[5] * b07 - a[4] * b09 - a[6] * b06) * k, (a[0] * b09 - a[1] * b07 + a[2] * b06) * k, (a[13] * b01 - a[12] * b03 - a[14] * b00) * k, (a[8] * b03 - a[9] * b01 + a[10] * b00) * k ]; }; const AcidSquares = ({ color = '#120f17', accentColor = '#ff4fb8', secondaryColor = '#3b6bff', tileSize = 1, gap = 0.12, roundness = 0.25, softness = 0.5, bulge = 0.3, rotation = 35, gloss = 0.6, waves = 1, waveScale = 1, speed = 0.6, shape = 'square', pulse = 1, pulseSpeed = 0.45, pulseSpacing = 1, pulseWidth = 1, pulseOrigin = 'center', brightness = 1, lighting = 'split', tilt = 0.7, zoom = 1, depth = 10, grain = 0.12, fade = 0, opacity = 1, intro = true, mouseInteraction = true, hoverEffect = 'press', mouseStrength = 1, mouseRadius = 0.35, pulseOnClick = true, detail = 'medium', lightMode = false, paused = false, dpr, ...rest }) => { const containerRef = useRef(null); const canvasRef = useRef(null); const wakeRef = useRef(null); const settings = { color: String(color), accentColor: String(accentColor), secondaryColor: String(secondaryColor), tileSize: clamp(tileSize, 0.2, 5), gap: clamp(gap, 0, 0.6), roundness: clamp(roundness, 0, 1), softness: clamp(softness, 0, 1), bulge: clamp(bulge, 0, 1.5), rotation: rotation * DEG, gloss: clamp(gloss, 0, 1), waves: Math.max(0, waves), waveScale: clamp(waveScale, 0.1, 5), speed: Math.max(0, speed), square: shape === 'round' ? 0 : 1, pulse: Math.max(0, pulse), pulseSpeed: Math.max(0, pulseSpeed), pulseSpacing: clamp(pulseSpacing, 0.2, 6), pulseWidth: clamp(pulseWidth, 0.1, 5), randomOrigin: pulseOrigin === 'random', brightness: Math.max(0, brightness), lights: LIGHTING[lighting] || LIGHTING.split, tilt: clamp(tilt, 0, 1), zoom: clamp(zoom, 0.3, 4), depth: clamp(depth, 2, 40), grain: Math.max(0, grain), fade: clamp(fade, 0, 1), opacity: clamp(opacity, 0, 1), intro, mouseInteraction, hover: HOVER_EFFECTS[hoverEffect] ?? 1, mouseStrength: Math.max(0, mouseStrength), mouseRadius: clamp(mouseRadius, 0.02, 2), pulseOnClick, mesh: MESH[detail] || MESH.medium, lightMode, paused, dpr }; const settingsRef = useRef(settings); settingsRef.current = settings; useEffect(() => { const container = containerRef.current; const canvas = canvasRef.current; const gl = canvas?.getContext('webgl2', { alpha: true, premultipliedAlpha: true, antialias: true, depth: true, stencil: false }); if (!container || !canvas || !gl) return undefined; const surface = link(gl, VERTEX, FRAGMENT); if (!surface) return undefined; const vao = gl.createVertexArray(); const gridBuffer = gl.createBuffer(); const indexBuffer = gl.createBuffer(); let meshSize = 0; let indexCount = 0; const buildMesh = size => { if (size === meshSize) return; meshSize = size; const points = new Float32Array((size + 1) * (size + 1) * 2); let o = 0; for (let j = 0; j <= size; j += 1) { for (let i = 0; i <= size; i += 1) { points[o] = i / size; points[o + 1] = j / size; o += 2; } } const indices = new Uint32Array(size * size * 6); o = 0; for (let j = 0; j < size; j += 1) { for (let i = 0; i < size; i += 1) { const a = j * (size + 1) + i; const b = a + 1; const c = a + size + 1; const d = c + 1; indices[o] = a; indices[o + 1] = c; indices[o + 2] = b; indices[o + 3] = b; indices[o + 4] = c; indices[o + 5] = d; o += 6; } } indexCount = indices.length; gl.bindVertexArray(vao); gl.bindBuffer(gl.ARRAY_BUFFER, gridBuffer); gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW); gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW); gl.bindVertexArray(null); }; const probe = document.createElement('canvas'); probe.width = 1; probe.height = 1; const probeContext = probe.getContext('2d', { willReadFrequently: true }); const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false; const state = { clock: 0, swell: 0, lights: 0, frame: 0, nextRipple: 1.2, ripples: [], intro: settingsRef.current.intro && !reduce ? 0 : INTRO_SECONDS, width: 1, height: 1, colorKey: '', color: [0.07, 0.06, 0.09], accent: [1, 0.31, 0.72], second: [0.23, 0.42, 1], pointer: { x: 0, y: 0, inside: false }, hover: { x: 0, z: 0, vx: 0, vz: 0, presence: 0, placed: false }, look: { x: 0, y: 0, vx: 0, vy: 0 }, seed: 1, camera: null }; let raf = 0; let last = 0; let visible = true; let alive = true; const toRgb = (value, fallback) => { if (!probeContext || !value) return fallback; const css = /^[0-9a-f]{3,8}$/i.test(value) ? `#${value}` : value; probeContext.clearRect(0, 0, 1, 1); probeContext.fillStyle = '#000000'; probeContext.fillStyle = css; probeContext.fillRect(0, 0, 1, 1); const [r, g, b] = probeContext.getImageData(0, 0, 1, 1).data; return [r / 255, g / 255, b / 255]; }; const resolveColors = s => { const key = `${s.color}|${s.accentColor}|${s.secondaryColor}`; if (key === state.colorKey) return; state.colorKey = key; state.color = toRgb(s.color, [0.07, 0.06, 0.09]); state.accent = toRgb(s.accentColor, [1, 0.31, 0.72]); state.second = toRgb(s.secondaryColor, [0.23, 0.42, 1]); }; const random = () => { state.seed = (state.seed * 16807) % 2147483647; return (state.seed - 1) / 2147483646; }; const cameraFor = s => { const aspect = state.width / Math.max(state.height, 1); const distance = 8 / s.zoom; const yaw = state.look.x * 0.16; const pitch = 1.5 - s.tilt * 1.26 + state.look.y * 0.05; const target = [ORIGIN[0], 0, ORIGIN[1]]; const eye = [ target[0] + Math.sin(yaw) * Math.cos(pitch) * distance, target[1] + Math.sin(pitch) * distance, target[2] + Math.cos(yaw) * Math.cos(pitch) * distance ]; const projection = perspective(0.8, aspect, 0.1, 400); const view = lookAt(eye, target); const viewProj = multiply(projection, view); return { eye, target, viewProj, inverse: invert(viewProj), distance }; }; const rippleData = new Float32Array(MAX_RIPPLES * 4); const render = () => { const s = settingsRef.current; buildMesh(s.mesh); resolveColors(s); const camera = cameraFor(s); state.camera = camera; gl.viewport(0, 0, canvas.width, canvas.height); gl.clearColor(0, 0, 0, 0); gl.clearDepth(1); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); gl.useProgram(surface.program); const u = surface.uniforms; rippleData.fill(0); state.ripples.forEach((ripple, index) => { rippleData[index * 4] = ripple.x; rippleData[index * 4 + 1] = ripple.z; rippleData[index * 4 + 2] = ripple.start; rippleData[index * 4 + 3] = ripple.strength; }); const introAge = state.intro; const revealing = introAge < INTRO_SECONDS; const revealRadius = glide(introAge / REVEAL_SECONDS) * REVEAL_REACH; const settle = ease(introAge / INTRO_SECONDS); gl.uniform4fv(u.uRipples, rippleData); gl.uniform4f(u.uWave, 0.55 * s.pulse, 3 * Math.max(s.pulseSpeed, 0.05) + 1.2, 1.6 * s.pulseWidth, 46); gl.uniform1f(u.uSquare, s.square); gl.uniform1f(u.uClock, state.clock); gl.uniform4f(u.uSwell, 1.3 * s.waves * (0.25 + 0.75 * settle), 1.9 / s.waveScale, 0, state.swell); gl.uniform4f( u.uHover, state.hover.x, state.hover.z, (3 * s.mouseRadius) / 0.35, 0.7 * state.hover.presence * s.mouseStrength * s.hover ); gl.uniform4f( u.uIntro, ORIGIN[0], ORIGIN[1], revealRadius, revealing ? 0.9 * (1 - smoothstep(0.55, 1, introAge / INTRO_SECONDS)) : 0 ); gl.uniformMatrix4fv(u.uViewProj, false, camera.viewProj); gl.uniform4f(u.uArea, AREA[0] + ORIGIN[0], AREA[1] + ORIGIN[1], AREA[2], AREA[3]); gl.uniform3f(u.uEye, camera.eye[0], camera.eye[1], camera.eye[2]); gl.uniform3f(u.uColor, state.color[0], state.color[1], state.color[2]); gl.uniform3f(u.uAccent, state.accent[0], state.accent[1], state.accent[2]); gl.uniform3f(u.uSecond, state.second[0], state.second[1], state.second[2]); const orbit = state.lights; const reach = camera.distance / 8; const lightLevel = 0.35 + 0.65 * settle; const [first, second] = s.lights; gl.uniform3f( u.uLightA, camera.target[0] + (first[0] + Math.sin(orbit * 0.7) * first[3]) * reach, first[1] * reach * lightLevel + 0.6, camera.target[2] + (first[2] + Math.cos(orbit * 0.5) * first[4]) * reach ); gl.uniform3f( u.uLightB, camera.target[0] + (second[0] + Math.cos(orbit * 0.6) * second[3]) * reach, second[1] * reach * lightLevel + 0.6, camera.target[2] + (second[2] + Math.sin(orbit * 0.45) * second[4]) * reach ); gl.uniform1f(u.uTile, 1.2 * s.tileSize); gl.uniform1f(u.uAngle, s.rotation); gl.uniform1f(u.uGap, s.gap); gl.uniform1f(u.uRound, s.roundness); gl.uniform1f(u.uSoftness, s.softness); gl.uniform1f(u.uBulge, s.bulge); gl.uniform1f(u.uGloss, s.gloss); const far = Math.min(s.depth * 3.2 * reach, AREA[3] * 0.62); gl.uniform2f(u.uRange, far * 0.5, far); gl.uniform1f(u.uBrightness, s.brightness); const pixelRatio = canvas.height / Math.max(state.height, 1); gl.uniform1f(u.uGrain, s.grain); gl.uniform1f(u.uGrainScale, Math.max(1, pixelRatio)); gl.uniform1f(u.uLightMode, s.lightMode ? 1 : 0); gl.uniform1f(u.uOpacity, s.opacity); gl.uniform4f(u.uReveal, ORIGIN[0], ORIGIN[1], revealRadius, revealing ? 0 : 1); gl.uniform2f(u.uView, canvas.width, canvas.height); gl.uniform1f(u.uFade, s.fade); gl.uniform1f(u.uFrame, state.frame % 977); gl.bindVertexArray(vao); gl.drawElements(gl.TRIANGLES, indexCount, gl.UNSIGNED_INT, 0); gl.bindVertexArray(null); gl.disable(gl.DEPTH_TEST); }; const resize = () => { const s = settingsRef.current; const width = Math.max(1, container.clientWidth); const height = Math.max(1, container.clientHeight); const baseDpr = Math.min(s.dpr || window.devicePixelRatio || 1, 2); const longest = Math.max(width, height) * baseDpr; const ratio = longest > MAX_RENDER_DIM ? (baseDpr * MAX_RENDER_DIM) / longest : baseDpr; const pixelWidth = Math.max(1, Math.round(width * ratio)); const pixelHeight = Math.max(1, Math.round(height * ratio)); if (canvas.width !== pixelWidth || canvas.height !== pixelHeight) { canvas.width = pixelWidth; canvas.height = pixelHeight; } state.width = width; state.height = height; render(); }; const groundPoint = (px, py) => { const camera = state.camera; if (!camera) return null; const nx = (px / state.width) * 2 - 1; const ny = 1 - (py / state.height) * 2; const m = camera.inverse; const fx = m[0] * nx + m[4] * ny + m[8] + m[12]; const fy = m[1] * nx + m[5] * ny + m[9] + m[13]; const fz = m[2] * nx + m[6] * ny + m[10] + m[14]; const fw = m[3] * nx + m[7] * ny + m[11] + m[15]; const dx = fx / fw - camera.eye[0]; const dy = fy / fw - camera.eye[1]; const dz = fz / fw - camera.eye[2]; if (dy >= -1e-4) return null; const t = -camera.eye[1] / dy; return { x: camera.eye[0] + dx * t, z: camera.eye[2] + dz * t }; }; const spawn = (x, z, strength) => { state.ripples.push({ x, z, start: state.clock, strength }); while (state.ripples.length > MAX_RIPPLES) state.ripples.shift(); }; const frame = now => { raf = 0; if (!alive || !visible || document.hidden) return; const s = settingsRef.current; const dt = last ? Math.min(0.05, (now - last) / 1000) : 1 / 60; last = now; const moving = !s.paused && !reduce; if (moving) { state.frame += 1; state.clock += dt; state.intro += dt; state.swell += dt * s.speed; state.lights += dt * s.speed * 0.6; const travel = 3 * Math.max(s.pulseSpeed, 0.05) + 1.2; const interval = (10 * s.pulseSpacing) / travel; if (s.pulse > 0 && state.clock >= state.nextRipple) { if (s.randomOrigin) { const spot = groundPoint((0.15 + random() * 0.7) * state.width, (0.25 + random() * 0.6) * state.height); if (spot) spawn(spot.x, spot.z, 1); } else { spawn(ORIGIN[0], ORIGIN[1], 1); } state.nextRipple = state.clock + interval * (s.randomOrigin ? 0.6 : 1); } const lifetime = 46 / travel + 1; state.ripples = state.ripples.filter(ripple => state.clock - ripple.start < lifetime); } else if (state.intro < INTRO_SECONDS) { state.intro = INTRO_SECONDS; } const { pointer, hover, look } = state; const active = s.mouseInteraction && pointer.inside && !reduce; const spot = active && s.hover !== 0 ? groundPoint(pointer.x, pointer.y) : null; if (spot) { if (!hover.placed) { hover.x = spot.x; hover.z = spot.z; hover.vx = 0; hover.vz = 0; hover.placed = true; } hover.vx += (90 * (spot.x - hover.x) - 19 * hover.vx) * dt; hover.vz += (90 * (spot.z - hover.z) - 19 * hover.vz) * dt; hover.x += hover.vx * dt; hover.z += hover.vz * dt; } const goal = spot ? 1 : 0; hover.presence += (goal - hover.presence) * (1 - Math.exp(-dt / (goal > hover.presence ? 0.35 : 0.6))); if (!spot && hover.presence < 0.001) hover.placed = false; const lookX = active ? (pointer.x / state.width - 0.5) * 0.5 : 0; const lookY = active ? (0.5 - pointer.y / state.height) * 0.5 : 0; look.vx += (30 * (lookX - look.x) - 11 * look.vx) * dt; look.vy += (30 * (lookY - look.y) - 11 * look.vy) * dt; look.x += look.vx * dt; look.y += look.vy * dt; render(); const settling = Math.abs(goal - hover.presence) > 0.002 || Math.hypot(hover.vx, hover.vz) > 0.01 || Math.abs(lookX - look.x) > 0.0002 || Math.abs(lookY - look.y) > 0.0002; if (moving || settling) raf = requestAnimationFrame(frame); else last = 0; }; const wake = () => { if (!raf && alive && visible && !document.hidden) raf = requestAnimationFrame(frame); }; const onPointerMove = event => { const rect = container.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; state.pointer.x = x; state.pointer.y = y; state.pointer.inside = x >= 0 && y >= 0 && x <= rect.width && y <= rect.height; wake(); }; const onPointerDown = event => { const s = settingsRef.current; if (!s.mouseInteraction || !s.pulseOnClick || event.button !== 0 || reduce) return; if ( event.target instanceof Element && event.target.closest('a, button, input, textarea, select, label, [role="button"]') ) return; const rect = container.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; if (x < 0 || y < 0 || x > rect.width || y > rect.height) return; const spot = groundPoint(x, y); if (spot) spawn(spot.x, spot.z, 1.15); wake(); }; const onPointerLeave = () => { state.pointer.inside = false; wake(); }; const onVisibility = () => { last = 0; wake(); }; const resizeObserver = new ResizeObserver(resize); resizeObserver.observe(container); const intersection = new IntersectionObserver(entries => { visible = entries.some(entry => entry.isIntersecting); if (visible) { last = 0; wake(); } }); intersection.observe(container); window.addEventListener('pointermove', onPointerMove, { passive: true }); window.addEventListener('pointerdown', onPointerDown); document.documentElement.addEventListener('pointerleave', onPointerLeave); document.addEventListener('visibilitychange', onVisibility); resize(); wake(); wakeRef.current = () => { if (!raf) render(); wake(); }; return () => { alive = false; cancelAnimationFrame(raf); wakeRef.current = null; resizeObserver.disconnect(); intersection.disconnect(); window.removeEventListener('pointermove', onPointerMove); window.removeEventListener('pointerdown', onPointerDown); document.documentElement.removeEventListener('pointerleave', onPointerLeave); document.removeEventListener('visibilitychange', onVisibility); gl.deleteBuffer(gridBuffer); gl.deleteBuffer(indexBuffer); gl.deleteVertexArray(vao); gl.deleteProgram(surface.program); }; }, []); useEffect(() => { wakeRef.current?.(); }); const { className = '', ...attributes } = rest; return (

); }; export default AcidSquares; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"AcidSquares/AcidSquares.jsx","content":"$51","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]