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:Tb50f,"use client"; import { useEffect, useId, useRef } from "react"; // --------------------------------------------------------------------------- // EdgeYield — a full-bleed scanning electron micrograph: a packed micro- // landscape of spore grains, rod crystals and filaments, imaged the way an SEM // images it rather than the way a renderer lights it. // // The organising idea is that this is a DETECTOR SIMULATION, not a lighting // model. There is no light source anywhere in the shader. One fragment shader // evaluates a height field h(u) together with its ANALYTIC gradient — every // primitive is a closed form whose slope is known, so the surface normal costs // one field evaluation instead of three central-difference taps — and then // feeds that normal through the two things that actually make an SEM image: // // delta = sec(theta) secondary-electron yield rises as the surface tilts // away from the beam, because more of the interaction // volume lies within escape depth of a free surface. // This single term is the characteristic glowing rim, // and it is not a fresnel approximation of it — it is // the actual dependence, 1/n.z. // eta collection efficiency: what fraction of those // electrons reach an Everhart-Thornley detector sitting // off to one upper-left corner. Facets turned away from // it are dim; anything with a grain between it and the // detector is in a deep, hard shadow, found by a three- // step horizon march reaching ~2 grain radii. // // Everything is in focus at once because nothing here has a lens — that // extreme depth of field is a property of the technique, not a choice. // // On top of the specimen sits the ACQUISITION, all of it in screen space and // none of it drifting with the stage, because a detector's faults belong to // the instrument and not to the sample: a scan comb, per-line DC drift, sub- // pixel line-to-line misregistration, horizontally correlated shot noise whose // amplitude tracks sqrt(signal), charge streaking pulled along the fast axis, // and a sweep line descending the frame. Lines above the sweep were acquired // this pass and lines below it on the last one, so the stage's drift shears the // picture very slightly across that line — the tear is what proves the image is // being scanned rather than rendered. // // Palette: an SEM is natively greyscale because it maps electron yield to // luminance, so monochrome here is the honest reading rather than a // restriction. Five stops from --background, --foreground, --ns-muted and // --border via getComputedStyle, re-read on a documentElement class mutation. // The ramp's DIRECTION never inverts — yield always climbs toward light — but // the exposure does: dark theme is the micrograph on the console, light theme // is the same acquisition printed, with the substrate lifted to a paper // mid-tone so the rims still have headroom to be the brightest thing in frame. // Nothing in the frame is chromatic, including the beam spot: an accent tint // under the pointer is the one mark that reads as a rendered glow sprite rather // than as a dwell, and it is the fastest way to lose the electron-image read. // The dwell is spent on signal and shot noise instead, which is what a real // beam parked on a spot actually changes. // --------------------------------------------------------------------------- export interface EdgeYieldProps { /** Feature size. Higher = further in, fewer and larger grains. @default 1 */ magnification?: number; /** How tightly the micro-landscape is packed. @default 1 */ density?: number; /** Vertical exaggeration of the specimen, which drives the rim response. @default 1 */ relief?: number; /** Shot-noise amplitude. 0 is a clean frame-averaged capture. @default 1 */ noise?: number; /** Stage drift speed multiplier. @default 1 */ speed?: number; /** Freezes acquisition on a composed still frame without unmounting. */ paused?: boolean; /** Rendered in the DOM over the micrograph — eyebrow, subhead, CTA. */ children?: React.ReactNode; className?: string; style?: React.CSSProperties; } const VERT_SRC = ` attribute vec2 a_pos; void main() { gl_Position = vec4(a_pos, 0.0, 1.0); } `; // Pointer smoothing. A plain exponential follower has a steady-state error of // exactly velocity*tau under constant velocity, so smoothing the stage that way // would make the specimen lag the hand by a fixed distance — read by the eye as // the instrument not responding rather than as damping. Extrapolating the // target one tau ahead cancels that term algebraically: at constant velocity // the stage sits under the cursor, and the smoothing is spent only on direction // changes and on interpolating between events that arrived sparser than frames. // LEAD_MAX caps the extrapolation so a teleporting pointer (a tab switch, a // warp across the frame) cannot fling the stage past the cursor. const POINTER_TAU = 0.014; const VEL_TAU = 0.06; const LEAD_MAX = 30; // One sweep of the beam down the frame. Slow enough to read as an acquisition // pass rather than a strobe, fast enough that the drift shear across the sweep // line stays a few pixels — at 4s the same shear would be a visible skew of the // whole specimen, which reads as a broken transform, not as scanning. const SWEEP_PERIOD = 1.15; const STATIC_TIME = 9.6; const FRAG_SRC = ` precision highp float; uniform vec2 u_size; // css px uniform float u_dpr; uniform float u_time; uniform float u_px; // world units per css px uniform vec2 u_stage; // stage position, world units uniform vec2 u_lagVel; // stage velocity, world units/sec (drives the sweep tear) uniform float u_rot; // stage rotation, radians uniform float u_density; uniform float u_relief; uniform float u_noise; uniform vec2 u_beam; // pointer, css px uniform float u_hover; // 0..1 eased uniform float u_sweep; // 0..1 down the frame uniform float u_pass; // acquisition pass counter uniform vec3 u_c0; uniform vec3 u_c1; uniform vec3 u_c2; uniform vec3 u_c3; uniform vec3 u_c4; uniform float u_bias; uniform float u_contrast; // The detector. Upper-left, ~34 degrees of elevation, and it is the ONLY // directional term in the shader — there is no light. const vec3 DET = vec3(-0.593, -0.526, 0.610); // height the march must clear per unit of its own step parameter: since a step // of t moves length(DET.xy) horizontally, this is DET.z, not tan(elevation) const float DET_RISE = 0.610; // Ceiling, in css px, on how far the stage's motion may shear the picture // across the sweep line. See the note at the shear itself in main(). const float SHEAR_MAX = 0.8; float hash21(vec2 p) { p = fract(p * vec2(287.13, 419.71)); p += dot(p, p + 27.31); return fract(p.x * p.y); } vec2 hash22(vec2 p) { return vec2(hash21(p), hash21(p + 19.19)); } // Value noise with its analytic derivative. Everything in the field returns // vec3(value, d/dx, d/dy) so one evaluation yields the normal. vec3 noised(vec2 p) { vec2 i = floor(p); vec2 f = fract(p); vec2 u = f * f * (3.0 - 2.0 * f); vec2 du = 6.0 * f * (1.0 - f); float a = hash21(i); float b = hash21(i + vec2(1.0, 0.0)); float c = hash21(i + vec2(0.0, 1.0)); float d = hash21(i + vec2(1.0, 1.0)); float k1 = b - a; float k2 = c - a; float k3 = a - b - c + d; return vec3( a + k1 * u.x + k2 * u.y + k3 * u.x * u.y, du.x * (k1 + k3 * u.y), du.y * (k2 + k3 * u.x) ); } float noiseOnly(vec2 p) { vec2 i = floor(p); vec2 f = fract(p); vec2 u = f * f * (3.0 - 2.0 * f); float a = hash21(i); float b = hash21(i + vec2(1.0, 0.0)); float c = hash21(i + vec2(0.0, 1.0)); float d = hash21(i + vec2(1.0, 1.0)); return mix(mix(a, b, u.x), mix(c, d, u.x), u.y); } // Rotation between octaves, with its transpose carried alongside so the // derivative chains correctly instead of being subtly wrong in a way that only // shows up as normals that do not match the silhouette. const mat2 OCT = mat2(1.624, 1.218, -1.218, 1.624); // 2.03 * rot(36.9deg) const mat2 OCT_T = mat2(1.624, -1.218, 1.218, 1.624); // sc is applied inside rather than by the caller so the chain rule back to u // cannot be forgotten at a call site — a gradient that is right in magnitude // but wrong by a constant factor is the kind of bug that shows up only as // normals that do not agree with the silhouette. vec3 fbmd(vec2 p, float sc, float amp) { vec3 s = vec3(0.0); float a = amp; vec2 q = p * sc; mat2 t = mat2(1.0, 0.0, 0.0, 1.0); for (int i = 0; i < 3; i++) { vec3 n = noised(q); s.x += a * (n.x - 0.5); s.yz += a * (t * n.yz); a *= 0.5; q = OCT * q; t = OCT_T * t; } s.yz *= sc; return s; } float fbmOnly(vec2 p, float sc, float amp) { float s = 0.0; float a = amp; vec2 q = p * sc; for (int i = 0; i < 3; i++) { s += a * (noiseOnly(q) - 0.5); a *= 0.5; q = OCT * q; } return s; } // Smooth union that keeps the crease narrow. k is fed in CSS pixels converted // to world units, so the seam where two grains meet is the same couple of // pixels wide at any magnification and any device pixel ratio — the crevice is // a line, not a soft valley, but it is never a one-pixel normal discontinuity // that sparkles under the sec(theta) response. vec3 smaxG(vec3 a, vec3 b, float k) { float w = clamp(0.5 + 0.5 * (b.x - a.x) / k, 0.0, 1.0); return vec3(mix(a.x, b.x, w) + k * w * (1.0 - w), mix(a.yz, b.yz, w)); } float smaxH(float a, float b, float k) { float w = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0); return mix(a, b, w) + k * w * (1.0 - w); } // --------------------------------------------------------------------------- // Grains. A jittered lattice of ellipsoid caps, h = A*sqrt(1 - |d|^2/r^2) — the // exact spheroid, and deliberately sqrt rather than a tunable pow(t, prof): a // general exponent costs TWO pow() per cell (the height and the derivative's // t^(prof-1)) and there are up to 45 cells per fragment across the five layers // plus the horizon march. The silhouette's last pixel is kept off the aliasing // edge by the tc floor and the smax crease instead. // // Because q = u*S, the S in the height and the S in dq/du cancel: the gradient // is scale-free, which is correct — a sphere has the same slopes however small // it is drawn — and it means every layer shares one closed form. // --------------------------------------------------------------------------- vec3 grains(vec2 u, float S, mat2 warp, mat2 warpT, float seed, float rmin, float rspan, float elong, float jit, out float matId) { vec2 q = warp * u * S; vec2 ip = floor(q); vec2 f = fract(q); // The loop carries a SCORE, not a height. h = elong*r*sqrt(tc)/S is monotonic // in r*r*tc, so the winner is found without a sqrt per cell, and the // gradient's reciprocal and the warp transpose are paid once instead of nine // times. What that buys is not the arithmetic — it is that the nine live // vec3s collapse to four floats. This shader was register-spilling, and the // measured cost of the specimen was a cliff rather than a slope. float bs = 0.0; vec2 bd = vec2(0.0); matId = 0.5; for (int y = -1; y <= 1; y++) { for (int x = -1; x <= 1; x++) { vec2 g = vec2(float(x), float(y)); vec2 o = hash22(ip + g + seed); float r = rmin + rspan * fract(o.x * 7.13 + o.y * 3.71); vec2 d = f - (g + 0.5 + (o - 0.5) * jit); float t = 1.0 - dot(d, d) / (r * r); if (t > 0.0) { float sc = r * r * max(t, 0.0008); if (sc > bs) { bs = sc; bd = d; matId = o.y; } } } } if (bs <= 0.0) return vec3(0.0); // s = r*sqrt(tc), so the height is elong*s/S and inversesqrt(tc)/r is 1/s: // dh/dq = -elong*d/s, and dq/du = S*warp, so the two S cancel and what is // left is the warp's TRANSPOSE — a sphere has the same slopes however small // it is drawn float s = sqrt(bs); return vec3(elong * s / S, warpT * ((-elong / s) * bd)); } float grainsH(vec2 u, float S, mat2 warp, float seed, float rmin, float rspan, float elong, float jit) { vec2 q = warp * u * S; vec2 ip = floor(q); vec2 f = fract(q); float bs = 0.0; for (int y = -1; y <= 1; y++) { for (int x = -1; x <= 1; x++) { vec2 g = vec2(float(x), float(y)); vec2 o = hash22(ip + g + seed); float r = rmin + rspan * fract(o.x * 7.13 + o.y * 3.71); vec2 d = f - (g + 0.5 + (o - 0.5) * jit); float t = 1.0 - dot(d, d) / (r * r); if (t > 0.0) bs = max(bs, r * r * max(t, 0.0008)); } } return elong * sqrt(bs) / S; } // Filaments draped across the specimen: a warped ridge train. The warp comes // from the same noise the substrate uses, so the fibres wander with the // fracture surface instead of lying on it like printed stripes. vec3 fibre(vec2 u, vec2 dir, float F, float amp, float warpAmt, float seed) { vec3 w = noised(u * 2.7 + seed); float s = dot(u, dir) * F + w.x * warpAmt; vec2 ds = dir * F + w.yz * (warpAmt * 2.7); float strand = hash21(vec2(floor(s), seed)); float a = amp * (0.35 + 0.65 * strand); float k = fract(s) - 0.5; float e = exp(-k * k * 30.0); return vec3(a * e, a * e * (-60.0 * k) * ds); } float fibreH(vec2 u, vec2 dir, float F, float amp, float warpAmt, float seed) { float s = dot(u, dir) * F + noiseOnly(u * 2.7 + seed) * warpAmt; float strand = hash21(vec2(floor(s), seed)); float k = fract(s) - 0.5; return amp * (0.35 + 0.65 * strand) * exp(-k * k * 30.0); } const vec2 FIB_A = vec2(0.9272, 0.3746); const vec2 FIB_B = vec2(-0.3624, 0.9320); // The specimen. Returns the height field and its gradient; 'coarse' is the // same surface without the additive debris and micro-relief, which is what the // horizon march compares against so shadows are not biased by detail the march // cannot see. const mat2 IDENT = mat2(1.0, 0.0, 0.0, 1.0); // squashed and turned, so the medium layer reads as rods and prisms wedged // between the round grains rather than as a second, smaller copy of the same // population const mat2 ROD = mat2(0.918, 0.397, -0.834, 1.928); const mat2 ROD_T = mat2(0.918, -0.834, 0.397, 1.928); void specimen(vec2 u, float dens, out vec2 grad, out float matId, out float marchH) { float k = u_px * 2.6; float m1; float m2; vec3 h = fbmd(u, 2.9, 0.026); // a sparse population of much larger bodies. Without it every grain is the // same size and the field reads as a manufactured lattice — packed roe rather // than a specimen. r stays well under half a cell, so most cells are empty and // the big ones arrive at an irregular spacing the eye cannot pre-empt. float m0; h = smaxG(h, grains(u, 4.2 * dens, IDENT, IDENT, 137.0, 0.15, 0.19, 0.86, 0.95, m0), k); h = smaxG(h, fibre(u, FIB_A, 5.6 * dens, 0.0125, 0.55, 3.1), k); h = smaxG(h, fibre(u, FIB_B, 8.3 * dens, 0.0085, 0.42, 17.7), k); vec3 g1 = grains(u, 10.5 * dens, IDENT, IDENT, 5.0, 0.30, 0.20, 0.80, 0.72, m1); // the march's reference height, captured here for free: it must be THIS // layer's raw height, because this layer is the only thing the march samples marchH = g1.x; h = smaxG(h, g1, k); h = smaxG(h, grains(u, 24.0 * dens, ROD, ROD_T, 41.0, 0.26, 0.26, 0.90, 0.80, m2), k); // the big bodies get their own atomic number too, so a boulder is not forced // to the same brightness as the small grains it is sitting among matId = mix(mix(m1, m2, 0.4), m0, 0.35); // debris and micro-relief sit ON whatever surface won, so they are summed // rather than unioned — a fleck of dust on top of a grain is above it, and a // union would hide every small thing behind every large one float m3; h += grains(u, 58.0 * dens, IDENT, IDENT, 91.0, 0.20, 0.22, 0.85, 0.88, m3) * 0.85; h += fbmd(u, 21.0, 0.0042); h += fbmd(u, 96.0, 0.0016); grad = h.yz; } // What the march samples: the round-grain population and NOTHING else. // // Cost here is a cliff, not a slope — this shader lives near the edge of its // register budget, and adding a second lattice layer plus the substrate fbm to // the march once took it from ~15ms to 50-75ms, a 2.3x increase in work for a // 3.5x increase in time. So the march gets exactly one layer, and h0 is // that SAME layer's raw height at u (captured in specimen() for free) rather // than the full surface: comparing a full-surface h0 against a one-layer sample // biases every comparison and the frame loses its shadows altogether. float specimenH(vec2 u, float dens) { return grainsH(u, 10.5 * dens, IDENT, 5.0, 0.30, 0.20, 0.80, 0.72); } // Horizon march toward the detector. The reach matters more than the step // count: it has to clear the largest grain radius comfortably, or the result is // a tight contact halo around every bump — which is ambient occlusion on a // heightfield, the exact generic read this is trying not to be. float collect(vec2 u, float h0, float dens) { float s = 1.0; float t = u_px * 4.0; for (int i = 0; i < 3; i++) { float hs = specimenH(u + DET.xy * t, dens); float over = hs - (h0 + t * DET_RISE); s = min(s, 1.0 - clamp(over / (u_px * 5.0 + t * 0.30), 0.0, 1.0)); t *= 4.2; } return s; } vec3 ramp(float x) { vec3 c = mix(u_c0, u_c1, smoothstep(0.0, 0.26, x)); c = mix(c, u_c2, smoothstep(0.24, 0.54, x)); c = mix(c, u_c3, smoothstep(0.51, 0.82, x)); c = mix(c, u_c4, smoothstep(0.80, 1.0, x)); return c; } void main() { // DOM-space css px, y down, so the pointer, the scan lines and the field all // share one coordinate system vec2 p = vec2(gl_FragCoord.x, u_size.y * u_dpr - gl_FragCoord.y) / u_dpr; float ref = min(u_size.x, u_size.y); // ---- acquisition geometry (screen space, never drifts with the stage) ---- float line = floor(p.y); float yf = p.y / u_size.y; // lines above the sweep were written this pass, lines below on the last one float below = step(u_sweep, yf); float pass = u_pass - below; // how long ago this line was acquired: the stage kept moving in between, so // the picture shears very slightly across the sweep line float lag = (below > 0.5 ? (1.0 + u_sweep - yf) : (u_sweep - yf)) * ${SWEEP_PERIOD.toFixed(3)}; // sub-pixel line-to-line misregistration, applied to the sample position so // the shadows move with the rims instead of sliding under them float jx = (hash21(vec2(line, pass * 5.7)) - 0.5) * 0.55; float dens = clamp(u_density, 0.35, 3.0); vec2 sp = vec2(p.x + jx, p.y); vec2 cu = (sp - u_size * 0.5) * u_px; float cs = cos(u_rot); float sn = sin(u_rot); // The shear this lag buys has to stay SUB-PIXEL. Left unbounded it is // |u_lagVel| * SWEEP_PERIOD / u_px css px: about 6px on the drift alone, and // up to ~75px while the hand is panning, since the pan velocity is folded // into u_lagVel. At that size the sweep line stops reading as a scan and // reads as a tear — the specimen above it is a different picture from the // one below, which is the one thing a continuous surface must never do. // Saturating instead of clamping keeps it exactly linear in the slow regime // that is honest, and asymptotic to SHEAR_MAX css px at any speed. vec2 sh = u_lagVel * lag; float shm = SHEAR_MAX * u_px; sh *= shm / (length(sh) + shm); vec2 u = mat2(cs, sn, -sn, cs) * cu + u_stage - sh; vec2 grad; float matId; float marchH; specimen(u, dens, grad, matId, marchH); float gm = length(grad); if (gm > 12.0) grad *= 12.0 / gm; vec3 n = normalize(vec3(-grad.x * u_relief, -grad.y * u_relief, 1.0)); // ---- detector model ------------------------------------------------------ // secondary yield: sec(theta), floored so the silhouette saturates instead of // going singular in whichever pixel happens to land on it float nz = max(n.z, 0.13); float delta = pow(1.0 / nz, 0.95); // atomic-number contrast: different grains are different stuff delta *= 0.86 + 0.30 * matId; float shadow = collect(u, marchH, dens); float facing = max(dot(n, DET), 0.0); float eta = 0.30 + 0.70 * facing * shadow; // a small isotropic pedestal: electrons that scatter off the chamber wall and // come back, which is why a real crevice is dark but never black eta += 0.055 * shadow; float sig = delta * eta * 0.42; // the far side of the specimen subtends less of the detector — a broad // brightness gradient toward the detector, which is what an SEM has instead // of a vignette sig *= 1.0 + 0.13 * dot(normalize(vec2(-0.6, -0.55)), (p - u_size * 0.5) / ref); sig = sig / (1.0 + sig * 0.50); // ---- beam spot ----------------------------------------------------------- // where the pointer is, the beam dwells: more electrons per pixel, so more // signal and less shot noise. That is the whole interaction — no glow sprite. vec2 bd = (p - u_beam) / (ref * 0.155); float spot = exp(-dot(bd, bd)) * u_hover; sig = mix(sig, sig * 1.30 + 0.045, spot * 0.85); // ---- acquisition --------------------------------------------------------- float comb = 1.0 - 0.042 * (0.5 + 0.5 * cos(6.2831853 * p.y / 2.7)); sig *= comb; // per-line DC: a fast component that changes every pass, and a slow drift // that reads as the amplifier wandering sig += (hash21(vec2(line, pass * 3.1)) - 0.5) * 0.026; sig += (noiseOnly(vec2(line * 0.07, u_time * 0.6)) - 0.5) * 0.045; // charge streaking, pulled along the fast (horizontal) axis and gated on // signal, since it is bright features that charge float streak = noiseOnly(vec2(p.x * 0.010, p.y * 0.62) + vec2(u_time * 0.05, 0.0)); sig += (streak - 0.5) * 0.085 * smoothstep(0.35, 0.9, sig); // shot noise: Poisson, so the amplitude tracks sqrt of the signal, and // correlated with the pixel to its left because the beam has not finished // moving. The lattice is css px and phase-locked to the display, so the // adaptive render scale cannot change the grain size. vec2 pix = floor(p); vec2 ns = vec2(pass * 17.3, pass * 7.7); float nA = hash21(pix + ns); float nB = hash21(pix + vec2(-1.0, 0.0) + ns); float shot = mix(nA, nB, 0.42) - 0.5; sig += shot * 0.115 * u_noise * (0.35 + 0.65 * sqrt(max(sig, 0.0))) * mix(1.0, 0.28, spot); // the sweep line itself: the beam is on it right now // its amplitude is the whole question. At 0.22 it was a saturated rule right // across the frame — measured at +76/255 over the surrounding rows, five // times the brightest ordinary grain row, which is not what a beam passing // over a line looks like. Kept just clear of the shot noise so it reads as // the pass going by, and rolled off where the signal is already high so it // cannot blow a rim out. float sweepD = abs(yf - u_sweep); float onLine = 0.040 * exp(-sweepD * sweepD * 26000.0) + 0.016 * exp(-sweepD * sweepD * 700.0); sig += onLine * (1.0 - 0.55 * clamp(sig, 0.0, 1.0)); float L = clamp((sig - 0.5) * u_contrast + 0.5 + u_bias, 0.0, 1.0); gl_FragColor = vec4(ramp(L), 1.0); } `; type RGB = [number, number, number]; function parseHex(raw: string): RGB | null { const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(raw.trim()); if (!m) return null; let h = m[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]; } 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(`edge-yield: shader compile failed: ${info ?? ""}`); } return s; } // The minimal full-bleed fragment-shader host: one program, one fullscreen // triangle pair, uniform locations resolved lazily by name. It knows nothing // about the micrograph. 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]); } 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; } } export function EdgeYield({ magnification = 1, density = 1, relief = 1, noise = 1, speed = 1, paused = false, children, className = "", style, }: EdgeYieldProps) { const wrapRef = useRef(null); const canvasRef = useRef(null); const uid = useId(); const pausedRef = useRef(paused); pausedRef.current = paused; useEffect(() => { const wrap = wrapRef.current; const canvas = canvasRef.current; if (!wrap || !canvas) return; const surface = new GLSurface(canvas, FRAG_SRC); let raf = 0; let running = false; let staticMode = false; let cssW = 0; let cssH = 0; let dpr = 1; let disposed = false; let lastMs = performance.now(); let simTime = 0; // Adaptive render scale. Insurance, not the fix: the ladder only steps after // a sustained stretch of wall-clock overrun, so one GC pause or a tab switch // cannot cost resolution, and it climbs back as soon as the page is inside // budget again — the frame time this watches is the PAGE's, not this // component's, and a sibling animation blowing the budget must not soften // the micrograph for the rest of the visit. Every threshold is milliseconds // of wall clock, never frames: a frame-counted gate waits longer the slower // the machine is, which is backwards. const SCALES = [1, 0.78, 0.58]; const BUDGET_OVER = 24; let scaleIdx = 0; let frameEma = 16.7; let overMs = 0; let underMs = 0; let upWindow = 8000; // stage: an integrated position rather than a function of time, so a long // frame advances it by one clamped step instead of teleporting the specimen let stageX = 0; let stageY = 0; let panX = 0; let panY = 0; let lastPanX = 0; let lastPanY = 0; let driftVX = 0; let driftVY = 0; let sweep = 0; let passCount = 0; let hoverTarget = 0; let hoverAmt = 0; let havePointer = false; let tgtX = 0; let tgtY = 0; let ptrX = 0; let ptrY = 0; let velX = 0; let velY = 0; let lastTgtX = 0; let lastTgtY = 0; let rectLeft = 0; let rectTop = 0; let rectDirty = true; let c0: RGB = [0.03, 0.03, 0.03]; let c1: RGB = [0.18, 0.18, 0.18]; let c2: RGB = [0.56, 0.56, 0.56]; let c3: RGB = [0.93, 0.93, 0.93]; let c4: RGB = [1, 1, 1]; let bias = 0; let contrast = 1; // Five stops, and the ramp's direction is the same in both themes because // electron yield only ever climbs toward light. What the theme changes is // the exposure. Dark is the micrograph as it appears on the console: the // substrate sits low and the rims carry the whole top of the range. Light // is the same acquisition printed — the top stop is the paper, and the // substrate is lifted to a mid grey so the rims still have somewhere // brighter to go. Putting the substrate ON the paper value instead is the // wash-out: the rims lose their headroom and the one feature that makes // this read as an electron image flattens out. const readColors = () => { const cs = getComputedStyle(document.documentElement); const bg = parseHex(cs.getPropertyValue("--background")) ?? [1, 1, 1]; const fg = parseHex(cs.getPropertyValue("--foreground")) ?? [0.09, 0.09, 0.09]; const muted = parseHex(cs.getPropertyValue("--ns-muted")) ?? [0.55, 0.55, 0.55]; const border = parseHex(cs.getPropertyValue("--border")) ?? [0.18, 0.18, 0.18]; const black: RGB = [0, 0, 0]; const white: RGB = [1, 1, 1]; if (luminance(bg) < 0.5) { c0 = mixRGB(bg, black, 0.62); c1 = mixRGB(border, bg, 0.1); c2 = mixRGB(muted, fg, 0.15); c3 = fg; c4 = mixRGB(fg, white, 0.92); bias = 0.035; contrast = 1.24; } else { c0 = mixRGB(fg, black, 0.35); c1 = mixRGB(fg, muted, 0.72); c2 = mixRGB(muted, bg, 0.6); c3 = mixRGB(bg, muted, 0.08); c4 = bg; bias = 0.17; contrast = 1.26; } }; readColors(); const draw = () => { if (!surface.gl || cssW <= 0 || cssH <= 0) return; const t = staticMode ? STATIC_TIME : simTime; const ref = Math.min(cssW, cssH); // magnification breathing: the working distance creeping, slow enough // that it is felt rather than watched const view = ref * (0.82 / Math.max(0.25, magnification)) * (1 + 0.045 * Math.sin(t * 0.043)); const px = 1 / view; let sx = stageX; let sy = stageY; let lagX = driftVX; let lagY = driftVY; if (staticMode) { // a composed still: the drift integrated to a fixed point, and a lag // velocity so the sweep tear is present in the frozen frame too sx = STATIC_TIME * 0.0062; sy = STATIC_TIME * 0.0031; lagX = 0.0062; lagY = 0.0031; } sx += panX * px; sy += panY * px; surface.v2("u_size", cssW, cssH); surface.f("u_dpr", dpr); surface.f("u_time", t); surface.f("u_px", px); surface.v2("u_stage", sx, sy); surface.v2("u_lagVel", lagX, lagY); surface.f("u_rot", t * 0.0075); surface.f("u_density", Math.max(0.35, density)); surface.f("u_relief", Math.max(0, relief)); surface.f("u_noise", Math.max(0, noise)); surface.v2("u_beam", ptrX, ptrY); surface.f("u_hover", hoverAmt); surface.f("u_sweep", staticMode ? 0.63 : sweep); surface.f("u_pass", staticMode ? 7 : passCount); surface.v3("u_c0", c0); surface.v3("u_c1", c1); surface.v3("u_c2", c2); surface.v3("u_c3", c3); surface.v3("u_c4", c4); surface.f("u_bias", bias); surface.f("u_contrast", contrast); surface.draw(canvas.width, canvas.height); }; // The stage never stops: a constant drift whose heading turns slowly, so // the specimen is always moving under the beam but never on a loop the eye // can memorise. const stepStage = (dt: number) => { const a = simTime * 0.085; driftVX = 0.0072 * Math.cos(a) + 0.0016 * Math.sin(simTime * 0.31); driftVY = 0.0072 * Math.sin(a * 0.83 + 1.2) - 0.0013 * Math.cos(simTime * 0.24); stageX += driftVX * dt; stageY += driftVY * dt; }; // Advance the smoothed pointer one frame. Everything the sim sees about the // pointer is produced here, in the frame, from a target the event handlers // only ever assign to — so a 120Hz trackpad, a 60Hz mouse and a synthetic // driver all produce the same stage motion. const stepPointer = (dt: number) => { if (dt <= 0) return; if (havePointer) { const vk = 1 - Math.exp(-dt / VEL_TAU); velX += ((tgtX - lastTgtX) / dt - velX) * vk; velY += ((tgtY - lastTgtY) / dt - velY) * vk; lastTgtX = tgtX; lastTgtY = tgtY; let leadX = velX * POINTER_TAU; let leadY = velY * POINTER_TAU; const lead = Math.hypot(leadX, leadY); if (lead > LEAD_MAX) { leadX = (leadX / lead) * LEAD_MAX; leadY = (leadY / lead) * LEAD_MAX; } const k = 1 - Math.exp(-dt / POINTER_TAU); ptrX += (tgtX + leadX - ptrX) * k; ptrY += (tgtY + leadY - ptrY) * k; } // the stage translation the pointer asks for, eased on a longer constant // than the beam itself: a stage is heavy, a beam is not const want = havePointer ? 0.11 : 0; const targetPanX = -(ptrX - cssW * 0.5) * want; const targetPanY = -(ptrY - cssH * 0.5) * want; const pk = 1 - Math.exp(-dt / 0.16); lastPanX = panX; lastPanY = panY; panX += (targetPanX - panX) * pk; panY += (targetPanY - panY) * pk; // the pan contributes to the acquisition tear exactly as the drift does, // so a fast sweep of the hand visibly shears the frame at the sweep line const view = Math.min(cssW, cssH) * (0.82 / Math.max(0.25, magnification)); const pvx = ((panX - lastPanX) / dt) / view; const pvy = ((panY - lastPanY) / dt) / view; driftVX += Math.max(-0.09, Math.min(0.09, pvx)); driftVY += Math.max(-0.09, Math.min(0.09, pvy)); }; const loop = (nowMs: number) => { const rawMs = nowMs - lastMs; const dt = Math.min(0.05, Math.max(0, rawMs / 1000)); lastMs = nowMs; simTime += dt * Math.max(0, speed); hoverAmt += (hoverTarget - hoverAmt) * (1 - Math.exp(-dt * 6)); stepStage(dt * Math.max(0, speed)); stepPointer(dt); sweep += dt / SWEEP_PERIOD; while (sweep >= 1) { sweep -= 1; passCount += 1; } draw(); const clamped = Math.min(50, rawMs); frameEma += (clamped - frameEma) * (1 - Math.exp(-clamped / 120)); if (frameEma > BUDGET_OVER) { overMs += clamped; underMs = 0; } else { underMs += clamped; overMs = 0; } const down = overMs > 900 && scaleIdx < SCALES.length - 1; const up = underMs > upWindow && scaleIdx > 0; if (down || up) { scaleIdx += down ? 1 : -1; if (down) upWindow = Math.min(64000, upWindow * 2); overMs = 0; underMs = 0; frameEma = 16.7; applyBacking(); } raf = requestAnimationFrame(loop); }; const wake = () => { if (running || disposed) return; running = true; lastMs = performance.now(); raf = requestAnimationFrame(loop); }; const sleep = () => { cancelAnimationFrame(raf); running = false; }; // Full DPR 2. The high-frequency structure — shot noise, the scan comb, the // rim band — is what a reduced backing store destroys first, so anything // under 2 is the first thing this component gives away and the last thing // it should. It was capped at 1.5 for a while because the shader could not // hold 60fps at 2880x1800; that was a register-spill in the grain lattice, // not a fill-rate wall, and fixing it left the frame at ~2.8ms with the // ladder resting on its top rung. The ladder stays as insurance for // machines slower than this one, not as the thing that buys the frame rate. const applyBacking = () => { if (cssW < 2 || cssH < 2) return; dpr = Math.min(window.devicePixelRatio || 1, 2) * SCALES[scaleIdx]; const pw = Math.round(cssW * dpr); const ph = Math.round(cssH * dpr); if (canvas.width !== pw || canvas.height !== ph) { canvas.width = pw; canvas.height = ph; } canvas.style.width = `${cssW}px`; canvas.style.height = `${cssH}px`; draw(); }; const resize = () => { const rect = wrap.getBoundingClientRect(); if (rect.width < 2 || rect.height < 2) return; cssW = rect.width; cssH = rect.height; rectLeft = rect.left; rectTop = rect.top; rectDirty = false; if (!havePointer) { ptrX = cssW * 0.5; ptrY = cssH * 0.5; } // a new size is a new number of fragments, so the ladder starts over // rather than carrying a verdict earned at a different cost scaleIdx = 0; overMs = 0; underMs = 0; upWindow = 8000; frameEma = 16.7; applyBacking(); draw(); }; const syncRect = () => { if (!rectDirty) return; const rect = wrap.getBoundingClientRect(); rectLeft = rect.left; rectTop = rect.top; rectDirty = false; }; const markRectDirty = () => { rectDirty = true; }; const setTarget = (e: PointerEvent) => { syncRect(); const co = typeof e.getCoalescedEvents === "function" ? e.getCoalescedEvents() : null; const last = co && co.length > 0 ? co[co.length - 1] : e; tgtX = last.clientX - rectLeft; tgtY = last.clientY - rectTop; }; const snapPointer = () => { ptrX = tgtX; ptrY = tgtY; velX = 0; velY = 0; lastTgtX = tgtX; lastTgtY = tgtY; havePointer = true; }; const onPointerEnter = (e: PointerEvent) => { hoverTarget = 1; setTarget(e); snapPointer(); if (staticMode) draw(); }; const onPointerMove = (e: PointerEvent) => { setTarget(e); if (!havePointer) { snapPointer(); hoverTarget = 1; } if (staticMode) { // frozen frame: no loop to smooth in, so the beam is placed directly ptrX = tgtX; ptrY = tgtY; hoverAmt = 1; panX = -(ptrX - cssW * 0.5) * 0.11; panY = -(ptrY - cssH * 0.5) * 0.11; draw(); } }; const onPointerLeave = () => { hoverTarget = 0; havePointer = false; if (staticMode) { hoverAmt = 0; panX = 0; panY = 0; draw(); } }; const onPointerDown = (e: PointerEvent) => { setTarget(e); snapPointer(); hoverTarget = 1; if (staticMode) onPointerMove(e); }; const onPointerUp = (e: PointerEvent) => { // a lifted touch has no position any more and no pointerleave is coming if (e.pointerType !== "mouse") onPointerLeave(); }; if (!surface.init()) return; // no WebGL: children still render over the page bg const ro = new ResizeObserver(resize); ro.observe(wrap); resize(); wrap.addEventListener("pointerenter", onPointerEnter); wrap.addEventListener("pointerleave", onPointerLeave); wrap.addEventListener("pointermove", onPointerMove); wrap.addEventListener("pointerdown", onPointerDown); wrap.addEventListener("pointerup", onPointerUp); wrap.addEventListener("pointercancel", onPointerLeave); // the wrap's viewport offset only moves on scroll or layout, so mark it // stale here and re-read it once, on the next pointer event, instead of // forcing a layout inside every pointermove window.addEventListener("scroll", markRectDirty, { passive: true, capture: true }); window.addEventListener("resize", markRectDirty, { passive: true }); const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); let reduced = mq.matches; const applyMode = () => { if (reduced || pausedRef.current) { staticMode = true; sleep(); draw(); } else { staticMode = false; wake(); } }; const onMq = () => { reduced = mq.matches; applyMode(); }; mq.addEventListener("change", onMq); // a full-bleed shader scrolled off-screen is the most expensive idle thing // a page can carry let onScreen = true; const io = new IntersectionObserver( (entries) => { onScreen = entries.some((en) => en.isIntersecting); if (!onScreen) sleep(); else if (!staticMode && !document.hidden) wake(); }, { threshold: 0 } ); io.observe(wrap); const onVis = () => { if (document.hidden) sleep(); else if (!staticMode && onScreen) wake(); }; document.addEventListener("visibilitychange", onVis); applyMode(); // polled instead of made an effect dependency: the dependency would tear // down and recreate the whole GL context to change a boolean let lastPolledPaused = pausedRef.current; let poll = 0; const tick = () => { if (pausedRef.current !== lastPolledPaused) { lastPolledPaused = pausedRef.current; applyMode(); } poll = window.setTimeout(tick, 140); }; tick(); const themeObserver = new MutationObserver(() => { readColors(); if (staticMode) draw(); }); themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["class"], }); const onLost = (e: Event) => { e.preventDefault(); sleep(); }; const onRestored = () => { if (surface.init(true)) { resize(); applyMode(); } }; canvas.addEventListener("webglcontextlost", onLost); canvas.addEventListener("webglcontextrestored", onRestored); return () => { disposed = true; ro.disconnect(); io.disconnect(); mq.removeEventListener("change", onMq); document.removeEventListener("visibilitychange", onVis); themeObserver.disconnect(); canvas.removeEventListener("webglcontextlost", onLost); canvas.removeEventListener("webglcontextrestored", onRestored); wrap.removeEventListener("pointerenter", onPointerEnter); wrap.removeEventListener("pointerleave", onPointerLeave); wrap.removeEventListener("pointermove", onPointerMove); wrap.removeEventListener("pointerdown", onPointerDown); wrap.removeEventListener("pointerup", onPointerUp); wrap.removeEventListener("pointercancel", onPointerLeave); window.removeEventListener("scroll", markRectDirty, { capture: true, } as EventListenerOptions); window.removeEventListener("resize", markRectDirty); window.clearTimeout(poll); sleep(); // 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 panels 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 panel. const lose = surface.gl?.getExtension("WEBGL_lose_context"); surface.destroy(); if (!canvas.isConnected) lose?.loseContext(); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [magnification, density, relief, noise, speed]); return (

); } EdgeYield.displayName = "EdgeYield"; 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"}]]}]]}],["$","$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)"}]]}]]}],["$","$L66",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L67",null,{"files":[{"path":"registry/loud/edge-yield/component.tsx","content":"$68","type":"registry:ui","target":"components/ui/edge-yield.tsx"}],"className":"h-[70svh] min-h-80"}]]}]