Cayden Website 2.0: Rewrite with t3code & hand
This commit is contained in:
Cayden Schwechten
parent
75a0e8f5fc
commit
243527af9f
34 changed files with 1652 additions and 1001 deletions
766
components/GradientWaves.tsx
Normal file
766
components/GradientWaves.tsx
Normal file
|
|
@ -0,0 +1,766 @@
|
|||
// 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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue