60: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"] 61:T5585,import { useEffect, useRef, useState } from "react"; // The hero copy that sits on the wall. Everything behind it is one traced shader. const hero = { eyebrow: "Halden Row Studio", title: "Rooms that keep the afternoon", line: "Lime plaster, unbleached linen and furniture made to be lived with. Visits by appointment, Tuesday to Saturday.", cta: "Book a visit", }; const SPEED = 1; // 0.5 is a stiller day, 2 a breezier one const FONT = '"Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif'; const SERIF = '"Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif'; const VERT = `ATTR vec2 aPos; void main(){ gl_Position = vec4(aPos, 0.0, 1.0); }`; // A plaster wall (z = 0) meeting an oak floor (y = 0). The sun sits behind the camera on the right. // Every lit point traces one ray back toward the sun through three layers: the window frame, // the sheer curtain hanging in it and a tree outside. Each layer is softened by its own distance, // the way a real sun disc softens a shadow, so near folds stay crisp and far leaves bloom into dapples. const SCENE = ` precision highp float; uniform vec2 uRes; uniform float uT; uniform float uGust; uniform vec2 uLean; uniform float uGrain; const vec3 SUN = vec3(0.70, 0.46, 0.55); // direction toward the sun (normalised in main) const vec3 SUNCOL = vec3(1.0, 0.80, 0.58) * 3.3; const vec3 SKY = vec3(0.50, 0.60, 0.78) * 0.16; const vec3 PLASTER = vec3(0.84, 0.78, 0.70); const float DISC = 0.0085; // apparent sun radius, a little generous for a soft photograph const float D_FRAME = 1.6, D_CURTAIN = 1.25, D_TREE = 4.0; float h21(vec2 p){ p = fract(p * vec2(123.34, 456.21)); p += dot(p, p + 45.32); return fract(p.x * p.y); } float vn(vec2 p){ vec2 i = floor(p), f = fract(p); vec2 u = f * f * (3.0 - 2.0 * f); return mix(mix(h21(i), h21(i + vec2(1, 0)), u.x), mix(h21(i + vec2(0, 1)), h21(i + vec2(1, 1)), u.x), u.y); } float fbm(vec2 p){ float a = 0.5, s = 0.0; for (int i = 0; i < 4; i++){ s += a * vn(p); p = p * 2.03 + 17.1; a *= 0.5; } return s; } float box1(float x, float a, float b, float w){ return smoothstep(a - w, a + w, x) - smoothstep(b - w, b + w, x); } // one layer of leaves: a jittered ellipse per cell, turned to its own angle, fluttering on its stem // how thick the canopy is in front of wall point s: heavier toward the upper right float canopy(vec2 s){ return smoothstep(-0.4, 1.1, s.x * 0.45 + s.y * 0.75 - 1.05 + uLean.y * 0.1 + 0.35 * (fbm(s * 1.3) - 0.5)); } float leafLayer(vec2 p, float w, float sc, vec2 off, float gain, float t, float seed){ vec2 i0 = floor(p); float c = 0.0; for (int j = -1; j <= 1; j++) for (int k = -1; k <= 1; k++){ vec2 id = i0 + vec2(float(j), float(k)) + seed; float h = h21(id), h2 = h21(id + 31.7), h3 = h21(id + 57.3); vec2 ctr = id - seed + 0.25 + 0.5 * vec2(h, h2); float dens = canopy((ctr - off) / sc) * gain - (gain > 1.28 ? 0.1 : 0.0); // decided per leaf, never per pixel if (h3 > dens) continue; ctr += 0.05 * vec2(sin(t * (1.3 + h) + h2 * 6.0), cos(t * (1.1 + h2) + h * 6.0)) * (1.0 + 2.0 * uGust); float a = h * 6.283 + 0.25 * sin(t * (0.9 + h3) + h * 9.0) * (0.6 + uGust); vec2 d = p - ctr; d = mat2(cos(a), -sin(a), sin(a), cos(a)) * d; vec2 rad = vec2(0.46, 0.21) * (0.8 + 0.3 * h2); d.x += 0.12 * d.y * d.y / rad.y; // a little curve, like a real leaf float e = (length(d / rad) - 1.0) * rad.y; c = max(c, 1.0 - smoothstep(-w, w, e)); } return c; } // the curtain's folds: depth toward the window, which grows with the drop from the rod and with the breeze float folds(float x, float y, float t){ float drop = clamp((2.75 - y) / 2.4, 0.0, 1.0); float sway = (0.35 + 0.65 * drop) * (0.6 + uGust); float ph = t * 0.55 + sin(t * 0.23) * 1.3; return 0.050 * sin(x * 9.0 + 0.8 * sin(y * 1.3 + t * 0.4)) + 0.024 * sin(x * 21.0 - y * 0.7 + 1.7) + sway * 0.06 * sin(x * 3.1 - ph + y * 0.9) + sway * 0.025 * sin(x * 6.3 + ph * 1.6); } // how much sun passes the window, curtain and tree at wall-aligned point s, from a surface 'dz' off the wall vec3 sunThrough(vec2 s, float pz, float t, vec3 L){ float k = 1.0 / L.z; // window: a tall two-light garden door, sheared because its wall sits at an angle to ours float bFrame = DISC * (D_FRAME - pz) * k; vec2 w = vec2(s.x - 0.26 * (s.y - 1.4), s.y); float win = box1(w.x, -0.55, 1.75, bFrame) * box1(w.y, -1.1, 2.5, bFrame); win *= 1.0 - box1(w.x, 0.56, 0.64, bFrame) ; // the upright between the lights win *= 1.0 - box1(w.y, 1.70, 1.77, bFrame) * 0.97; // the transom if (win < 0.002) return vec3(0.0); // curtain: drawn across the left light, its leading edge billows; folds shift the projection float bC = DISC * (D_CURTAIN - pz) * k; float f = folds(s.x, s.y, t); vec2 sc = s - L.xy * k * f; float slope = (folds(s.x + 0.004, s.y, t) - f) / 0.004; float edge = 0.72 + 0.10 * sin(t * 0.5 + s.y * 1.6) * (0.5 + uGust) + 0.05 * (2.6 - s.y) + uLean.x * 0.08; float cover = 1.0 - smoothstep(edge - bC - 0.006, edge + bC + 0.006, sc.x); float hem = smoothstep(-0.75 - bC, -0.75 + bC, s.y - L.y / L.z * f * 0.3); // the hem stops just above the sill cover *= hem; float path = 1.0 + slope * slope * 2.2; float slub = 0.88 + 0.12 * vn(vec2(sc.x * 260.0, sc.y * 4.0)) + 0.05 * vn(vec2(sc.x * 70.0, sc.y * 1.2)); vec3 linen = exp(-vec3(0.82, 0.90, 1.02) * 0.95 * path * slub); // unbleached: warms the light it lets through float doubled = box1(sc.x, edge - 0.05, edge, bC + 0.004) * cover; // the turned-back edge is two layers thick vec3 T = mix(vec3(1.0), linen * (1.0 - 0.35 * doubled), cover); // tree: two layers of foliage in the breeze, softened by distance into round dapples float bT = DISC * (D_TREE - pz) * k; vec2 g = vec2(sin(t * 0.37) + 0.5 * sin(t * 0.91 + 1.0), cos(t * 0.29) * 0.6) * (0.035 + 0.05 * uGust); vec2 q = s + g; float leaf = leafLayer(q * 6.0, bT * 3.0 + 0.01, 6.0, vec2(0.0), 1.25, t, 0.0); leaf = max(leaf, leafLayer(q * 9.5 + 4.0, bT * 4.5 + 0.01, 9.5, vec2(4.0), 1.3, t * 1.2, 11.0) * 0.9); // a branch crossing the upper light float br = abs(s.y - 2.05 - 0.38 * (s.x - 0.2) - 0.06 * sin(s.x * 3.0 + g.x * 4.0)); leaf = max(leaf, (1.0 - smoothstep(0.012, 0.012 + bT * 2.2, br)) * smoothstep(-0.6, 0.3, s.x)); // the far canopy, too distant to show single leaves, only dims the light in broad soft patches float far = smoothstep(0.35, 0.75, fbm(s * 0.9 + g * 0.6 + vec2(1.7, 0.0)) + canopy(s) * 0.25); return T * win * (1.0 - leaf * 0.93) * (1.0 - 0.42 * far); } vec3 tone(vec3 x){ x = (x * (2.51 * x + 0.03)) / (x * (2.43 * x + 0.59) + 0.14); return pow(clamp(x, 0.0, 1.0), vec3(1.0 / 2.2)); } void main(){ vec2 uv = (gl_FragCoord.xy - 0.5 * uRes) / uRes.y; float t = uT; vec3 L = normalize(SUN); // a camera standing back from the wall, turned a few degrees so the wall recedes to the left vec3 ro = vec3(0.55 + uLean.x * 0.04, 1.30 + uLean.y * 0.02, 3.7); vec3 ta = vec3(0.05, 1.12, 0.0); vec3 fw = normalize(ta - ro), rt = normalize(cross(fw, vec3(0, 1, 0))), up = cross(rt, fw); float aspect = uRes.x / uRes.y; float lensF = 1.55 * clamp(aspect / 1.6, 0.62, 1.0); vec3 rd = normalize(fw * lensF + rt * uv.x + up * uv.y); float tw = -ro.z / rd.z; float tf = rd.y < 0.0 ? -ro.y / rd.y : 1e9; bool floorHit = tf < tw; vec3 P = ro + rd * min(tw, tf); vec3 N = floorHit ? vec3(0, 1, 0) : vec3(0, 0, 1); vec3 alb; if (floorHit) { // pale limed oak in long boards float board = floor(P.x * 5.2); float gr = fbm(vec2(P.x * 5.2 * 3.0, P.z * 1.4 + board * 7.0)) ; alb = vec3(0.74, 0.62, 0.49) * (0.86 + 0.18 * gr + 0.06 * h21(vec2(board, 3.0))); alb *= 1.0 - 0.45 * smoothstep(0.47, 0.5, abs(fract(P.x * 5.2) - 0.5)); } else { // lime plaster: trowel clouds in the colour, and a fine relief the low sun rakes across vec2 p = P.xy; float c = fbm(p * 1.6), c2 = fbm(p * 7.0 + 3.0); alb = PLASTER * (0.93 + 0.07 * c + 0.03 * c2) * mix(vec3(1.0), vec3(1.02, 0.99, 0.95), c); float e = 0.004, s0 = fbm(p * 26.0) * 0.45 + fbm(p * 5.0) * 0.55; float sx = fbm((p + vec2(e, 0)) * 26.0) * 0.45 + fbm((p + vec2(e, 0)) * 5.0) * 0.55; float sy = fbm((p + vec2(0, e)) * 26.0) * 0.45 + fbm((p + vec2(0, e)) * 5.0) * 0.55; N = normalize(vec3(-(sx - s0) / e * 0.0055, -(sy - s0) / e * 0.0055, 1.0)); // a skirting board at the foot of the wall float sk = 1.0 - smoothstep(0.115, 0.12, P.y); alb = mix(alb, vec3(0.80, 0.76, 0.70), sk); if (P.y < 0.12) N = normalize(vec3(0, smoothstep(0.10, 0.12, P.y) * 0.8, 1.0)); } vec2 s = P.xy - L.xy / L.z * P.z; // where this point's sun ray crosses the wall plane vec3 sun = sunThrough(s, P.z, t, L); float ndl = max(dot(N, L), 0.0); // the corner where wall meets floor gathers shade float corner = floorHit ? P.z : P.y; float ao = 1.0 - 0.55 * exp(-corner / 0.10) - 0.2 * exp(-corner / 0.5); // light bounced off the lit patch and the floor: a broad, warm glow around the sun vec2 sb = s + vec2(0.0, 0.0); float lit = box1(sb.x - 0.26 * (sb.y - 1.4), -0.45, 1.65, 0.7) * box1(sb.y, -0.9, 2.4, 0.6); vec3 bounce = vec3(1.0, 0.78, 0.55) * (0.15 * lit + 0.04); vec3 amb = (SKY * (0.75 + 0.25 * N.y) + vec3(0.33, 0.27, 0.21) * 0.30 + bounce) * ao; vec3 col = alb * (SUNCOL * sun * ndl + amb); // the faint haze of light that plaster scatters just under its surface col += alb * vec3(1.0, 0.7, 0.45) * 0.035 * length(sun); // lens: soft fall-off to the corners, filmic curve, fine grain vec2 q = gl_FragCoord.xy / uRes; col *= 0.80 + 0.20 * pow(16.0 * q.x * q.y * (1.0 - q.x) * (1.0 - q.y), 0.25); vec3 o = tone(col * 0.9); o += (h21(gl_FragCoord.xy + uGrain * 13.7) - 0.5) * 0.022; outC = vec4(o, 1.0); } `; // What browsers without WebGL see: the same wall, set with CSS gradients. Reduced motion gets one still frame of the shader. function Still() { const spot = (x: number, y: number, w: number, h: number, a: number) => `radial-gradient(${w}px ${h}px at ${x}% ${y}%, rgba(120,98,74,${a}) 55%, transparent 72%)`; const leaves = [[62, 12, 60, 20, 0.5], [70, 24, 72, 24, 0.45], [79, 8, 56, 20, 0.5], [85, 31, 70, 22, 0.42], [74, 42, 52, 18, 0.4], [91, 17, 64, 20, 0.5], [66, 34, 48, 16, 0.35], [88, 46, 58, 18, 0.4], [80, 56, 44, 16, 0.35], [72, 4, 50, 18, 0.45], [83, 19, 40, 14, 0.4]] as const; return (

spot(...l)).join(", ") }} />

); } export default function SheerLinenCurtainBackground() { const stage = useRef(null); const canvas = useRef(null); const [shown, setShown] = useState<"wait" | "gl" | "still">("wait"); const [paused, setPaused] = useState(false); const [live, setLive] = useState(true); const api = useRef<{ gust: () => void; pause: (p: boolean) => void } | null>(null); useEffect(() => { const box = stage.current, cv = canvas.current; if (!box || !cv) return; const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const opts = { antialias: false, alpha: false, powerPreference: "high-performance" as const }; const gl2 = cv.getContext("webgl2", opts) as WebGL2RenderingContext | null; const gl = (gl2 ?? cv.getContext("webgl", opts)) as WebGLRenderingContext | null; if (!gl) { setShown("still"); setLive(false); return; } if (reduce) setLive(false); // one exposure of the shader, then no loop at all const head = gl2 ? "#version 300 es\n#define ATTR in\n" : "#define ATTR attribute\n"; const fhead = gl2 ? "#version 300 es\nprecision highp float;\nout vec4 outC;\n" : "#define outC gl_FragColor\n"; const compile = (type: number, src: string) => { const sh = gl.createShader(type); if (!sh) return null; gl.shaderSource(sh, src); gl.compileShader(sh); return gl.getShaderParameter(sh, gl.COMPILE_STATUS) ? sh : null; }; const v = compile(gl.VERTEX_SHADER, head + VERT), f = compile(gl.FRAGMENT_SHADER, fhead + SCENE); const prog = gl.createProgram(); if (!v || !f || !prog) { setShown("still"); setLive(false); return; } gl.attachShader(prog, v); gl.attachShader(prog, f); gl.bindAttribLocation(prog, 0, "aPos"); gl.linkProgram(prog); if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) { setShown("still"); setLive(false); return; } const u = Object.fromEntries(["uRes", "uT", "uGust", "uLean", "uGrain"].map((n) => [n, gl.getUniformLocation(prog, n)])); const quad = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, quad); 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(prog); let W = 0, H = 0, scale = 1; const s = { t: 12, paused: false, visible: true, raf: 0, last: 0, frame: 0, slow: 0, sum: 0, first: true, gust: 0, gv: 0, kick: 0, tx: 0, ty: 0, lx: 0, ly: 0, fps: 0 }; const size = () => { const r = box.getBoundingClientRect(); const dpr = Math.min(1.5, window.devicePixelRatio || 1) * scale; const k = Math.min(1, Math.sqrt(9e5 / (r.width * r.height * dpr * dpr))); // never more than ~0.9 million pixels const w = Math.max(2, Math.round(r.width * dpr * k)), h = Math.max(2, Math.round(r.height * dpr * k)); if (w === W && h === H) return; W = w; H = h; cv.width = W; cv.height = H; }; const draw = () => { gl.viewport(0, 0, W, H); gl.uniform2f(u.uRes, W, H); gl.uniform1f(u.uT, s.t); gl.uniform1f(u.uGust, s.gust); gl.uniform2f(u.uLean, s.lx, s.ly); gl.uniform1f(u.uGrain, s.frame % 61); gl.drawArrays(gl.TRIANGLES, 0, 3); }; const frame = (now: number) => { s.raf = 0; if (!s.visible) return; const raw = s.last ? (now - s.last) / 1000 : 0.016; const dt = Math.min(0.05, raw); s.last = now; s.frame++; if (!s.paused && !reduce) { // the breeze is a damped spring: a gust swells over a second, overshoots a little and dies away s.t += dt * SPEED * (1 + s.gust * 1.4); const target = 0.22 + 0.18 * Math.sin(s.t * 0.11) * Math.sin(s.t * 0.07 + 1) + s.kick; s.gv += ((target - s.gust) * 3.2 - s.gv * 2.2) * dt; s.gust += s.gv * dt; s.kick *= Math.exp(-dt * 0.9); s.lx += (s.tx - s.lx) * (1 - Math.exp(-dt * 1.5)); s.ly += (s.ty - s.ly) * (1 - Math.exp(-dt * 1.5)); } draw(); if (s.first) { s.first = false; setShown("gl"); } if (!s.paused && !reduce) { if (s.frame > 10 && s.frame <= 40) s.sum += raw; if (s.frame === 40) { s.fps = 30 / s.sum; (box as HTMLElement).dataset.fps = s.fps.toFixed(1); if (s.sum / 30 > 0.02) { scale = Math.max(0.4, scale * Math.sqrt(0.0167 / (s.sum / 30))); size(); } } if (raw > 0.024) s.slow++; else s.slow = Math.max(0, s.slow - 2); if (s.slow > 30 && scale > 0.4) { scale *= 0.85; s.slow = 0; size(); } s.raf = requestAnimationFrame(frame); } }; const wake = () => { if (!s.raf && s.visible) { s.last = 0; s.raf = requestAnimationFrame(frame); } }; api.current = { gust: () => { s.kick = 0.9; wake(); }, pause: (p) => { s.paused = p; wake(); }, }; size(); const ro = new ResizeObserver(() => { size(); if (s.paused) { draw(); } wake(); }); ro.observe(box); const io = new IntersectionObserver(([e]) => { s.visible = e.isIntersecting && !document.hidden; if (s.visible) wake(); }, { threshold: 0.02 }); io.observe(box); const vis = () => { s.visible = !document.hidden; if (s.visible) wake(); }; document.addEventListener("visibilitychange", vis); const move = (e: PointerEvent) => { const r = box.getBoundingClientRect(); s.tx = ((e.clientX - r.left) / r.width) * 2 - 1; s.ty = 1 - ((e.clientY - r.top) / r.height) * 2; }; const leave = () => { s.tx = 0; s.ty = 0; }; const down = (e: PointerEvent) => { if ((e.target as HTMLElement).closest("a,button")) return; s.kick = 0.7; }; box.addEventListener("pointermove", move); box.addEventListener("pointerleave", leave); box.addEventListener("pointerdown", down); const lost = (e: Event) => { e.preventDefault(); setShown("still"); setLive(false); }; cv.addEventListener("webglcontextlost", lost); wake(); return () => { cancelAnimationFrame(s.raf); ro.disconnect(); io.disconnect(); document.removeEventListener("visibilitychange", vis); box.removeEventListener("pointermove", move); box.removeEventListener("pointerleave", leave); box.removeEventListener("pointerdown", down); cv.removeEventListener("webglcontextlost", lost); api.current = null; }; }, []); const togglePause = () => { const p = !paused; setPaused(p); api.current?.pause(p); }; const pill = "inline-flex h-10 min-w-[40px] items-center justify-center gap-2 rounded-full border border-stone-900/15 bg-[#efe6da]/70 px-3 text-[10.5px] font-semibold uppercase tracking-[0.2em] text-stone-900 backdrop-blur-sm transition-colors duration-200 hover:bg-[#f6efe5] outline-none focus-visible:ring-2 focus-visible:ring-stone-900 focus-visible:ring-offset-2 focus-visible:ring-offset-[#c9bcab] disabled:opacity-40 sm:px-4"; return (

); } 5f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L60",null,{"files":[{"path":"components/we-inc/sheer-linen-curtain-webgl-background-where-afternoon-sun-and-leaf-shadows-sway-across-a-plaster-wall.tsx","content":"$61","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]