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:T2fd7,import { useEffect, useRef, useState } from "react"; // Everything about the cloth. Colours are red, green, blue from 0 to 1. const silk = { speed: 1, // how fast the folds travel; 0 holds the cloth still folds: 2.5, // how many folds cross the view; higher gathers the cloth tighter depth: 0.42, // how deep the folds are; 0.2 is a pressed sheet, 0.6 a heavy drape gloss: 1, // strength of the satin highlight; 0 gives matt cotton lampHeight: 1.35, // how far the lamp hangs above the cloth; lower gives longer shadows quality: 0.85, // share of the device pixels that are drawn maxPixels: 1100000, // the canvas never draws more pixels than this deep: [0.085, 0.006, 0.022], // the cloth in the bottom of a fold body: [0.52, 0.035, 0.085], // the cloth facing the lamp sheen: [1.0, 0.5, 0.46], // the colour the weave turns where it catches the light }; 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 vec2 uLamp; uniform float uFolds; uniform float uDepth; uniform float uGloss; uniform float uLampHeight; uniform vec3 uDeep; uniform vec3 uBody; uniform vec3 uSheen; 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 * f * (f * (f * 6.0 - 15.0) + 10.0); 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); } // The height of the cloth. Long folds run up one diagonal; a slow warp makes them pinch, // fork and wander the way a length of satin does when it is dropped on a table. float cloth(vec2 p) { float t = uTime * 0.05; vec2 q = vec2(p.x * 0.82 + p.y * 0.57, -p.x * 0.57 + p.y * 0.82); vec2 w = vec2(noise(q * 0.42 + vec2(0.0, t)), noise(q * 0.42 + vec2(7.3, -t * 0.8))) - 0.5; q += w * 1.5; float a = q.x * uFolds + 1.25 * sin(q.y * 0.62 + t * 1.6); float h = 0.56 * sin(a); h += 0.25 * sin(a * 2.03 + 1.7 + 1.1 * sin(q.y * 1.15 - t * 2.3)); h += 0.11 * sin(a * 4.1 + q.y * 0.9 + 5.0 * w.x); h += 0.04 * sin(a * 8.3 + q.y * 2.3 + 9.0 * w.y); h += 0.32 * (noise(q * vec2(0.9, 0.5) + vec2(t, 3.0)) - 0.5); // Satin folds are round on top and pinched underneath. return h - 0.34 * h * h; } void main() { float unit = min(uRes.x, uRes.y); vec2 p = (gl_FragCoord.xy - 0.5 * uRes) / unit * 4.6; float e = 0.014; float h = cloth(p); vec2 slope = vec2(cloth(p + vec2(e, 0.0)) - h, cloth(p + vec2(0.0, e)) - h) / e; vec3 n = normalize(vec3(-slope * uDepth, 1.0)); vec3 here = vec3(p, h * uDepth); vec3 lamp = vec3(uLamp * 2.4, uLampHeight); vec3 toLamp = lamp - here; float reach = length(toLamp); vec3 L = toLamp / reach; vec3 H = normalize(L + vec3(0.0, 0.0, 1.0)); // Walk toward the lamp: any fold that rises above the ray puts this point in soft shadow. float shade = 1.0; float step = 0.07; float along = 0.0; for (int i = 0; i < 9; i++) { along += step; step *= 1.32; vec3 s = here + L * along; float gap = s.z - cloth(s.xy) * uDepth; shade = min(shade, 0.5 + 8.0 * gap / along); } shade = smoothstep(0.0, 1.0, clamp(shade, 0.0, 1.0)); float fall = 1.0 / (1.0 + 0.075 * reach * reach); float lit = max(dot(n, L), 0.0); float hollow = smoothstep(-0.95, 0.45, h); vec3 base = mix(uDeep, uBody, hollow); vec3 col = base * (0.13 + 1.55 * lit * shade * fall); col += uDeep * 0.5 * (1.0 - n.z); // Satin: the floats of the weave run one way, so the highlight smears across the folds // into long bands, with a tighter, whiter core where the cloth faces the lamp exactly. vec3 thread = normalize(vec3(-0.57, 0.82, 0.0)); vec3 T = normalize(thread - n * dot(n, thread)); float tdh = dot(T, H); float band = pow(max(1.0 - tdh * tdh, 0.0), 90.0); float nh = max(dot(n, H), 0.0); float wide = band * pow(nh, 5.0); float core = pow(nh, 150.0); float glint = (wide * 0.8 + core * 0.7) * shade * fall * uGloss * smoothstep(0.0, 0.25, lit); col += mix(uBody * 2.4, uSheen, 0.72) * glint * 1.5; // Shot silk: seen edge on, the cloth goes pale and pink. float edge = pow(1.0 - n.z, 2.0); col += uSheen * uBody * edge * 1.1 * (0.2 + 0.8 * shade) * fall; // The weave itself, a hair wide, and a little grain. float weft = sin((gl_FragCoord.x * 0.82 + gl_FragCoord.y * 0.57) * 2.1); col *= 1.0 + 0.035 * weft * (0.4 + glint * 2.0); col += (hash(gl_FragCoord.xy + fract(uTime) * 17.0) - 0.5) * 0.014; vec2 c = gl_FragCoord.xy / uRes - 0.5; col *= 1.0 - 0.55 * dot(c, c); col = mix(col, 1.0 - exp(-col * 1.5), 0.6); gl_FragColor = vec4(pow(max(col, 0.0), vec3(0.92)), 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 SilkCanvas({ 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 cloth 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"), lamp: at("uLamp") }; gl.uniform1f(at("uFolds"), silk.folds); gl.uniform1f(at("uDepth"), silk.depth); gl.uniform1f(at("uGloss"), silk.gloss); gl.uniform1f(at("uLampHeight"), silk.lampHeight); gl.uniform3fv(at("uDeep"), silk.deep); gl.uniform3fv(at("uBody"), silk.body); gl.uniform3fv(at("uSheen"), silk.sheen); const still = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const lamp = { x: -0.3, y: 0.25, tx: -0.3, ty: 0.25, touched: -1e9 }; let raf = 0; let visible = true; let time = 20; let before = 0; const draw = () => { gl.uniform1f(u.time, time); gl.uniform2f(u.lamp, lamp.x, lamp.y); gl.drawArrays(gl.TRIANGLES, 0, 3); }; const resize = () => { const w = canvas.clientWidth; const h = canvas.clientHeight || 1; const scale = Math.min(Math.min(Math.max(window.devicePixelRatio || 1, 1), 2) * silk.quality, Math.sqrt(silk.maxPixels / Math.max(1, 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); draw(); onLive(true); }; const loop = (now: number) => { raf = requestAnimationFrame(loop); const dt = Math.min((now - (before || now)) / 1000, 0.05); before = now; time += dt * silk.speed; // Left alone for a few seconds, the lamp goes back to a slow figure of eight. if (now - lamp.touched > 2600) { const a = now / 1000; lamp.tx = 0.62 * Math.sin(a * 0.42); lamp.ty = 0.3 * Math.sin(a * 0.84 + 0.6); } const k = 1 - Math.exp(-dt * 3.4); lamp.x = mix(lamp.x, lamp.tx, k); lamp.y = mix(lamp.y, lamp.ty, 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) * 2 - 1; const y = 1 - ((e.clientY - box.top) / box.height) * 2; if (Math.abs(x) > 1 || Math.abs(y) > 1) return; const wide = Math.max(1, box.width / box.height); const tall = Math.max(1, box.height / box.width); lamp.tx = x * wide; lamp.ty = y * tall; lamp.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