767 lines
22 KiB
TypeScript
767 lines
22 KiB
TypeScript
|
// From https://reactbits.dev/ - $ npx shadcn@latest add @react-bits/GradientWaves-TS-TW Aurora
|
||
|
|
'use client';
|
||
|
|
|
||
|
|
import { useEffect, useMemo, useRef, type CSSProperties } from 'react';
|
||
|
|
|
||
|
|
export interface GradientWavesProps {
|
||
|
|
horizonColor?: string;
|
||
|
|
waveColor?: string;
|
||
|
|
crestColor?: string;
|
||
|
|
backgroundColor?: string;
|
||
|
|
lightMode?: boolean;
|
||
|
|
speed?: number;
|
||
|
|
amplitude?: number;
|
||
|
|
waveScale?: number;
|
||
|
|
waveRatio?: number;
|
||
|
|
swell?: number;
|
||
|
|
turbulence?: number;
|
||
|
|
tilt?: number;
|
||
|
|
zoom?: number;
|
||
|
|
height?: number;
|
||
|
|
fogDepth?: number;
|
||
|
|
relief?: number;
|
||
|
|
lightAngle?: number;
|
||
|
|
sheen?: number;
|
||
|
|
brightness?: number;
|
||
|
|
opacity?: number;
|
||
|
|
grain?: number;
|
||
|
|
quality?: 'low' | 'medium' | 'high';
|
||
|
|
intro?: boolean;
|
||
|
|
mouseInteraction?: boolean;
|
||
|
|
parallaxStrength?: number;
|
||
|
|
mouseStrength?: number;
|
||
|
|
swellOnClick?: boolean;
|
||
|
|
paused?: boolean;
|
||
|
|
dpr?: number;
|
||
|
|
className?: string;
|
||
|
|
style?: CSSProperties;
|
||
|
|
}
|
||
|
|
|
||
|
|
type RGB = [number, number, number];
|
||
|
|
|
||
|
|
interface Swell {
|
||
|
|
x: number;
|
||
|
|
y: number;
|
||
|
|
at: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface View {
|
||
|
|
zoom: number;
|
||
|
|
tilt: number;
|
||
|
|
height: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
const ROOT = 'relative h-full w-full overflow-hidden';
|
||
|
|
const CANVAS = 'absolute inset-0 block h-full w-full';
|
||
|
|
|
||
|
|
const MAX_SWELLS = 4;
|
||
|
|
const SWELL_SECONDS = 3.2;
|
||
|
|
const SWELL_GAIN = 2.8;
|
||
|
|
const SWELL_WIDTH = 8;
|
||
|
|
const INTRO_SECONDS = 2.6;
|
||
|
|
const CAMERA_HEIGHT = 30;
|
||
|
|
const QUALITY: Record<string, number> = { low: 56, medium: 84, high: 120 };
|
||
|
|
|
||
|
|
const VERTEX = `#version 300 es
|
||
|
|
in vec2 aPosition;
|
||
|
|
void main() {
|
||
|
|
gl_Position = vec4(aPosition, 0.0, 1.0);
|
||
|
|
}`;
|
||
|
|
|
||
|
|
const FRAGMENT = `#version 300 es
|
||
|
|
precision highp float;
|
||
|
|
uniform vec2 uResolution;
|
||
|
|
uniform float uTime;
|
||
|
|
uniform float uClock;
|
||
|
|
uniform float uAmplitude;
|
||
|
|
uniform float uWaveScale;
|
||
|
|
uniform float uWaveRatio;
|
||
|
|
uniform float uSwell;
|
||
|
|
uniform float uTurbulence;
|
||
|
|
uniform float uHeight;
|
||
|
|
uniform float uTilt;
|
||
|
|
uniform float uZoom;
|
||
|
|
uniform vec2 uLook;
|
||
|
|
uniform float uFogDepth;
|
||
|
|
uniform float uBrightness;
|
||
|
|
uniform float uOpacity;
|
||
|
|
uniform float uGrain;
|
||
|
|
uniform vec3 uHorizon;
|
||
|
|
uniform vec3 uWave;
|
||
|
|
uniform vec3 uCrest;
|
||
|
|
uniform vec3 uBackground;
|
||
|
|
uniform float uOpaque;
|
||
|
|
uniform float uLight;
|
||
|
|
uniform vec3 uSun;
|
||
|
|
uniform float uRelief;
|
||
|
|
uniform float uSheen;
|
||
|
|
uniform float uSteps;
|
||
|
|
uniform float uStride;
|
||
|
|
uniform vec3 uIntro;
|
||
|
|
uniform vec3 uSwells[${MAX_SWELLS}];
|
||
|
|
uniform float uSwellWidth;
|
||
|
|
out vec4 outColor;
|
||
|
|
|
||
|
|
const float FAR = 4000.0;
|
||
|
|
|
||
|
|
float hash(vec2 p) {
|
||
|
|
vec3 p3 = fract(vec3(p.xyx) * 0.1031);
|
||
|
|
p3 += dot(p3, p3.yzx + 33.33);
|
||
|
|
return fract((p3.x + p3.y) * p3.z);
|
||
|
|
}
|
||
|
|
|
||
|
|
vec3 surface(vec2 xy) {
|
||
|
|
vec2 freq = vec2(uWaveScale / 7.0, (uWaveScale * uWaveRatio) / 3.0);
|
||
|
|
vec4 tc = vec4(uTime / 0.130, uTime / 0.810, uTime / 0.200, uTime / 0.710);
|
||
|
|
float a = xy.x + tc.x;
|
||
|
|
float swellPhase = (xy.y + a) / 20.0 + tc.y;
|
||
|
|
float bend = uSwell * cos(swellPhase) / 20.0;
|
||
|
|
float mx = a + uSwell * sin(swellPhase);
|
||
|
|
float crossPhase = xy.x / 23.0 + tc.w;
|
||
|
|
float my = xy.y - tc.z + uTurbulence * cos(crossPhase);
|
||
|
|
float twist = -uTurbulence * sin(crossPhase) / 23.0;
|
||
|
|
float cx = cos(mx * freq.x);
|
||
|
|
float cy = cos(my * freq.y);
|
||
|
|
float rise = 1.0;
|
||
|
|
if (uIntro.z > 0.0) rise = mix(1.0, smoothstep(uIntro.y * 0.45, uIntro.y * 1.6, xy.x), uIntro.z);
|
||
|
|
float amp = uAmplitude * rise;
|
||
|
|
float h = (sin(mx * freq.x) + sin(my * freq.y)) * amp + uHeight;
|
||
|
|
float dx = amp * (freq.x * cx * (1.0 + bend) + freq.y * cy * twist);
|
||
|
|
float dy = amp * (freq.x * cx * bend + freq.y * cy);
|
||
|
|
for (int k = 0; k < ${MAX_SWELLS}; k++) {
|
||
|
|
vec3 sw = uSwells[k];
|
||
|
|
if (sw.z <= 0.0) continue;
|
||
|
|
float u = (xy.x - sw.x) / uSwellWidth;
|
||
|
|
float v = (xy.y - sw.y) / (uSwellWidth * 3.5);
|
||
|
|
float bump = sw.z * exp(-u * u - v * v);
|
||
|
|
h += bump;
|
||
|
|
dx += bump * (-2.0 * u / uSwellWidth);
|
||
|
|
dy += bump * (-2.0 * v / (uSwellWidth * 3.5));
|
||
|
|
}
|
||
|
|
return vec3(h, dx, dy);
|
||
|
|
}
|
||
|
|
|
||
|
|
float march(vec3 origin, vec3 dir) {
|
||
|
|
float dist = 0.0;
|
||
|
|
for (int i = 0; i < 128; i++) {
|
||
|
|
if (float(i) >= uSteps) break;
|
||
|
|
float gap = origin.z + dist * dir.z - surface(origin.xy + dist * dir.xy).x;
|
||
|
|
if (abs(gap) < 0.002 * dist + 0.01) break;
|
||
|
|
dist += uStride * gap;
|
||
|
|
if (!(abs(dist) < FAR)) return FAR;
|
||
|
|
}
|
||
|
|
return dist;
|
||
|
|
}
|
||
|
|
|
||
|
|
void main() {
|
||
|
|
float c;
|
||
|
|
float s;
|
||
|
|
float vfov = (3.14159 / 2.3) / max(uZoom, 0.05);
|
||
|
|
vec3 cam = vec3(0.0, 0.0, ${CAMERA_HEIGHT.toFixed(1)});
|
||
|
|
vec2 uv = gl_FragCoord.xy / uResolution - 0.5;
|
||
|
|
uv.x *= uResolution.x / uResolution.y;
|
||
|
|
uv.y *= -1.0;
|
||
|
|
|
||
|
|
vec3 dir = vec3(0.0, 0.0, -1.0);
|
||
|
|
float ulen = length(uv);
|
||
|
|
float xrot = vfov * ulen;
|
||
|
|
c = cos(xrot);
|
||
|
|
s = sin(xrot);
|
||
|
|
dir = mat3(1.0, 0.0, 0.0, 0.0, c, -s, 0.0, s, c) * dir;
|
||
|
|
vec2 nuv = ulen > 1e-5 ? uv / ulen : vec2(1.0, 0.0);
|
||
|
|
dir = mat3(nuv.x, -nuv.y, 0.0, nuv.y, nuv.x, 0.0, 0.0, 0.0, 1.0) * dir;
|
||
|
|
c = cos(uTilt + uLook.y);
|
||
|
|
s = sin(uTilt + uLook.y);
|
||
|
|
dir = mat3(c, 0.0, s, 0.0, 1.0, 0.0, -s, 0.0, c) * dir;
|
||
|
|
c = cos(uLook.x);
|
||
|
|
s = sin(uLook.x);
|
||
|
|
dir = mat3(c, s, 0.0, -s, c, 0.0, 0.0, 0.0, 1.0) * dir;
|
||
|
|
|
||
|
|
float dist = march(cam, dir);
|
||
|
|
vec3 pos = cam + dist * dir;
|
||
|
|
vec3 field = surface(pos.xy);
|
||
|
|
vec3 view = -dir;
|
||
|
|
|
||
|
|
float crest = clamp((field.x - uHeight) / max(2.0 * uAmplitude, 0.001) * 0.5 + 0.5, 0.0, 1.0);
|
||
|
|
vec3 body = mix(uWave, uCrest, smoothstep(0.45, 1.0, crest) * 0.5);
|
||
|
|
vec3 normal = normalize(vec3(-field.yz * (1.0 + 1.5 * uRelief), 1.0));
|
||
|
|
float diffuse = clamp(dot(normal, uSun) * 0.5 + 0.5, 0.0, 1.0);
|
||
|
|
float lightness = mix(1.0, diffuse * diffuse * (3.0 - 2.0 * diffuse), uRelief);
|
||
|
|
float sheen = pow(clamp(dot(normal, normalize(uSun + view)), 0.0, 1.0), 14.0) * uSheen * (0.4 + 0.6 * uRelief);
|
||
|
|
float rim = pow(1.0 - clamp(dot(normal, view), 0.0, 1.0), 3.0);
|
||
|
|
|
||
|
|
vec3 col;
|
||
|
|
float alpha;
|
||
|
|
float haze = 1.0 - exp(-dist / (uFogDepth * 5.0));
|
||
|
|
float fade = 1.0 - smoothstep(0.35, 1.0, haze);
|
||
|
|
if (uLight < 0.5) {
|
||
|
|
vec3 lit = mix(uHorizon * 0.18, body, lightness) + uCrest * sheen;
|
||
|
|
lit = mix(lit, uHorizon, rim * 0.15 * uRelief);
|
||
|
|
col = mix(lit, uHorizon, smoothstep(0.0, 1.0, haze)) * 0.85 * uBrightness;
|
||
|
|
alpha = fade;
|
||
|
|
} else {
|
||
|
|
vec3 hue = mix(uHorizon, body, 0.35 + 0.65 * lightness);
|
||
|
|
float density = mix(0.16, 0.9, 1.0 - lightness);
|
||
|
|
density *= 1.0 - clamp(sheen, 0.0, 1.0) * 0.85;
|
||
|
|
density *= 1.0 - 0.5 * smoothstep(0.0, 1.0, haze);
|
||
|
|
col = hue;
|
||
|
|
alpha = fade * clamp(density * uBrightness, 0.0, 1.0);
|
||
|
|
}
|
||
|
|
|
||
|
|
float reveal = uIntro.x;
|
||
|
|
col = clamp(col, 0.0, 1.0);
|
||
|
|
float grain = (hash(gl_FragCoord.xy + fract(uClock) * 64.0) - 0.5) * uGrain;
|
||
|
|
alpha = clamp(alpha * (1.0 + grain), 0.0, 1.0) * reveal * uOpacity;
|
||
|
|
if (uOpaque > 0.5) {
|
||
|
|
outColor = vec4(mix(uBackground, col, alpha), 1.0);
|
||
|
|
} else {
|
||
|
|
outColor = vec4(col * alpha, alpha);
|
||
|
|
}
|
||
|
|
}`;
|
||
|
|
|
||
|
|
const clamp = (value: number, min: number, max: number) =>
|
||
|
|
Math.min(max, Math.max(min, value));
|
||
|
|
|
||
|
|
const easeInOut = (t: number) =>
|
||
|
|
t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
|
||
|
|
|
||
|
|
let probe: CanvasRenderingContext2D | null = null;
|
||
|
|
|
||
|
|
const parseColor = (value: string, fallback: RGB | null): RGB | null => {
|
||
|
|
if (value === 'transparent') return null;
|
||
|
|
if (typeof document === 'undefined') return fallback;
|
||
|
|
if (!probe) probe = document.createElement('canvas').getContext('2d');
|
||
|
|
if (!probe) return fallback;
|
||
|
|
probe.fillStyle = '#000000';
|
||
|
|
probe.fillStyle = value;
|
||
|
|
const text = probe.fillStyle;
|
||
|
|
if (text.startsWith('#')) {
|
||
|
|
const hex = parseInt(text.slice(1), 16);
|
||
|
|
return [
|
||
|
|
((hex >> 16) & 255) / 255,
|
||
|
|
((hex >> 8) & 255) / 255,
|
||
|
|
(hex & 255) / 255,
|
||
|
|
];
|
||
|
|
}
|
||
|
|
const match =
|
||
|
|
/rgba?\(([\d.]+),\s*([\d.]+),\s*([\d.]+)(?:,\s*([\d.]+))?/.exec(text);
|
||
|
|
if (!match) return fallback;
|
||
|
|
if (match[4] !== undefined && Number(match[4]) === 0) return null;
|
||
|
|
return [
|
||
|
|
Number(match[1]) / 255,
|
||
|
|
Number(match[2]) / 255,
|
||
|
|
Number(match[3]) / 255,
|
||
|
|
];
|
||
|
|
};
|
||
|
|
|
||
|
|
const compile = (gl: WebGL2RenderingContext, type: number, source: string) => {
|
||
|
|
const shader = gl.createShader(type);
|
||
|
|
if (!shader) return null;
|
||
|
|
gl.shaderSource(shader, source);
|
||
|
|
gl.compileShader(shader);
|
||
|
|
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
||
|
|
console.error(gl.getShaderInfoLog(shader));
|
||
|
|
gl.deleteShader(shader);
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
return shader;
|
||
|
|
};
|
||
|
|
|
||
|
|
const rayAt = (point: number[], aspect: number, s: View, look: number[]) => {
|
||
|
|
const uvx = (point[0] - 0.5) * aspect;
|
||
|
|
const uvy = point[1] - 0.5;
|
||
|
|
const vfov = Math.PI / 2.3 / Math.max(s.zoom, 0.05);
|
||
|
|
const length = Math.hypot(uvx, uvy);
|
||
|
|
const turn = vfov * length;
|
||
|
|
let dir = [0, -Math.sin(turn), -Math.cos(turn)];
|
||
|
|
const nx = length > 1e-5 ? uvx / length : 1;
|
||
|
|
const ny = length > 1e-5 ? uvy / length : 0;
|
||
|
|
dir = [nx * dir[0] + ny * dir[1], -ny * dir[0] + nx * dir[1], dir[2]];
|
||
|
|
const pitch = s.tilt + look[1];
|
||
|
|
const cp = Math.cos(pitch);
|
||
|
|
const sp = Math.sin(pitch);
|
||
|
|
dir = [cp * dir[0] - sp * dir[2], dir[1], sp * dir[0] + cp * dir[2]];
|
||
|
|
const cy = Math.cos(look[0]);
|
||
|
|
const sy = Math.sin(look[0]);
|
||
|
|
dir = [cy * dir[0] - sy * dir[1], sy * dir[0] + cy * dir[1], dir[2]];
|
||
|
|
return dir;
|
||
|
|
};
|
||
|
|
|
||
|
|
const groundAt = (point: number[], aspect: number, s: View, look: number[]) => {
|
||
|
|
const dir = rayAt(point, aspect, s, look);
|
||
|
|
if (dir[2] > -0.02) return null;
|
||
|
|
const travel = (CAMERA_HEIGHT - s.height) / -dir[2];
|
||
|
|
return [dir[0] * travel, dir[1] * travel];
|
||
|
|
};
|
||
|
|
|
||
|
|
const prefersReduced = () =>
|
||
|
|
typeof window !== 'undefined' &&
|
||
|
|
(window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false);
|
||
|
|
|
||
|
|
export default function GradientWaves({
|
||
|
|
horizonColor = '#5227FF',
|
||
|
|
waveColor = '#FF9FFC',
|
||
|
|
crestColor = '#FFFFFF',
|
||
|
|
backgroundColor = 'transparent',
|
||
|
|
lightMode = false,
|
||
|
|
speed = 0.4,
|
||
|
|
amplitude = 2.5,
|
||
|
|
waveScale = 0.6,
|
||
|
|
waveRatio = 0.9,
|
||
|
|
swell = 35,
|
||
|
|
turbulence = 20,
|
||
|
|
tilt = 64,
|
||
|
|
zoom = 1,
|
||
|
|
height = 5.5,
|
||
|
|
fogDepth = 15,
|
||
|
|
relief = 1,
|
||
|
|
lightAngle = 120,
|
||
|
|
sheen = 0,
|
||
|
|
brightness = 1,
|
||
|
|
opacity = 1,
|
||
|
|
grain = 0.2,
|
||
|
|
quality = 'medium',
|
||
|
|
intro = true,
|
||
|
|
mouseInteraction = true,
|
||
|
|
parallaxStrength = 0.5,
|
||
|
|
mouseStrength = 0.6,
|
||
|
|
swellOnClick = true,
|
||
|
|
paused = false,
|
||
|
|
dpr = 2,
|
||
|
|
className = '',
|
||
|
|
style,
|
||
|
|
}: GradientWavesProps) {
|
||
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
||
|
|
const horizon = useMemo(
|
||
|
|
(): RGB => parseColor(horizonColor, [0.32, 0.15, 1]) ?? [0.32, 0.15, 1],
|
||
|
|
[horizonColor],
|
||
|
|
);
|
||
|
|
const wave = useMemo(
|
||
|
|
(): RGB => parseColor(waveColor, [1, 0.62, 0.99]) ?? [1, 0.62, 0.99],
|
||
|
|
[waveColor],
|
||
|
|
);
|
||
|
|
const crest = useMemo(
|
||
|
|
(): RGB => parseColor(crestColor, [1, 1, 1]) ?? [1, 1, 1],
|
||
|
|
[crestColor],
|
||
|
|
);
|
||
|
|
const paper = useMemo(
|
||
|
|
() => parseColor(backgroundColor, null),
|
||
|
|
[backgroundColor],
|
||
|
|
);
|
||
|
|
|
||
|
|
const settings = {
|
||
|
|
horizon,
|
||
|
|
wave,
|
||
|
|
crest,
|
||
|
|
paper,
|
||
|
|
lightMode,
|
||
|
|
speed,
|
||
|
|
amplitude: Math.max(0, amplitude),
|
||
|
|
waveScale: Math.max(0.01, waveScale),
|
||
|
|
waveRatio: Math.max(0.01, waveRatio),
|
||
|
|
swell,
|
||
|
|
turbulence,
|
||
|
|
tilt: (clamp(tilt, 10, 85) * Math.PI) / 180,
|
||
|
|
zoom: Math.max(0.05, zoom),
|
||
|
|
height,
|
||
|
|
fogDepth: Math.max(0.5, fogDepth),
|
||
|
|
relief: clamp(relief, 0, 1),
|
||
|
|
lightAngle: (lightAngle * Math.PI) / 180,
|
||
|
|
sheen: Math.max(0, sheen),
|
||
|
|
brightness: Math.max(0, brightness),
|
||
|
|
opacity: clamp(opacity, 0, 1),
|
||
|
|
grain:
|
||
|
|
typeof grain === 'number' ? Math.max(0, grain) : grain ? 0.05 : 0,
|
||
|
|
steps: QUALITY[quality] ?? QUALITY.medium,
|
||
|
|
intro,
|
||
|
|
mouseInteraction,
|
||
|
|
parallaxStrength: Math.max(0, parallaxStrength),
|
||
|
|
mouseStrength: clamp(mouseStrength, 0, 1),
|
||
|
|
swellOnClick,
|
||
|
|
paused,
|
||
|
|
dpr: Math.max(0.5, dpr),
|
||
|
|
};
|
||
|
|
const settingsRef = useRef(settings);
|
||
|
|
settingsRef.current = settings;
|
||
|
|
const wakeRef = useRef<(() => void) | null>(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
wakeRef.current?.();
|
||
|
|
});
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const container = containerRef.current;
|
||
|
|
if (!container) return undefined;
|
||
|
|
const canvas = document.createElement('canvas');
|
||
|
|
canvas.className = CANVAS;
|
||
|
|
container.appendChild(canvas);
|
||
|
|
const gl = canvas.getContext('webgl2', {
|
||
|
|
alpha: true,
|
||
|
|
antialias: false,
|
||
|
|
depth: false,
|
||
|
|
stencil: false,
|
||
|
|
premultipliedAlpha: true,
|
||
|
|
powerPreference: 'high-performance',
|
||
|
|
});
|
||
|
|
if (!gl) {
|
||
|
|
canvas.remove();
|
||
|
|
return undefined;
|
||
|
|
}
|
||
|
|
const vertex = compile(gl, gl.VERTEX_SHADER, VERTEX);
|
||
|
|
const fragment = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT);
|
||
|
|
const program = gl.createProgram();
|
||
|
|
if (!vertex || !fragment || !program) {
|
||
|
|
canvas.remove();
|
||
|
|
return undefined;
|
||
|
|
}
|
||
|
|
gl.attachShader(program, vertex);
|
||
|
|
gl.attachShader(program, fragment);
|
||
|
|
gl.bindAttribLocation(program, 0, 'aPosition');
|
||
|
|
gl.linkProgram(program);
|
||
|
|
gl.deleteShader(vertex);
|
||
|
|
gl.deleteShader(fragment);
|
||
|
|
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
||
|
|
gl.deleteProgram(program);
|
||
|
|
canvas.remove();
|
||
|
|
return undefined;
|
||
|
|
}
|
||
|
|
const names = [
|
||
|
|
'uResolution',
|
||
|
|
'uTime',
|
||
|
|
'uClock',
|
||
|
|
'uAmplitude',
|
||
|
|
'uWaveScale',
|
||
|
|
'uWaveRatio',
|
||
|
|
'uSwell',
|
||
|
|
'uTurbulence',
|
||
|
|
'uHeight',
|
||
|
|
'uTilt',
|
||
|
|
'uZoom',
|
||
|
|
'uLook',
|
||
|
|
'uFogDepth',
|
||
|
|
'uBrightness',
|
||
|
|
'uOpacity',
|
||
|
|
'uGrain',
|
||
|
|
'uHorizon',
|
||
|
|
'uWave',
|
||
|
|
'uCrest',
|
||
|
|
'uBackground',
|
||
|
|
'uOpaque',
|
||
|
|
'uLight',
|
||
|
|
'uSun',
|
||
|
|
'uRelief',
|
||
|
|
'uSheen',
|
||
|
|
'uSteps',
|
||
|
|
'uStride',
|
||
|
|
'uIntro',
|
||
|
|
'uSwells',
|
||
|
|
'uSwellWidth',
|
||
|
|
];
|
||
|
|
const u: Record<string, WebGLUniformLocation | null> = {};
|
||
|
|
names.forEach((name) => {
|
||
|
|
u[name] = gl.getUniformLocation(program, name);
|
||
|
|
});
|
||
|
|
const vao = gl.createVertexArray();
|
||
|
|
gl.bindVertexArray(vao);
|
||
|
|
const buffer = gl.createBuffer();
|
||
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
||
|
|
gl.bufferData(
|
||
|
|
gl.ARRAY_BUFFER,
|
||
|
|
new Float32Array([-1, -1, 3, -1, -1, 3]),
|
||
|
|
gl.STATIC_DRAW,
|
||
|
|
);
|
||
|
|
gl.enableVertexAttribArray(0);
|
||
|
|
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
|
||
|
|
gl.useProgram(program);
|
||
|
|
|
||
|
|
const swellData = new Float32Array(MAX_SWELLS * 3);
|
||
|
|
const state = {
|
||
|
|
width: 1,
|
||
|
|
height: 1,
|
||
|
|
cssWidth: 0,
|
||
|
|
cssHeight: 0,
|
||
|
|
time: 0,
|
||
|
|
clock: 0,
|
||
|
|
last: 0,
|
||
|
|
raf: 0,
|
||
|
|
visible: false,
|
||
|
|
introAt: -1,
|
||
|
|
pointer: [0.5, 0.5],
|
||
|
|
inside: false,
|
||
|
|
look: [0, 0],
|
||
|
|
steer: [0, 0],
|
||
|
|
swells: [] as Swell[],
|
||
|
|
quiet: 0,
|
||
|
|
seen: null as typeof settings | null,
|
||
|
|
};
|
||
|
|
|
||
|
|
const fit = () => {
|
||
|
|
const s = settingsRef.current;
|
||
|
|
const ratio = Math.min(window.devicePixelRatio || 1, s.dpr);
|
||
|
|
const width = Math.max(1, Math.round(state.cssWidth * ratio));
|
||
|
|
const height = Math.max(1, Math.round(state.cssHeight * ratio));
|
||
|
|
if (width === state.width && height === state.height) return;
|
||
|
|
state.quiet = 0;
|
||
|
|
state.width = width;
|
||
|
|
state.height = height;
|
||
|
|
canvas.width = width;
|
||
|
|
canvas.height = height;
|
||
|
|
};
|
||
|
|
|
||
|
|
const measure = () => {
|
||
|
|
state.cssWidth = container.clientWidth;
|
||
|
|
state.cssHeight = container.clientHeight;
|
||
|
|
fit();
|
||
|
|
wake();
|
||
|
|
};
|
||
|
|
|
||
|
|
const introProgress = (s: typeof settings, reduced: boolean) => {
|
||
|
|
if (!s.intro || reduced || state.introAt < 0) return 1;
|
||
|
|
return clamp((state.clock - state.introAt) / INTRO_SECONDS, 0, 1);
|
||
|
|
};
|
||
|
|
|
||
|
|
const render = (reduced: boolean) => {
|
||
|
|
const s = settingsRef.current;
|
||
|
|
gl.viewport(0, 0, state.width, state.height);
|
||
|
|
gl.uniform2f(u.uResolution, state.width, state.height);
|
||
|
|
gl.uniform1f(u.uTime, state.time);
|
||
|
|
gl.uniform1f(u.uClock, state.clock);
|
||
|
|
gl.uniform1f(u.uAmplitude, s.amplitude);
|
||
|
|
gl.uniform1f(u.uWaveScale, s.waveScale);
|
||
|
|
gl.uniform1f(u.uWaveRatio, s.waveRatio);
|
||
|
|
gl.uniform1f(u.uSwell, s.swell);
|
||
|
|
gl.uniform1f(u.uTurbulence, s.turbulence);
|
||
|
|
gl.uniform1f(u.uHeight, s.height);
|
||
|
|
gl.uniform1f(u.uTilt, s.tilt);
|
||
|
|
gl.uniform1f(u.uZoom, s.zoom);
|
||
|
|
gl.uniform2f(u.uLook, state.look[0], state.look[1]);
|
||
|
|
gl.uniform1f(u.uFogDepth, s.fogDepth);
|
||
|
|
gl.uniform1f(u.uBrightness, s.brightness);
|
||
|
|
gl.uniform1f(u.uOpacity, s.opacity);
|
||
|
|
gl.uniform1f(u.uGrain, s.grain);
|
||
|
|
gl.uniform3fv(u.uHorizon, s.horizon);
|
||
|
|
gl.uniform3fv(u.uWave, s.wave);
|
||
|
|
gl.uniform3fv(u.uCrest, s.crest);
|
||
|
|
const paperColor = s.paper ?? [0, 0, 0];
|
||
|
|
gl.uniform3f(
|
||
|
|
u.uBackground,
|
||
|
|
paperColor[0],
|
||
|
|
paperColor[1],
|
||
|
|
paperColor[2],
|
||
|
|
);
|
||
|
|
gl.uniform1f(u.uOpaque, s.paper ? 1 : 0);
|
||
|
|
gl.uniform1f(u.uLight, s.lightMode ? 1 : 0);
|
||
|
|
const elevation = 0.52;
|
||
|
|
const angle = s.lightAngle + state.steer[0] * s.mouseStrength * 2;
|
||
|
|
const altitude = elevation - state.steer[1] * s.mouseStrength * 0.7;
|
||
|
|
gl.uniform3f(
|
||
|
|
u.uSun,
|
||
|
|
Math.cos(altitude) * Math.cos(angle),
|
||
|
|
Math.cos(altitude) * Math.sin(angle),
|
||
|
|
Math.sin(altitude),
|
||
|
|
);
|
||
|
|
gl.uniform1f(u.uRelief, s.relief);
|
||
|
|
gl.uniform1f(u.uSheen, s.sheen);
|
||
|
|
gl.uniform1f(u.uSteps, s.steps);
|
||
|
|
const slope =
|
||
|
|
s.amplitude *
|
||
|
|
((s.waveScale / 7) * (1 + Math.abs(s.swell) / 20) +
|
||
|
|
((s.waveScale * s.waveRatio) / 3) *
|
||
|
|
(1 + Math.abs(s.turbulence) / 23));
|
||
|
|
const progress = introProgress(s, reduced);
|
||
|
|
const shown = Math.min(1, progress / 0.22);
|
||
|
|
const crest =
|
||
|
|
160 *
|
||
|
|
Math.pow(
|
||
|
|
3 / 160,
|
||
|
|
easeInOut(Math.max(0, (progress - 0.1) / 0.9)),
|
||
|
|
);
|
||
|
|
const settle = clamp((progress - 0.75) / 0.25, 0, 1);
|
||
|
|
gl.uniform3f(
|
||
|
|
u.uIntro,
|
||
|
|
shown * shown * (3 - 2 * shown),
|
||
|
|
crest,
|
||
|
|
1 - settle * settle * (3 - 2 * settle),
|
||
|
|
);
|
||
|
|
swellData.fill(0);
|
||
|
|
let swellPeak = 0;
|
||
|
|
state.swells.forEach((swell, index) => {
|
||
|
|
const age = state.clock - swell.at;
|
||
|
|
const life = age / SWELL_SECONDS;
|
||
|
|
const envelope =
|
||
|
|
(1 - Math.exp(-age / 0.25)) * Math.pow(1 - life, 1.6);
|
||
|
|
const lift = s.amplitude * SWELL_GAIN * envelope;
|
||
|
|
swellData.set([swell.x - age * 12, swell.y, lift], index * 3);
|
||
|
|
swellPeak = Math.max(swellPeak, lift);
|
||
|
|
});
|
||
|
|
gl.uniform3fv(u.uSwells, swellData);
|
||
|
|
gl.uniform1f(u.uSwellWidth, SWELL_WIDTH);
|
||
|
|
gl.uniform1f(
|
||
|
|
u.uStride,
|
||
|
|
0.9 /
|
||
|
|
Math.max(
|
||
|
|
1,
|
||
|
|
(slope + (swellPeak * 0.86) / SWELL_WIDTH) / 1.5,
|
||
|
|
),
|
||
|
|
);
|
||
|
|
gl.clearColor(0, 0, 0, 0);
|
||
|
|
gl.clear(gl.COLOR_BUFFER_BIT);
|
||
|
|
gl.drawArrays(gl.TRIANGLES, 0, 3);
|
||
|
|
};
|
||
|
|
|
||
|
|
const tick = (now: number) => {
|
||
|
|
state.raf = 0;
|
||
|
|
if (!state.visible || document.hidden) return;
|
||
|
|
const s = settingsRef.current;
|
||
|
|
const dt = state.last
|
||
|
|
? Math.min((now - state.last) / 1000, 0.1)
|
||
|
|
: 0;
|
||
|
|
state.last = now;
|
||
|
|
const reduced = prefersReduced();
|
||
|
|
state.clock += dt;
|
||
|
|
if (state.introAt < 0) state.introAt = state.clock;
|
||
|
|
if (!s.paused && !reduced) state.time += dt * s.speed;
|
||
|
|
|
||
|
|
const steering = s.mouseInteraction && state.inside && !reduced;
|
||
|
|
const target = steering ? state.pointer : [0.5, 0.5];
|
||
|
|
const ease = 1 - Math.exp(-dt / 0.45);
|
||
|
|
const goalX = (target[0] - 0.5) * s.parallaxStrength * 0.35;
|
||
|
|
const goalY = (target[1] - 0.5) * s.parallaxStrength * 0.18;
|
||
|
|
state.look[0] += (goalX - state.look[0]) * ease;
|
||
|
|
state.look[1] += (goalY - state.look[1]) * ease;
|
||
|
|
const moving =
|
||
|
|
Math.abs(goalX - state.look[0]) +
|
||
|
|
Math.abs(goalY - state.look[1]) >
|
||
|
|
0.0002;
|
||
|
|
|
||
|
|
const steerEase = 1 - Math.exp(-dt / 0.6);
|
||
|
|
const steerX = steering ? state.pointer[0] - 0.5 : 0;
|
||
|
|
const steerY = steering ? 0.5 - state.pointer[1] : 0;
|
||
|
|
state.steer[0] += (steerX - state.steer[0]) * steerEase;
|
||
|
|
state.steer[1] += (steerY - state.steer[1]) * steerEase;
|
||
|
|
const turning =
|
||
|
|
Math.abs(steerX - state.steer[0]) +
|
||
|
|
Math.abs(steerY - state.steer[1]) >
|
||
|
|
0.0005;
|
||
|
|
state.swells = state.swells.filter(
|
||
|
|
(swell) => state.clock - swell.at < SWELL_SECONDS,
|
||
|
|
);
|
||
|
|
|
||
|
|
const still = s.paused || reduced;
|
||
|
|
const transient =
|
||
|
|
moving ||
|
||
|
|
turning ||
|
||
|
|
state.swells.length > 0 ||
|
||
|
|
introProgress(s, reduced) < 1;
|
||
|
|
if (state.seen !== s || transient || !still) state.quiet = 0;
|
||
|
|
else state.quiet += 1;
|
||
|
|
state.seen = s;
|
||
|
|
if (state.quiet > 3) return;
|
||
|
|
|
||
|
|
state.raf = requestAnimationFrame(tick);
|
||
|
|
fit();
|
||
|
|
render(reduced);
|
||
|
|
};
|
||
|
|
|
||
|
|
const wake = () => {
|
||
|
|
if (state.raf || !state.visible || document.hidden) return;
|
||
|
|
state.last = 0;
|
||
|
|
state.raf = requestAnimationFrame(tick);
|
||
|
|
};
|
||
|
|
wakeRef.current = wake;
|
||
|
|
|
||
|
|
const local = (event: PointerEvent) => {
|
||
|
|
const rect = container.getBoundingClientRect();
|
||
|
|
return {
|
||
|
|
x: (event.clientX - rect.left) / Math.max(rect.width, 1),
|
||
|
|
y: (event.clientY - rect.top) / Math.max(rect.height, 1),
|
||
|
|
inside:
|
||
|
|
event.clientX >= rect.left &&
|
||
|
|
event.clientX <= rect.right &&
|
||
|
|
event.clientY >= rect.top &&
|
||
|
|
event.clientY <= rect.bottom,
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
const onMove = (event: PointerEvent) => {
|
||
|
|
const point = local(event);
|
||
|
|
const was = state.inside;
|
||
|
|
state.inside = point.inside;
|
||
|
|
if (point.inside) state.pointer = [point.x, point.y];
|
||
|
|
if ((point.inside || was) && settingsRef.current.mouseInteraction)
|
||
|
|
wake();
|
||
|
|
};
|
||
|
|
|
||
|
|
const onLeave = () => {
|
||
|
|
state.inside = false;
|
||
|
|
wake();
|
||
|
|
};
|
||
|
|
|
||
|
|
const onDown = (event: PointerEvent) => {
|
||
|
|
const s = settingsRef.current;
|
||
|
|
if (!s.swellOnClick || event.button !== 0 || prefersReduced())
|
||
|
|
return;
|
||
|
|
if (
|
||
|
|
event.target instanceof Element &&
|
||
|
|
event.target.closest(
|
||
|
|
'a, button, input, textarea, select, label, [role="button"]',
|
||
|
|
)
|
||
|
|
)
|
||
|
|
return;
|
||
|
|
const point = local(event);
|
||
|
|
if (!point.inside) return;
|
||
|
|
const ground = groundAt(
|
||
|
|
[point.x, point.y],
|
||
|
|
state.width / Math.max(state.height, 1),
|
||
|
|
s,
|
||
|
|
state.look,
|
||
|
|
);
|
||
|
|
if (!ground) return;
|
||
|
|
state.swells.push({ x: ground[0], y: ground[1], at: state.clock });
|
||
|
|
if (state.swells.length > MAX_SWELLS) state.swells.shift();
|
||
|
|
wake();
|
||
|
|
};
|
||
|
|
|
||
|
|
const visibility = new IntersectionObserver((entries) => {
|
||
|
|
state.visible = entries.some((entry) => entry.isIntersecting);
|
||
|
|
wake();
|
||
|
|
});
|
||
|
|
visibility.observe(container);
|
||
|
|
const sizes = new ResizeObserver(measure);
|
||
|
|
sizes.observe(container);
|
||
|
|
measure();
|
||
|
|
document.addEventListener('visibilitychange', wake);
|
||
|
|
window.addEventListener('pointermove', onMove, { passive: true });
|
||
|
|
window.addEventListener('pointerdown', onDown);
|
||
|
|
document.documentElement.addEventListener('pointerleave', onLeave);
|
||
|
|
state.raf = requestAnimationFrame(tick);
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
cancelAnimationFrame(state.raf);
|
||
|
|
wakeRef.current = null;
|
||
|
|
document.removeEventListener('visibilitychange', wake);
|
||
|
|
visibility.disconnect();
|
||
|
|
sizes.disconnect();
|
||
|
|
window.removeEventListener('pointermove', onMove);
|
||
|
|
window.removeEventListener('pointerdown', onDown);
|
||
|
|
document.documentElement.removeEventListener(
|
||
|
|
'pointerleave',
|
||
|
|
onLeave,
|
||
|
|
);
|
||
|
|
gl.deleteProgram(program);
|
||
|
|
gl.deleteBuffer(buffer);
|
||
|
|
gl.deleteVertexArray(vao);
|
||
|
|
gl.getExtension('WEBGL_lose_context')?.loseContext();
|
||
|
|
canvas.remove();
|
||
|
|
};
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
ref={containerRef}
|
||
|
|
className={[ROOT, className].filter(Boolean).join(' ')}
|
||
|
|
style={style}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|