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:T7588,"use client"; import { useEffect, useId, useRef } from "react"; // --------------------------------------------------------------------------- // JointIron — a footer whose top edge IS a book joint being formed, // not a footer with an animation bolted onto it. // // Real mechanic: the building-in machine in edition binding. After a book is // cased-in, it is clamped in a machine that presses heated brass joint irons // into the hinge to set the French groove — the channel between the spine and // the boards — under real dwell time, then releases with a measured 14% // spring-back as the boards' elastic set partially relaxes. Three stations // along the band run this five-phase cycle (index / iron descent / dwell / // release / lift) independently, offset in phase, forever. // // The canvas is the full footer surface, not a strip above it — the DOM // content (wordmark, sitemap, legal line) sits on the SAME "case" tone the // groove is cut into, in a scrim panel below the forming zone. Delete the // loop and the footer loses its material, not a decoration: this is the // thing that keeps it from being footing-course. // // One height field per station, g(x) — a cosine bump centred on the station, // with half-width hw = 1.44 * depth on each side (so the groove's WIDTH // shrinks with depth, not just its floor). The two facet walls are lit with // a single-lamp Lambert-style term derived from the bump's own slope // (-sin(pi*d/hw)), so depth is legible three ways at once — floor depth, // facet width, facet contrast — which is what makes the 14% spring-back // (2.6px of floor movement at card scale) visible at all: on its own it is // below the perceptual floor, but the paired 7.5px facet-width narrowing and // the ~0.035L contrast step read as a real event over the 170ms it happens // in. // // Tokens only: --background, --foreground, --ns-muted, --border, --ns-accent // read via getComputedStyle + a MutationObserver on documentElement's class. // --ns-accent never touches the joint (only the newsletter submit and focus // rings). The heated iron — this component's one climactic moment — is // solved by value alone: a solid --foreground silhouette whose underside // gets a shadowBlur glow (still just the --foreground token, no hue) for its // 700ms post-lift shimmer, which is the theme-agnostic way to "brighten" a // silhouette that is already at the bright extreme of its palette in dark // theme and the dark extreme in light theme. // --------------------------------------------------------------------------- const CYCLE = 7.4; // one station's full sequence, seconds const P_INDEX = 0.85; const P_DESCENT = 0.62; const P_DWELL = 3.6; const P_RELEASE = 0.45; // P_LIFT = CYCLE - (P_INDEX + P_DESCENT + P_DWELL + P_RELEASE) = 1.88 const T1 = P_INDEX; const T2 = T1 + P_DESCENT; const T3 = T2 + P_DWELL; const T4 = T3 + P_RELEASE; const DESCENT_TC = 0.28; // first-order approach time constant, descent const DWELL_TC = 1.4; // first-order approach time constant, dwell creep const RELEASE_SPRING_T = 0.17; // spring-back happens in the first 170ms of release const RELEASE_DROP = 0.14; // 14% of set depth recovered on release const LIFT_DUR = 0.3; // iron travel time within the 1.88s lift+dwell-out phase const SHIMMER_S = 0.7; // heat-shimmer duration after lift begins // STATION_OFFSET is a deliberate 2.6s (not an exact CYCLE/3 = 2.467) — tuned // so the reduced-motion STATIC_TIME below lands one station mid-release, one // mid-dwell and one mid-index simultaneously, matching the spec's // non-t0 freeze-frame requirement without relying on luck. const STATION_OFFSET = 2.6; const STATIC_TIME = 2.62; const STATION_COUNT_FULL = 3; const STATION_COUNT_SHORT = 2; const MIN_HB_FOR_GRAIN_AND_3RD = 88; // px; below this, drop to 2 stations, drop grain const GROOVE_CENTER_FRAC = 0.3; // groove's resting line, fraction of Hb below top edge const GROOVE_CENTER_MAX_PX = 132; // clamp so the DOM sitemap (below it) can never bury the groove const G_MAX_FRAC = 0.075; // g_max as a fraction of M = min(bandW, bandH) // The groove is ONE continuous channel across the band, not three isolated // dimples: each station owns a raised-cosine window whose depth is its own // phase, and the channel takes the deepest contribution at every x. Adjacent // windows overlap (HW > slotW/2), so the depth profile is continuous and the // three phases read as one hinge being worked along its length. const STATION_WINDOW_MULT = 0.62; // window half-width, fraction of a slot const GROOVE_SAMPLES = 132; // polyline samples across the band const FACET_WIDTH_MULT = 1.44; // facet half-width = 1.44 * current depth const FACET_BRIGHT_L = 0.15; // spine-side facet peak contrast, spec's real number const FACET_DARK_L = 0.17; // board-side facet peak contrast, spec's real number const FACET_BRIGHT_ALPHA = 0.72; // lit far wall — the groove's primary value carrier // dark alpha derived from the bright budget scaled by the spec's own L ratio, // so the 0.15 / 0.17 asymmetry (and the 14%-release drop of both) survives // the translation into canvas alpha rather than being re-guessed. const FACET_DARK_ALPHA = FACET_BRIGHT_ALPHA * (FACET_DARK_L / FACET_BRIGHT_L); const THERMOSTAT_CYCLE = 2.1; const THERMOSTAT_AMP_ALPHA = 0.05; // iron fill-alpha ripple standing in for +/-0.04L hunting const CASE_ALPHA_LIGHT = 0.1; const CASE_ALPHA_DARK = 0.16; const IRON_BASE_ALPHA = 0.86; // headroom below solid fg so the shimmer has somewhere to go const GRAIN_AMP_ALPHA = 0.05; // canvas overlay alpha standing in for +/-0.02L board grain const GRAIN_FEATURE_FRAC = 0.006; // grain feature size, fraction of M const DPR_CAP = 2; const SLOW_FRAME_MS = 33; // ~30fps budget const SLOW_SUSTAIN_MS = 1500; // sustained slow window before quality drops function mod(a: number, n: number) { return ((a % n) + n) % n; } function clamp01(v: number) { return Math.max(0, Math.min(1, v)); } function easeOutCubic(t: number) { const u = 1 - clamp01(t); return 1 - u * u * u; } // deterministic, seeded — no Math.random anywhere in the render path, so the // reduced-motion frame (and every ordinary frame, given the same t) is // byte-stable. function mulberry32(seed: number) { let a = seed >>> 0; return () => { a = (a + 0x6d2b79f5) | 0; let t = Math.imul(a ^ (a >>> 15), 1 | a); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } interface Tokens { fg: string; bg: string; muted: string; border: string; } function readTokens(): Tokens | null { if (typeof document === "undefined") return null; const cs = getComputedStyle(document.documentElement); const fg = cs.getPropertyValue("--foreground").trim(); const bg = cs.getPropertyValue("--background").trim(); const muted = cs.getPropertyValue("--ns-muted").trim(); const border = cs.getPropertyValue("--border").trim(); if (!fg || !bg) return null; return { fg, bg, muted, border }; } // -- the joint's phase machine — a pure function of local (station) time --- type Phase = "index" | "descent" | "dwell" | "release" | "lift"; interface StationFrame { phase: Phase; depthFrac: number; // 0..1 of gMax, the groove floor's current depth contrastMult: number; // multiplies FACET_*_L, folds in shoulder-rounding on release ironFrac: number; // 0 (up) .. 1 (down) indexProgress: number; // 0..1 while phase === "index", else 0 shimmerT: number | null; // seconds into the post-lift shimmer, else null } // depth fraction reached at the end of descent / dwell, and the held depth // after release — computed once, reused every cycle (the process is // periodic: every book gets the same result). const DESCENT_END_FRAC = 1 - Math.exp(-P_DESCENT / DESCENT_TC); const DWELL_END_FRAC = 1 - 0.11 * Math.exp(-P_DWELL / DWELL_TC); const HOLD_FRAC = DWELL_END_FRAC * (1 - RELEASE_DROP); function indexEase(p: number) { // easeOutCubic with a small, quickly-damped overshoot standing in for the // spec's "3% overshoot damped in 140ms" spring settle. const base = easeOutCubic(p); const overshoot = 0.03 * Math.exp(-p * 9) * Math.sin(p * Math.PI * 2.2); return base + overshoot; } function stationFrame(localT: number): StationFrame { if (localT < T1) { const p = localT / P_INDEX; return { phase: "index", depthFrac: 0, contrastMult: 0, ironFrac: 0, indexProgress: indexEase(p), shimmerT: null }; } if (localT < T2) { const t = localT - T1; const depthFrac = 1 - Math.exp(-t / DESCENT_TC); return { phase: "descent", depthFrac, contrastMult: depthFrac, ironFrac: clamp01(depthFrac / DESCENT_END_FRAC), indexProgress: 0, shimmerT: null }; } if (localT < T3) { const t = localT - T2; const depthFrac = 1 - 0.11 * Math.exp(-t / DWELL_TC); return { phase: "dwell", depthFrac, contrastMult: depthFrac, ironFrac: 1, indexProgress: 0, shimmerT: null }; } if (localT < T4) { const t = localT - T3; const springP = clamp01(t / RELEASE_SPRING_T); const springEase = easeOutCubic(springP); const depthFrac = DWELL_END_FRAC * (1 - RELEASE_DROP * springEase); const shoulderRound = 1 - 0.09 * springEase; // extra rounding beyond pure depth ratio return { phase: "release", depthFrac, contrastMult: depthFrac * shoulderRound, ironFrac: 1, indexProgress: 0, shimmerT: null }; } const t = localT - T4; const ironFrac = Math.max(0, 1 - t / LIFT_DUR); return { phase: "lift", depthFrac: HOLD_FRAC, contrastMult: HOLD_FRAC, ironFrac, indexProgress: 0, shimmerT: t < SHIMMER_S ? t : null, }; } export interface JointIronLink { label: string; href: string; } export interface JointIronColumn { heading: string; links: JointIronLink[]; } export interface JointIronProps { /** wordmark on the case */ brand?: string; /** short line under the wordmark */ tagline?: string; /** sitemap columns */ columns?: JointIronColumn[]; /** legal / copyright line; year is appended automatically */ legal?: string; /** newsletter field placeholder */ newsletterPlaceholder?: string; /** called with the entered email on submit; default is a no-op (demo-safe) */ onSubscribe?: (email: string) => void; /** extra classes merged onto the rendered root element */ className?: string; } const DEFAULT_COLUMNS: JointIronColumn[] = [ { heading: "Product", links: [ { label: "Overview", href: "#overview" }, { label: "Pricing", href: "#pricing" }, { label: "Changelog", href: "#changelog" }, ], }, { heading: "Resources", links: [ { label: "Docs", href: "#docs" }, { label: "Guides", href: "#guides" }, { label: "API", href: "#api" }, ], }, { heading: "Company", links: [ { label: "About", href: "#about" }, { label: "Blog", href: "#blog" }, { label: "Careers", href: "#careers" }, ], }, { heading: "Legal", links: [ { label: "Privacy", href: "#privacy" }, { label: "Terms", href: "#terms" }, ], }, ]; export function JointIron({ brand = "ns-ui", tagline = "Bound the way it's built.", columns = DEFAULT_COLUMNS, legal = "All rights reserved.", newsletterPlaceholder = "you@company.com", onSubscribe, className = "", }: JointIronProps) { const wrapRef = useRef(null); const canvasRef = useRef(null); const emailId = useId(); useEffect(() => { const wrap = wrapRef.current; const canvas = canvasRef.current; if (!wrap || !canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; let disposed = false; let tokens: Tokens | null = null; let isDark = false; let dpr = 1; let w = 0; let h = 0; let sized = false; // the loop only runs when BOTH are true — an intersecting-but-hidden-tab // footer (or a visible-tab-but-scrolled-off footer) must stay paused let inView = false; let pageVisible = document.visibilityState !== "hidden"; let columnStep = 1; // widened under sustained slowness let raf = 0; let tokenWaitRaf = 0; let slowSince: number | null = null; // -- static seeded board-grain, baked to an offscreen tile at resize --- let grain: HTMLCanvasElement | null = null; const bakeGrain = (m: number) => { const feature = Math.max(1, m * GRAIN_FEATURE_FRAC); const tile = document.createElement("canvas"); tile.width = Math.max(1, Math.round(w)); tile.height = Math.max(1, Math.round(h)); const tctx = tile.getContext("2d"); if (!tctx || !tokens) { grain = tile; return; } const rand = mulberry32(20260901); const cols = Math.max(1, Math.ceil(tile.width / feature)); const rows = Math.max(1, Math.ceil(tile.height / feature)); tctx.fillStyle = tokens.fg; for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { const v = rand(); if (v < 0.5) continue; // sparse — grain is a texture, not a wash tctx.globalAlpha = (v - 0.5) * 2 * GRAIN_AMP_ALPHA; tctx.fillRect(c * feature, r * feature, feature, feature); } } tctx.globalAlpha = 1; grain = tile; }; // -- layout --------------------------------------------------------- const layout = () => { const m = Math.min(w, h); const stationCount = h >= MIN_HB_FOR_GRAIN_AND_3RD ? STATION_COUNT_FULL : STATION_COUNT_SHORT; // clamped so the groove zone always clears the DOM scrim's top offset // (pt-20/pt-24 in the markup below) even on a very tall footer const grooveCenterY = Math.min(GROOVE_CENTER_FRAC * h, GROOVE_CENTER_MAX_PX); const gMax = G_MAX_FRAC * m; const slotW = w / stationCount; const stations = Array.from({ length: stationCount }, (_, i) => ({ cx: slotW * i + slotW / 2, slotX0: slotW * i, slotX1: slotW * (i + 1), })); return { m, stationCount, grooveCenterY, gMax, slotW, stations, showGrain: h >= MIN_HB_FOR_GRAIN_AND_3RD }; }; const fitCanvas = () => { canvas.width = Math.max(1, Math.round(w * dpr)); canvas.height = Math.max(1, Math.round(h * dpr)); ctx.setTransform(dpr, 0, 0, dpr, 0, 0); }; const resize = () => { const rect = wrap.getBoundingClientRect(); if (rect.width < 4 || rect.height < 4) { sized = false; return; } dpr = Math.min(window.devicePixelRatio || 1, DPR_CAP); w = rect.width; h = rect.height; fitCanvas(); columnStep = 1; slowSince = null; const { showGrain } = layout(); if (showGrain) bakeGrain(Math.min(w, h)); else grain = null; sized = true; }; // -- drawing ---------------------------------------------------------- // Depth of the channel at x: the deepest station window covering it. // Each station's window is a raised cosine centred on its (possibly // index-shifted) centre, so a station mid-dwell cuts a deep bowl while // its neighbour mid-descent is still a shallow scoop, and the two meet // in a continuous wall rather than a seam. const depthAt = ( x: number, stations: Array<{ cx: number; slotX0: number; slotX1: number }>, frames: StationFrame[], gMax: number, slotW: number, ) => { const hw = slotW * STATION_WINDOW_MULT; let d = 0; let c = 0; for (let i = 0; i < stations.length; i++) { const f = frames[i]!; const depth = (f.phase === "index" ? HOLD_FRAC : f.depthFrac) * gMax; if (depth < 0.2) continue; // during index the previous station's finished groove travels out of // the slot, so its window centre travels with it const cx = stations[i]!.cx - (f.phase === "index" ? slotW * f.indexProgress : 0); const dx = Math.abs(x - cx); if (dx >= hw) continue; // flattened raised cosine: a pressed groove has a floor, not a // vertex, so the window plateaus in the middle and steepens at the // walls instead of reading as a shallow V const win = Math.pow(0.5 * (1 + Math.cos((Math.PI * dx) / hw)), 0.42); const contribution = depth * win; if (contribution > d) { d = contribution; c = (f.phase === "index" ? HOLD_FRAC : f.contrastMult) * win; } } return { d, c }; }; const drawGroove = ( cy: number, gMax: number, stations: Array<{ cx: number; slotX0: number; slotX1: number }>, frames: StationFrame[], slotW: number, brightToken: string, darkToken: string, ) => { const n = GROOVE_SAMPLES; const xs = new Float64Array(n + 1); const top = new Float64Array(n + 1); const bot = new Float64Array(n + 1); const con = new Float64Array(n + 1); for (let i = 0; i <= n; i++) { const x = (w * i) / n; const { d, c } = depthAt(x, stations, frames, gMax, slotW); xs[i] = x; // the channel's own height is the first of the three depth cues: it // opens downward from a nearly fixed lip, so the lip stays a // straight hinge line and the floor is what moves top[i] = cy - d * 0.06; bot[i] = cy + d * 0.9; con[i] = c; } // 1 — the recess itself: one filled band, darkest token, so the channel // reads as a shadowed cut through the case at a glance ctx.save(); ctx.beginPath(); ctx.moveTo(xs[0]!, top[0]!); for (let i = 1; i <= n; i++) ctx.lineTo(xs[i]!, top[i]!); for (let i = n; i >= 0; i--) ctx.lineTo(xs[i]!, bot[i]!); ctx.closePath(); ctx.globalAlpha = isDark ? 0.5 : 0.36; ctx.fillStyle = darkToken; ctx.fill(); ctx.restore(); // 1b — the near wall directly under the lip takes the least light, so // a second, shallower pass over the top 45% of the cut gives the // channel a curved wall instead of a flat ribbon of tone ctx.save(); ctx.beginPath(); ctx.moveTo(xs[0]!, top[0]!); for (let i = 1; i <= n; i++) ctx.lineTo(xs[i]!, top[i]!); for (let i = n; i >= 0; i--) ctx.lineTo(xs[i]!, top[i]! + (bot[i]! - top[i]!) * 0.45); ctx.closePath(); ctx.globalAlpha = isDark ? 0.45 : 0.3; ctx.fillStyle = darkToken; ctx.fill(); ctx.restore(); // 2 — the lit far wall along the bottom of the cut: the single // brightest mark in the footer, and the one that collapses visibly on // the 14% spring-back (it rises AND dims together) ctx.save(); ctx.lineCap = "round"; ctx.lineJoin = "round"; for (let i = 0; i < n; i++) { const cAvg = (con[i]! + con[i + 1]!) / 2; if (cAvg <= 0.02) continue; ctx.globalAlpha = Math.min(1, FACET_BRIGHT_ALPHA * cAvg + 0.06); ctx.strokeStyle = brightToken; ctx.lineWidth = 1.2 + 2.2 * cAvg; ctx.beginPath(); ctx.moveTo(xs[i]!, bot[i]!); ctx.lineTo(xs[i + 1]!, bot[i + 1]!); ctx.stroke(); } ctx.restore(); // 3 — the hinge lip: a continuous hairline the whole width, so the // joint exists as a line even where depth is zero (station indexing) ctx.save(); ctx.globalAlpha = isDark ? 0.5 : 0.34; ctx.strokeStyle = brightToken; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(xs[0]!, top[0]! - 0.5); for (let i = 1; i <= n; i++) ctx.lineTo(xs[i]!, top[i]! - 0.5); ctx.stroke(); ctx.restore(); ctx.globalAlpha = 1; }; // The iron: a brass block on a ram that never leaves the band. It is a // solid --foreground silhouette (value only, no hue), with a hot // underside line that shimmers for 700ms after it lifts. const drawIron = ( station: { cx: number; slotX0: number; slotX1: number }, frame: StationFrame, cy: number, gMax: number, slotW: number, t: number, ) => { const ironW = Math.min(slotW * 0.22, gMax * 2.1); const ironH = Math.max(8, gMax * 0.62); const noseH = Math.max(4, gMax * 0.34); const ironUpY = Math.max(4, cy - gMax * 3.2); // full stroke seats the nose in the floor of its own groove, never // below it — the iron forms the channel, it does not punch through const ironDownY = cy - ironH - noseH * 0.15; const y = ironUpY + (ironDownY - ironUpY) * frame.ironFrac; const x0 = station.cx - ironW / 2; const thermostat = 1 + THERMOSTAT_AMP_ALPHA * Math.sin((t / THERMOSTAT_CYCLE) * Math.PI * 2); ctx.save(); // ram: the block is machine-driven, so it stays attached to the head // rail at the top of the band instead of floating ctx.globalAlpha = clamp01(0.5 * thermostat); ctx.fillStyle = tokens!.fg; ctx.fillRect(station.cx - Math.max(1.5, ironW * 0.07), 0, Math.max(3, ironW * 0.14), y + 2); ctx.globalAlpha = clamp01(IRON_BASE_ALPHA * thermostat); ctx.beginPath(); ctx.moveTo(x0, y); ctx.lineTo(x0 + ironW, y); ctx.lineTo(x0 + ironW, y + ironH); // the working face is a wedge — it is the shape that cuts the groove, // so its profile has to match the channel it leaves behind ctx.lineTo(x0 + ironW * 0.72, y + ironH + noseH); ctx.lineTo(x0 + ironW * 0.28, y + ironH + noseH); ctx.lineTo(x0, y + ironH); ctx.closePath(); ctx.fill(); if (frame.shimmerT != null) { const shimmerEase = 1 - frame.shimmerT / SHIMMER_S; ctx.shadowColor = tokens!.fg; ctx.shadowBlur = shimmerEase * gMax * 2.2; ctx.globalAlpha = 0.95 * shimmerEase; ctx.fillRect(x0 + ironW * 0.28, y + ironH + noseH - 2, ironW * 0.44, 2); } ctx.restore(); ctx.globalAlpha = 1; }; const draw = (t: number) => { if (!tokens || !sized) return; const { grooveCenterY, gMax, stations, slotW, showGrain } = layout(); const caseAlpha = isDark ? CASE_ALPHA_DARK : CASE_ALPHA_LIGHT; const brightToken = isDark ? tokens.fg : tokens.bg; const darkToken = isDark ? tokens.bg : tokens.fg; // the case is the WHOLE footer surface, edge to edge — the band and // the sitemap are the same material, which is the point ctx.fillStyle = tokens.bg; ctx.fillRect(0, 0, w, h); ctx.globalAlpha = caseAlpha; ctx.fillStyle = tokens.fg; ctx.fillRect(0, 0, w, h); ctx.globalAlpha = 1; if (showGrain && grain) { ctx.drawImage(grain, 0, 0); } // hairline between the footer and the page above ctx.globalAlpha = 0.9; ctx.strokeStyle = tokens.border; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(0, 0.5); ctx.lineTo(w, 0.5); ctx.stroke(); ctx.globalAlpha = 1; const frames = stations.map((_, i) => stationFrame(mod(t + i * STATION_OFFSET, CYCLE))); drawGroove(grooveCenterY, gMax, stations, frames, slotW, brightToken, darkToken); for (let i = 0; i < stations.length; i++) { drawIron(stations[i]!, frames[i]!, grooveCenterY, gMax, slotW, t); } }; const loop = (nowMs: number) => { if (disposed) return; if (!inView || !pageVisible) { raf = 0; // re-armed by whichever of IO / visibilitychange flips back first return; } raf = requestAnimationFrame(loop); if (!sized || !tokens) return; const frameStart = performance.now(); draw(nowMs / 1000); const frameMs = performance.now() - frameStart; if (frameMs > SLOW_FRAME_MS) { if (slowSince == null) slowSince = nowMs; else if (nowMs - slowSince > SLOW_SUSTAIN_MS) columnStep = 2; } else { slowSince = null; } }; const drawStatic = () => { draw(STATIC_TIME); }; const rebakeGrainIfNeeded = () => { const { showGrain, m } = layout(); if (showGrain) bakeGrain(m); else grain = null; }; const resumeLoop = () => { if (!reduced && tokens && sized && inView && pageVisible && !raf) { raf = requestAnimationFrame(loop); } }; let started = false; const kick = () => { if (started || disposed || !tokens || !sized) return; started = true; if (reduced) { drawStatic(); return; } if (inView && pageVisible) raf = requestAnimationFrame(loop); }; const boot = () => { if (disposed) return; tokens = readTokens(); if (!tokens) { tokenWaitRaf = requestAnimationFrame(boot); return; } isDark = document.documentElement.classList.contains("dark"); resize(); kick(); }; const ro = new ResizeObserver(() => { if (!tokens) return; resize(); if (reduced) drawStatic(); kick(); }); ro.observe(wrap); const mo = new MutationObserver(() => { tokens = readTokens(); isDark = document.documentElement.classList.contains("dark"); if (!tokens) return; if (sized) rebakeGrainIfNeeded(); // stale-theme grain tile would otherwise persist if (reduced) drawStatic(); else if (sized) draw(performance.now() / 1000); kick(); }); mo.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] }); const io = new IntersectionObserver((entries) => { inView = entries[0]?.isIntersecting ?? true; if (inView) { tokens = readTokens() ?? tokens; // pick up a theme flip that happened while offscreen isDark = document.documentElement.classList.contains("dark"); resumeLoop(); } }); io.observe(wrap); const onVisibility = () => { pageVisible = document.visibilityState !== "hidden"; if (pageVisible) resumeLoop(); }; document.addEventListener("visibilitychange", onVisibility); boot(); return () => { disposed = true; cancelAnimationFrame(raf); cancelAnimationFrame(tokenWaitRaf); ro.disconnect(); mo.disconnect(); io.disconnect(); document.removeEventListener("visibilitychange", onVisibility); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); const form = e.currentTarget; const input = form.elements.namedItem("email") as HTMLInputElement | null; onSubscribe?.(input?.value ?? ""); form.reset(); }; return ( ); } 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/joint-iron/component.tsx","content":"$68","type":"registry:ui","target":"components/ui/joint-iron.tsx"}],"className":"h-[70svh] min-h-80"}]]}]