63: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"] 64:I[544296,["/_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"],"ItemStyles"] 65:I[8513,["/_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"],"ScrollArea"] 66:I[8513,["/_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"],"ScrollBar"] 67: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"] 68:Tb384,"use client"; import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react"; // --------------------------------------------------------------------------- // weir-crest — a pricing section as a spillway. // // Three plans are three dams standing in ONE reservoir. A plan's crest height // is its included volume (log scale), and the level slider raises a single // continuous water surface across the whole viewport. The moment the surface // passes a crest, that dam is overtopped and pours — which is exactly the // moment that plan's overage term stops being zero. The crossover is therefore // something you watch happen rather than something you compute. // // Everything numeric is DOM text. The canvas draws water, piers, nappes and // foam, and is aria-hidden; it never renders a price. // --------------------------------------------------------------------------- export interface WeirCrestPlan { id: string; name: string; tagline: string; /** monthly base, before any annual discount */ base: number; /** included events per month — this is the dam's crest height */ included: number; /** overage charged per 1,000 events above `included` */ overagePer1k: number; features: string[]; cta: string; } export interface WeirCrestProps { plans?: WeirCrestPlan[]; minUsage?: number; maxUsage?: number; defaultUsage?: number; eyebrow?: string; headline?: string; footnote?: string; /** fraction taken off the base on annual billing (0.2 = 20% off) */ annualDiscount?: number; onChange?: (usage: number, annual: boolean) => void; className?: string; } const DEFAULT_PLANS: WeirCrestPlan[] = [ { id: "starter", name: "Starter", tagline: "A low crest. Holds a trickle, spills early.", base: 19, included: 50_000, overagePer1k: 0.9, features: ["1 project", "7-day retention", "Email alerts", "Community support"], cta: "Start on Starter", }, { id: "growth", name: "Growth", tagline: "The working crest. Most teams sit under it.", base: 79, included: 400_000, overagePer1k: 0.45, features: ["10 projects", "90-day retention", "Alert routing", "Priority support"], cta: "Choose Growth", }, { id: "scale", name: "Scale", tagline: "A high crest. Dry until the reservoir is full.", base: 249, included: 2_000_000, overagePer1k: 0.22, features: ["Unlimited projects", "2-year retention", "Custom routing", "Named engineer"], cta: "Talk to sales", }, ]; const VERT_SRC = ` attribute vec2 a_pos; void main() { gl_Position = vec4(a_pos, 0.0, 1.0); } `; // The frozen clock used for prefers-reduced-motion and the very first frame: // far enough in that the swell has structure and the short dam's nappe is a // developed sheet rather than a flat wash. const STATIC_TIME = 7.3; // Each dam gets one spillway bay, alternating sides so the frame has rhythm; // the plan's type sits on the solid shoulder opposite it, floor to ceiling, so // the pour never has to share space with a panel. const NOTCH_W = 0.4; const NOTCH_SIDES = [0, 1, 0] as const; // 0 = bay on the left, 1 = on the right // The head and foot panels are rows 1 and 3 of a subgrid the three columns // share, so every column's head is as tall as the tallest head and the middle // row — the reservoir band — starts and ends on the same pixel in all three. // That equality is load-bearing: each crest label is positioned as a fraction // of its OWN band, while the canvas draws one water line across the band the // three have in common, so a column whose tagline or feature list ran a line // longer would print its crest off the water it belongs to. Rows, not fixed // heights: the panels have to grow with the price clamp and with wrapping at // narrow widths rather than clip. const HEAD_ROW = "row-start-1"; const FOOT_ROW = "row-start-3"; // The reservoir row's floor. Without it the middle row is minmax(0,1fr) and // the head and foot — which grow at sm:, where the tagline, the feature list // and the wider gaps all switch on — eat the whole band: measured 0px at // 1024x640 and 1280x600, 71px at 640x900. The mechanism silently vanished // while the cards still read as a pricing table. // The section cannot grow to pay for the floor: the frame this renders in is // h-screen + overflow-hidden, so height is a hard budget and anything the // floor takes has to come out of the head and the foot. The floor is // therefore sized against the tightest cell measured (640x620, where the // compact panels already want ~556 of 620) — 10vh, bounded — and the panels // give up their prose before it binds. Guaranteed range: height >= 600. const BAND_MIN = "clamp(3.5rem,10vh,7rem)"; // The other half of the same trade. The tagline and the feature list are the // two blocks of prose that switch on with width, and they are what the head // and the foot grow by, and on a short viewport they are what the reservoir // can least afford. So they need width AND height to appear: below 760px tall // the panels stay in their compact form and the band keeps its floor inside // the viewport rather than pushing the foot past the bottom edge of a frame // that cannot scroll. const PROSE_ONLY = "hidden sm:[@media(min-height:760px)]:block"; const FRAG_SRC = ` precision highp float; uniform vec2 u_res; uniform float u_dpr; uniform float u_time; uniform float u_level; uniform float u_bodyTop; uniform float u_bodyBot; uniform float u_slosh; uniform float u_tick0; uniform float u_tickStep; uniform vec4 u_cols[3]; uniform vec4 u_notch[3]; uniform vec3 u_c0; uniform vec3 u_c1; uniform vec3 u_c2; uniform vec3 u_c3; float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123); } float vnoise(vec2 p) { vec2 i = floor(p); vec2 f = fract(p); f = f * f * (3.0 - 2.0 * f); float a = hash(i); float b = hash(i + vec2(1.0, 0.0)); float c = hash(i + vec2(0.0, 1.0)); float d = hash(i + vec2(1.0, 1.0)); return mix(mix(a, b, f.x), mix(c, d, f.x), f.y); } float fbm(vec2 p) { float s = 0.0; float a = 0.5; for (int i = 0; i < 4; i++) { s += a * vnoise(p); p *= 2.03; a *= 0.5; } return s; } // One surface for the whole reservoir: three harmonics plus a drifting fbm // term, all scaled by the slosh the level spring is carrying — plus, over any // dam whose crest is already drowned, the standing boil a submerged weir // actually throws. That boil is the surface-level tell that this plan is // spilling, and unlike the pour down the face it sits in open water where // nothing can hide it. float surfH(float x) { float t = u_time; float amp = 2.4 + u_slosh * 11.0; float h = sin(x * 0.0113 + t * 0.85) * amp + sin(x * 0.0271 - t * 1.35) * amp * 0.48 + sin(x * 0.0605 + t * 2.05) * amp * 0.2 + (fbm(vec2(x * 0.011, t * 0.33)) - 0.5) * amp * 1.5; for (int i = 0; i < 3; i++) { vec4 c = u_cols[i]; vec4 n = u_notch[i]; float inX = smoothstep(-26.0, 14.0, x - n.x) * smoothstep(-26.0, 14.0, n.x + n.y - x); h -= inX * c.w * (3.5 + sin(x * 0.085 - t * 4.2) * 2.6 + (fbm(vec2(x * 0.05, t * 1.7)) - 0.5) * 9.0); } return u_level + h; } void main() { vec2 p = vec2(gl_FragCoord.x / u_dpr, u_res.y - gl_FragCoord.y / u_dpr); float bodyH = max(1.0, u_bodyBot - u_bodyTop); // --- dry field --------------------------------------------------------- float gy = clamp((p.y - u_bodyTop) / bodyH, 0.0, 1.0); vec3 col = mix(u_c0, mix(u_c0, u_c1, 0.42), gy * 0.55); // decade rules: the gauge the rail is labelled against, run full width so // the whole frame reads as one instrument rather than a picture with a // slider beside it float rules = 0.0; for (int k = 0; k < 8; k++) { float f = u_tick0 + float(k) * u_tickStep; float ty = u_bodyBot - f * bodyH; float major = mod(float(k), 3.0) < 0.5 ? 1.0 : 0.45; rules = max(rules, (1.0 - smoothstep(0.0, 1.1, abs(p.y - ty))) * major * step(f, 1.001)); } col = mix(col, mix(u_c1, u_c2, 0.5), rules * 0.55); // --- piers ------------------------------------------------------------- float pier = 0.0; float edge = 0.0; float crest = 0.0; float nappe = 0.0; float foam = 0.0; float lip = 0.0; float crestShadow = 0.0; for (int i = 0; i < 3; i++) { vec4 c = u_cols[i]; vec4 n = u_notch[i]; float x0 = c.x; float x1 = c.x + c.y; float cy = c.z; float sp = c.w; float inX = smoothstep(-1.0, 1.0, p.x - x0) * smoothstep(-1.0, 1.0, x1 - p.x); // The spillway bay: the crest number a plan advertises is the elevation of // this notch, and the non-overflow shoulders either side stand a parapet // above it — so the pour has one lane, permanently clear of the type that // sits on the shoulder. float inN = smoothstep(-1.0, 1.0, p.x - n.x) * smoothstep(-1.0, 1.0, n.x + n.y - p.x); float topY = mix(cy - 22.0, cy, inN); float below = smoothstep(-1.0, 1.5, p.y - topY) * smoothstep(2.0, -1.0, p.y - u_bodyBot); float body = inX * below; pier = max(pier, body); float e = max(1.0 - smoothstep(0.4, 1.6, abs(p.x - x0)), 1.0 - smoothstep(0.4, 1.6, abs(p.x - x1))); e = max(e, max(1.0 - smoothstep(0.4, 1.6, abs(p.x - n.x)), 1.0 - smoothstep(0.4, 1.6, abs(p.x - n.x - n.y))) * smoothstep(0.0, 3.0, p.y - cy + 22.0) * (1.0 - smoothstep(18.0, 26.0, p.y - cy + 22.0))); edge = max(edge, e * below); crest = max(crest, inX * (1.0 - smoothstep(1.2, 3.2, abs(p.y - topY)))); crestShadow = max(crestShadow, inX * (1.0 - smoothstep(2.0, 16.0, p.y - topY)) * step(topY, p.y)); if (sp > 0.002) { body *= inN; float fall = clamp((p.y - cy) / max(60.0, u_bodyBot - cy), 0.0, 1.0); // vertical striations scrolling down the face, faster the harder it pours float streak = fbm(vec2(p.x * 0.055, p.y * 0.004 - u_time * (1.1 + 2.2 * sp))); float ribs = 0.5 + 0.5 * sin(p.x * 0.075 + fbm(vec2(p.x * 0.012, u_time * 0.35)) * 5.0); float sheet = body * sp * (0.22 + 1.15 * streak) * (0.45 + 0.55 * ribs) * (0.55 + 0.5 * fall); nappe = max(nappe, sheet); // the lip: a thick bright roll of water right at the crest, and the // clear glassy tongue just under it before the sheet breaks up lip = max(lip, inN * sp * (1.0 - smoothstep(0.0, 6.0 + 11.0 * sp, abs(p.y - cy - 4.0)))); // the apron: a boiling hydraulic jump where the sheet lands float boil = fbm(vec2(p.x * 0.045, (u_bodyBot - p.y) * 0.05 - u_time * 1.5)) + 0.6 * fbm(vec2(p.x * 0.12 + 11.0, u_time * 2.1)); float apron = body * sp * exp(-abs(p.y - u_bodyBot + 6.0) * 0.028) * (0.25 + 0.95 * boil); foam = max(foam, apron); } } // masonry courses, so a submerged pier still reads as built structure float course = 1.0 - smoothstep(0.0, 1.4, abs(mod(p.y, 19.0) - 9.5)); float joint = 1.0 - smoothstep(0.0, 1.4, abs(mod(p.x + floor(p.y / 19.0) * 26.0, 52.0) - 26.0)); vec3 pierCol = mix(u_c1, u_c2, 0.26); pierCol = mix(pierCol, mix(u_c1, u_c0, 0.6), max(course, joint * (1.0 - course)) * 0.5); pierCol = mix(pierCol, u_c0, clamp((p.y - u_bodyTop) / bodyH, 0.0, 1.0) * 0.3); col = mix(col, pierCol, pier); col = mix(col, mix(u_c2, u_c3, 0.3), edge * 0.5); // --- water ------------------------------------------------------------- float hs = surfH(p.x); float sub = smoothstep(-1.0, 1.0, p.y - hs); float d = max(0.0, p.y - hs); float caust = sin(d * 0.048 - u_time * 0.8 + p.x * 0.0072 + fbm(vec2(p.x * 0.0055, d * 0.0055 - u_time * 0.11)) * 3.6); float caust2 = sin(d * 0.017 + u_time * 0.45 - p.x * 0.0033 + fbm(vec2(p.x * 0.0032 + 4.0, d * 0.003)) * 2.4); vec3 water = mix(u_c1, u_c2, 0.24 + 0.42 * (caust * 0.5 + 0.5) * exp(-d * 0.0016)); water = mix(water, u_c2, (caust2 * 0.5 + 0.5) * 0.16); water = mix(water, u_c0, clamp(d * 0.0008, 0.0, 0.38)); col = mix(col, water, sub * 0.86); // Rising bubbles, biased toward whichever dam is pouring: the aeration a // drowned crest drags under is the second surface-level tell, and unlike the // face pour it happens in open water. for (int i = 0; i < 7; i++) { float fi = float(i); float pick = hash(vec2(fi, 3.0)); float bx = fract(pick + fi * 0.19) * u_res.x; for (int k = 0; k < 3; k++) { vec4 c = u_cols[k]; bx = mix(bx, c.x + c.y * (0.15 + 0.7 * pick), step(0.55, c.w) * step(hash(vec2(fi, 5.0 + float(k))), 0.42)); } float ph = fract(u_time * (0.05 + 0.03 * fi) + hash(vec2(fi, 7.0))); float by = mix(u_bodyBot, hs, ph); float r = 1.6 + 2.4 * hash(vec2(fi, 11.0)); vec2 dv = p - vec2(bx + sin(u_time * 0.9 + fi) * 7.0, by); float g = exp(-dot(dv, dv) / (r * r * 2.0)); col = mix(col, u_c3, g * 0.26 * sub * (1.0 - ph * 0.3)); } // --- surface line ------------------------------------------------------ float men = 1.0 - smoothstep(0.0, 2.4, abs(p.y - hs)); col = mix(col, u_c3, men * 0.6); float glow = exp(-max(0.0, hs - p.y) * 0.05) * (1.0 - sub); col = mix(col, mix(u_c2, u_c3, 0.45), glow * 0.12); // --- pour -------------------------------------------------------------- col = mix(col, mix(u_c2, u_c3, 0.55), clamp(nappe, 0.0, 1.0) * 0.95); col = mix(col, mix(u_c2, u_c3, 0.85), clamp(lip, 0.0, 1.0) * 0.8); col = mix(col, u_c3, clamp(foam, 0.0, 1.0) * 0.6); // the crest reads as an edge: a bright sill with its own shadow under it col = mix(col, u_c0, crestShadow * 0.5); col = mix(col, mix(u_c2, u_c3, 0.85), crest * 0.9); // grain + a mild vignette so the frame edges never out-value the type col += (hash(p * 1.7 + fract(u_time)) - 0.5) * 0.013; vec2 q = (p / u_res - 0.5) * vec2(1.25, 1.0); col = mix(col, u_c0, clamp(dot(q, q) * 0.55, 0.0, 0.3)); gl_FragColor = vec4(col, 1.0); } `; type RGB = [number, number, number]; function parseColor(raw: string): RGB | null { const s = raw.trim(); const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(s); if (hex) { let h = hex[1]; if (h.length === 3) h = h.split("").map((c) => c + c).join(""); const n = parseInt(h, 16); return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]; } const rgb = /^rgba?$([^)]+)$$/i.exec(s); if (rgb) { const parts = rgb[1].split(/[\s,/]+/).filter(Boolean).map(Number); if (parts.length >= 3 && parts.every((v) => Number.isFinite(v))) { return [parts[0] / 255, parts[1] / 255, parts[2] / 255]; } } return null; } function mixRGB(a: RGB, b: RGB, t: number): RGB { return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t]; } function luminance([r, g, b]: RGB): number { return 0.2126 * r + 0.7152 * g + 0.0722 * b; } function compile(gl: WebGLRenderingContext, type: number, src: string): WebGLShader { const s = gl.createShader(type)!; gl.shaderSource(s, src); gl.compileShader(s); if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) { const info = gl.getShaderInfoLog(s); gl.deleteShader(s); throw new Error(`weir-crest: shader compile failed: ${info ?? ""}`); } return s; } // Minimal full-bleed fragment-shader host: one program, one fullscreen // triangle pair, uniform locations resolved lazily by name. class GLSurface { gl: WebGLRenderingContext | null = null; private program: WebGLProgram | null = null; private vs: WebGLShader | null = null; private fs: WebGLShader | null = null; private buffer: WebGLBuffer | null = null; private locs = new Map(); constructor(private canvas: HTMLCanvasElement, private frag: string) {} init(isRestore = false): boolean { const gl = this.canvas.getContext("webgl", { alpha: false, antialias: false, premultipliedAlpha: false, powerPreference: "high-performance", }) as WebGLRenderingContext | null; if (!gl) return false; this.gl = gl; try { this.vs = compile(gl, gl.VERTEX_SHADER, VERT_SRC); this.fs = compile(gl, gl.FRAGMENT_SHADER, this.frag); const program = gl.createProgram(); if (!program) { this.abandon(isRestore); return false; } this.program = program; gl.attachShader(program, this.vs); gl.attachShader(program, this.fs); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { this.abandon(isRestore); return false; } } catch { this.abandon(isRestore); return false; } gl.useProgram(this.program); this.buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW ); const loc = gl.getAttribLocation(this.program!, "a_pos"); gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0); this.locs.clear(); return true; } // A compile/link failure above happens on a context getContext() already // handed over, and the caller's `if (!surface.init()) return` never // registers the effect cleanup that hands a context back — so the release // belongs here, while this.gl still reaches it. The condition is the // inverse of that cleanup's `!canvas.isConnected`: the canvas is still // mounted on this path, and the context that must NOT be released is one // the browser has just restored, since onRestored re-enters init() and a // release there would feed its own loss/restore/fail cycle. private abandon(isRestore: boolean) { const lose = isRestore ? null : this.gl?.getExtension("WEBGL_lose_context"); this.destroy(); lose?.loseContext(); } private loc(name: string): WebGLUniformLocation | null { if (!this.locs.has(name)) { this.locs.set(name, this.gl!.getUniformLocation(this.program!, name)); } return this.locs.get(name) ?? null; } f(name: string, x: number) { this.gl?.uniform1f(this.loc(name), x); } v2(name: string, x: number, y: number) { this.gl?.uniform2f(this.loc(name), x, y); } v3(name: string, c: RGB) { this.gl?.uniform3f(this.loc(name), c[0], c[1], c[2]); } v4a(name: string, data: Float32Array) { this.gl?.uniform4fv(this.loc(name), data); } draw(pixelW: number, pixelH: number) { const gl = this.gl; if (!gl || !this.program) return; gl.viewport(0, 0, pixelW, pixelH); gl.drawArrays(gl.TRIANGLES, 0, 6); } destroy() { const gl = this.gl; if (!gl) return; if (this.buffer) gl.deleteBuffer(this.buffer); if (this.program) gl.deleteProgram(this.program); if (this.vs) gl.deleteShader(this.vs); if (this.fs) gl.deleteShader(this.fs); this.buffer = null; this.program = null; this.vs = null; this.fs = null; this.locs.clear(); this.gl = null; } } // --- number shaping -------------------------------------------------------- function compactVolume(n: number): string { if (n >= 1_000_000) { const v = n / 1_000_000; return `${v >= 10 ? Math.round(v) : Math.round(v * 10) / 10}M`; } if (n >= 1_000) { const v = n / 1_000; return `${v >= 10 ? Math.round(v) : Math.round(v * 10) / 10}k`; } return `${Math.round(n)}`; } function money(n: number): string { return `$${Math.round(n).toLocaleString("en-US")}`; } function fullVolume(n: number): string { return Math.round(n).toLocaleString("en-US"); } export function WeirCrest({ plans = DEFAULT_PLANS, minUsage = 10_000, maxUsage = 5_000_000, defaultUsage = 300_000, eyebrow = "ns-ui / weir-crest", headline = "Raise the level.\nSee which dam holds.", footnote = "Every plan is a dam. Its crest is the volume it holds without overage — past the crest it pours, and you pay for the spill.", annualDiscount = 0.2, onChange, className = "", }: WeirCrestProps) { const uid = useId(); const wrapRef = useRef(null); const canvasRef = useRef(null); const trackRef = useRef(null); const colRefs = useRef<(HTMLElement | null)[]>([]); const bandRefs = useRef<(HTMLElement | null)[]>([]); const [usage, setUsage] = useState(defaultUsage); const [annual, setAnnual] = useState(false); const [announce, setAnnounce] = useState(""); const logMin = Math.log(minUsage); const logMax = Math.log(maxUsage); const span = Math.max(1e-6, logMax - logMin); const fracOf = useCallback( (v: number) => (Math.log(Math.min(maxUsage, Math.max(minUsage, v))) - logMin) / span, [logMin, span, minUsage, maxUsage] ); const valueOf = useCallback( (f: number) => Math.exp(logMin + Math.min(1, Math.max(0, f)) * span), [logMin, span] ); const priced = useMemo(() => { return plans.map((p) => { const base = p.base * (annual ? 1 - annualDiscount : 1); const over = Math.max(0, usage - p.included) / 1000 * p.overagePer1k; return { plan: p, base, over, total: base + over, frac: fracOf(p.included) }; }); }, [plans, usage, annual, annualDiscount, fracOf]); const bestIndex = useMemo(() => { let bi = 0; for (let i = 1; i < priced.length; i++) if (priced[i].total < priced[bi].total) bi = i; return bi; }, [priced]); const levelFrac = fracOf(usage); // Everything the render loop reads lives in refs: the loop must never depend // on a React render landing first. const levelFracRef = useRef(levelFrac); levelFracRef.current = levelFrac; const crestFracsRef = useRef(priced.map((p) => p.frac)); crestFracsRef.current = priced.map((p) => p.frac); // [first decade's fraction, one decade in fractions] — the gauge the shader // rules the frame with, and the same domain the rail is labelled on const gaugeRef = useRef<[number, number]>([0, 1]); gaugeRef.current = [ (Math.ceil(Math.log10(minUsage)) * Math.LN10 - logMin) / span, Math.LN10 / span, ]; // annualNow is passed explicitly by the billing-term radios: they announce // from inside their own change handler, before `annual` has re-rendered, so // reading the closed-over flag there would price the term just left. const commit = useCallback( (v: number, annualNow: boolean = annual) => { const best = plans.reduce( (acc, p) => { const base = p.base * (annualNow ? 1 - annualDiscount : 1); const t = base + (Math.max(0, v - p.included) / 1000) * p.overagePer1k; return t < acc.t ? { p, t } : acc; }, { p: plans[0], t: Number.POSITIVE_INFINITY } ); setAnnounce( `${fullVolume(v)} events per month. Cheapest plan ${best.p.name}, ${money(best.t)} per month${ annualNow ? ", billed annually" : "" }.` ); }, [plans, annual, annualDiscount] ); const apply = useCallback( (v: number, announceIt: boolean) => { const clamped = Math.min(maxUsage, Math.max(minUsage, v)); setUsage(clamped); onChange?.(clamped, annual); if (announceIt) commit(clamped); }, [maxUsage, minUsage, onChange, annual, commit] ); // --- slider: pointer ----------------------------------------------------- const draggingRef = useRef(false); const fromClientY = useCallback( (clientY: number) => { const track = trackRef.current; if (!track) return usage; const r = track.getBoundingClientRect(); const f = 1 - (clientY - r.top) / Math.max(1, r.height); return valueOf(f); }, [usage, valueOf] ); const onTrackPointerDown = useCallback( (e: React.PointerEvent) => { const track = trackRef.current; if (!track) return; draggingRef.current = true; try { track.setPointerCapture(e.pointerId); } catch { /* a synthetic pointerId matches no live pointer */ } track.focus(); apply(fromClientY(e.clientY), false); }, [apply, fromClientY] ); const onTrackPointerMove = useCallback( (e: React.PointerEvent) => { if (!draggingRef.current) return; apply(fromClientY(e.clientY), false); }, [apply, fromClientY] ); const endDrag = useCallback( (e: React.PointerEvent) => { if (!draggingRef.current) return; draggingRef.current = false; try { trackRef.current?.releasePointerCapture(e.pointerId); } catch { /* see above */ } commit(usage); }, [commit, usage] ); const onTrackKeyDown = useCallback( (e: React.KeyboardEvent) => { const step = 0.02; let f = fracOf(usage); switch (e.key) { case "ArrowUp": case "ArrowRight": f += step; break; case "ArrowDown": case "ArrowLeft": f -= step; break; case "PageUp": f += step * 5; break; case "PageDown": f -= step * 5; break; case "Home": f = 0; break; case "End": f = 1; break; default: return; } e.preventDefault(); const v = valueOf(Math.min(1, Math.max(0, f))); apply(v, true); }, [apply, fracOf, usage, valueOf] ); // --- the surface --------------------------------------------------------- useEffect(() => { const wrap = wrapRef.current; const canvas = canvasRef.current; if (!wrap || !canvas) return; const surface = new GLSurface(canvas, FRAG_SRC); if (!surface.init()) return; let raf = 0; let running = false; let disposed = false; let reduced = false; let visible = true; let cssW = 0; let cssH = 0; let dpr = 1; let lastMs = performance.now(); let simTime = STATIC_TIME; let bodyTop = 0; let bodyBot = 0; const cols = new Float32Array(12); const notches = new Float32Array(12); const colGeom: { x: number; w: number }[] = []; // level in px, integrated by a spring so a drag throws chop and the // surface settles rather than teleporting let levelPx = -1; let levelVel = 0; let slosh = 0; let c0: RGB = [0.04, 0.04, 0.04]; let c1: RGB = [0.14, 0.14, 0.14]; let c2: RGB = [0.5, 0.5, 0.5]; let c3: RGB = [0.93, 0.93, 0.93]; // Four stops. A full-bleed reservoir IS the page, so both themes span a // wide range and neither inverts: light reads as a mid-grey pool under a // pale sky, dark as a lit pour in a dark room. const readColors = () => { const cs = getComputedStyle(document.documentElement); const bg = parseColor(cs.getPropertyValue("--background")) ?? [1, 1, 1]; const fg = parseColor(cs.getPropertyValue("--foreground")) ?? [0.09, 0.09, 0.09]; const muted = parseColor(cs.getPropertyValue("--ns-muted")) ?? [0.55, 0.55, 0.55]; const border = parseColor(cs.getPropertyValue("--border")) ?? [0.2, 0.2, 0.2]; if (luminance(bg) < 0.5) { c0 = mixRGB(bg, [0, 0, 0], 0.45); c1 = mixRGB(bg, border, 0.9); c2 = mixRGB(muted, fg, 0.15); c3 = fg; } else { c0 = mixRGB(bg, fg, 0.035); c1 = mixRGB(bg, fg, 0.34); c2 = mixRGB(bg, fg, 0.62); c3 = fg; } surface.v3("u_c0", c0); surface.v3("u_c1", c1); surface.v3("u_c2", c2); surface.v3("u_c3", c3); }; // The reservoir band is the intersection of the three columns' clear // middles — the strip of the layout that carries no DOM, so the pour is // never hidden behind a panel. const measure = () => { const wr = wrap.getBoundingClientRect(); let top = -Infinity; let bot = Infinity; colGeom.length = 0; for (let i = 0; i < 3; i++) { const r = colRefs.current[i]?.getBoundingClientRect(); colGeom.push(r ? { x: r.left - wr.left, w: r.width } : { x: 0, w: 0 }); const b = bandRefs.current[i]?.getBoundingClientRect(); if (b) { top = Math.max(top, b.top - wr.top); bot = Math.min(bot, b.bottom - wr.top); } } bodyTop = Number.isFinite(top) ? top : wr.height * 0.35; bodyBot = Number.isFinite(bot) ? bot : wr.height * 0.9; if (bodyBot - bodyTop < 40) bodyBot = bodyTop + 40; }; const resize = () => { const w = Math.max(1, Math.round(wrap.clientWidth)); const h = Math.max(1, Math.round(wrap.clientHeight)); dpr = Math.min(window.devicePixelRatio || 1, 1.5); cssW = w; cssH = h; canvas.style.width = `${w}px`; canvas.style.height = `${h}px`; canvas.width = Math.round(w * dpr); canvas.height = Math.round(h * dpr); measure(); levelPx = -1; // re-seed the spring at the new geometry draw(0); }; const targetLevel = () => { const h = Math.max(1, bodyBot - bodyTop); return bodyBot - levelFracRef.current * h; }; const draw = (dt: number) => { const h = Math.max(1, bodyBot - bodyTop); const tgt = targetLevel(); if (levelPx < 0 || reduced) { levelPx = tgt; levelVel = 0; slosh = 0; } else { // semi-implicit Euler, ~one small overshoot then settled inside 0.8s const acc = -60 * (levelPx - tgt) - 11 * levelVel; levelVel += acc * dt; levelPx += levelVel * dt; slosh += (Math.min(1, Math.abs(levelVel) / 900) - slosh) * Math.min(1, dt * 6); } for (let i = 0; i < 3; i++) { const g = colGeom[i] ?? { x: 0, w: 0 }; const crestY = bodyBot - (crestFracsRef.current[i] ?? 0) * h; const spill = Math.min(1, Math.max(0, (crestY - levelPx) / 70)); cols[i * 4] = g.x; cols[i * 4 + 1] = g.w; cols[i * 4 + 2] = crestY; cols[i * 4 + 3] = spill; const nw = g.w * NOTCH_W; notches[i * 4] = NOTCH_SIDES[i] === 0 ? g.x + g.w * 0.05 : g.x + g.w * (0.95 - NOTCH_W); notches[i * 4 + 1] = nw; } surface.v2("u_res", cssW, cssH); surface.f("u_dpr", dpr); surface.f("u_time", simTime); surface.f("u_level", levelPx); surface.f("u_bodyTop", bodyTop); surface.f("u_bodyBot", bodyBot); surface.f("u_slosh", slosh); surface.f("u_tick0", gaugeRef.current[0]); surface.f("u_tickStep", gaugeRef.current[1]); surface.v4a("u_cols", cols); surface.v4a("u_notch", notches); surface.draw(canvas.width, canvas.height); }; const frame = (now: number) => { if (disposed) return; const dt = Math.min(0.05, Math.max(0, (now - lastMs) / 1000)); lastMs = now; simTime += dt; draw(dt); raf = requestAnimationFrame(frame); }; const start = () => { if (running || disposed || reduced || !visible || document.hidden) return; running = true; lastMs = performance.now(); raf = requestAnimationFrame(frame); }; const stop = () => { running = false; if (raf) cancelAnimationFrame(raf); raf = 0; }; readColors(); resize(); const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); const onMq = () => { reduced = mq.matches; if (reduced) { stop(); simTime = STATIC_TIME; draw(0); } else { start(); } }; reduced = mq.matches; onMq(); const ro = new ResizeObserver(resize); ro.observe(wrap); const io = new IntersectionObserver( (entries) => { visible = entries.some((e) => e.isIntersecting); if (visible) start(); else stop(); }, { threshold: 0 } ); io.observe(wrap); const onVis = () => { if (document.hidden) stop(); else start(); }; document.addEventListener("visibilitychange", onVis); mq.addEventListener("change", onMq); const themeObs = new MutationObserver(() => { readColors(); if (reduced || !running) draw(0); }); themeObs.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "style"] }); const onSchemeChange = () => { readColors(); if (reduced || !running) draw(0); }; const scheme = window.matchMedia("(prefers-color-scheme: dark)"); scheme.addEventListener("change", onSchemeChange); const onLost = (e: Event) => { e.preventDefault(); stop(); }; const onRestored = () => { if (surface.init(true)) { readColors(); resize(); start(); } }; canvas.addEventListener("webglcontextlost", onLost); canvas.addEventListener("webglcontextrestored", onRestored); // React state changes (usage, annual, layout) land here through refs; a // frozen surface still has to repaint once. const poke = () => { measure(); if (reduced || !running) draw(0); }; (wrap as HTMLDivElement & { __weirPoke?: () => void }).__weirPoke = poke; return () => { disposed = true; stop(); ro.disconnect(); io.disconnect(); themeObs.disconnect(); mq.removeEventListener("change", onMq); scheme.removeEventListener("change", onSchemeChange); document.removeEventListener("visibilitychange", onVis); canvas.removeEventListener("webglcontextlost", onLost); canvas.removeEventListener("webglcontextrestored", onRestored); delete (wrap as HTMLDivElement & { __weirPoke?: () => void }).__weirPoke; // destroy() frees the GL objects but not the context holding them, and a // detached canvas keeps its context until GC gets round to it — // browsers cap live contexts per renderer process and evict the oldest // first, which kills weirs still on screen. Hand it back explicitly, // but only on a real unmount: this cleanup also runs when a dep changes, // and a canvas returns its one lost context to every later getContext(), // so releasing too eagerly would blank the rebuilt weir. const lose = surface.gl?.getExtension("WEBGL_lose_context"); surface.destroy(); if (!canvas.isConnected) lose?.loseContext(); }; }, []); // A reduced-motion surface draws only on demand, so every value change has // to knock on it. useEffect(() => { const wrap = wrapRef.current as (HTMLDivElement & { __weirPoke?: () => void }) | null; wrap?.__weirPoke?.(); }, [usage, annual, plans]); const ticks = useMemo(() => { const out: { v: number; f: number }[] = []; for (let e = Math.ceil(Math.log10(minUsage)); Math.pow(10, e) <= maxUsage; e++) { const v = Math.pow(10, e); out.push({ v, f: fracOf(v) }); } return out; }, [minUsage, maxUsage, fracOf]); return (

); } export default WeirCrest; 62:["$","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":[null,["$","$L63",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L64",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L65",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4d4d4d"}]]}],["$","div","ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#006bff"}]]}],["$","div","ns-accent-hover",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-accent-hover",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0059d1"}]]}]]}],["$","$L66",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L65",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#8f8f8f"}]]}]]}],["$","$L66",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L65",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-muted)"}]]}],["$","div","color-ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent)"}]]}],["$","div","color-ns-accent-hover",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-accent-hover",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent-hover)"}]]}]]}],["$","$L66",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L67",null,{"files":[{"path":"registry/loud/weir-crest/component.tsx","content":"$68","type":"registry:ui","target":"components/ui/weir-crest.tsx"}],"className":"h-[70svh] min-h-80"}]]}]

{headline}

{row.plan.name}