60:I[707087,["/_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"],"RegistryDependencies"] 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:T999b,import { useEffect, useRef, useState } from "react"; import { motion, useReducedMotion } from "framer-motion"; /** The product and its three plans. These are example prices: change them to your own. */ const product = { name: "Brasswick", line: "Reservations and floor plans for restaurants" }; const plans = [ { name: "Bistro", price: 19, pitch: "One room, every table accounted for.", features: ["1 dining room, 40 covers", "Online bookings and walk-ins", "Reminder texts to guests"], dome: 0.44, // cloche radius in metres; the plate is sized from it }, { name: "Brasserie", price: 49, pitch: "Two sittings a night without a clash.", features: ["Up to 3 rooms, 160 covers", "Drag-and-drop floor plan", "Deposits for large parties", "Waitlist on a tablet"], dome: 0.5, }, { name: "Grand Salon", price: 119, pitch: "Private dining, terraces and events.", features: ["Unlimited rooms and covers", "Event menus and run sheets", "Group booking pages", "A named setup host"], dome: 0.56, }, ]; const GAP = 0.3; // tablecloth between neighbouring plates const LIFT = 0.5; // how high the chosen cloche is raised, in metres const TILT = 1.12; // how far its front edge tips up, in radians const DEMO = true; // lifts the cloches in turn until somebody touches it const SERIF = '"Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif'; const GROTESK = '"Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif'; const INK = "#1f1b17"; const CLOTH = "#ebe8e2"; const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); const PLATE = (a: number) => a * 1.24; const XS = (() => { const total = plans.reduce((s, p) => s + PLATE(p.dome) * 2, 0) + GAP * (plans.length - 1); let x = -total / 2; return plans.map((p) => { const c = x + PLATE(p.dome); x += PLATE(p.dome) * 2 + GAP; return c; }); })(); const domeH = (a: number) => a * 0.86 + 0.03; const SEAT = 0.038; // where the cloche rim rests on the plate const SUN_DIR = (() => { const v = [-0.66, 0.56, -0.3]; const l = Math.hypot(v[0], v[1], v[2]); return v.map((x) => x / l); })(); const GLSL = `#version 300 es precision highp float; const vec3 L = vec3(${SUN_DIR.map((v) => v.toFixed(4)).join(", ")}); const vec3 SUN = vec3(1.0, 0.93, 0.82) * 3.2; const vec3 SKY = vec3(0.82, 0.85, 0.9) * 0.7; const float WZ = -3.6; uniform vec4 uC[3]; // x, z, dome radius, dome height uniform vec3 uO[3]; // where the cloche rim centre is now uniform vec2 uCS[3]; // cos and sin of its tilt uniform float uR[3]; // plate radius uniform sampler2D uTex; uniform vec3 uCam, uRt, uUp, uFw; uniform float uTan, uAspect, uFocus, uAperture, uTime; uniform vec2 uShift; in vec2 vUv; out vec4 o; float ign(vec2 p) { return fract(52.9829189 * fract(dot(p, vec2(0.06711056, 0.00583715)))); } 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 vnoise(vec2 p) { vec2 i = floor(p), f = fract(p); f = f * f * (3.0 - 2.0 * f); return mix(mix(hash(i), hash(i + vec2(1, 0)), f.x), mix(hash(i + vec2(0, 1)), hash(i + vec2(1, 1)), f.x), f.y); } float fbm(vec2 p) { return 0.5 * vnoise(p) + 0.25 * vnoise(p * 2.1 + 7.3) + 0.125 * vnoise(p * 4.3 + 1.7) + 0.0625 * vnoise(p * 8.9); } float smin(float a, float b, float k) { float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0); return mix(b, a, h) - k * h * (1.0 - h); } vec3 toL(vec3 d, int i) { vec2 r = uCS[i]; return vec3(d.x, d.y * r.x - d.z * r.y, d.y * r.y + d.z * r.x); } float ell(vec3 q, vec3 r) { float k0 = length(q / r), k1 = length(q / (r * r)); return k0 * (k0 - 1.0) / max(k1, 1e-4); } // the cloche in its own frame: a thin spun dome, a rolled bead at the rim and a turned knob float cloche(vec3 q, float a, float b) { float rho = length(q.xz); float shell = abs(ell(q, vec3(a, b, a))) - 0.009; shell = max(shell, -q.y); float bead = length(vec2(rho - a, q.y - 0.016)) - 0.017; float band = length(vec2(rho - a * 0.985, q.y - 0.075)) - 0.006; float d = min(min(shell, bead), band); float stem = max(rho - 0.02 - 0.012 * smoothstep(b + 0.035, b, q.y), abs(q.y - b - 0.02) - 0.03); float knob = ell(q - vec3(0.0, b + 0.072, 0.0), vec3(0.052, 0.036, 0.052)); return min(d, smin(stem, knob, 0.02)); } float plateTop(float rho, float R) { return 0.02 + 0.026 * smoothstep(0.62 * R, 0.86 * R, rho) - 0.02 * smoothstep(0.93 * R, R, rho); } float plate(vec3 p, int i) { float R = uR[i]; float rho = length(p.xz - uC[i].xy); return max(rho - R, max(p.y - plateTop(rho, R), 0.004 - p.y)) * 0.8; } // id: 0..2 cloches, 3..5 plates vec2 map(vec3 p) { vec2 res = vec2(1e9, -1.0); for (int i = 0; i < 3; i++) { vec4 C = uC[i]; float pb = length(vec2(max(length(p.xz - C.xy) - uR[i], 0.0), max(p.y - 0.05, 0.0))); float dp = pb > 0.1 ? pb : plate(p, i); if (dp < res.x) res = vec2(dp, float(3 + i)); vec3 q = toL(p - uO[i], i); float bound = length(q - vec3(0.0, C.w * 0.5, 0.0)) - max(C.z, C.w) - 0.12; float dc = bound > 0.1 ? bound : cloche(q, C.z, C.w); if (dc < res.x) res = vec2(dc, float(i)); } return res; } vec3 nrm(vec3 p) { vec2 e = vec2(0.0006, -0.0006); return normalize(e.xyy * map(p + e.xyy).x + e.yyx * map(p + e.yyx).x + e.yxy * map(p + e.yxy).x + e.xxx * map(p + e.xxx).x); } float shadow(vec3 p) { float s = 1.0, t = 0.015; for (int k = 0; k < 32; k++) { float h = map(p + L * t).x; s = min(s, 7.0 * h / t); t += clamp(h, 0.012, 0.2); if (s < 0.01 || t > 3.0) break; } return clamp(s, 0.0, 1.0); } float ao(vec3 p, vec3 n) { float a = 0.0, w = 1.0; for (int k = 1; k <= 5; k++) { float h = 0.014 * float(k * k); a += w * (h - map(p + n * h).x); w *= 0.6; } return clamp(1.0 - 2.4 * a, 0.0, 1.0); } // sun through a tall sash window on the left: glazing bars and a curtain edge break it up float sash(vec3 p) { vec3 a = normalize(cross(L, vec3(0.0, 1.0, 0.0))), b = cross(a, L); vec2 w = vec2(dot(p, a), dot(p, b)) - vec2(0.3, -0.4); float pen = 0.045 + 0.06 * clamp(dot(p, -L) + 2.0, 0.0, 4.0); vec2 e = vec2(2.6, 2.2) - abs(w); float m = smoothstep(-pen, pen, e.x) * smoothstep(-pen, pen, e.y); vec2 g = abs(fract(w / vec2(2.6, 1.5) + 0.5) - 0.5) * vec2(2.6, 1.5); m *= smoothstep(0.03, 0.03 + pen, g.x) * smoothstep(0.02, 0.02 + pen, g.y); float curtain = smoothstep(0.0, 0.35, w.x + 2.4 + 0.12 * sin(w.y * 3.0 + uTime * 0.4)); return m * (0.25 + 0.75 * curtain); } // the dining room the silver sees: dark panelling, a cream ceiling, the sash window and the bright cloth vec3 env(vec3 r) { float up = r.y; vec3 c = mix(vec3(0.1, 0.08, 0.065), vec3(0.62, 0.6, 0.56), smoothstep(0.08, 0.5, up)); // a dresser and pictures along the wall behind the camera float az = atan(r.x, r.z); c *= 0.8 + 0.3 * smoothstep(0.42, 0.5, abs(fract(az * 4.0) - 0.5)) * step(up, 0.18); vec2 fr = abs(vec2(fract(az * 0.7 + 0.3) - 0.5, up - 0.4)); c = mix(c, vec3(0.03, 0.025, 0.02), step(fr.x, 0.16) * step(fr.y, 0.13) * (1.0 - step(fr.x, 0.13) * step(fr.y, 0.1))); c += vec3(1.0, 0.72, 0.42) * 2.2 * smoothstep(0.985, 0.998, dot(r, normalize(vec3(0.6, 0.28, 0.75)))); // the tablecloth below the horizon c = mix(c, vec3(0.86, 0.84, 0.8) * 1.15, smoothstep(0.03, -0.14, up)); // the window: two tall sashes with bars, behind and to the left vec3 wd = normalize(vec3(-0.85, 0.3, -0.42)); float d = dot(r, wd); if (d > 0.0) { vec3 a = normalize(cross(wd, vec3(0.0, 1.0, 0.0))), b = cross(a, wd); vec2 q = vec2(dot(r, a), dot(r, b)) / d; float pane = smoothstep(0.03, 0.0, max(abs(q.x) - 0.5, abs(q.y - 0.1) - 0.75)); vec2 g = abs(fract(q / vec2(0.5, 0.5) + 0.5) - 0.5) * 0.5; pane *= smoothstep(0.008, 0.02, g.x) * smoothstep(0.008, 0.02, g.y); c = mix(c, vec3(1.0, 0.98, 0.94) * 10.0, pane); } // a softer window behind the camera on the right vec3 w2 = normalize(vec3(0.7, 0.32, 0.64)); float d2 = dot(r, w2); if (d2 > 0.0) { vec3 a = normalize(cross(w2, vec3(0.0, 1.0, 0.0))), b = cross(a, w2); vec2 q = vec2(dot(r, a), dot(r, b)) / d2; float pane = smoothstep(0.05, 0.0, max(abs(q.x) - 0.22, abs(q.y) - 0.42)); pane *= smoothstep(0.0, 0.015, abs(q.x)) * smoothstep(0.0, 0.015, abs(q.y - 0.05)); c = mix(c, vec3(0.88, 0.93, 1.0) * 3.2, pane); } return c; } vec3 clothAlb(vec3 p) { float weave = vnoise(p.xz * vec2(70.0, 9.0)) * 0.5 + vnoise(p.xz * vec2(8.0, 64.0)) * 0.5; return vec3(0.86, 0.85, 0.82) * (0.975 + 0.035 * weave); } // ironed fold lines run across the cloth in a grid vec3 clothN(vec3 p) { float cx = (fract(p.x / 1.45 + 0.31) - 0.5) * 1.45; float cz = (fract(p.z / 1.2 + 0.18) - 0.5) * 1.2; float bx = exp(-cx * cx / 0.0016), bz = exp(-cz * cz / 0.0012); float gx = -0.1 * bx * (2.0 * cx / 0.0016) * 0.04, gz = 0.08 * bz * (2.0 * cz / 0.0012) * 0.04; gx += (vnoise(p.xz * 3.0) - 0.5) * 0.04; return normalize(vec3(-gx, 1.0, -gz)); } vec3 shadeCloth(vec3 p, bool full) { vec3 n = clothN(p); float sh = (full ? shadow(p + vec3(0.0, 0.004, 0.0)) : 1.0) * sash(p); float oc = full ? ao(p, vec3(0.0, 1.0, 0.0)) : 1.0; vec3 alb = clothAlb(p); vec3 col = alb * (SUN * max(dot(n, L), 0.0) * sh + SKY * oc * (0.8 + 0.2 * n.y)); // light that the polished domes throw back onto the cloth for (int i = 0; i < 3; i++) { vec3 d = uO[i] + vec3(0.0, uC[i].w * 0.5, 0.0) - p; col += alb * SUN * 0.035 * uC[i].z / (dot(d, d) + 0.15) * oc; } return col; } vec3 platePaint(vec3 p, int i, out float ink) { vec2 d = p.xz - uC[i].xy; float Rt = uR[i] * 0.64; float u = d.x / (2.0 * Rt) + 0.5, v = 0.5 - d.y / (2.0 * Rt); ink = 0.0; if (u > 0.0 && u < 1.0 && v > 0.0 && v < 1.0) ink = texture(uTex, vec2(u, (float(i) + v) / 3.0)).r; return vec3(0.035, 0.016, 0.008); } // what a reflected ray off the silver sees: the other pieces, the cloth, or the room vec3 bounce(vec3 ro, vec3 rd) { float t = 0.02; for (int k = 0; k < 36; k++) { vec2 h = map(ro + rd * t); if (h.x < 0.002) { vec3 p = ro + rd * t; if (h.y > 2.5) { int i = int(h.y + 0.5) - 3; float ink; vec3 ic = platePaint(p, i, ink); vec3 alb = mix(vec3(0.9, 0.89, 0.86), ic, ink); return alb * (SUN * 0.5 * sash(p) + SKY); } vec3 n = nrm(p); return env(reflect(rd, n)) * vec3(0.92, 0.9, 0.86) * 0.85; } t += h.x; if (t > 4.0) break; } if (rd.y < 0.0) { float tp = -ro.y / rd.y; vec3 p = ro + rd * tp; return shadeCloth(p, false) * 0.92; } return env(rd); } vec3 shadeSilver(int i, vec3 p, vec3 rd, vec3 n) { vec3 q = toL(p - uO[i], i); vec2 s = vec2(atan(q.x, q.z) * uC[i].z, q.y); // fine spinning lines from the lathe and a few soft polishing smears float lines = vnoise(vec2(s.y * 420.0, s.x * 2.0)) - 0.5; float smear = fbm(s * 5.0 + float(i) * 4.0); vec3 nb = normalize(n + (vec3(0.0, 1.0, 0.0) * lines * 0.006) + (vec3(smear - 0.5) * 0.006)); vec3 R = reflect(rd, nb); vec3 refl = bounce(p + nb * 0.006, R); // soften the room a little where the polish is smeared refl = mix(refl, env(normalize(R + (vec3(vnoise(s * 9.0), vnoise(s * 9.0 + 3.0), 0.0) - 0.5) * 0.2)), 0.25 * smoothstep(0.55, 0.8, smear)); float cosT = clamp(dot(-rd, nb), 0.0, 1.0); vec3 F0 = vec3(0.95, 0.93, 0.88); vec3 F = F0 + (1.0 - F0) * pow(1.0 - cosT, 5.0); float oc = ao(p, n); float sh = shadow(p + n * 0.01); vec3 col = refl * F * mix(0.55, 1.0, oc); col += SUN * sh * sash(p) * (30.0 * pow(max(dot(R, L), 0.0), 900.0) + 0.5 * pow(max(dot(R, L), 0.0), 60.0)); return col; } vec3 shadePlate(int i, vec3 p, vec3 rd, vec3 n) { float ink; vec3 ic = platePaint(p, i, ink); // only paint the flat well of the plate ink *= step(0.5, n.y) * smoothstep(0.7 * uR[i], 0.64 * uR[i], length(p.xz - uC[i].xy)); float rr = length(p.xz - uC[i].xy) / uR[i]; float band = smoothstep(0.004, 0.0, abs(rr - 0.9) - 0.012); float gild = smoothstep(0.003, 0.0, abs(rr - 0.875) - 0.003); vec3 alb = mix(vec3(0.93, 0.925, 0.9), ic, ink); alb = mix(alb, vec3(0.06, 0.2, 0.15), band); alb = mix(alb, vec3(0.6, 0.42, 0.16), gild); float sh = shadow(p + n * 0.006) * sash(p); float oc = ao(p, n); vec3 col = alb * (SUN * max(dot(n, L), 0.0) * sh + SKY * oc); // porcelain glaze float F = 0.04 + 0.96 * pow(1.0 - clamp(dot(-rd, n), 0.0, 1.0), 5.0); vec3 R = reflect(rd, n); vec3 refl = env(R) * mix(0.4, 1.0, oc) + SUN * sh * 26.0 * pow(max(dot(R, L), 0.0), 700.0); return mix(col, refl, F * (1.0 - 0.4 * ink)); } vec3 shadeWall(vec3 p) { vec3 alb = mix(vec3(0.74, 0.7, 0.64), vec3(0.8, 0.76, 0.7), fbm(p.xy * 1.2)); float lit = sash(p + vec3(0.0, 0.0, 0.0)); return alb * (SUN * 0.45 * lit + SKY * 0.85); } vec3 tonemap(vec3 x) { x *= 0.6; return clamp((x * (2.51 * x + 0.03)) / (x * (2.43 * x + 0.59) + 0.14), 0.0, 1.0); } void main() { vec2 ndc = vUv * 2.0 - 1.0 - uShift; vec3 rd = normalize(uFw + uRt * (ndc.x * uTan * uAspect) + uUp * (ndc.y * uTan)); float tp = 1e9; int pid = -1; if (rd.y < 0.0) { float t = -uCam.y / rd.y; vec3 h = uCam + rd * t; if (h.z > WZ) { tp = t; pid = 0; } } if (pid < 0 && rd.z < 0.0) { tp = (WZ - uCam.z) / rd.z; pid = 1; } float t = max(0.0, (uCam.y - 1.6) / max(-rd.y, 0.05)); float id = -1.0; float tmax = min(tp, 40.0); for (int k = 0; k < 120; k++) { vec2 h = map(uCam + rd * t); if (h.x < 0.0005 * t) { id = h.y; break; } t += h.x * 0.85; if (t > tmax) break; } vec3 col; float depth; if (id >= 0.0 && t < tmax) { vec3 p = uCam + rd * t; vec3 n = nrm(p); int k = int(id + 0.5); col = k < 3 ? shadeSilver(k, p, rd, n) : shadePlate(k - 3, p, rd, n); depth = t; } else { vec3 p = uCam + rd * tp; col = pid == 0 ? shadeCloth(p, true) : shadeWall(p); depth = tp; } // haze in the window light col += vec3(1.0, 0.93, 0.84) * 0.03 * smoothstep(0.5, -1.0, dot(rd, vec3(1.0, 0.0, 0.0))); float z = depth * dot(rd, uFw); float coc = clamp(uAperture * (1.0 - uFocus / max(z, 0.05)), -1.0, 1.0); o = vec4(pow(tonemap(col), vec3(1.0 / 2.2)), 0.5 + 0.5 * coc); }`; const VS = `#version 300 es out vec2 vUv; void main() { vec2 p = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2)); vUv = p; gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0); }`; const FS_LENS = `#version 300 es precision highp float; uniform sampler2D uScene; uniform vec2 uPx; uniform float uMaxR, uTime; in vec2 vUv; out vec4 o; float ign(vec2 p) { return fract(52.9829189 * fract(dot(p, vec2(0.06711056, 0.00583715)))); } void main() { vec4 c0 = texture(uScene, vUv); float s0 = c0.a * 2.0 - 1.0, coc0 = abs(s0); vec3 acc = c0.rgb; float wsum = 1.0; float rot = 6.2832 * ign(gl_FragCoord.xy); for (int k = 1; k < 20; k++) { float r = sqrt(float(k) / 20.0) * uMaxR; float a = float(k) * 2.39996 + rot; vec4 s = texture(uScene, vUv + vec2(cos(a), sin(a)) * r * uPx); float sc = s.a * 2.0 - 1.0, cs = abs(sc); if (sc > s0) cs = min(cs, coc0 * 1.6 + 0.02); float w = smoothstep(r - 1.0, r + 1.0, cs * uMaxR); acc += s.rgb * w; wsum += w; } vec3 col = acc / wsum; const vec3 LU = vec3(0.299, 0.587, 0.114); vec3 cNW = texture(uScene, vUv + vec2(-1.0, -1.0) * uPx).rgb, cNE = texture(uScene, vUv + vec2(1.0, -1.0) * uPx).rgb; vec3 cSW = texture(uScene, vUv + vec2(-1.0, 1.0) * uPx).rgb, cSE = texture(uScene, vUv + vec2(1.0, 1.0) * uPx).rgb; float lNW = dot(cNW, LU), lNE = dot(cNE, LU), lSW = dot(cSW, LU), lSE = dot(cSE, LU), lM = dot(c0.rgb, LU); float lMin = min(lM, min(min(lNW, lNE), min(lSW, lSE))), lMax = max(lM, max(max(lNW, lNE), max(lSW, lSE))); vec2 dir = vec2(-((lNW + lNE) - (lSW + lSE)), (lNW + lSW) - (lNE + lSE)); float rcp = 1.0 / (min(abs(dir.x), abs(dir.y)) + max((lNW + lNE + lSW + lSE) * 0.03125, 0.0078)); dir = clamp(dir * rcp, -8.0, 8.0) * uPx; vec3 fa = 0.5 * (texture(uScene, vUv + dir * (1.0 / 3.0 - 0.5)).rgb + texture(uScene, vUv + dir * (2.0 / 3.0 - 0.5)).rgb); vec3 fb = fa * 0.5 + 0.25 * (texture(uScene, vUv - dir * 0.5).rgb + texture(uScene, vUv + dir * 0.5).rgb); float lB = dot(fb, LU); vec3 fx = (lB < lMin || lB > lMax) ? fa : fb; col = mix(fx, col, smoothstep(0.05, 0.3, coc0)); vec2 q = vUv - 0.5; col *= 1.0 - 0.28 * dot(q, q); col += (ign(gl_FragCoord.xy + fract(uTime) * 61.0) - 0.5) * 0.016; o = vec4(col, 1.0); }`; function program(gl: WebGL2RenderingContext, vs: string, fs: string) { const p = gl.createProgram()!; for (const [type, src] of [[gl.VERTEX_SHADER, vs], [gl.FRAGMENT_SHADER, fs]] as const) { const s = gl.createShader(type)!; gl.shaderSource(s, src); gl.compileShader(s); if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s) || "shader"); gl.attachShader(p, s); } gl.linkProgram(p); if (!gl.getProgramParameter(p, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(p) || "link"); return p; } /** What is piped onto each plate in chocolate: plan name, the example price and its label. One square per plan. */ function artwork() { const S = 1024; const cv = document.createElement("canvas"); cv.width = S; cv.height = S * plans.length; const ctx = cv.getContext("2d")!; ctx.fillStyle = "#000"; ctx.fillRect(0, 0, cv.width, cv.height); ctx.fillStyle = "#fff"; const tracked = (s: string, y: number, font: string, gap: number) => { ctx.font = font; ctx.textAlign = "left"; const w = [...s].map((c) => ctx.measureText(c).width + gap); let x = S / 2 - (w.reduce((a, b) => a + b, 0) - gap) / 2; [...s].forEach((c, i) => { ctx.fillText(c, x, y); x += w[i]; }); }; plans.forEach((plan, i) => { // the texture is flipped on upload, so plan 0 sits in the bottom square ctx.save(); ctx.translate(0, (plans.length - 1 - i) * S); // the plate is seen at a low angle, so the lettering is drawn tall to read true ctx.scale(1, 1.7); tracked(plan.name.toUpperCase(), 150, `700 ${plan.name.length > 9 ? 74 : 88}px ${GROTESK}`, 14); ctx.fillRect(S / 2 - 80, 172, 160, 6); tracked(`$${plan.price}`, 430, `italic 600 ${plan.price > 99 ? 290 : 330}px ${SERIF}`, -10); tracked("A MONTH · EXAMPLE", 520, `700 62px ${GROTESK}`, 8); ctx.restore(); }); return cv; } type Sim = { l: number[]; vl: number[]; a: number[]; va: number[]; dip: number[]; plan: number; dirty: boolean; touched: boolean }; /** The same table drawn with plain elements, for browsers without WebGL 2. */ function Still({ plan, marks }: { plan: number; marks: number[] }) { return (

{plans.map((p, i) => { const up = i === plan; const w = p.dome * 30; return (

{up && (

${p.price}

)}

); })}

); } export default function SilverClochePricing() { const reduce = useReducedMotion(); const wrapRef = useRef(null); const canvasRef = useRef(null); const [plan, setPlan] = useState(1); const [mode, setMode] = useState<"pending" | "gl" | "still">("pending"); const [marks, setMarks] = useState([24, 50, 77]); const [handled, setHandled] = useState(false); const sim = useRef({ l: [0, 1, 0], vl: [0, 0, 0], a: [0, TILT, 0], va: [0, 0, 0], dip: [0, 0, 0], plan: 1, dirty: true, touched: false }); useEffect(() => { const s = sim.current; if (s.plan !== plan) { s.plan = plan; s.dip[plan] = 0.11; // a waiter's small press down before the lift } s.dirty = true; }, [plan]); useEffect(() => { const wrap = wrapRef.current; const canvas = canvasRef.current; if (!wrap || !canvas) return; const gl = canvas.getContext("webgl2", { antialias: false, alpha: false, powerPreference: "high-performance" }); if (!gl) { setMode("still"); return; } const s = sim.current; let pScene: WebGLProgram, pLens: WebGLProgram; try { pScene = program(gl, VS, GLSL); pLens = program(gl, VS, FS_LENS); } catch { setMode("still"); return; } setMode("gl"); const art = gl.createTexture(); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, art); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, artwork()); gl.generateMipmap(gl.TEXTURE_2D); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); const vao = gl.createVertexArray(); const fbo = gl.createFramebuffer(); const tex = gl.createTexture(); let W = 0, H = 0, scale = Math.min(window.devicePixelRatio || 1, 2), cssW = 1, cssH = 1; const TAN = Math.tan((10 * Math.PI) / 180); const cam = { pos: [0, 2, 10], rt: [1, 0, 0], up: [0, 1, 0], fw: [0, 0, -1], shift: [0, 0], focus: 8 }; const aim = (sx: number, sy: number) => { const aspect = cssW / cssH; const wide = aspect > 1.2; const dist = Math.max(9.4, (wide ? 2.4 : 2.2) / (TAN * aspect)); const el = 0.52; const target = [0, 0.32, 0.05]; cam.pos = [target[0] + sx, target[1] + Math.sin(el) * dist + sy, target[2] + Math.cos(el) * dist]; let fw = [target[0] - cam.pos[0], target[1] - cam.pos[1], target[2] - cam.pos[2]]; const fl = Math.hypot(fw[0], fw[1], fw[2]); fw = fw.map((v) => v / fl); let rt = [-fw[2], 0, fw[0]]; const rl = Math.hypot(rt[0], rt[2]); rt = rt.map((v) => v / rl); cam.fw = fw; cam.rt = rt; cam.up = [rt[1] * fw[2] - rt[2] * fw[1], rt[2] * fw[0] - rt[0] * fw[2], rt[0] * fw[1] - rt[1] * fw[0]]; cam.shift = wide ? [0.12, -0.36] : [0, -0.38]; cam.focus = fl; return aspect; }; const project = (p: number[]) => { const d = [p[0] - cam.pos[0], p[1] - cam.pos[1], p[2] - cam.pos[2]]; const z = d[0] * cam.fw[0] + d[1] * cam.fw[1] + d[2] * cam.fw[2]; const x = (d[0] * cam.rt[0] + d[1] * cam.rt[1] + d[2] * cam.rt[2]) / (z * TAN * (cssW / cssH)) + cam.shift[0]; const y = (d[0] * cam.up[0] + d[1] * cam.up[1] + d[2] * cam.up[2]) / (z * TAN) + cam.shift[1]; return [(x * 0.5 + 0.5) * cssW, (0.5 - y * 0.5) * cssH]; }; const resize = () => { cssW = wrap.clientWidth; cssH = wrap.clientHeight; let k = scale; if (cssW * cssH * k * k > 1.5e6) k = Math.sqrt(1.5e6 / (cssW * cssH)); const w = Math.max(2, Math.round(cssW * k)), h = Math.max(2, Math.round(cssH * k)); aim(0, 0); setMarks(XS.map((x) => clamp((project([x, 0, 0])[0] / cssW) * 100, cssW < 640 ? 19 : 8, cssW < 640 ? 81 : 92))); if (w === W && h === H) return; W = w; H = h; canvas.width = W; canvas.height = H; gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, tex); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, W, H, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.bindFramebuffer(gl.FRAMEBUFFER, fbo); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0); s.dirty = true; }; resize(); const ro = new ResizeObserver(resize); ro.observe(wrap); const U = (p: WebGLProgram, n: string) => gl.getUniformLocation(p, n); let pointer = [0, 0], view = [0, 0]; const draw = (t: number) => { const aspect = aim(view[0], view[1]); gl.bindVertexArray(vao); gl.viewport(0, 0, W, H); gl.bindFramebuffer(gl.FRAMEBUFFER, fbo); gl.useProgram(pScene); const C: number[] = [], O: number[] = [], CS: number[] = [], R: number[] = []; plans.forEach((p, i) => { const l = s.l[i]; C.push(XS[i], 0, p.dome, domeH(p.dome)); // lifted up and drawn back toward the waiter, front edge rising so the diner sees the plate O.push(XS[i], SEAT + l * (LIFT + (reduce ? 0 : 0.008 * Math.sin(t * 1.6 + i))), -l * p.dome * 1.05); CS.push(Math.cos(s.a[i]), Math.sin(s.a[i])); R.push(PLATE(p.dome)); }); gl.uniform4fv(U(pScene, "uC"), C); gl.uniform3fv(U(pScene, "uO"), O); gl.uniform2fv(U(pScene, "uCS"), CS); gl.uniform1fv(U(pScene, "uR"), R); gl.uniform1i(U(pScene, "uTex"), 0); gl.uniform3fv(U(pScene, "uCam"), cam.pos); gl.uniform3fv(U(pScene, "uRt"), cam.rt); gl.uniform3fv(U(pScene, "uUp"), cam.up); gl.uniform3fv(U(pScene, "uFw"), cam.fw); gl.uniform1f(U(pScene, "uTan"), TAN); gl.uniform1f(U(pScene, "uAspect"), aspect); gl.uniform2fv(U(pScene, "uShift"), cam.shift); gl.uniform1f(U(pScene, "uFocus"), cam.focus); gl.uniform1f(U(pScene, "uAperture"), 1.5); gl.uniform1f(U(pScene, "uTime"), t); gl.drawArrays(gl.TRIANGLES, 0, 3); gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.useProgram(pLens); gl.uniform1i(U(pLens, "uScene"), 1); gl.uniform2f(U(pLens, "uPx"), 1 / W, 1 / H); gl.uniform1f(U(pLens, "uMaxR"), H * 0.007); gl.uniform1f(U(pLens, "uTime"), reduce ? 0 : t); gl.drawArrays(gl.TRIANGLES, 0, 3); }; // The lift is an underdamped spring so the dome overshoots a touch; the tilt is a second, looser spring that trails it. const physics = (dt: number) => { plans.forEach((_, i) => { let target = i === s.plan ? 1 : 0; if (s.dip[i] > 0) { s.dip[i] -= dt; target = -0.035; } const down = target < s.l[i]; const k = down ? 90 : 62, c = down ? 15 : 9.5; s.vl[i] += (k * (target - s.l[i]) - c * s.vl[i]) * dt; s.l[i] += s.vl[i] * dt; if (s.l[i] < 0) { // the rim meets the plate: a small, damped clink s.l[i] = 0; s.vl[i] = Math.abs(s.vl[i]) * 0.22 < 0.05 ? 0 : Math.abs(s.vl[i]) * 0.22; } const ta = TILT * clamp(s.l[i], 0, 1.2); s.va[i] += (40 * (ta - s.a[i]) - 6.5 * s.va[i] - s.vl[i] * 0.8) * dt; s.a[i] = clamp(s.a[i] + s.va[i] * dt, 0, 1.4); if (s.l[i] === 0 && s.a[i] < 0.002) s.a[i] = 0; }); }; const settle = () => { plans.forEach((_, i) => { s.l[i] = i === s.plan ? 1 : 0; s.a[i] = i === s.plan ? TILT : 0; s.vl[i] = s.va[i] = s.dip[i] = 0; }); }; settle(); let raf = 0, visible = true, last = performance.now(), slow = 0, frames = 0; const t0 = last; let played = 0, demoAt = 4.0, step = 0; const tick = (now: number) => { const real = now - last; const dt = clamp(real / 1000, 0, 0.05); last = now; const t = (now - t0) / 1000; if (reduce) { if (s.dirty) settle(); } else { const sub = Math.max(1, Math.ceil(dt / 0.004)); for (let i = 0; i < sub; i++) physics(dt / sub); played += dt; view[0] += (pointer[0] * 0.4 + 0.15 * Math.sin(t * 0.2) - view[0]) * Math.min(1, dt * 3); view[1] += (pointer[1] * 0.2 - view[1]) * Math.min(1, dt * 3); if (DEMO && !s.touched && played > demoAt) { const script = [2, 0, 1]; setPlan(script[step % script.length]); step++; demoAt = played + 3.8; } } if (!reduce || s.dirty) { draw(reduce ? 0 : t); s.dirty = false; if (!reduce && ++frames > 20) { slow = slow * 0.92 + (real > 24 ? 1 : 0) * 0.08; if (slow > 0.6 && scale > 0.5) { scale *= 0.84; slow = 0; frames = 0; resize(); } } } if (visible) raf = requestAnimationFrame(tick); }; const io = new IntersectionObserver(([e]) => { const was = visible; visible = e.isIntersecting; if (visible && !was) { last = performance.now(); frames = 0; raf = requestAnimationFrame(tick); } }); io.observe(wrap); const onVis = () => { if (document.hidden) cancelAnimationFrame(raf); else if (visible) { last = performance.now(); raf = requestAnimationFrame(tick); } }; document.addEventListener("visibilitychange", onVis); raf = requestAnimationFrame(tick); // pressing a cloche or its plate chooses that plan const over = (e: PointerEvent) => { const r = wrap.getBoundingClientRect(); const x = e.clientX - r.left, y = e.clientY - r.top; for (let i = 0; i < plans.length; i++) { const p = plans[i], R = PLATE(p.dome); const a = project([XS[i] - R, domeH(p.dome) + 0.1 + LIFT * s.l[i], 0]), b = project([XS[i] + R, 0, R]); if (x > a[0] && x < b[0] && y > a[1] && y < b[1]) return i; } return -1; }; const touch = () => { s.touched = true; setHandled(true); }; const downEv = (e: PointerEvent) => { touch(); const i = over(e); if (i >= 0) setPlan(i); }; const move = (e: PointerEvent) => { const r = wrap.getBoundingClientRect(); pointer = [((e.clientX - r.left) / r.width - 0.5) * 2, ((e.clientY - r.top) / r.height - 0.5) * -2]; canvas.style.cursor = over(e) >= 0 ? "pointer" : ""; }; const leave = () => { pointer = [0, 0]; }; const lost = (e: Event) => { e.preventDefault(); setMode("still"); }; canvas.addEventListener("pointerdown", downEv); canvas.addEventListener("pointermove", move); canvas.addEventListener("pointerleave", leave); canvas.addEventListener("webglcontextlost", lost); wrap.addEventListener("keydown", touch); wrap.addEventListener("focusin", touch); return () => { cancelAnimationFrame(raf); ro.disconnect(); io.disconnect(); document.removeEventListener("visibilitychange", onVis); canvas.removeEventListener("pointerdown", downEv); canvas.removeEventListener("pointermove", move); canvas.removeEventListener("pointerleave", leave); canvas.removeEventListener("webglcontextlost", lost); wrap.removeEventListener("keydown", touch); wrap.removeEventListener("focusin", touch); gl.getExtension("WEBGL_lose_context")?.loseContext(); }; }, [reduce]); const chosen = plans[plan]; const check = ( ); const cta = ( Book {chosen.name} ); return (

{check} {f}

{cta}

Prices shown are examples. Set your own in the plans list.

); } 5f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"framer-motion"}]]}]}]]}],["$","$L60",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L61",null,{"files":[{"path":"components/we-inc/silver-cloche-pricing-in-webgl-where-the-chosen-dome-lifts-off-its-plate-on-a-white-tablecloth-in-window-light.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]