// Hero section — WebGL organic blob shader const VERT_SRC = ` attribute vec2 a_position; void main() { gl_Position = vec4(a_position, 0.0, 1.0); } `; const FRAG_SRC = ` precision highp float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; vec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); } float snoise(vec2 v) { const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439); vec2 i = floor(v + dot(v, C.yy)); vec2 x0 = v - i + dot(i, C.xx); vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0); vec4 x12 = x0.xyxy + C.xxzz; x12.xy -= i1; i = mod(i, 289.0); vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0)); vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.0); m = m * m * m * m; vec3 x2 = 2.0 * fract(p * C.www) - 1.0; vec3 h = abs(x2) - 0.5; vec3 ox = floor(x2 + 0.5); vec3 a0 = x2 - ox; m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h); vec3 g; g.x = a0.x * x0.x + h.x * x0.y; g.yz = a0.yz * x12.xz + h.yz * x12.yw; return 130.0 * dot(m, g); } float fbm(vec2 p, int octaves) { float value = 0.0; float amplitude = 0.5; float frequency = 1.0; for (int i = 0; i < 5; i++) { if (i >= octaves) break; value += amplitude * snoise(p * frequency); amplitude *= 0.5; frequency *= 2.0; } return value; } void main() { vec2 uv = (gl_FragCoord.xy - u_resolution * 0.5) / min(u_resolution.x, u_resolution.y); vec2 mouse = (u_mouse - u_resolution * 0.5) / min(u_resolution.x, u_resolution.y); float t = u_time * 0.18; float n1 = fbm(uv * 1.8 + vec2(t * 0.6, t * 0.4), 4); float n2 = fbm(uv * 3.5 - vec2(t * 0.3, t * 0.55), 3); float n3 = fbm(uv * 0.9 + vec2(-t * 0.2, t * 0.28), 3); vec2 toMouse = uv - mouse; float mouseDist = length(toMouse); float mouseRipple = exp(-mouseDist * 4.5) * sin(mouseDist * 12.0 - t * 3.0) * 0.06; float mousePull = exp(-mouseDist * 2.2) * 0.18; float noiseDisplace = n1 * 0.13 + n2 * 0.06 + n3 * 0.04 + mouseRipple; float blobRadius = 0.16 + mousePull; float blob = length(uv * vec2(1.0, 1.08)) - blobRadius - noiseDisplace; float outerGlow = exp(-max(blob, 0.0) * 7.0) * 0.25; float rimGlow = exp(-abs(blob) * 18.0) * 0.9; float innerFill = smoothstep(0.01, -0.05, blob) * 0.12; vec2 lightDir = normalize(vec2(0.6, 0.8)); vec2 blobGrad = normalize(uv + vec2(n1, n2) * 0.1); float spec = pow(max(dot(blobGrad, lightDir), 0.0), 6.0) * smoothstep(0.0, -0.1, blob) * 0.55; float blob2 = length((uv - vec2(0.22, -0.14)) * vec2(0.9, 1.1)) - 0.09 - n2 * 0.07; float glow2 = exp(-max(blob2, 0.0) * 12.0) * 0.12; float rim2 = exp(-abs(blob2) * 22.0) * 0.35; float brightness = outerGlow + rimGlow + innerFill + spec + glow2 + rim2; float grain = snoise(uv * 80.0 + t * 7.0) * 0.018; brightness = clamp(brightness + grain, 0.0, 1.0); float vignette = 1.0 - smoothstep(0.4, 1.1, length(uv)); brightness *= vignette; vec3 col = vec3(brightness); col += vec3(0.0, 0.0, 0.015) * rimGlow; col += vec3(0.01, 0.008, 0.0) * innerFill; gl_FragColor = vec4(col, 1.0); } `; function HeroCanvas() { const canvasRef = React.useRef(null); const glRef = React.useRef(null); const uniformsRef = React.useRef({}); const rafRef = React.useRef(null); const mouseRef = React.useRef({ x: 0, y: 0 }); const targetMouseRef = React.useRef({ x: 0, y: 0 }); React.useEffect(() => { const canvas = canvasRef.current; const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); if (!gl) return; glRef.current = gl; const compile = (type, src) => { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); return s; }; const vert = compile(gl.VERTEX_SHADER, VERT_SRC); const frag = compile(gl.FRAGMENT_SHADER, FRAG_SRC); const prog = gl.createProgram(); gl.attachShader(prog, vert); gl.attachShader(prog, frag); gl.linkProgram(prog); gl.useProgram(prog); const quad = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]); const buf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf); gl.bufferData(gl.ARRAY_BUFFER, quad, gl.STATIC_DRAW); const posLoc = gl.getAttribLocation(prog, "a_position"); gl.enableVertexAttribArray(posLoc); gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0); uniformsRef.current = { time: gl.getUniformLocation(prog, "u_time"), mouse: gl.getUniformLocation(prog, "u_mouse"), res: gl.getUniformLocation(prog, "u_resolution"), }; const resize = () => { canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; gl.viewport(0, 0, canvas.width, canvas.height); }; resize(); window.addEventListener("resize", resize); const onMouseMove = (e) => { targetMouseRef.current = { x: e.clientX, y: canvas.height - e.clientY }; }; window.addEventListener("mousemove", onMouseMove); const start = performance.now(); const render = () => { const u = uniformsRef.current; const t = (performance.now() - start) / 1000; mouseRef.current.x += (targetMouseRef.current.x - mouseRef.current.x) * 0.05; mouseRef.current.y += (targetMouseRef.current.y - mouseRef.current.y) * 0.05; gl.uniform1f(u.time, t); gl.uniform2f(u.mouse, mouseRef.current.x, mouseRef.current.y); gl.uniform2f(u.res, canvas.width, canvas.height); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); rafRef.current = requestAnimationFrame(render); }; rafRef.current = requestAnimationFrame(render); return () => { cancelAnimationFrame(rafRef.current); window.removeEventListener("resize", resize); window.removeEventListener("mousemove", onMouseMove); }; }, []); return ( ); } function HeroSection() { const { t } = useI18n(); const [scrolled, setScrolled] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 20); window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); return (

{t.hero.role} · {t.hero.location}

muuqi

{t.hero.role}
{t.hero.scroll}
); } Object.assign(window, { HeroSection });