@boyernick/standard-ui-react 0.4.2-canary.66 → 0.4.2-canary.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boyernick/standard-ui-react",
-  "version": "0.4.2-canary.66",
+  "version": "0.4.2-canary.68",
   "description": "React components for StandardUI",
   "license": "MIT",
   "type": "module",

package/src/lib/lens-glass/config.ts

@@ -18,6 +18,14 @@ export interface GlassConfig {
   rim?: number;
   /** Rim light width. Default 3.5, less on small panes. */
   rimWidth?: number;
+  /**
+   * A hairline shade just inside the outline. On a light page the rim light
+   * has nothing to brighten, so without it a pane's only edge is its soft
+   * shadow. Any edge also turns the border into an angled gradient: rim and
+   * hairline are strongest at the top-left and bottom-right corners and fade
+   * toward the other two. Default 0.22 over a light ground, 0 over a dark one.
+   */
+  edge?: number;
   /** Specular sheen on the lit side of the bezel. Default 0.35. */
   specular?: number;
   /** Frost blur, as a Gaussian sigma. Default 3. */
@@ -94,6 +102,7 @@ export interface ResolvedGlass {
   dispersionBlue: number;
   rim: number;
   rimWidth: number;
+  edge: number;
   specular: number;
   frost: number;
   grain: number;
@@ -144,6 +153,7 @@ export function resolveGlass(
     dispersionBlue: pick(config.dispersionBlue, 0.8, 0, 1),
     rim: pick(config.rim, 0.5, 0, 2),
     rimWidth: pick(config.rimWidth, Math.min(3.5, Math.max(1.25, short * 0.04)), 0.5, 12),
+    edge: pick(config.edge, options?.lightGround ? 0.22 : 0, 0, 1),
     specular: pick(config.specular, 0.35, 0, 2),
     frost: pick(config.frost, 3, 0, 16),
     grain: pick(config.grain, 0.07, 0, 0.5),

package/src/lib/lens-glass/renderer.ts

@@ -765,7 +765,7 @@ export function createLensGlass({ root, glassElements, defaults = {} }: LensGlas
       ["u_radius", glass.radius], ["u_power", glass.power], ["u_bezel", glass.bezel],
       ["u_bend", glass.bend], ["u_dispersionRed", glass.dispersionRed],
       ["u_dispersionBlue", glass.dispersionBlue], ["u_rim", glass.rim],
-      ["u_rimWidth", glass.rimWidth], ["u_specular", glass.specular], ["u_frost", glass.frost],
+      ["u_rimWidth", glass.rimWidth], ["u_edge", glass.edge], ["u_specular", glass.specular], ["u_frost", glass.frost],
       ["u_grain", glass.grain], ["u_dim", glass.dim], ["u_fadeStart", glass.fadeStart],
       ["u_fadeEnd", glass.fadeEnd], ["u_shadow", glass.shadow],
       ["u_hover", glass.button ? pane.hover : 0], ["u_press", glass.button ? pane.press : 0],

package/src/lib/lens-glass/shader.ts

@@ -31,6 +31,7 @@ uniform float u_dispersionRed;
 uniform float u_dispersionBlue;
 uniform float u_rim;
 uniform float u_rimWidth;
+uniform float u_edge;
 uniform float u_specular;
 uniform float u_frost;
 uniform float u_grain;
@@ -117,14 +118,29 @@ void main() {
   );
   color *= u_dim + 0.06 * u_hover;
 
+  // Where the edge sits on the diagonal through the lit corner: 1 at the top
+  // left and bottom right, 0 at the other two corners. Over a light ground the
+  // rim and hairline follow it, so the border runs as an angled gradient
+  // rather than an even ring.
+  float diagonal = dot(n, normalize(vec2(-1.0, -1.0)));
+  float angled = pow(abs(diagonal), 1.5);
+  float lightGround = step(0.001, u_edge);
+
   // Rim light, strongest where the edge faces the light (top left), and a
   // sheen across the lit side of the bezel.
   vec2 light = normalize(vec2(-0.55, -1.0));
   float facing = max(dot(n, light), 0.0);
   float rim = 1.0 - smoothstep(0.0, u_rimWidth, inside);
-  color += u_rim * (1.0 + 0.4 * u_hover) * rim * (0.55 + 0.45 * facing);
+  float rimShape = mix(0.55 + 0.45 * facing, 0.1 + 0.9 * angled * (diagonal > 0.0 ? 1.0 : 0.7), lightGround);
+  color += u_rim * (1.0 + 0.4 * u_hover) * rim * rimShape;
   color += u_specular * 0.35 * pow(t, 3.0) * facing;
 
+  // Hairline edge: a light ground clips the rim to white, so shade one CSS
+  // pixel inside the outline too, deepest at the bottom right.
+  float hairline = 1.0 - smoothstep(0.0, 1.0, inside);
+  float shade = (0.2 + 0.8 * angled) * (diagonal > 0.0 ? 0.65 : 1.0);
+  color = min(color, vec3(1.0)) * (1.0 - u_edge * hairline * shade);
+
   // Grain, fixed to the device pixel grid so a still pane never needs redrawing.
   color += (hash(floor(scenePx * u_dpr)) - 0.5) * u_grain;