61: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 62:T3cef,import { useEffect, useRef, useState } from "react"; // Everything about the garden. Colours are red, green, blue from 0 to 1. const garden = { speed: 1, // how fast the sun and the branch move; 0 stops the afternoon grooves: 34, // rake lines across the short side of the block rings: 5, // rake lines circling each stone before the straight lines take over relief: 0.24, // how deep the rake cut; 0.15 is a light comb, 0.45 a heavy one canopy: 0.8, // darkness of the branch shadow in the corner; 0 clears the sky quality: 0.9, // share of the device pixels that are drawn maxPixels: 1000000, // the canvas never draws more pixels than this sand: [0.93, 0.85, 0.71], skylight: [0.64, 0.61, 0.66], // the colour of the shadows stone: [0.25, 0.25, 0.27], // x and y place a stone, from -0.5 to 0.5 across the block. size is in rake lines, stretch makes it long, // turn spins it (in radians) and height says how far it stands out of the sand. stones: [ { x: 0.2, y: 0.08, size: 3.3, stretch: 1.45, turn: 0.5, height: 3.4 }, { x: -0.27, y: -0.2, size: 2.1, stretch: 1.2, turn: -0.9, height: 2.0 }, { x: -0.14, y: 0.27, size: 1.25, stretch: 1.3, turn: 2.2, height: 1.1 }, ], }; const STONES = garden.stones.length; const VERTEX = ` attribute vec2 position; void main() { gl_Position = vec4(position, 0.0, 1.0); }`; const FRAGMENT = ` precision highp float; uniform vec2 uRes; uniform float uTime; uniform float uGrooves; uniform float uRings; uniform float uRelief; uniform float uCanopy; uniform vec2 uSun; uniform vec4 uStones[${STONES}]; uniform vec2 uShape[${STONES}]; uniform vec3 uSand; uniform vec3 uSky; uniform vec3 uStone; float hash(vec2 p) { p = fract(p * vec2(123.34, 456.21)); p += dot(p, p + 45.32); return fract(p.x * p.y); } float noise(vec2 p) { vec2 i = floor(p); vec2 f = fract(p); f = f * f * (3.0 - 2.0 * f); return mix(mix(hash(i), hash(i + vec2(1.0, 0.0)), f.x), mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), f.x), f.y); } // One stone. x is the distance from its edge in rake lines (negative inside); y runs from 0 at its // middle to 1 at its edge. The outline is an ellipse with a few lumps, so no two stones match. vec2 stoneEdge(vec2 p, vec4 s, vec2 shape) { vec2 d = p - s.xy + 0.001; float c = cos(shape.x); float si = sin(shape.x); d = vec2(d.x * c + d.y * si, -d.x * si + d.y * c); float a = atan(d.y, d.x * 0.8); float lumps = 1.0 + 0.05 * sin(3.0 * a + shape.x * 7.0) + 0.03 * sin(5.0 * a + 1.3 + shape.x * 3.0); vec2 r = s.z * lumps * vec2(s.w, 1.0); float k1 = length(d / r); float k2 = length(d / (r * r)); return vec2(k1 * (k1 - 1.0) / k2, k1); } // Height of the garden at a point: x is the height, y the distance to the nearest stone. vec2 ground(vec2 p) { float near = 1000.0; float rock = 0.0; for (int i = 0; i < ${STONES}; i++) { vec2 d = stoneEdge(p, uStones[i], uShape[i]); near = min(near, d.x); // A river stone: steep where it meets the sand, nearly flat on top. float t = min(d.y, 1.0); rock = max(rock, uShape[i].y * sqrt(1.0 - t * t * t * t)); } // Straight lines pulled by hand are never quite straight. float line = p.y * 0.9 + p.x * 0.44 + 0.3 * sin(p.x * 0.19 + 1.3) + 0.14 * sin(p.x * 0.47 + p.y * 0.13); float c = near < uRings ? near : line; float s = sin(3.14159265 * c); float furrow = 1.0 - sqrt(s * s + 0.035); // The comb lifts where the straight lines meet the outermost ring, which leaves a smooth seam. float sandH = uRelief * furrow * smoothstep(0.0, 0.5, near) * smoothstep(0.0, 0.3, abs(near - uRings)); sandH += 0.34 * exp(-max(near, 0.0) * 2.2); sandH += 0.12 * sin(p.x * 0.11 + 0.7) * sin(p.y * 0.14 + 2.1); return vec2(max(sandH, rock), near); } void main() { float unit = min(uRes.x, uRes.y); float pxSize = uGrooves / unit; vec2 p = (gl_FragCoord.xy - 0.5 * uRes) * pxSize; vec2 here = ground(p); float e = 0.05; vec2 slope = vec2(ground(p + vec2(e, 0.0)).x - here.x, ground(p + vec2(0.0, e)).x - here.x) / e; float isStone = smoothstep(pxSize, -pxSize, here.y); // Grains: every pixel of sand leans its own way a little, which is what makes it glitter in low sun. vec2 fc = floor(gl_FragCoord.xy); vec2 grit = vec2(hash(fc), hash(fc + 19.19)) - 0.5; vec2 lumps = vec2(noise(p * 5.0), noise(p * 5.0 + 31.0)) - 0.5; vec2 rough = mix(grit * 0.36 + lumps * 0.2, (vec2(noise(p * 1.5), noise(p * 1.5 + 9.0)) - 0.5) * 0.16 + grit * 0.07, isStone); vec3 n = normalize(vec3(-slope + rough, 1.0)); float ce = cos(uSun.y); vec3 L = vec3(cos(uSun.x) * ce, sin(uSun.x) * ce, sin(uSun.y)); // Walk toward the sun. Anything standing above the ray, a stone or the next ridge of sand, shades this point. vec3 at = vec3(p, here.x); float shade = 1.0; float stepLen = 0.07; float along = 0.0; for (int i = 0; i < 18; i++) { along += stepLen; stepLen *= 1.33; vec3 s = at + L * along; float gap = s.z - ground(s.xy).x; shade = min(shade, 0.55 + 5.0 * gap / along); } shade = smoothstep(0.0, 1.0, clamp(shade, 0.0, 1.0)); // A branch overhangs one corner. Its leaves throw soft, shifting patches. vec2 uv = gl_FragCoord.xy / uRes; vec2 lp = p * 0.085 - L.xy * 1.1 + vec2(sin(uTime * 0.31), cos(uTime * 0.23)) * 0.09; float leaves = 0.58 * noise(lp * 1.5 + 3.0) + 0.3 * noise(lp * 3.7 + vec2(uTime * 0.04, 0.0)) + 0.12 * noise(lp * 8.1); float corner = smoothstep(0.85, 1.5, uv.x * 0.85 + uv.y * 0.95 + 0.3 * noise(lp * 0.8)); float canopy = smoothstep(0.52, 0.4, leaves) * corner * uCanopy; float lit = max(dot(n, L), 0.0); float direct = lit * shade * (1.0 - canopy); vec3 sun = vec3(1.0, 0.93, 0.8); // Sand. float tone = 0.92 + 0.12 * noise(p * 1.7) + 0.05 * (hash(fc + 3.0) - 0.5); vec3 sand = uSand * tone; sand *= 1.0 - 0.3 * step(0.992, hash(fc + 71.3)); sand *= 1.0 - 0.3 * exp(-max(here.y, 0.0) * 1.6); vec3 col = sand * (uSky * 0.78 + sun * direct * 1.5); col += sun * pow(lit, 24.0) * shade * (1.0 - canopy) * step(0.93, hash(fc + 5.5)) * 0.35; // Stone: dark, a little speckled, with a dull shine where it faces the sun. float speck = noise(p * 6.0) * 0.5 + hash(fc) * 0.5; vec3 rock = uStone * (0.9 + 0.2 * noise(p * 0.9 + 4.0)) * (0.9 + 0.2 * speck); vec3 H = normalize(L + vec3(0.0, 0.0, 1.0)); vec3 rockCol = rock * (uSky * 0.85 + sun * direct * 2.6) + sun * pow(max(dot(n, H), 0.0), 26.0) * shade * (1.0 - canopy) * 0.22; col = mix(col, rockCol, isStone); vec2 c = uv - 0.5; col *= 1.0 - 0.3 * dot(c, c); col = mix(col, 1.0 - exp(-col * 1.4), 0.35); gl_FragColor = vec4(pow(max(col, 0.0), vec3(0.95)), 1.0); }`; const mix = (a: number, b: number, t: number) => a + (b - a) * t; /** One fragment shader fills the block. `onLive` reports when a frame has been painted. */ function SandCanvas({ onLive }: { onLive: (live: boolean) => void }) { const ref = useRef(null); useEffect(() => { const canvas = ref.current; const gl = canvas?.getContext("webgl", { antialias: false, alpha: false }); if (!canvas || !gl) return; // no WebGL: the CSS garden underneath stays const compile = (type: number, source: string) => { const s = gl.createShader(type)!; gl.shaderSource(s, source); gl.compileShader(s); return s; }; const program = gl.createProgram()!; gl.attachShader(program, compile(gl.VERTEX_SHADER, VERTEX)); gl.attachShader(program, compile(gl.FRAGMENT_SHADER, FRAGMENT)); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return; gl.useProgram(program); gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW); const position = gl.getAttribLocation(program, "position"); gl.enableVertexAttribArray(position); gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0); const at = (name: string) => gl.getUniformLocation(program, name); const u = { res: at("uRes"), time: at("uTime"), sun: at("uSun"), stones: at("uStones"), shape: at("uShape") }; gl.uniform1f(at("uGrooves"), garden.grooves); gl.uniform1f(at("uRings"), garden.rings); gl.uniform1f(at("uRelief"), garden.relief); gl.uniform1f(at("uCanopy"), garden.canopy); gl.uniform3fv(at("uSand"), garden.sand); gl.uniform3fv(at("uSky"), garden.skylight); gl.uniform3fv(at("uStone"), garden.stone); gl.uniform2fv(u.shape, garden.stones.flatMap((s) => [s.turn, s.height])); const still = window.matchMedia("(prefers-reduced-motion: reduce)").matches; // The sun: its compass direction and its height above the horizon, both in radians. const sun = { turn: 2.5, lift: 0.42, toTurn: 2.5, toLift: 0.42, touched: -1e9 }; let raf = 0; let visible = true; let time = 12; let before = 0; const draw = () => { gl.uniform1f(u.time, time); gl.uniform2f(u.sun, sun.turn, sun.lift); gl.drawArrays(gl.TRIANGLES, 0, 3); }; const resize = () => { const w = canvas.clientWidth || 1; const h = canvas.clientHeight || 1; const scale = Math.min(Math.min(Math.max(window.devicePixelRatio || 1, 1), 2) * garden.quality, Math.sqrt(garden.maxPixels / (w * h))); canvas.width = Math.max(1, Math.round(w * scale)); canvas.height = Math.max(1, Math.round(h * scale)); gl.viewport(0, 0, canvas.width, canvas.height); gl.uniform2f(u.res, canvas.width, canvas.height); // Stones are placed as a share of the block, so they stay in frame on a tall phone. const short = Math.min(w, h); gl.uniform4fv(u.stones, garden.stones.flatMap((s) => [(s.x * w * garden.grooves) / short, (s.y * h * garden.grooves) / short, s.size, s.stretch])); draw(); onLive(true); }; const loop = (now: number) => { raf = requestAnimationFrame(loop); const dt = Math.min((now - (before || now)) / 1000, 0.05); before = now; time += dt * garden.speed; // Left alone, the afternoon runs by itself: the sun swings round and sinks, then comes back. if (now - sun.touched > 2600) { sun.toTurn = 2.55 + 0.75 * Math.sin(time * 0.21); sun.toLift = 0.4 + 0.14 * Math.sin(time * 0.33 + 1.0); } const k = 1 - Math.exp(-dt * 2.6); sun.turn = mix(sun.turn, sun.toTurn, k); sun.lift = mix(sun.lift, sun.toLift, k); draw(); }; const start = () => { cancelAnimationFrame(raf); before = 0; if (still) draw(); else if (visible && !document.hidden) raf = requestAnimationFrame(loop); }; const onPointer = (e: PointerEvent) => { const box = canvas.getBoundingClientRect(); const x = (e.clientX - box.left) / box.width - 0.5; const y = 0.5 - (e.clientY - box.top) / box.height; if (Math.abs(x) > 0.5 || Math.abs(y) > 0.5) return; // The sun stands where the pointer is: its direction from the middle of the garden, and lower the further out it goes. sun.toTurn = Math.atan2(y * box.height, x * box.width); // Take the short way round when the pointer crosses behind the centre. while (sun.toTurn - sun.turn > Math.PI) sun.toTurn -= Math.PI * 2; while (sun.toTurn - sun.turn < -Math.PI) sun.toTurn += Math.PI * 2; sun.toLift = mix(0.85, 0.24, Math.min(1, Math.hypot(x, y) * 2)); sun.touched = performance.now(); }; const onLost = (e: Event) => { e.preventDefault(); cancelAnimationFrame(raf); onLive(false); }; const sizeWatcher = new ResizeObserver(resize); sizeWatcher.observe(canvas); const viewWatcher = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; start(); }); viewWatcher.observe(canvas); document.addEventListener("visibilitychange", start); if (!still) window.addEventListener("pointermove", onPointer, { passive: true }); canvas.addEventListener("webglcontextlost", onLost); resize(); start(); return () => { cancelAnimationFrame(raf); sizeWatcher.disconnect(); viewWatcher.disconnect(); document.removeEventListener("visibilitychange", start); window.removeEventListener("pointermove", onPointer); canvas.removeEventListener("webglcontextlost", onLost); gl.getExtension("WEBGL_lose_context")?.loseContext(); }; }, [onLive]); return