@fusion.dev/helix 0.173.0 → 0.174.0

package/custom-elements.json

@@ -195529,7 +195529,7 @@
               "description": "Turns a resolved color into bytes, `undefined` where it cannot."
             }
           ],
-          "description": "The palette, from the colors the canvas's stylesheet resolved for it.\n\n**Carried on color properties of the canvas, which a canvas never paints**,\nthe way `Aura` carries its ramp: a custom property is handed back as the\ntext that was written, and a color property is resolved by the engine first.\nRead there, each color takes the `--strands-*` hook a page wrote anywhere\nabove the element, and the token otherwise:\n\n- `color`: `--strands-glow`, or `primary`.\n- `text-decoration-color`: `--strands-tint`, or `info`.\n- `outline-color`: `--strands-ground`, or the background.\n- `caret-color` and `column-rule-color`: `--strands-peak`, or the dark and\n  the light page's own peak.\n\n**The ground says which way the page runs**, read from its luminance rather\nthan asked of the color mode, which is a private token this tier may not\nreach for. A dark page adds light toward a bright peak; a light page darkens\ntoward a deep one, because light added to near-white is invisible."
+          "description": "The palette, from the colors the canvas's stylesheet resolved for it.\n\n**Carried on color properties of the canvas, which a canvas never paints**,\nthe way `Aura` carries its ramp: a custom property is handed back as the\ntext that was written, and a color property is resolved by the engine first.\nRead there, each color takes the `--strands-*` hook a page wrote anywhere\nabove the element, and the token otherwise:\n\n- `color`: `--strands-glow`, or `primary`.\n- `text-decoration-color`: `--strands-tint`, or `accent`.\n- `outline-color`: `--strands-ground`, or the background.\n- `caret-color` and `column-rule-color`: `--strands-peak`, or the dark and\n  the light page's own peak.\n\n**The ground says which way the page runs**, read from its luminance rather\nthan asked of the color mode, which is a private token this tier may not\nreach for. A dark page adds light toward a bright peak; a light page darkens\ntoward a deep one, because light added to near-white is invisible."
         }
       ],
       "exports": [
@@ -195564,6 +195564,15 @@
           "default": "96",
           "description": "The most points a path may carry, which is the length of the shader's\nuniform array.\n\nWebGL2 guarantees 256 vertex uniform vectors, and this takes 96 of them. A\npage-long ribbon spends one point per half screen, so 96 covers a page more\nthan forty screens long; a longer one keeps its first 96 points and fades."
         },
+        {
+          "kind": "variable",
+          "name": "TURN",
+          "type": {
+            "text": "number"
+          },
+          "default": "0.5",
+          "description": "The tightest any form turns, as a share of the box's height: the radius of\nits sharpest curve.\n\nHalf the height. A bend's apex a few dozen pixels round kinked the strands\nthat ran along its inside, and read as a fold in the light where every form\nis meant to be one sweep. `path.pure.spec.ts` measures it on every form."
+        },
         {
           "kind": "function",
           "name": "boxPath",
@@ -195592,7 +195601,14 @@
               "type": {
                 "text": "number"
               },
-              "description": "The box's height, in CSS pixels. Its width needs no argument: `x` is a share of it."
+              "description": "The box's height, in CSS pixels."
+            },
+            {
+              "name": "width",
+              "type": {
+                "text": "number"
+              },
+              "description": "The box's width, in CSS pixels. `x` is a share of it, and a bend's apex is drawn in pixels so it keeps its radius at any shape."
             }
           ],
           "description": "The ribbon drawn inside its own box, which is what an element without\n`travel` shows."
@@ -195642,7 +195658,7 @@
               "description": "The page's height, in CSS pixels."
             }
           ],
-          "description": "The ribbon laid down a whole page, which is what an element with `travel`\nshows.\n\nEach stop places its form at its target, in page order. Between two stops\nthe ribbon fills the gap with soft S-curves in `fill`'s place, except\nbetween two waves, where it turns off screen so each wave reads alone.\nWithout stops, `fill` runs the length of the page: a fan opens the page and\na ribbon follows it, waves cross every screen and a third, and a ribbon\nmeanders the whole way. After a last wave the ribbon does not come back, so\nthe page ends on the wave."
+          "description": "The ribbon laid down a whole page, which is what an element with `travel`\nshows.\n\nEach stop places its form at its target, in page order. Between two stops\nthe ribbon fills the gap with soft S-curves in `fill`'s place, except\nbetween two waves less than a screen and a half apart, where it turns off\nscreen so each wave reads alone.\nWithout stops, `fill` runs the length of the page: a bend opens the page and\na ribbon follows it, waves cross every screen and a third, and a ribbon\nmeanders the whole way. After a last wave the ribbon does not come back, so\nthe page ends on the wave."
         },
         {
           "kind": "function",
@@ -195744,6 +195760,14 @@
             "module": "src/strands/path.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "TURN",
+          "declaration": {
+            "name": "TURN",
+            "module": "src/strands/path.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "boxPath",
@@ -195808,6 +195832,20 @@
           "default": "60",
           "description": "The fewest, at `density` 0. Fewer stops reading as a ribbon at all."
         },
+        {
+          "kind": "variable",
+          "name": "DUST",
+          "type": {
+            "text": "number"
+          },
+          "default": "600",
+          "description": "Specks of dust around the strands at a `dust` of `1`."
+        },
+        {
+          "kind": "variable",
+          "name": "MAX_DUST",
+          "description": "The most specks a frame draws, at a `dust` of `4`."
+        },
         {
           "kind": "class",
           "description": "The pipeline, on one context: strands and dust added into a float buffer,\ntwo levels of bloom, and the composite over the page color.\n\n**Created whole or not at all.** `create` answers `null` when any program\nfails to link, so the element has one question to ask and one fallback to\ntake, and never draws half a pipeline.\n\n**Float buffers where the GPU offers them, and eight bits where it does not.**\nLight is added strand by strand, and a hot bend sums far past `1`; an eight\nbit buffer clips it, so there the energy is scaled down on the way in and\nback up in the composite, which keeps the bend hot at the cost of some\ngradation in the dimmest strands.",
@@ -196236,6 +196274,22 @@
             "module": "src/strands/renderer.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "DUST",
+          "declaration": {
+            "name": "DUST",
+            "module": "src/strands/renderer.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MAX_DUST",
+          "declaration": {
+            "name": "MAX_DUST",
+            "module": "src/strands/renderer.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "StrandsRenderer",
@@ -196272,7 +196326,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Hundreds of thin strands are drawn as one ribbon, and the light they add\ntogether is bloomed, so where they converge the ribbon burns hot. The ribbon\nmoves on its own all the time: it sways and breathes, its strands wave and\nroll over one another, and light runs along them.\n\nIts palette comes from the tokens. The strands are `--helix-color-primary`,\na few are `--helix-color-info` for depth, and the page they light is\n`--helix-color-background`. On a light page the light becomes ink, because\nlight added to near-white cannot be seen.\n\n**Three forms, set with `variant`.** `fan` is a tight, bright bend with its\narms opening to the right. `ribbon`, the default, is a broad, soft ribbon in\nlong curves. `waves` is sharp strands crossing the full width.\n\n**In its own box, by default.** The element fills the box it is given, the\nway an image does, and `at` places the fan's bend or the ribbon's axis across\nit. Content placed inside sits over the ribbon, in the `content` part.\n\n**Down the whole page, with `travel`.** The element fixes itself behind the\npage, on `--helix-layer-beneath`, and lays one ribbon from the top of the page to the\nbottom, so scrolling travels along it. Put `helix-strands-stop` elements\ninside to pin a form to a section: each names an element with `for` and says\nwhich form the ribbon takes there. Between stops the ribbon fills the gap in\nits own `variant`, and between two waves it turns off screen so each wave\nreads alone. Set `z-index` on the element to move it.\n\nThe ribbon stops moving in these cases:\n- `prefers-reduced-motion` is set. The element shows one still frame, and in\n  `travel` still follows the scroll, without easing.\n- The element is off screen or in a background tab.\n\nIt shows a gradient from the same tokens in these cases, and matches\n`:state(fallback)` and sends `helix-strands-fallback` with the reason:\n- The renderer draws on the CPU, such as a headless browser or a machine with\n  no usable GPU.\n- There is no WebGL, or the browser took the drawing context back.\n\nStrands is styled only and has behavior, as `Aura` does: its behavior is\ndrawing to a canvas, so there is no structure for a headless version to hold.",
+          "description": "Hundreds of thin strands are drawn as one ribbon, and the light they add\ntogether is bloomed, so where they converge the ribbon burns hot. The ribbon\nmoves on its own all the time: it sways and breathes, its strands wave and\nroll over one another, and light runs along them.\n\nIts palette comes from the tokens. The strands are `--helix-color-primary`,\na few are `--helix-color-accent` for depth, and the page they light is\n`--helix-color-background`. On a light page the light becomes ink, because\nlight added to near-white cannot be seen.\n\n**Three forms, set with `variant`.** `bend` turns bright strands through one tight point, with its\narms opening to the right. `ribbon`, the default, is a broad, soft ribbon in\nlong curves. `waves` is sharp strands crossing the full width.\n\n**In its own box, by default.** The element fills the box it is given, the\nway an image does, and `at` places the bend's apex or the ribbon's axis across\nit. Content placed inside sits over the ribbon, in the `content` part.\n\n**Down the whole page, with `travel`.** The element fixes itself behind the\npage, on `--helix-layer-beneath`, and lays one ribbon from the top of the page to the\nbottom, so scrolling travels along it. Put `helix-strands-stop` elements\ninside to pin a form to a section: each names an element with `for` and says\nwhich form the ribbon takes there. Between stops the ribbon fills the gap in\nits own `variant`, and between two waves less than a screen and a half\napart it turns off screen so each wave reads alone. Set `z-index` on the\nelement to move it.\n\nThe ribbon stops moving in these cases:\n- `prefers-reduced-motion` is set. The element shows one still frame, and in\n  `travel` still follows the scroll, without easing.\n- The element is off screen or in a background tab.\n\nIt shows a gradient from the same tokens in these cases, and matches\n`:state(fallback)` and sends `helix-strands-fallback` with the reason:\n- The renderer draws on the CPU, such as a headless browser or a machine with\n  no usable GPU.\n- There is no WebGL, or the browser took the drawing context back.\n\nStrands is styled only and has behavior, as `Aura` does: its behavior is\ndrawing to a canvas, so there is no structure for a headless version to hold.",
           "name": "HelixStrands",
           "cssProperties": [
             {
@@ -196288,7 +196342,7 @@
               "name": "--strands-peak"
             },
             {
-              "description": "The color of a few strands, for depth. Defaults to `--helix-color-info`.",
+              "description": "The color of a few strands, for depth. Defaults to `--helix-color-accent`, which is the primary itself unless the theme relates an accent to the brand, as `accent: { from: 'brand', rotate: 40 }` does.",
               "name": "--strands-tint"
             }
           ],
@@ -196315,9 +196369,29 @@
               "type": {
                 "text": "number | undefined"
               },
-              "description": "Where the form sits across the box, as a share of the width: the fan's\nbend or the ribbon's axis. `0` is the left edge and `1` the right. A wave\ncrosses the whole width and does not read it. Unset, a fan bends at `0.4`\nand a ribbon runs down the middle.\n\n**A share rather than a length**, so the ribbon keeps its place when the\nbox changes shape. Read inside a box only; in `travel` each stop has its\nown.",
+              "description": "Where the form sits across the box, as a share of the width: the bend's\napex or the ribbon's axis. `0` is the left edge and `1` the right. A wave\ncrosses the whole width and does not read it. Unset, a bend's apex sits at `0.5`\nand a ribbon runs down the middle.\n\n**A share rather than a length**, so the ribbon keeps its place when the\nbox changes shape. Read inside a box only; in `travel` each stop has its\nown.",
               "attribute": "at"
             },
+            {
+              "kind": "field",
+              "name": "bloom",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "How much the glow around the strands adds, as a multiplier. `0` draws the\nstrands alone, crisp and dimmer, and `1` is the default glow.",
+              "attribute": "bloom"
+            },
+            {
+              "kind": "field",
+              "name": "contrast",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "How far apart the brightest and dimmest strands are, from `0`, most of\nthem alike, to `1`, a few burning bright over many faint ones. Clamped to\nthat range. The ribbon as a whole keeps its strength.",
+              "attribute": "contrast"
+            },
             {
               "kind": "field",
               "name": "density",
@@ -196328,6 +196402,36 @@
               "description": "How many strands the ribbon has, from `0`, sixty, to `1`, three hundred and\nforty. Clamped to that range.",
               "attribute": "density"
             },
+            {
+              "kind": "field",
+              "name": "depth",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "How much the ribbon's depth shows, from `0`, flat, to `1`. Clamped to that\nrange. The strands at the front of the ribbon's roll are drawn thicker,\nbrighter, and further from its axis, and those at the back thinner, dimmer,\nand out of focus.",
+              "attribute": "depth"
+            },
+            {
+              "kind": "field",
+              "name": "drift",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "How differently each strand moves, from `0`, the whole ribbon rolling and\nwaving as one, to `1`, each strand at its own pace and angle, crossing\nover the others. Clamped to that range.",
+              "attribute": "drift"
+            },
+            {
+              "kind": "field",
+              "name": "dust",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "How many specks of dust drift around the strands, as a multiplier: `0`\ndraws none, `1` six hundred, and `4`, the most, two thousand four\nhundred. They gather where the ribbon is brightest.",
+              "attribute": "dust"
+            },
             {
               "kind": "field",
               "name": "gain",
@@ -196344,8 +196448,8 @@
               "type": {
                 "text": "number"
               },
-              "default": "0.55",
-              "description": "The share of strands drawn out of focus where the ribbon is wide, from `0`,\nevery strand sharp, to `1`, every one soft. Clamped to that range. A tight\nform, such as a fan's bend or a wave, stays sharp whatever this says.",
+              "default": "0",
+              "description": "The share of strands drawn out of focus where the ribbon is wide, from `0`,\nevery strand sharp, to `1`, every one soft. Clamped to that range. A tight\nform, such as a bend's apex or a wave, stays sharp whatever this says.",
               "attribute": "softness"
             },
             {
@@ -196383,7 +196487,7 @@
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "'fan' | 'ribbon' | 'waves' | undefined"
+                "text": "'bend' | 'ribbon' | 'waves' | undefined"
               },
               "description": "The form the ribbon takes. When it is not set, the form is `ribbon`. In\n`travel`, the form of every stretch no stop claims.",
               "attribute": "variant"
@@ -197217,9 +197321,27 @@
               "type": {
                 "text": "number | undefined"
               },
-              "description": "Where the form sits across the box, as a share of the width: the fan's\nbend or the ribbon's axis. `0` is the left edge and `1` the right. A wave\ncrosses the whole width and does not read it. Unset, a fan bends at `0.4`\nand a ribbon runs down the middle.\n\n**A share rather than a length**, so the ribbon keeps its place when the\nbox changes shape. Read inside a box only; in `travel` each stop has its\nown.",
+              "description": "Where the form sits across the box, as a share of the width: the bend's\napex or the ribbon's axis. `0` is the left edge and `1` the right. A wave\ncrosses the whole width and does not read it. Unset, a bend's apex sits at `0.5`\nand a ribbon runs down the middle.\n\n**A share rather than a length**, so the ribbon keeps its place when the\nbox changes shape. Read inside a box only; in `travel` each stop has its\nown.",
               "fieldName": "at"
             },
+            {
+              "name": "bloom",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "How much the glow around the strands adds, as a multiplier. `0` draws the\nstrands alone, crisp and dimmer, and `1` is the default glow.",
+              "fieldName": "bloom"
+            },
+            {
+              "name": "contrast",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "How far apart the brightest and dimmest strands are, from `0`, most of\nthem alike, to `1`, a few burning bright over many faint ones. Clamped to\nthat range. The ribbon as a whole keeps its strength.",
+              "fieldName": "contrast"
+            },
             {
               "name": "density",
               "type": {
@@ -197229,6 +197351,33 @@
               "description": "How many strands the ribbon has, from `0`, sixty, to `1`, three hundred and\nforty. Clamped to that range.",
               "fieldName": "density"
             },
+            {
+              "name": "depth",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "How much the ribbon's depth shows, from `0`, flat, to `1`. Clamped to that\nrange. The strands at the front of the ribbon's roll are drawn thicker,\nbrighter, and further from its axis, and those at the back thinner, dimmer,\nand out of focus.",
+              "fieldName": "depth"
+            },
+            {
+              "name": "drift",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "How differently each strand moves, from `0`, the whole ribbon rolling and\nwaving as one, to `1`, each strand at its own pace and angle, crossing\nover the others. Clamped to that range.",
+              "fieldName": "drift"
+            },
+            {
+              "name": "dust",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "How many specks of dust drift around the strands, as a multiplier: `0`\ndraws none, `1` six hundred, and `4`, the most, two thousand four\nhundred. They gather where the ribbon is brightest.",
+              "fieldName": "dust"
+            },
             {
               "name": "gain",
               "type": {
@@ -197243,8 +197392,8 @@
               "type": {
                 "text": "number"
               },
-              "default": "0.55",
-              "description": "The share of strands drawn out of focus where the ribbon is wide, from `0`,\nevery strand sharp, to `1`, every one soft. Clamped to that range. A tight\nform, such as a fan's bend or a wave, stays sharp whatever this says.",
+              "default": "0",
+              "description": "The share of strands drawn out of focus where the ribbon is wide, from `0`,\nevery strand sharp, to `1`, every one soft. Clamped to that range. A tight\nform, such as a bend's apex or a wave, stays sharp whatever this says.",
               "fieldName": "softness"
             },
             {
@@ -197277,7 +197426,7 @@
             {
               "name": "variant",
               "type": {
-                "text": "'fan' | 'ribbon' | 'waves' | undefined"
+                "text": "'bend' | 'ribbon' | 'waves' | undefined"
               },
               "description": "The form the ribbon takes. When it is not set, the form is `ribbon`. In\n`travel`, the form of every stretch no stop claims.",
               "fieldName": "variant"
@@ -197322,7 +197471,7 @@
                 "slug": "preview"
               },
               {
-                "description": "A fan bending at a quarter of the width, and another at three quarters.",
+                "description": "A bend turning at a quarter of the width, and another at three quarters.",
                 "slug": "at"
               },
               {
@@ -197334,11 +197483,15 @@
                 "slug": "density-and-softness"
               },
               {
-                "description": "One ribbon down the whole page: a fan through the opening section, soft ribbon after it, and a wave above the last section.",
+                "description": "A flat ribbon that moves as one beside the default, deep one, whose strands each move their own way.",
+                "slug": "depth-and-motion"
+              },
+              {
+                "description": "One ribbon down the whole page: a bend through the opening section, soft ribbon after it, and a wave above the last section.",
                 "slug": "travel"
               },
               {
-                "description": "The three forms: a bright fan, a soft ribbon, and sharp waves.",
+                "description": "The three forms: a bright bend, a soft ribbon, and sharp waves.",
                 "slug": "variants"
               }
             ],
@@ -197376,7 +197529,7 @@
         {
           "kind": "variable",
           "name": "LINE_VERTEX",
-          "default": "`#version 300 es layout(location = 0) in vec2 aVert; layout(location = 1) in float aId; uniform float uDpr; uniform float uSoftness; uniform vec3 uGlow; uniform vec3 uTint; uniform vec3 uPeak; out float vSide; out vec3 vColor; ${PATH} void main() { float id = aId; float r5 = h1(id + 7.77); float r6 = h1(id + 9.19); float r7 = h1(id + 11.3); float t = mix(uT.x, uT.y, aVert.x); vec3 info; vec3 unused; vec3 a = strandAt(id, t, info); vec3 b = strandAt(id, t + (uT.y - uT.x) / 700.0, unused); vec2 tg = b.xy - a.xy; tg = length(tg) > 1e-4 ? normalize(tg) : vec2(0.0, 1.0); vec2 nrm = vec2(-tg.y, tg.x); float soft = smoothstep(0.06, 0.28, info.y) * step(1.0 - uSoftness, r6); float base = mix(0.35, 1.3, r7 * r7) * uDpr * (1.0 + 0.3 * a.z); float w = max(base + soft * mix(8.0, 36.0, r6) * uDpr, 1.0); float drawW = w + 2.5 * uDpr; vec2 res = uView * uDpr; vec2 px = a.xy * uDpr + nrm * aVert.y * drawW * 0.5; gl_Position = vec4(px.x / res.x * 2.0 - 1.0, 1.0 - px.y / res.y * 2.0, 0.0, 1.0); vSide = aVert.y * drawW / w; float shimmer = 0.5 + 0.5 * sin(info.z * 0.044 - uTime * (2.0 + 2.0 * r5) + r6 * 6.283); shimmer *= shimmer; float bright = mix(0.25, 1.0, pow(r5, 1.4)); float energy = min(base, w) / w; float depth = 0.7 + 0.3 * a.z; vec3 col = mix(uGlow, uTint, step(0.83, r6) * 0.9); col = mix(col, uPeak, step(0.93, r7) * 0.6); vColor = col * energy * info.x * (0.35 + 0.65 * shimmer) * bright * depth; } `",
+          "default": "`#version 300 es layout(location = 0) in vec2 aVert; layout(location = 1) in float aId; uniform float uDpr; uniform float uSoftness; uniform float uContrast; uniform vec3 uGlow; uniform vec3 uTint; uniform vec3 uPeak; out float vSide; out vec3 vColor; ${PATH} void main() { float id = aId; float r5 = h1(id + 7.77); float r6 = h1(id + 9.19); float r7 = h1(id + 11.3); float t = mix(uT.x, uT.y, aVert.x); vec3 info; vec3 unused; vec3 a = strandAt(id, t, info); vec3 b = strandAt(id, t + (uT.y - uT.x) / 700.0, unused); vec2 tg = b.xy - a.xy; tg = length(tg) > 1e-4 ? normalize(tg) : vec2(0.0, 1.0); vec2 nrm = vec2(-tg.y, tg.x); float soft = smoothstep(0.06, 0.28, info.y) * step(1.0 - uSoftness, r6); /* Nearer is thicker, and the back of the ribbon falls out of focus: wider at the same energy, so it reads as haze behind the sharp strands. */ float base = mix(0.35, 1.3, r7 * r7) * uDpr * (1.0 + (0.3 + 0.5 * uDepth) * a.z); float focus = uDepth * smoothstep(-0.1, -0.9, a.z) * 10.0 * uDpr; float w = max(base + soft * mix(8.0, 36.0, r6) * uDpr + focus, 1.0); float drawW = w + 2.5 * uDpr; vec2 res = uView * uDpr; vec2 px = a.xy * uDpr + nrm * aVert.y * drawW * 0.5; gl_Position = vec4(px.x / res.x * 2.0 - 1.0, 1.0 - px.y / res.y * 2.0, 0.0, 1.0); vSide = aVert.y * drawW / w; float shimmer = 0.5 + 0.5 * sin(info.z * 0.044 - uTime * (2.0 + 2.0 * r5) + r6 * 6.283); shimmer *= shimmer; /* Contrast spreads the strands' brightness: a few burn and most fall back. The mean is held, so the ribbon as a whole keeps its strength. */ float spread = mix(1.4, 4.5, uContrast); float least = mix(0.25, 0.04, uContrast); float bright = mix(least, 1.0, pow(r5, spread)) * 0.5625 / (least + (1.0 - least) / (spread + 1.0)); float energy = min(base, w) / w; float fall = 0.3 + 0.5 * uDepth; float depth = (1.0 - fall * (1.0 - a.z) * 0.5) / (1.0 - fall * 0.5); float rest = mix(0.35, 0.15, uContrast); vec3 col = mix(uGlow, uTint, step(0.83, r6) * 0.9); col = mix(col, uPeak, step(0.93, r7) * 0.6); vColor = col * energy * info.x * (rest + (1.0 - rest) * shimmer) * bright * depth; } `",
           "description": "Each strand as a ribbon of quads, wide enough to anti-alias and to blur."
         },
         {
@@ -197388,7 +197541,7 @@
         {
           "kind": "variable",
           "name": "DUST_VERTEX",
-          "default": "`#version 300 es uniform float uDpr; uniform float uStrands; uniform vec3 uGlow; uniform vec3 uPeak; out vec3 vColor; ${PATH} void main() { float id = float(gl_VertexID); float sid = floor(h1(id + 0.5) * uStrands); float r = h1(id + 2.3); float r2 = h1(id + 4.1); float t = mix(uT.x, uT.y, fract(r + uTime * 0.003 * (0.3 + r2))); vec3 info; vec3 a = strandAt(sid, t, info); vec2 off = (vec2(h1(id + 6.1), h1(id + 8.3)) - 0.5) * (24.0 + (150.0 + info.y * uView.x) * h1(id + 9.7)); vec2 res = uView * uDpr; vec2 px = (a.xy + off) * uDpr; gl_Position = vec4(px.x / res.x * 2.0 - 1.0, 1.0 - px.y / res.y * 2.0, 0.0, 1.0); gl_PointSize = mix(1.2, 3.4, r2 * r2) * uDpr; float tw = 0.35 + 0.65 * (0.5 + 0.5 * sin(uTime * (0.5 + 1.8 * r) + r2 * 40.0)); vColor = mix(uGlow, uPeak, 0.55) * tw * mix(0.2, 0.9, r) * info.x * 0.8; } `",
+          "default": "`#version 300 es uniform float uDpr; uniform float uStrands; uniform vec3 uGlow; uniform vec3 uPeak; out vec3 vColor; ${PATH} void main() { float id = float(gl_VertexID); float sid = floor(h1(id + 0.5) * uStrands); float r = h1(id + 2.3); float r2 = h1(id + 4.1); float t = mix(uT.x, uT.y, fract(r + uTime * 0.003 * (0.3 + r2))); vec3 info; vec3 a = strandAt(sid, t, info); vec2 off = (vec2(h1(id + 6.1), h1(id + 8.3)) - 0.5) * (24.0 + (150.0 + info.y * uView.x) * h1(id + 9.7)); vec2 res = uView * uDpr; vec2 px = (a.xy + off) * uDpr; gl_Position = vec4(px.x / res.x * 2.0 - 1.0, 1.0 - px.y / res.y * 2.0, 0.0, 1.0); gl_PointSize = mix(1.2, 3.4, r2 * r2) * uDpr; float tw = 0.35 + 0.65 * (0.5 + 0.5 * sin(uTime * (0.5 + 1.8 * r) + r2 * 40.0)); /* By the root of the ribbon's brightness, so specks show along a dim ribbon as well as round a bright bend. */ vColor = mix(uGlow, uPeak, 0.55) * tw * mix(0.2, 0.9, r) * sqrt(info.x) * 0.8; } `",
           "description": "Specks drifting along the strands, thickest where the ribbon is bright."
         },
         {
@@ -197417,7 +197570,7 @@
         {
           "kind": "variable",
           "name": "COMPOSITE_FRAGMENT",
-          "default": "`#version 300 es precision highp float; in vec2 vUv; uniform sampler2D uScene; uniform sampler2D uNear; uniform sampler2D uFar; uniform vec3 uGround; uniform vec3 uInk; uniform float uLight; uniform float uGain; out vec4 outColor; float hash(vec2 p) { return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); } void main() { vec3 e = texture(uScene, vUv).rgb + texture(uNear, vUv).rgb * 1.1 + texture(uFar, vUv).rgb * 0.9; e *= uGain; vec3 dark = 1.0 - (1.0 - uGround) * exp(-e); float lum = dot(e, vec3(0.3, 0.55, 0.15)); vec3 light = mix(uGround, uInk, 1.0 - exp(-lum * 1.4)); vec3 c = mix(dark, light, uLight); c += (hash(gl_FragCoord.xy) - 0.5) / 255.0; outColor = vec4(c, 1.0); } `",
+          "default": "`#version 300 es precision highp float; in vec2 vUv; uniform sampler2D uScene; uniform sampler2D uNear; uniform sampler2D uFar; uniform vec3 uGround; uniform vec3 uInk; uniform float uLight; uniform float uGain; uniform float uBloom; out vec4 outColor; float hash(vec2 p) { return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); } void main() { vec3 e = texture(uScene, vUv).rgb + (texture(uNear, vUv).rgb * 1.1 + texture(uFar, vUv).rgb * 0.9) * uBloom; e *= uGain; vec3 dark = 1.0 - (1.0 - uGround) * exp(-e); float lum = dot(e, vec3(0.3, 0.55, 0.15)); vec3 light = mix(uGround, uInk, 1.0 - exp(-lum * 1.4)); vec3 c = mix(dark, light, uLight); c += (hash(gl_FragCoord.xy) - 0.5) / 255.0; outColor = vec4(c, 1.0); } `",
           "description": "The light and its bloom over the page color.\n\nOn a dark page the light is screened onto the ground, so it saturates to\nthe peak rather than clipping. On a light page added light is invisible, so\nthe same energy darkens the ground toward the peak as ink. A step of noise\nunder a code value hides the banding a slow gradient shows on eight bits."
         }
       ],
@@ -197514,7 +197667,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Placed inside a `helix-strands` with `travel`, a stop names an element with\n`for` and says which form the ribbon takes when the page reaches it: a `fan`\nbending through it, a `ribbon` passing through `at`, or `waves` crossing at\nits top edge. The stops are read in page order, whatever order they are\nwritten in, and a stop naming no element is skipped.\n\nA stop draws nothing itself and is never shown.\n\n**Every property is reflected**, because the parent watches its stops'\nattributes to lay the ribbon out again: a change made from script reaches the\npage as a change made in markup does. None has a default, so a stop writes\nnothing it was not given.",
+          "description": "Placed inside a `helix-strands` with `travel`, a stop names an element with\n`for` and says which form the ribbon takes when the page reaches it: a `bend`\nturning through it, a `ribbon` passing through `at`, or `waves` crossing at\nits top edge. The stops are read in page order, whatever order they are\nwritten in, and a stop naming no element is skipped.\n\nA stop draws nothing itself and is never shown.\n\n**Every property is reflected**, because the parent watches its stops'\nattributes to lay the ribbon out again: a change made from script reaches the\npage as a change made in markup does. None has a default, so a stop writes\nnothing it was not given.",
           "name": "HelixStrandsStop",
           "members": [
             {
@@ -197523,7 +197676,7 @@
               "type": {
                 "text": "number | undefined"
               },
-              "description": "Where the form sits across the page, as a share of the width: the fan's\nbend or the ribbon's axis. A wave crosses the whole width and does not\nread it. Unset, a fan bends at `0.4` and a ribbon runs down the middle.",
+              "description": "Where the form sits across the page, as a share of the width: the bend's\napex or the ribbon's axis. A wave crosses the whole width and does not\nread it. Unset, a bend's apex sits at `0.5` and a ribbon runs down the middle.",
               "attribute": "at",
               "reflects": true
             },
@@ -197541,7 +197694,7 @@
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "'fan' | 'ribbon' | 'waves' | undefined"
+                "text": "'bend' | 'ribbon' | 'waves' | undefined"
               },
               "description": "The form the ribbon takes at the element. When it is not set, the form is `ribbon`.",
               "attribute": "variant",
@@ -197893,7 +198046,7 @@
               "type": {
                 "text": "number | undefined"
               },
-              "description": "Where the form sits across the page, as a share of the width: the fan's\nbend or the ribbon's axis. A wave crosses the whole width and does not\nread it. Unset, a fan bends at `0.4` and a ribbon runs down the middle.",
+              "description": "Where the form sits across the page, as a share of the width: the bend's\napex or the ribbon's axis. A wave crosses the whole width and does not\nread it. Unset, a bend's apex sits at `0.5` and a ribbon runs down the middle.",
               "fieldName": "at"
             },
             {
@@ -197907,7 +198060,7 @@
             {
               "name": "variant",
               "type": {
-                "text": "'fan' | 'ribbon' | 'waves' | undefined"
+                "text": "'bend' | 'ribbon' | 'waves' | undefined"
               },
               "description": "The form the ribbon takes at the element. When it is not set, the form is `ribbon`.",
               "fieldName": "variant"
@@ -249123,6 +249276,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix",
-    "version": "0.173.0"
+    "version": "0.174.0"
   }
 }

package/dist/strands/palette.d.ts

@@ -26,7 +26,7 @@ export declare const RESTING_PALETTE: StrandsPalette;
  * above the element, and the token otherwise:
  *
  * - `color`: `--strands-glow`, or `primary`.
- * - `text-decoration-color`: `--strands-tint`, or `info`.
+ * - `text-decoration-color`: `--strands-tint`, or `accent`.
  * - `outline-color`: `--strands-ground`, or the background.
  * - `caret-color` and `column-rule-color`: `--strands-peak`, or the dark and
  *   the light page's own peak.

package/dist/strands/path.d.ts

@@ -7,7 +7,7 @@
  * screen are all arithmetic.
  */
 /** The three forms the ribbon takes. */
-export type StrandsVariant = 'fan' | 'ribbon' | 'waves';
+export type StrandsVariant = 'bend' | 'ribbon' | 'waves';
 /**
  * One point on the centerline: `x` as a share of the width, `y` in CSS pixels,
  * the ribbon's width as a share of the width, and its brightness from `0` to
@@ -38,6 +38,15 @@ export interface PlacedStop {
  * than forty screens long; a longer one keeps its first 96 points and fades.
  */
 export declare const MAX_POINTS = 96;
+/**
+ * The tightest any form turns, as a share of the box's height: the radius of
+ * its sharpest curve.
+ *
+ * Half the height. A bend's apex a few dozen pixels round kinked the strands
+ * that ran along its inside, and read as a fold in the light where every form
+ * is meant to be one sweep. `path.pure.spec.ts` measures it on every form.
+ */
+export declare const TURN = 0.5;
 /**
  * The ribbon drawn inside its own box, which is what an element without
  * `travel` shows.
@@ -45,18 +54,20 @@ export declare const MAX_POINTS = 96;
  * @param variant The form to draw.
  * @param at Where it sits across the box, as a share of the width. A wave
  *   crosses the whole width and does not read it.
- * @param height The box's height, in CSS pixels. Its width needs no
- *   argument: `x` is a share of it.
+ * @param height The box's height, in CSS pixels.
+ * @param width The box's width, in CSS pixels. `x` is a share of it, and a
+ *   bend's apex is drawn in pixels so it keeps its radius at any shape.
  */
-export declare const boxPath: (variant: StrandsVariant, at: number | undefined, height: number) => PathPoint[];
+export declare const boxPath: (variant: StrandsVariant, at: number | undefined, height: number, width: number) => PathPoint[];
 /**
  * The ribbon laid down a whole page, which is what an element with `travel`
  * shows.
  *
  * Each stop places its form at its target, in page order. Between two stops
  * the ribbon fills the gap with soft S-curves in `fill`'s place, except
- * between two waves, where it turns off screen so each wave reads alone.
- * Without stops, `fill` runs the length of the page: a fan opens the page and
+ * between two waves less than a screen and a half apart, where it turns off
+ * screen so each wave reads alone.
+ * Without stops, `fill` runs the length of the page: a bend opens the page and
  * a ribbon follows it, waves cross every screen and a third, and a ribbon
  * meanders the whole way. After a last wave the ribbon does not come back, so
  * the page ends on the wave.