@markmiro/hairy 0.0.0-stage → 0.1.0

package/dist/chunk-JIET4PY7.js

@@ -0,0 +1,2641 @@
+// src/color.ts
+var clamp01 = (x) => Math.max(0, Math.min(1, x));
+function rgb(hex) {
+  if (!/^#(?:[\da-f]{3}|[\da-f]{6})$/i.test(hex))
+    throw new TypeError(`Expected an opaque hex color, got ${hex}`);
+  const n = parseInt(hex.slice(1), 16);
+  if (hex.length === 4)
+    return [(n >> 8 & 15) / 15, (n >> 4 & 15) / 15, (n & 15) / 15];
+  return [(n >> 16 & 255) / 255, (n >> 8 & 255) / 255, (n & 255) / 255];
+}
+var linear = (v) => v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+var gamma = (v) => v <= 31308e-7 ? 12.92 * v : 1.055 * v ** (1 / 2.4) - 0.055;
+var lightnessToe = 6 / 29;
+var lightnessOf = (L) => L > lightnessToe ? 1.16 * L - 0.16 : 24389 / 2700 * L ** 3;
+var fromLightness = (v) => v > 0.08 ? (v + 0.16) / 1.16 : Math.cbrt(v * 2700 / 24389);
+function lightness(hex) {
+  return lightnessOf(toOklab(hex)[0]);
+}
+function apcaY(hex) {
+  const [r, g, b] = rgb(hex);
+  let y = 0.2126729 * r ** 2.4 + 0.7151522 * g ** 2.4 + 0.072175 * b ** 2.4;
+  if (y < 0.022) y += (0.022 - y) ** 1.414;
+  return y;
+}
+function apca(text, background) {
+  return apcaFromY(apcaY(text), apcaY(background));
+}
+function apcaFromY(t, b) {
+  if (Math.abs(b - t) < 5e-4) return 0;
+  const sapc = b > t ? (b ** 0.56 - t ** 0.57) * 1.14 : (b ** 0.65 - t ** 0.62) * 1.14;
+  return Math.sign(sapc) * Math.max(0, Math.abs(sapc) - 0.027) * 100;
+}
+function oklabFromRgb(r, g, b) {
+  r = linear(r), g = linear(g), b = linear(b);
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  return [
+    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
+  ];
+}
+function toOklab(hex) {
+  return oklabFromRgb(...rgb(hex));
+}
+function fromLab([L, a, b]) {
+  const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  return [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  ];
+}
+var fits = ([r, g, b]) => r >= -1e-7 && r <= 1 + 1e-7 && g >= -1e-7 && g <= 1 + 1e-7 && b >= -1e-7 && b <= 1 + 1e-7;
+function rgbFromOklab([L, a, b]) {
+  L = clamp01(L);
+  let channels = fromLab([L, a, b]);
+  if (!fits(channels)) {
+    let low = 0, high = 1;
+    for (let i = 0; i < 20; i++) {
+      const mid = (low + high) / 2;
+      if (fits(fromLab([L, a * mid, b * mid]))) low = mid;
+      else high = mid;
+    }
+    channels = fromLab([L, a * low, b * low]);
+  }
+  return [clamp01(gamma(channels[0])), clamp01(gamma(channels[1])), clamp01(gamma(channels[2]))];
+}
+var hexBytes = Array.from({ length: 256 }, (_, i) => i.toString(16).padStart(2, "0"));
+function fromOklab(lab) {
+  const [r, g, b] = rgbFromOklab(lab);
+  return "#" + hexBytes[Math.round(r * 255)] + hexBytes[Math.round(g * 255)] + hexBytes[Math.round(b * 255)];
+}
+
+// src/gl.ts
+var hairFloats = 15;
+var rampWidth = 64;
+var rampRows = 4;
+var flakesPerDensity = 2;
+var maxGlitterDensity = 10;
+var largest = 4096;
+var patterns = (
+  /* glsl */
+  `
+uniform int uPattern;        // 0 none, 1 zebra, 2 tiger, 3 dalmatian, 4 leopard, 5 giraffe
+uniform float uPatternScale; // pattern units per CSS px is 1 / (uScale * uPatternScale)
+uniform vec4 uBody;          // the element's center, then half its size, in canvas CSS px
+uniform float uScale;
+uniform sampler2D uRamp;
+
+vec3 ramp(float row, float u) {
+  return textureLod(uRamp, vec2((clamp(u, 0.0, 1.0) * ${rampWidth - 1}.0 + 0.5) / ${rampWidth}.0, (row + 0.5) / ${rampRows}.0), 0.0).rgb;
+}
+/** The fur's shade \`u\`, in the pattern's colors: ground, then markings, then the third color on top. */
+vec3 coatColor(float u, vec2 marks) {
+  return mix(mix(ramp(0.0, u), ramp(2.0, u), marks.x), ramp(3.0, u), marks.y);
+}
+
+uint pcg(uint v) {
+  uint s = v * 747796405u + 2891336453u;
+  uint w = ((s >> ((s >> 28u) + 4u)) ^ s) * 277803737u;
+  return (w >> 22u) ^ w;
+}
+float rand(ivec2 c, uint k) { return float(pcg(pcg(uint(c.x) ^ k) + uint(c.y))) / 4294967295.0; }
+vec2 rand2(ivec2 c) { return vec2(rand(c, 0x2545f491u), rand(c, 0x9e3779b9u)); }
+// Gradient noise, about -0.7 to 0.7.
+float gnoise(vec2 p) {
+  ivec2 i = ivec2(floor(p));
+  vec2 f = fract(p);
+  vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);
+  float a = rand(i, 11u) * 6.2831853, b = rand(i + ivec2(1, 0), 11u) * 6.2831853;
+  float c = rand(i + ivec2(0, 1), 11u) * 6.2831853, d = rand(i + ivec2(1, 1), 11u) * 6.2831853;
+  return mix(
+    mix(dot(vec2(cos(a), sin(a)), f), dot(vec2(cos(b), sin(b)), f - vec2(1.0, 0.0)), u.x),
+    mix(dot(vec2(cos(c), sin(c)), f - vec2(0.0, 1.0)), dot(vec2(cos(d), sin(d)), f - vec2(1.0)), u.x),
+    u.y);
+}
+float fbm(vec2 p) { return 0.6 * gnoise(p) + 0.28 * gnoise(p * 2.07 + 17.3) + 0.12 * gnoise(p * 4.13 - 31.9); }
+vec2 warp(vec2 p, float size, float amount) {
+  return p + amount * vec2(fbm(p / size), fbm(p / size + vec2(5.2, 1.3)));
+}
+
+// Zebra: bold black stripes, as wide as the white between them, running up
+// and down and bending as they go, forking where they get wide.
+vec2 zebra(vec2 q, vec2 n) {
+  vec2 w = warp(q, 34.0, 9.0);
+  // Leaning back toward the ends, like the stripes on a flank.
+  float x = w.x + 0.28 * w.y * clamp(n.x, -1.0, 1.0);
+  float a = 6.2831853 * x / 13.0;
+  // A second harmonic splits a stripe in two where it's strong: the forks.
+  float fork = smoothstep(0.15, 0.45, gnoise(q / 26.0 + 9.1));
+  float v = cos(a) + fork * 0.9 * cos(2.0 * a + 3.1);
+  float th = 0.05 + 0.35 * gnoise(q / 22.0 - 4.7);
+  return vec2(smoothstep(th - 0.12, th + 0.12, v), 0.0);
+}
+
+// Tiger: narrow, broken black stripes on orange, from the back down, each
+// tapering to a point at its own length, and often doubled.
+vec2 tiger(vec2 q, vec2 n) {
+  vec2 w = warp(q, 30.0, 8.0);
+  float period = 17.0;
+  float x = w.x + 0.22 * w.y + 0.35 * w.y * clamp(n.x, -1.0, 1.0);
+  float id = floor(x / period);
+  float d = abs(fract(x / period) - 0.5) * period;
+  // Each stripe its own width along its length; where it runs out, it breaks.
+  float width = 3.6 * (0.45 + 1.1 * gnoise(vec2(id * 3.7, w.y / 11.0)));
+  // Narrowing to a point on the way down: some end partway, some run off the bottom.
+  float reach = 0.45 + 0.75 * rand(ivec2(int(id), 0), 13u);
+  width *= 1.0 - smoothstep(reach - 0.7, reach, n.y + 0.15 * gnoise(q / 14.0));
+  float mark = 1.0 - smoothstep(width - 0.7, width + 0.7, d);
+  // Doubled: a pale line down the middle of some.
+  float split = smoothstep(0.1, 0.3, gnoise(vec2(id * 5.3 + 2.0, w.y / 18.0)));
+  mark *= 1.0 - split * (1.0 - smoothstep(0.25 * width, 0.25 * width + 0.6, d));
+  return vec2(mark, 0.0);
+}
+
+// Dalmatian: round black spots, well apart and of every size, with ragged edges.
+vec2 dalmatian(vec2 q, vec2 n) {
+  float cell = 19.0;
+  vec2 p = q / cell;
+  ivec2 i = ivec2(floor(p));
+  float edge = 1.1 * fbm(q / 4.0);
+  float mark = 0.0;
+  for (int y = -1; y <= 1; y++)
+    for (int x = -1; x <= 1; x++) {
+      ivec2 c = i + ivec2(x, y);
+      if (rand(c, 3u) < 0.12) continue;
+      vec2 at = (vec2(c) + 0.15 + 0.7 * rand2(c)) * cell;
+      float s = rand(c, 5u);
+      float r = 2.6 + 5.4 * s * s;
+      // Slightly oval, each its own way.
+      float t = rand(c, 7u) * 6.2831853;
+      vec2 d = q - at;
+      d = vec2(dot(d, vec2(cos(t), sin(t))), dot(d, vec2(-sin(t), cos(t)))) * vec2(1.0, 1.0 + 0.3 * rand(c, 9u));
+      float dist = length(d) + edge;
+      mark = max(mark, 1.0 - smoothstep(r - 0.5, r + 0.5, dist));
+    }
+  return vec2(mark, 0.0);
+}
+
+// Leopard: rosettes packed close but each its own shape, a ring of black
+// blotches around a deeper tawny middle, sometimes with a dot of black in it,
+// and a few solid spots. Each rosette fills a Voronoi cell, its ring part way
+// out to the cell's edge, so the rings follow the cells' uneven shapes and
+// leave a band of ground between neighbors.
+vec2 leopard(vec2 q, vec2 n) {
+  float cell = 19.0;
+  vec2 w = warp(q, 20.0, 3.0) + 0.8 * vec2(gnoise(q / 3.0), gnoise(q / 3.0 + 7.7));
+  vec2 p = w / cell;
+  ivec2 i = ivec2(floor(p));
+  // The nearest rosette's middle, then the distance to its cell's edge.
+  vec2 near = vec2(0.0);
+  ivec2 id = i;
+  float best = 1e9;
+  for (int y = -1; y <= 1; y++)
+    for (int x = -1; x <= 1; x++) {
+      ivec2 c = i + ivec2(x, y);
+      vec2 at = vec2(c) + 0.5 + 0.85 * (rand2(c) - 0.5);
+      float d = dot(p - at, p - at);
+      if (d < best) { best = d; near = at; id = c; }
+    }
+  float edge = 1e9;
+  for (int y = -2; y <= 2; y++)
+    for (int x = -2; x <= 2; x++) {
+      ivec2 c = i + ivec2(x, y);
+      vec2 at = vec2(c) + 0.5 + 0.85 * (rand2(c) - 0.5);
+      vec2 to = at - near;
+      if (dot(to, to) < 1e-6) continue;
+      edge = min(edge, dot(0.5 * (near + at) - p, normalize(to)));
+    }
+  vec2 from = (p - near) * cell;
+  float f = length(from), e = max(0.0, edge) * cell;
+  // 0 at the rosette's middle, 1 at the edge it shares with the next.
+  float r = f / max(f + e, 1e-3);
+  float kind = rand(id, 3u);
+  if (kind < 0.16) {
+    // A solid spot.
+    float size = 0.32 + 0.12 * rand(id, 5u) + 0.05 * gnoise(q / 2.0);
+    return vec2(1.0 - smoothstep(size - 0.05, size + 0.05, r), 0.0);
+  }
+  // The ring, breaking into three to five blotches around the middle.
+  vec2 around = from / max(f, 1e-3);
+  float g = gnoise(around * 1.35 + rand2(id) * 40.0) + 0.3 * gnoise(q / 2.2);
+  float open = smoothstep(-0.3, -0.12, g);
+  float inner = 0.54 + 0.1 * gnoise(q / 3.2 + 3.0) + 0.06 * (rand(id, 9u) - 0.5);
+  float outer = 0.78 + 0.07 * gnoise(q / 3.2 - 5.0);
+  float ring = smoothstep(inner - 0.05, inner + 0.03, r) * (1.0 - smoothstep(outer - 0.03, outer + 0.05, r)) * open;
+  float inside = 1.0 - smoothstep(inner - 0.04, inner + 0.04, r);
+  // A dot or two of black in the middle of most.
+  for (int k = 0; k < 2; k++) {
+    uint key = 21u + uint(k) * 4u;
+    if (rand(id, key) > (k == 0 ? 0.65 : 0.25)) continue;
+    float a = rand(id, key + 1u) * 6.2831853;
+    vec2 o = vec2(cos(a), sin(a)) * (f + e) * inner * 0.45 * rand(id, key + 2u);
+    float size = 0.9 + 0.7 * rand(id, key + 3u) - 0.2 * float(k);
+    float spot = length(from - o) + 0.35 * gnoise(q / 1.8);
+    ring = max(ring, 1.0 - smoothstep(size - 0.4, size + 0.4, spot));
+  }
+  return vec2(ring, inside * (1.0 - ring) * 0.9);
+}
+
+// Giraffe: big brown patches, darker toward their middles, in a net of
+// narrow cream lines with jagged edges.
+vec2 giraffe(vec2 q, vec2 n) {
+  float cell = 24.0;
+  vec2 w = warp(q, 20.0, 5.0) + 1.1 * vec2(gnoise(q / 2.8), gnoise(q / 2.8 + 7.7));
+  vec2 p = w / cell;
+  ivec2 i = ivec2(floor(p));
+  // The nearest patch's middle, then the distance to its edge with the next.
+  vec2 near = vec2(0.0);
+  float best = 1e9;
+  for (int y = -1; y <= 1; y++)
+    for (int x = -1; x <= 1; x++) {
+      ivec2 c = i + ivec2(x, y);
+      vec2 at = vec2(c) + 0.1 + 0.8 * rand2(c);
+      float d = dot(p - at, p - at);
+      if (d < best) { best = d; near = at; }
+    }
+  float edge = 1e9;
+  for (int y = -2; y <= 2; y++)
+    for (int x = -2; x <= 2; x++) {
+      ivec2 c = i + ivec2(x, y);
+      vec2 at = vec2(c) + 0.1 + 0.8 * rand2(c);
+      vec2 to = at - near;
+      if (dot(to, to) < 1e-6) continue;
+      edge = min(edge, dot(0.5 * (near + at) - p, normalize(to)));
+    }
+  edge *= cell;
+  float line = 1.9 + 0.7 * gnoise(q / 9.0);
+  float tile = smoothstep(line - 0.5, line + 0.5, edge);
+  return vec2(tile, tile * smoothstep(3.0, 11.0, edge) * 0.75);
+}
+
+/** The pattern's weights at \`pos\`, in canvas CSS px: markings, then the third color. */
+vec2 patternAt(vec2 pos) {
+  if (uPattern == 0) return vec2(0.0);
+  vec2 q = (pos - uBody.xy) / max(1e-3, uScale * uPatternScale);
+  vec2 n = (pos - uBody.xy) / max(vec2(1.0), uBody.zw);
+  if (uPattern == 1) return zebra(q, n);
+  if (uPattern == 2) return tiger(q, n);
+  if (uPattern == 3) return dalmatian(q, n);
+  if (uPattern == 4) return leopard(q, n);
+  return giraffe(q, n);
+}
+`
+);
+var common = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+precision highp int;
+
+layout(location = 0) in vec4 aRootRest;  // root x, y; the direction it lies in at rest
+layout(location = 1) in vec4 aLeanStand; // how far it leans out of the outline; the direction it stands in
+layout(location = 2) in vec4 aHair;      // length, curl, sway phase, rim (1 on the outline)
+layout(location = 3) in vec3 aLook;      // shade (0 to 1), kind (0 underfur, 1 guard hair, 2 sheen), seed (0 to 1)
+layout(location = 4) in vec2 aBend;      // how far the pointer has brushed it
+
+uniform vec2 uView;
+uniform float uDpr;
+uniform float uLift, uSway, uTime, uHovering, uNear;
+uniform vec2 uPointer;
+uniform float uBase, uHoverTop, uHoverStretch, uClicked, uGrown, uDroop;
+uniform float uThickness, uTaper, uSoftness;
+uniform int uType;
+uniform float uTypeAmount, uTightness;
+uniform int uTip;
+uniform float uMaterialAmount;
+uniform float uGlitterDensity, uGlitterSize, uGlitterVariation;
+${patterns}
+const float TAU = 6.2831853;
+
+float hash(float x) { return fract(sin(x * 78.233 + 0.31) * 43758.5453); }
+float vnoise(float x) {
+  float i = floor(x), f = fract(x);
+  return mix(hash(i), hash(i + 1.0), f * f * (3.0 - 2.0 * f)) * 2.0 - 1.0;
+}
+/** The pattern where this hair grows, from a point a little off its root, so the markings' edges are ragged hair by hair. */
+vec2 hairMarks() {
+  if (uPattern == 0) return vec2(0.0);
+  vec2 off = vec2(hash(aLook.z * 13.7) - 0.5, hash(aLook.z * 29.1) - 0.5) * 2.4 * uScale;
+  return patternAt(aRootRest.xy + off);
+}
+vec2 clip(vec2 p) { return vec2(p.x / uView.x * 2.0 - 1.0, 1.0 - p.y / uView.y * 2.0); }
+
+// This hair's curve this frame: a cubic from its root, and its length and lift.
+vec2 P0, P1, P2, P3;
+float LEN, LIFT;
+
+void shape() {
+  vec2 root = aRootRest.xy, rest = aRootRest.zw;
+  float rim = aHair.w;
+  // Below 0 (a bounce swinging past rest), the hairs press flatter than they lie.
+  float l = max(-0.5, uLift);
+  // A little higher right under the pointer.
+  if (uHovering > 0.5) {
+    vec2 d = root - uPointer;
+    l += 0.12 * exp(-dot(d, d) / uNear);
+  }
+  float L = min(1.0, l);
+  float a = uSway * sin(uTime * 2.2 + aHair.z);
+  vec2 dir = (rest + aLeanStand.xy) * (1.0 - L) + aLeanStand.zw * L + aBend + vec2(-rest.y, rest.x) * a;
+  if (uType == 3) {
+    // Frizz: hairs fly off from the combed direction, less as they stand.
+    float turn = (hash(aLook.z * 7.13) - 0.5) * 1.2 * uTypeAmount * (1.0 - 0.5 * L);
+    float c = cos(turn), s = sin(turn);
+    dir = vec2(dir.x * c - dir.y * s, dir.x * s + dir.y * c);
+  }
+  float dl = length(dir);
+  dir = dl > 1e-5 ? dir / dl : vec2(0.0, 1.0);
+  // Stretch: hovering stretches hairs as they rise from rest to the hover
+  // lift, a click further along its own rise and fall.
+  float hovered = uHoverTop - uBase > 1e-3 ? (l - uBase) / (uHoverTop - uBase) : 0.0;
+  float stretch = uHoverStretch * clamp(hovered, 0.0, 1.3) + uClicked;
+  // Outline hairs reach out as they stand; middle ones point at you, so they look shorter.
+  float len = aHair.x * uGrown * (1.0 + stretch) * (1.0 + rim * 0.3 * l - (1.0 - rim) * 0.35 * L);
+  float curl = aHair.y * (1.0 - 0.5 * L);
+  // Hairs droop under their weight until they stand.
+  float droop = 0.2 * uDroop * (1.0 - L) * len;
+  vec2 side = vec2(-dir.y, dir.x);
+  P0 = root;
+  P1 = root + dir * len * 0.34;
+  P2 = root + dir * len * 0.68 + side * curl * len * 0.3 + vec2(0.0, droop * 0.4);
+  P3 = root + dir * len * 0.92 + side * curl * len * 0.55 + vec2(0.0, droop);
+  LEN = len;
+  LIFT = L;
+}
+
+vec2 bezier(float t) {
+  float u = 1.0 - t;
+  return u * u * u * P0 + 3.0 * u * u * t * P1 + 3.0 * u * t * t * P2 + t * t * t * P3;
+}
+vec2 slope(float t) {
+  float u = 1.0 - t;
+  return 3.0 * u * u * (P1 - P0) + 6.0 * u * t * (P2 - P1) + 3.0 * t * t * (P3 - P2);
+}
+
+// The point \`t\` of the way along the hair, with its type's waves, coils or frizz.
+vec2 along(float t) {
+  vec2 p = bezier(t);
+  if (uType == 0 || uTypeAmount <= 0.0) return p;
+  vec2 T = slope(t);
+  float tl = length(T);
+  T = tl > 1e-5 ? T / tl : vec2(1.0, 0.0);
+  vec2 N = vec2(-T.y, T.x);
+  float seed = aLook.z;
+  if (uType == 1) {
+    // Wavy: ripples side to side, growing in from the root.
+    float A = 0.13 * LEN * uTypeAmount * smoothstep(0.0, 0.3, t);
+    return p + N * A * sin(TAU * (1.4 * uTightness * t + seed));
+  }
+  if (uType == 2) {
+    // Curly: a coil seen from the side, looping back on itself, turning either way.
+    float R = 0.14 * LEN * uTypeAmount * smoothstep(0.0, 0.12, t);
+    float th = TAU * 2.5 * uTightness * t;
+    float spin = seed > 0.5 ? 1.0 : -1.0;
+    return p + R * (N * spin * sin(th) + T * (cos(th) - 1.0));
+  }
+  // Frizzy: kinks at random, broad bends with fine zigzags on them, more toward the tip.
+  float A = 0.2 * LEN * uTypeAmount * pow(t, 0.7);
+  float f = 7.0 * uTightness;
+  float kink = 0.6 * vnoise(t * f + seed * 97.0) + 0.4 * vnoise(t * f * 3.1 + seed * 31.0);
+  return p + N * A * kink + T * A * 0.35 * vnoise(t * f * 1.3 + seed * 53.0);
+}
+`
+);
+var hairVertex = (
+  /* glsl */
+  `${common}
+uniform int uSegments;
+out vec4 vColor;
+out float vAcross;
+out float vHalf;
+out float vAlong;
+flat out float vRound;
+flat out float vFade;
+
+void main() {
+  shape();
+  // Two vertices per step along the hair, then two past the tip for its end.
+  int k = gl_VertexID / 2;
+  float side = gl_VertexID % 2 == 0 ? -1.0 : 1.0;
+  bool end = k > uSegments;
+  float t = end ? 1.0 : float(k) / float(uSegments);
+  vec2 p = along(t);
+  float e = 0.5 / float(uSegments);
+  vec2 T = along(min(1.0, t + e)) - along(max(0.0, t - e));
+  float tl = length(T);
+  T = tl > 1e-6 ? T / tl : vec2(1.0, 0.0);
+  vec2 N = vec2(-T.y, T.x);
+
+  float kind = aLook.y;
+  bool sheen = kind > 1.5;
+  // Narrowing from root to tip by the taper; a sharp end narrows on to a point.
+  float width = sheen ? 0.7 * uScale * uThickness : (kind > 0.5 ? 1.1 : 0.95) * uScale * uThickness * mix(1.0, uTaper, t);
+  if (!sheen && uTip == 1) width *= clamp((1.0 - t) / 0.35, 0.0, 1.0);
+  // Half the width in device px, and the strip's half width with room for the
+  // soft edge: a pixel, plus the softness, centered on the hair's edge.
+  float hw = 0.5 * width * uDpr;
+  float fade = 1.0 + uSoftness * uScale * uDpr;
+  float g = max(hw, 0.5) + 0.5 * fade + 0.5;
+  bool rounded = sheen || uTip == 0;
+  vec2 pos = p + N * side * g / uDpr;
+  float to = -(1.0 - t) * LEN * uDpr;
+  if (end) {
+    // A round end reaches half the width past the tip; the others just the soft edge.
+    float past = rounded ? g : 0.5 * fade + 0.5;
+    pos += T * past / uDpr;
+    to = past;
+  }
+  gl_Position = vec4(clip(pos), 0.0, 1.0);
+  vAcross = side * g;
+  vHalf = hw;
+  vAlong = to;
+  vRound = rounded ? 1.0 : 0.0;
+  vFade = fade;
+
+  // Darker at the root, lighter and a little see-through toward the tip.
+  float shade = aLook.x;
+  vec2 marks = hairMarks();
+  if (sheen) {
+    // On markings, the shine is their own highlight.
+    vec3 gloss = mix(mix(ramp(1.0, shade), ramp(2.0, 1.0), marks.x), ramp(3.0, 1.0), marks.y);
+    vColor = vec4(gloss, 0.35);
+    return;
+  }
+  float m = smoothstep(0.3, 0.7, t);
+  float u = shade + mix(-1.0, 1.0, m) / 23.0;
+  vColor = vec4(coatColor(u, marks), mix(1.0, 0.75, m));
+}
+`
+);
+var hairFragment = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+in vec4 vColor;
+in float vAcross;
+in float vHalf;
+in float vAlong;
+flat in float vRound;
+flat in float vFade;
+out vec4 outColor;
+
+void main() {
+  // How much of this pixel the hair covers: an edge fading over vFade px
+  // (one, unless softened), a hw circle past a round tip, and hairs thinner
+  // than a pixel fade instead.
+  float hw = max(vHalf, 0.5);
+  float d = vRound > 0.5 && vAlong > 0.0 ? length(vec2(vAlong, vAcross)) : abs(vAcross);
+  float cover = clamp((hw + 0.5 * vFade - d) / vFade, 0.0, 1.0);
+  if (vRound < 0.5) cover *= clamp((0.5 * vFade - vAlong) / vFade, 0.0, 1.0);
+  float a = vColor.a * cover * min(1.0, vHalf * 2.0);
+  if (a < 0.002) discard;
+  outColor = vec4(vColor.rgb * a, a);
+}
+`
+);
+var flakeVertex = (
+  /* glsl */
+  `${common}
+out vec2 vUV;
+out float vBright;
+out float vFade;
+out vec3 vColor;
+
+void main() {
+  shape();
+  // Six vertices per flake: a square around a point on the hair.
+  int k = gl_VertexID / 6, c = gl_VertexID % 6;
+  float s = aLook.z * 91.7 + float(k) * 13.1;
+  // Each candidate shows by its own chance, so more density adds flakes and
+  // keeps the ones already there; the last candidate fades in by its share.
+  float keep = clamp(uGlitterDensity * ${flakesPerDensity}.0 - float(k), 0.0, 1.0);
+  bool show = aLook.y < 1.5 && hash(s + 1.7) < 0.03 * keep;
+  float t = mix(0.25, 1.0, hash(s));
+  vec2 p = along(t);
+  vec2 T = along(min(1.0, t + 0.04)) - along(max(0.0, t - 0.04));
+  // A flake flashes when its hair turns it toward the light, so it twinkles as the fur moves.
+  float glint = 0.5 + 0.5 * cos(atan(T.y, T.x) * 3.0 + hash(s + 3.1) * TAU + uTime * 1.3);
+  float flash = pow(glint, 12.0);
+  // Its own size: up to 2^variation times bigger or smaller, evenly spread between.
+  float own = exp2(uGlitterVariation * (2.0 * hash(s + 5.3) - 1.0));
+  float size = show ? (0.5 + 1.4 * flash) * uScale * (0.7 + 0.3 * uThickness) * uGlitterSize * own : 0.0;
+  // The amount sets how bright the flashes are.
+  float bright = flash * uMaterialAmount;
+  vec2 corner = vec2(c == 1 || c == 2 || c == 4 ? 1.0 : -1.0, c == 2 || c == 4 || c == 5 ? 1.0 : -1.0);
+  // The square reaches past the flake for its rays.
+  float reach = 3.0;
+  gl_Position = vec4(clip(p + corner * size * reach), 0.0, 1.0);
+  vUV = corner * reach;
+  vBright = bright;
+  vFade = min(1.0, uMaterialAmount);
+  // Tinted like the fur's sheen; the brightest flash nearly white.
+  vColor = mix(ramp(1.0, 1.0), vec3(1.0), clamp(0.25 + 0.6 * bright, 0.0, 1.0));
+}
+`
+);
+var flakeFragment = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+in vec2 vUV;
+in float vBright;
+in float vFade;
+in vec3 vColor;
+out vec4 outColor;
+
+void main() {
+  float core = exp(-dot(vUV, vUV) * 2.0);
+  float rays = (exp(-abs(vUV.x) * 2.5 - vUV.y * vUV.y * 0.4) + exp(-abs(vUV.y) * 2.5 - vUV.x * vUV.x * 0.4)) * vBright;
+  float a = clamp(core * (0.55 * vFade + 0.45 * min(vBright, 1.0)) + rays * 0.7, 0.0, 1.0);
+  if (a < 0.003) discard;
+  // A little lighter than covering, so sparkles brighten what's under them.
+  outColor = vec4(vColor * a, a * 0.8);
+}
+`
+);
+var coatVertex = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+uniform vec2 uView;
+out vec2 vPos;
+void main() {
+  vec2 c = vec2(gl_VertexID % 2 == 0 ? 0.0 : 1.0, gl_VertexID < 2 ? 0.0 : 1.0);
+  vPos = c * uView;
+  gl_Position = vec4(c.x * 2.0 - 1.0, 1.0 - c.y * 2.0, 0.0, 1.0);
+}
+`
+);
+var coatFragment = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+precision highp int;
+uniform vec4 uBox;
+uniform float uRadius, uBlur;
+uniform vec2 uGradient;
+in vec2 vPos;
+out vec4 outColor;
+${patterns}
+
+void main() {
+  // The shade deep in the fur, between the hairs: a rounded box, blurred.
+  vec2 q = abs(vPos - (uBox.xy + uBox.zw * 0.5)) - (uBox.zw * 0.5 - uRadius);
+  float sd = length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - uRadius;
+  // Clamped, as tanh overflows far from the edge on some GPUs.
+  float x = clamp(sd / (max(uBlur, 0.01) * 1.41421356), -4.0, 4.0);
+  float cover = 0.5 - 0.5 * tanh(x * (1.1283792 + 0.1009 * x * x));
+  if (cover < 0.002) discard;
+  float g = clamp((vPos.y - uGradient.x) / max(1.0, uGradient.y - uGradient.x), 0.0, 1.0);
+  vec2 marks = patternAt(vPos);
+  outColor = vec4(mix(coatColor(0.46, marks), coatColor(0.3, marks), g) * cover, cover);
+}
+`
+);
+var shared;
+function compile(gl, vertex, fragment) {
+  const program = gl.createProgram();
+  for (const [type, source] of [[gl.VERTEX_SHADER, vertex], [gl.FRAGMENT_SHADER, fragment]]) {
+    const shader = gl.createShader(type);
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS) && !gl.isContextLost()) {
+      throw new Error(`hairy: shader failed to compile: ${gl.getShaderInfoLog(shader)}`);
+    }
+    gl.attachShader(program, shader);
+    gl.deleteShader(shader);
+  }
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS) && !gl.isContextLost()) {
+    throw new Error(`hairy: shaders failed to link: ${gl.getProgramInfoLog(program)}`);
+  }
+  const u = {};
+  const count = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
+  for (let i = 0; i < count; i++) {
+    const name = gl.getActiveUniform(program, i).name;
+    u[name] = gl.getUniformLocation(program, name);
+  }
+  return { program, u };
+}
+function build(s) {
+  const { gl } = s;
+  return {
+    hair: compile(gl, hairVertex, hairFragment),
+    flake: compile(gl, flakeVertex, flakeFragment),
+    coat: compile(gl, coatVertex, coatFragment),
+    empty: gl.createVertexArray()
+  };
+}
+function connect() {
+  if (shared !== void 0) return shared;
+  shared = null;
+  if (typeof document === "undefined") return null;
+  const canvas = document.createElement("canvas");
+  canvas.width = canvas.height = 256;
+  let gl = null;
+  try {
+    gl = canvas.getContext("webgl2", {
+      alpha: true,
+      premultipliedAlpha: true,
+      antialias: false,
+      depth: false,
+      stencil: false,
+      preserveDrawingBuffer: false,
+      // Without a real GPU, the fur would be too slow to animate: leave it off.
+      failIfMajorPerformanceCaveat: true
+    });
+  } catch {
+    gl = null;
+  }
+  if (!gl) return null;
+  let gamut = "srgb";
+  if ("drawingBufferColorSpace" in gl) {
+    try {
+      gl.drawingBufferColorSpace = "display-p3";
+      gamut = gl.drawingBufferColorSpace === "display-p3" ? "display-p3" : "srgb";
+    } catch {
+      gamut = "srgb";
+    }
+  }
+  const viewport = gl.getParameter(gl.MAX_VIEWPORT_DIMS);
+  const size = Math.min(largest, gl.getParameter(gl.MAX_RENDERBUFFER_SIZE), viewport[0], viewport[1]);
+  let programs;
+  try {
+    programs = build({ gl });
+  } catch (error) {
+    console.warn(error);
+    return null;
+  }
+  const s = { canvas, gl, gamut, largest: size, lost: false, ...programs, layers: /* @__PURE__ */ new Set() };
+  canvas.addEventListener("webglcontextlost", (event) => {
+    event.preventDefault();
+    s.lost = true;
+  });
+  canvas.addEventListener("webglcontextrestored", () => {
+    try {
+      Object.assign(s, build(s));
+    } catch (error) {
+      console.warn(error);
+      return;
+    }
+    if (s.gamut === "display-p3") gl.drawingBufferColorSpace = "display-p3";
+    s.lost = false;
+    for (const layer of s.layers) layer.restore();
+  });
+  return shared = s;
+}
+var gpuSupported = () => connect() !== null;
+var GpuLayer = class {
+  count = 0;
+  rampBytes = new Uint8Array(rampWidth * rampRows * 4);
+  vao = null;
+  hairBuffer = null;
+  bendBuffer = null;
+  texture = null;
+  disposed = false;
+  s;
+  onRestore;
+  constructor(s, onRestore) {
+    this.s = s;
+    this.onRestore = onRestore;
+    this.create();
+    s.layers.add(this);
+  }
+  get gamut() {
+    return this.s.gamut;
+  }
+  get largest() {
+    return this.s.largest;
+  }
+  create() {
+    const { gl } = this.s;
+    this.vao = gl.createVertexArray();
+    this.hairBuffer = gl.createBuffer();
+    this.bendBuffer = gl.createBuffer();
+    gl.bindVertexArray(this.vao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.hairBuffer);
+    const stride = hairFloats * 4;
+    [[0, 4, 0], [1, 4, 16], [2, 4, 32], [3, 3, 48]].forEach(([location, size, offset]) => {
+      gl.enableVertexAttribArray(location);
+      gl.vertexAttribPointer(location, size, gl.FLOAT, false, stride, offset);
+      gl.vertexAttribDivisor(location, 1);
+    });
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.bendBuffer);
+    gl.enableVertexAttribArray(4);
+    gl.vertexAttribPointer(4, 2, gl.FLOAT, false, 8, 0);
+    gl.vertexAttribDivisor(4, 1);
+    gl.bindVertexArray(null);
+    this.texture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, this.texture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    this.uploadRamp();
+  }
+  restore() {
+    if (this.disposed) return;
+    this.create();
+    this.count = 0;
+    this.onRestore();
+  }
+  uploadRamp() {
+    const { gl } = this.s;
+    gl.bindTexture(gl.TEXTURE_2D, this.texture);
+    gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, rampWidth, rampRows, 0, gl.RGBA, gl.UNSIGNED_BYTE, this.rampBytes);
+  }
+  setHairs(data, count) {
+    if (this.s.lost) return;
+    this.count = count;
+    const { gl } = this.s;
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.hairBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.bendBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, count * 2 * 4, gl.DYNAMIC_DRAW);
+  }
+  setBends(bends) {
+    if (this.s.lost) return;
+    const { gl } = this.s;
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.bendBuffer);
+    gl.bufferSubData(gl.ARRAY_BUFFER, 0, bends);
+  }
+  setRamp(bytes) {
+    this.rampBytes = bytes;
+    if (!this.s.lost) this.uploadRamp();
+  }
+  render(target, f) {
+    const s = this.s;
+    if (s.lost || this.disposed) return false;
+    const { gl, canvas } = s;
+    const width = target.canvas.width, height = target.canvas.height;
+    if (!width || !height) return false;
+    if (canvas.width < width || canvas.height < height) {
+      canvas.width = Math.min(s.largest, Math.max(canvas.width, Math.ceil(width / 128) * 128));
+      canvas.height = Math.min(s.largest, Math.max(canvas.height, Math.ceil(height / 128) * 128));
+    }
+    const y = canvas.height - height;
+    gl.viewport(0, y, width, height);
+    gl.enable(gl.SCISSOR_TEST);
+    gl.scissor(0, y, width, height);
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, this.texture);
+    const c = f.coat;
+    gl.useProgram(s.coat.program);
+    let u = s.coat.u;
+    gl.uniform2f(u.uView, f.width, f.height);
+    gl.uniform4f(u.uBox, c.x, c.y, Math.max(0, c.w), Math.max(0, c.h));
+    gl.uniform1f(u.uRadius, Math.max(0, Math.min(c.radius, c.w / 2, c.h / 2)));
+    gl.uniform1f(u.uBlur, c.blur);
+    gl.uniform2f(u.uGradient, c.top, c.bottom);
+    this.patternUniforms(u, f);
+    gl.bindVertexArray(s.empty);
+    if (c.w > 0 && c.h > 0) gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    if (this.count) {
+      gl.bindVertexArray(this.vao);
+      const segments = segmentsFor(f);
+      gl.useProgram(s.hair.program);
+      this.uniforms(s.hair.u, f);
+      gl.uniform1i(s.hair.u.uSegments, segments);
+      gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, (segments + 1) * 2 + 2, this.count);
+      const flakes = Math.ceil(f.glitterDensity * flakesPerDensity);
+      if (f.material === 1 && f.materialAmount > 0 && f.glitterSize > 0 && flakes > 0) {
+        gl.useProgram(s.flake.program);
+        this.uniforms(s.flake.u, f);
+        gl.drawArraysInstanced(gl.TRIANGLES, 0, flakes * 6, this.count);
+      }
+    }
+    gl.bindVertexArray(null);
+    gl.disable(gl.SCISSOR_TEST);
+    target.setTransform(1, 0, 0, 1, 0, 0);
+    target.clearRect(0, 0, width, height);
+    target.drawImage(canvas, 0, 0, width, height, 0, 0, width, height);
+    return true;
+  }
+  uniforms(u, f) {
+    const { gl } = this.s;
+    const set1 = (name, value) => u[name] && gl.uniform1f(u[name], value);
+    const seti = (name, value) => u[name] && gl.uniform1i(u[name], value);
+    gl.uniform2f(u.uView, f.width, f.height);
+    set1("uDpr", f.dpr);
+    set1("uLift", f.lift);
+    set1("uSway", f.sway);
+    set1("uTime", f.time);
+    set1("uHovering", f.hovering ? 1 : 0);
+    set1("uNear", f.near);
+    if (u.uPointer) gl.uniform2f(u.uPointer, f.pointerX, f.pointerY);
+    set1("uBase", f.base);
+    set1("uHoverTop", f.hoverTop);
+    set1("uHoverStretch", f.hoverStretch);
+    set1("uClicked", f.clicked);
+    set1("uGrown", f.grown);
+    set1("uDroop", f.droop);
+    set1("uThickness", f.thickness);
+    set1("uTaper", f.taper);
+    set1("uSoftness", f.softness);
+    seti("uType", f.hairType);
+    set1("uTypeAmount", f.typeAmount);
+    set1("uTightness", f.tightness);
+    seti("uTip", f.tip);
+    set1("uMaterialAmount", f.materialAmount);
+    set1("uGlitterDensity", f.glitterDensity);
+    set1("uGlitterSize", f.glitterSize);
+    set1("uGlitterVariation", f.glitterSizeVariation);
+    this.patternUniforms(u, f);
+  }
+  patternUniforms(u, f) {
+    const { gl } = this.s;
+    if (u.uRamp) gl.uniform1i(u.uRamp, 0);
+    if (u.uPattern) gl.uniform1i(u.uPattern, f.pattern);
+    if (u.uPatternScale) gl.uniform1f(u.uPatternScale, f.patternScale);
+    if (u.uScale) gl.uniform1f(u.uScale, f.scale);
+    if (u.uBody) gl.uniform4f(u.uBody, f.body.x, f.body.y, f.body.w, f.body.h);
+  }
+  dispose() {
+    if (this.disposed) return;
+    this.disposed = true;
+    this.s.layers.delete(this);
+    if (this.s.lost) return;
+    const { gl } = this.s;
+    gl.deleteVertexArray(this.vao);
+    gl.deleteBuffer(this.hairBuffer);
+    gl.deleteBuffer(this.bendBuffer);
+    gl.deleteTexture(this.texture);
+  }
+};
+function segmentsFor(f) {
+  const tight = Math.max(0, f.tightness);
+  if (f.hairType === 0 || f.typeAmount <= 0) return 8;
+  if (f.hairType === 1) return Math.min(48, Math.ceil(8 + 14 * tight));
+  if (f.hairType === 2) return Math.min(64, Math.ceil(6 + 25 * tight));
+  return Math.min(64, Math.ceil(8 + 30 * tight));
+}
+function createLayer(onRestore) {
+  const s = connect();
+  if (!s || s.lost) return null;
+  return new GpuLayer(s, onRestore);
+}
+
+// src/settings.ts
+var eases = {
+  linear: (t) => t,
+  /** Speeds up steadily, like something dropping. */
+  gravity: (t) => t * t,
+  "ease-in": (t) => t ** 3,
+  "ease-out": (t) => 1 - (1 - t) ** 3,
+  "ease-in-out": (t) => t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2,
+  "back-out": (t) => 1 + 2.70158 * (t - 1) ** 3 + 1.70158 * (t - 1) ** 2,
+  "elastic-out": (t) => t <= 0 ? 0 : t >= 1 ? 1 : 2 ** (-10 * t) * Math.sin((10 * t - 0.75) * 2 * Math.PI / 3) + 1
+};
+var settingChoices = {
+  /** Straight hairs follow one smooth curve; wavy ones ripple side to side; curly ones coil into loops; frizzy ones kink at random and fly away. */
+  hairType: ["straight", "wavy", "curly", "frizzy"],
+  /** Round tips end in a half circle; sharp ones narrow to a fine point; square ones are cut straight across. */
+  tipShape: ["round", "sharp", "square"],
+  /** Natural fur, or glitter, with sparkling flakes. */
+  material: ["natural", "glitter"],
+  /** A coat pattern, as on an animal: none, zebra stripes, tiger stripes, dalmatian spots, leopard rosettes or giraffe patches. */
+  pattern: ["none", "zebra", "tiger", "dalmatian", "leopard", "giraffe"],
+  /** The pattern's colors: the animal's own, or tints of the fur's color. */
+  patternColors: ["natural", "tinted"],
+  /** When the label gets a halo: "auto" only when a pattern needs one, or "always" or "never". */
+  halo: ["auto", "always", "never"]
+};
+var defaultSettings = {
+  /** Palette: where its middle sits (L*, 0–1, from the color), how far it reaches below and above that. */
+  shift: -0.13,
+  darker: 0.4,
+  lighter: 0.22,
+  /** Hairs per area (regrows). */
+  density: 1.65,
+  /** Hair length. Changing it grows or shrinks the hairs with the hover spring. */
+  length: 0.8,
+  thickness: 0.75,
+  /** How much hairs curl (regrows). */
+  curl: 0.95,
+  /** How much hairs droop under their weight. */
+  droop: 0.4,
+  /** How much hair lengths vary, 0 all the same (regrows). */
+  lengthVariation: 1,
+  /** How much hair directions vary from the combed flow (regrows). */
+  messiness: 1,
+  /** How far hairs along the outline lean out, making the fuzzy edge (regrows). */
+  fuzz: 2,
+  /**
+   * How far from the button's edge the fur starts, in px at scale 1 (regrows):
+   * above 0 the outline hairs and the fur's body sit out past the edge, below
+   * 0 they move in, eating into the button.
+   */
+  distance: 0,
+  /** Tip width relative to the root. */
+  taper: 0.31,
+  /**
+   * How soft each hair's edge is, in px at scale 1: 0 is the crisp
+   * pixel-wide edge, higher fades it out over that many more pixels, up to 2. Each
+   * hair gets wider to hold the fade, so it costs a little more to draw.
+   */
+  softness: 0,
+  /** The hairs' pattern: straight, wavy, curly or frizzy. */
+  hairType: "straight",
+  /** How strong the waves, curls or frizz are: 0 is straight, 1 the usual amount. */
+  typeAmount: 1,
+  /** How many waves, turns or kinks fit along each hair: higher is tighter. */
+  tightness: 1,
+  /** How each hair ends: round, sharp or square. */
+  tipShape: "round",
+  /** What the hair looks made of: natural or glitter. */
+  material: "natural",
+  /** How bright glitter's flashes are. */
+  materialAmount: 1,
+  /** Glitter: how many flakes there are, 1 the usual amount. */
+  glitterDensity: 1,
+  /** Glitter: how big the flakes are, 1 the usual size. */
+  glitterSize: 1,
+  /** Glitter: how much flake sizes differ, 0 all the same; at 1 they range from half to twice the size. */
+  glitterSizeVariation: 0,
+  /** A coat pattern, as on an animal: "none", "zebra", "tiger", "dalmatian", "leopard" or "giraffe". */
+  pattern: "none",
+  /** The pattern's colors: "natural" takes the animal's own, "tinted" makes them from the fur's color. */
+  patternColors: "natural",
+  /** How big the pattern's stripes, spots or patches are, 1 the usual size. */
+  patternScale: 1,
+  /**
+   * A soft glow behind the label, in the fur's base color, so it reads where
+   * the fur alone doesn't, as on a zebra's white and black at once: "auto"
+   * adds it only when a pattern needs one, or "always" or "never".
+   */
+  halo: "auto",
+  /** How far the halo's shade moves from the base color, away from the label's: darker under a light label, lighter under a dark one (L, 0–1). */
+  haloShade: 0.3,
+  /** How far the halo's glow spreads round the letters, 1 the usual size. */
+  haloSize: 1,
+  /** How strong the halo is, 1 the usual; 0 has none. */
+  haloStrength: 1,
+  /** How many hairs catch the light (regrows). */
+  sheen: 0.1,
+  /** Where the band of shine sits, 0 at the top to 1 at the bottom, and how far it spreads (regrows). */
+  sheenPosition: 0.1,
+  sheenSpread: 0.32,
+  /** How dark the hairs along the top edge are, turned away from the light; also keeps the shine off it (regrows). */
+  edgeShadow: 0,
+  /** On wide-gamut screens, how far colors move out toward the more vivid colors sRGB can't show (0 to 1). */
+  vividness: 0,
+  /** How far the hairs stand at rest, with no hover: 0 is combed flat, 1 standing up. */
+  static: 0,
+  /** How much further the hairs stand when hovered, on top of `static` (up to 1). */
+  hover: 0.35,
+  /**
+   * The hover spring: how fast it moves (rad/s) and its damping ratio (lower
+   * bounces more, 1 doesn't overshoot). Hovering out and clicking move on
+   * springs like it.
+   */
+  hoverSpeed: 22,
+  hoverDamping: 0.9,
+  /** The hover-out spring (without a click playing), back down to rest: speed (rad/s) and damping ratio. */
+  leaveSpeed: 7,
+  leaveDamping: 0.25,
+  // Hovering out along a curve, set aside for now: it springs instead.
+  // /**
+  //  * Hovering out (without a click playing): the fur falls at `leaveFallSpeed`
+  //  * along `leaveEase`, then lands and wobbles out like
+  //  * e^(−settle·t)·cos(bounce·t).
+  //  */
+  // leaveFallSpeed: 1.55,
+  // leaveEase: "gravity" as Ease,
+  // leaveSettle: 1.4,
+  // leaveBounce: 5.5,
+  /** How much the hairs sway while hovered. */
+  sway: 0.05,
+  /**
+   * How much longer the hairs grow as they rise to the hover lift: 0.5 makes
+   * them half as long again (regrows, to make room).
+   */
+  hoverStretch: 0,
+  /** How much lighter the fur gets as it rises to the hover lift, in L* (0–1); below 0 darkens. */
+  hoverLight: 0.05,
+  /**
+   * A click poofs the fur up by `poofHeight` on the rise spring, hangs there
+   * for `poofHold` seconds, then comes back down to where it rests (hovered,
+   * or flat if the pointer has left) on the fall spring, which also springs
+   * the click's stretch back. Speeds in rad/s, then damping ratios (lower
+   * bounces more, 1 doesn't overshoot).
+   */
+  clickRiseSpeed: 49,
+  clickRiseDamping: 0.9,
+  clickFallSpeed: 8.5,
+  clickFallDamping: 0.2,
+  // A click along curves, set aside for now: it springs instead.
+  // /**
+  //  * A click poofs the fur up by `poofHeight` over `poofRise` seconds, hangs
+  //  * there for `poofHold` seconds, then falls at `poofFallSpeed` back to
+  //  * where it rests (hovered, or flat if the pointer has left). It lands with
+  //  * whatever speed the fall curve ends with, overshoots, and wobbles out like
+  //  * e^(−settle·t)·cos(bounce·t).
+  //  */
+  poofHeight: 0.53,
+  /** How much longer still the hairs grow at the top of a click, on top of `hoverStretch` (regrows). */
+  clickStretch: 0,
+  /** How much lighter still a click makes the fur, on top of `hoverLight`, springing back with the click. */
+  clickLight: 0,
+  // poofRise: 0.13,
+  // poofSettle: 3.1,
+  // poofBounce: 15,
+  // /** The curve of the poof's rise. */
+  // poofEase: "ease-out" as Ease,
+  /** Seconds the fur hangs at the top of the poof. */
+  poofHold: 0,
+  // /**
+  //  * How fast the fall back down goes, and its curve. Speeds are in lift per
+  //  * second: a full drop from upright (1) to flat (0) takes 1 ÷ speed seconds,
+  //  * and a shorter drop takes proportionally less.
+  //  */
+  // poofFallSpeed: 1.45,
+  // poofFallEase: "gravity" as Ease,
+  /** How strongly the pointer brushes the hairs. */
+  brush: 1.05,
+  /** How brushed hairs spring back: speed (rad/s) and damping ratio (lower bounces more). */
+  brushSpeed: 6,
+  brushDamping: 0.32
+};
+function isSettingValue(key, value) {
+  if (!(key in defaultSettings)) return false;
+  if (typeof defaultSettings[key] === "number") return typeof value === "number" && Number.isFinite(value);
+  const choices = settingChoices[key];
+  return typeof value === "string" && (!choices || choices.includes(value));
+}
+var regrowSettings = /* @__PURE__ */ new Set([
+  "density",
+  "curl",
+  "lengthVariation",
+  "messiness",
+  "fuzz",
+  "distance",
+  "sheen",
+  "sheenPosition",
+  "sheenSpread",
+  "edgeShadow",
+  // These two size the canvas margin the hairs can reach into.
+  "hoverStretch",
+  "clickStretch"
+]);
+var presetSettings = {
+  // Most related first, from Plush (the default) out to long hair; then the fun ones.
+  /** Dense, short, neat fur with a springy click. */
+  Plush: { ...defaultSettings },
+  /** Sparse, thick, glossy strands, with a smooth hover that brightens, a slight bounce as it leaves and a soft, bouncy click that darkens. */
+  Teddy: {
+    ...defaultSettings,
+    shift: -0.27,
+    darker: 0.2,
+    lighter: 0.22,
+    density: 0.8,
+    length: 0.4,
+    thickness: 2.05,
+    curl: 0.25,
+    droop: 0,
+    lengthVariation: 1,
+    messiness: 2.5,
+    fuzz: 0,
+    distance: 0,
+    taper: 0.58,
+    sheen: 1.3,
+    sheenPosition: 0.3,
+    sheenSpread: 0.59,
+    edgeShadow: 0.31,
+    vividness: 0,
+    static: 0,
+    hover: 0.34,
+    hoverSpeed: 22,
+    hoverDamping: 0.95,
+    leaveSpeed: 15,
+    leaveDamping: 0.55,
+    // leaveFallSpeed: 0.8,
+    // leaveEase: "ease-out",
+    // leaveSettle: 3.7,
+    // leaveBounce: 0,
+    sway: 0.14,
+    hoverStretch: 0,
+    hoverLight: 0.09,
+    poofHeight: 0.29,
+    clickStretch: 0.37,
+    clickLight: -0.1,
+    clickRiseSpeed: 22,
+    clickRiseDamping: 0.75,
+    clickFallSpeed: 11,
+    clickFallDamping: 0.4,
+    // poofRise: 0.15,
+    // poofSettle: 11.7,
+    // poofBounce: 0,
+    // poofEase: "ease-out",
+    poofHold: 0,
+    // poofFallSpeed: 1.35,
+    // poofFallEase: "ease-out",
+    brush: 1.05,
+    brushSpeed: 6,
+    brushDamping: 0.32
+  },
+  /** Curly, messy fur that stands up on its own, with a springy, rippling hover and click. */
+  Fluffy: {
+    ...defaultSettings,
+    shift: -0.18,
+    darker: 0.31,
+    lighter: 0.17,
+    density: 1,
+    length: 0.95,
+    thickness: 0.8,
+    curl: 0.9,
+    droop: 0,
+    lengthVariation: 2,
+    messiness: 1.35,
+    fuzz: 0,
+    distance: 0,
+    taper: 0.31,
+    sheen: 2.5,
+    sheenPosition: 0.71,
+    sheenSpread: 0.23,
+    edgeShadow: 0,
+    vividness: 0,
+    static: 0.6,
+    hover: 0.1,
+    hoverSpeed: 26.5,
+    hoverDamping: 0.45,
+    leaveSpeed: 14,
+    leaveDamping: 0.45,
+    // leaveFallSpeed: 1.3,
+    // leaveEase: "gravity",
+    // leaveSettle: 3.2,
+    // leaveBounce: 6,
+    sway: 0.14,
+    hoverStretch: 0.1,
+    hoverLight: 0.07,
+    poofHeight: 0.55,
+    clickStretch: 0.34,
+    clickLight: -0.08,
+    clickRiseSpeed: 49,
+    clickRiseDamping: 0.9,
+    clickFallSpeed: 9,
+    clickFallDamping: 0.3,
+    // poofRise: 0.13,
+    // poofSettle: 3.3,
+    // poofBounce: 10,
+    // poofEase: "ease-out",
+    poofHold: 0,
+    // poofFallSpeed: 1.2,
+    // poofFallEase: "gravity",
+    brush: 2.2,
+    brushSpeed: 14.5,
+    brushDamping: 0.3
+  },
+  /** Long, thick, curly, heavily drooping fur set deep into the button, with sharp tips, a little shine and a quick, bouncy hover that stretches it. */
+  Fuzzy: {
+    ...defaultSettings,
+    shift: -0.17,
+    darker: 0.7,
+    lighter: 0.13,
+    density: 0.55,
+    length: 1.1,
+    thickness: 2.5,
+    curl: 1.4,
+    droop: 2.55,
+    lengthVariation: 2.5,
+    messiness: 1,
+    fuzz: 2,
+    distance: -10,
+    taper: 0.21,
+    hairType: "curly",
+    typeAmount: 0.15,
+    tightness: 1.2,
+    tipShape: "sharp",
+    sheen: 1.5,
+    sheenPosition: 0.24,
+    sheenSpread: 0.29,
+    edgeShadow: 0.41,
+    vividness: 1,
+    static: 0.58,
+    hover: 0.06,
+    hoverSpeed: 25.5,
+    hoverDamping: 0.2,
+    leaveSpeed: 7,
+    leaveDamping: 0.2,
+    // leaveFallSpeed: 0.35,
+    // leaveEase: "gravity",
+    // leaveSettle: 1,
+    // leaveBounce: 5.5,
+    sway: 0.23,
+    hoverStretch: 0.23,
+    hoverLight: 0.05,
+    poofHeight: 0.12,
+    clickStretch: 0,
+    clickLight: -0.11,
+    clickRiseSpeed: 35.5,
+    clickRiseDamping: 0.9,
+    clickFallSpeed: 8,
+    clickFallDamping: 0.2,
+    // poofRise: 0.15,
+    // poofSettle: 3.1,
+    // poofBounce: 15,
+    // poofEase: "ease-out",
+    poofHold: 0,
+    // poofFallSpeed: 1,
+    // poofFallEase: "gravity",
+    brush: 0.45,
+    brushSpeed: 4.5,
+    brushDamping: 0.45
+  },
+  /** Thin, long, curly, droopy hair with lots of shine and a softer click. */
+  Shaggy: {
+    ...defaultSettings,
+    shift: -0.12,
+    darker: 0.4,
+    lighter: 0.22,
+    density: 1.25,
+    length: 0.95,
+    thickness: 0.3,
+    curl: 1.7,
+    droop: 2.05,
+    lengthVariation: 1.4,
+    messiness: 2.3,
+    fuzz: 2,
+    taper: 1,
+    sheen: 4,
+    sheenPosition: 0.21,
+    sheenSpread: 0.05,
+    edgeShadow: 0.47,
+    static: 0,
+    hover: 0.34,
+    hoverSpeed: 7.5,
+    hoverDamping: 0.5,
+    leaveSpeed: 6,
+    leaveDamping: 0.25,
+    // leaveFallSpeed: 1.15,
+    // leaveEase: "gravity",
+    // leaveSettle: 1.4,
+    // leaveBounce: 5.5,
+    sway: 0.05,
+    hoverStretch: 0,
+    hoverLight: 0,
+    poofHeight: 0.19,
+    clickStretch: 0,
+    clickRiseSpeed: 49.5,
+    clickRiseDamping: 0.9,
+    clickFallSpeed: 8.5,
+    clickFallDamping: 0.3,
+    // poofRise: 0.16,
+    // poofSettle: 2.5,
+    // poofBounce: 7.5,
+    // poofEase: "ease-in-out",
+    poofHold: 0.06,
+    // poofFallSpeed: 0.9,
+    // poofFallEase: "gravity",
+    brush: 1.05,
+    brushSpeed: 4.5,
+    brushDamping: 0.32
+  },
+  /** Long, sparse, messy, gently wavy strands with a bright band of shine along the top, a bouncy hover, and barely react to a click. */
+  Mane: {
+    ...defaultSettings,
+    shift: -0.15,
+    darker: 1,
+    lighter: 0.26,
+    density: 0.7,
+    length: 2.22,
+    thickness: 1,
+    curl: 0.25,
+    droop: 0,
+    lengthVariation: 1,
+    messiness: 2.2,
+    fuzz: 0,
+    taper: 0.32,
+    hairType: "wavy",
+    typeAmount: 0.15,
+    tightness: 0.95,
+    sheen: 2.3,
+    sheenPosition: 0,
+    sheenSpread: 0.06,
+    edgeShadow: 0.3,
+    vividness: 0,
+    static: 0.19,
+    hover: 0.17,
+    hoverSpeed: 20.5,
+    hoverDamping: 0.3,
+    leaveSpeed: 6,
+    leaveDamping: 0.8,
+    // leaveFallSpeed: 0.9,
+    // leaveEase: "gravity",
+    // leaveSettle: 4.1,
+    // leaveBounce: 3,
+    sway: 0.05,
+    hoverStretch: 0.1,
+    hoverLight: 0,
+    poofHeight: 0.17,
+    clickStretch: 0.05,
+    clickRiseSpeed: 58,
+    clickRiseDamping: 0.75,
+    clickFallSpeed: 9.5,
+    clickFallDamping: 0.25,
+    // poofRise: 0.11,
+    // poofSettle: 3.1,
+    // poofBounce: 15,
+    // poofEase: "ease-out",
+    poofHold: 0,
+    // poofFallSpeed: 1.35,
+    // poofFallEase: "gravity",
+    brush: 0.45,
+    brushSpeed: 6.5,
+    brushDamping: 0.6
+  },
+  /** Sparse, thick, very messy glittering curls with square ends set into the button, like tinsel, with slow, gentle motion that darkens on hover and click. */
+  Tinsel: {
+    ...defaultSettings,
+    shift: -0.3,
+    darker: 1,
+    lighter: 0.34,
+    density: 0.25,
+    length: 1.3,
+    thickness: 2.9,
+    curl: 1.45,
+    droop: 0.7,
+    lengthVariation: 0.9,
+    messiness: 3,
+    fuzz: 0,
+    distance: -6,
+    taper: 1,
+    typeAmount: 0.85,
+    tightness: 3,
+    tipShape: "square",
+    material: "glitter",
+    materialAmount: 2,
+    glitterDensity: 2.75,
+    glitterSize: 0.25,
+    glitterSizeVariation: 0.85,
+    sheen: 1.1,
+    sheenPosition: 0.23,
+    sheenSpread: 0.35,
+    edgeShadow: 0.44,
+    vividness: 1,
+    static: 0.42,
+    hover: 0.05,
+    hoverSpeed: 22,
+    hoverDamping: 0.5,
+    leaveSpeed: 38.5,
+    leaveDamping: 0.9,
+    // leaveFallSpeed: 0.4,
+    // leaveEase: "ease-in-out",
+    // leaveSettle: 1.4,
+    // leaveBounce: 5.5,
+    sway: 0.05,
+    hoverStretch: 0.32,
+    hoverLight: -0.08,
+    poofHeight: 0.23,
+    clickStretch: 0,
+    clickLight: -0.15,
+    clickRiseSpeed: 28.5,
+    clickRiseDamping: 0.9,
+    clickFallSpeed: 8.5,
+    clickFallDamping: 0.9,
+    // poofRise: 0.17,
+    // poofSettle: 2.5,
+    // poofBounce: 3,
+    // poofEase: "ease-in-out",
+    poofHold: 0,
+    // poofFallSpeed: 0.3,
+    // poofFallEase: "ease-out",
+    brush: 0.3,
+    brushSpeed: 3.5,
+    brushDamping: 0.65
+  },
+  /** A few thick, tightly curled, pointed strands that spring up on hover and stretch out on a click. */
+  Coil: {
+    ...defaultSettings,
+    shift: 0,
+    darker: 0.15,
+    lighter: 0.12,
+    density: 0.2,
+    length: 0.5,
+    thickness: 2,
+    curl: 2.25,
+    droop: 0,
+    lengthVariation: 2,
+    messiness: 1.9,
+    fuzz: 0,
+    distance: 0,
+    taper: 1,
+    sheen: 0.6,
+    sheenPosition: 0.38,
+    sheenSpread: 0.65,
+    edgeShadow: 0.48,
+    vividness: 1,
+    static: 0.58,
+    hover: 1,
+    hoverSpeed: 28,
+    hoverDamping: 0.55,
+    leaveSpeed: 9,
+    leaveDamping: 0.9,
+    // leaveFallSpeed: 0.6,
+    // leaveEase: "ease-out",
+    // leaveSettle: 4.1,
+    // leaveBounce: 3,
+    sway: 0.3,
+    hoverStretch: 1.35,
+    hoverLight: 0.05,
+    poofHeight: 1,
+    clickStretch: 0.86,
+    clickLight: -0.04,
+    clickRiseSpeed: 41.5,
+    clickRiseDamping: 0.7,
+    clickFallSpeed: 11.5,
+    clickFallDamping: 0.3,
+    // poofRise: 0.12,
+    // poofSettle: 4.6,
+    // poofBounce: 9.5,
+    // poofEase: "ease-out",
+    poofHold: 0.05,
+    // poofFallSpeed: 1.9,
+    // poofFallEase: "ease-out",
+    brush: 0.75,
+    brushSpeed: 8,
+    brushDamping: 1.05
+  },
+  /** Long, thin, glossy, loosely wavy hairs with sharp ends that droop heavily from just inside the button, with a quick, bouncy hover and click and a light brush. */
+  Mustache: {
+    ...defaultSettings,
+    shift: -0.07,
+    darker: 0.28,
+    lighter: 0.29,
+    density: 0.8,
+    length: 0.85,
+    thickness: 0.65,
+    curl: 0.05,
+    droop: 3.35,
+    lengthVariation: 1.15,
+    messiness: 1.05,
+    fuzz: 0.65,
+    distance: -5,
+    taper: 0.36,
+    hairType: "wavy",
+    typeAmount: 1.45,
+    tightness: 0.2,
+    tipShape: "sharp",
+    materialAmount: 0.6,
+    glitterSize: 0.6,
+    glitterSizeVariation: 1.1,
+    sheen: 2.8,
+    sheenPosition: 0.28,
+    sheenSpread: 0.26,
+    edgeShadow: 0.63,
+    vividness: 0,
+    static: 0,
+    hover: 0.1,
+    hoverSpeed: 21,
+    hoverDamping: 0.3,
+    leaveSpeed: 12.5,
+    leaveDamping: 0.9,
+    // leaveFallSpeed: 0.2,
+    // leaveEase: "ease-out",
+    // leaveSettle: 1.6,
+    // leaveBounce: 0,
+    sway: 0.25,
+    hoverStretch: 0.95,
+    hoverLight: 0.04,
+    poofHeight: 0.25,
+    clickStretch: 0.09,
+    clickLight: -0.1,
+    clickRiseSpeed: 55.5,
+    clickRiseDamping: 0.65,
+    clickFallSpeed: 17,
+    clickFallDamping: 0.35,
+    // poofRise: 0.09,
+    // poofSettle: 1,
+    // poofBounce: 0,
+    // poofEase: "ease-in-out",
+    poofHold: 0,
+    // poofFallSpeed: 0.2,
+    // poofFallEase: "ease-out",
+    brush: 0.15,
+    brushSpeed: 3,
+    brushDamping: 0.7
+  },
+  /** Sparse, thick, drooping bristles with square ends that stand up on their own, a quick hover, a high, snappy click and a strong brush. */
+  Bristle: {
+    ...defaultSettings,
+    shift: -0.13,
+    darker: 0.4,
+    lighter: 0.22,
+    density: 0.3,
+    length: 0.71,
+    thickness: 1.65,
+    curl: 1.05,
+    droop: 1.8,
+    lengthVariation: 0.7,
+    messiness: 1,
+    fuzz: 2,
+    distance: 0,
+    taper: 1,
+    typeAmount: 1.45,
+    tightness: 0.6,
+    tipShape: "square",
+    sheen: 0.1,
+    sheenPosition: 0.1,
+    sheenSpread: 0.32,
+    edgeShadow: 0,
+    vividness: 0,
+    static: 0.86,
+    hover: 0.07,
+    hoverSpeed: 27,
+    hoverDamping: 0.9,
+    leaveSpeed: 7,
+    leaveDamping: 0.25,
+    sway: 0.11,
+    hoverStretch: 0.16,
+    hoverLight: 0.07,
+    poofHeight: 1,
+    clickStretch: 0.1,
+    clickLight: 0,
+    clickRiseSpeed: 53,
+    clickRiseDamping: 0.9,
+    clickFallSpeed: 27.5,
+    clickFallDamping: 0.4,
+    poofHold: 0,
+    brush: 2.35,
+    brushSpeed: 13.5,
+    brushDamping: 0.8
+  }
+  // Velvet is set aside for now. To bring it back, uncomment it and its
+  // big-button scale (1.2) in the playground's presetBigScale.
+  // /** Very short, thick, neat pile that grows out long when hovered or clicked. */
+  // Velvet: {
+  //   ...defaultSettings,
+  //   shift: 0,
+  //   darker: 0.37,
+  //   lighter: 0.12,
+  //   density: 0.8,
+  //   length: 0.15,
+  //   thickness: 2.2,
+  //   curl: 0.25,
+  //   droop: 0,
+  //   lengthVariation: 1,
+  //   messiness: 0,
+  //   fuzz: 0,
+  //   taper: 0.32,
+  //   sheen: 1.2,
+  //   sheenPosition: 0.04,
+  //   sheenSpread: 0.52,
+  //   edgeShadow: 0.21,
+  //   vividness: 0.38,
+  //   static: 0.32,
+  //   hover: 0.68,
+  //   hoverSpeed: 12.5,
+  //   hoverDamping: 0.45,
+  //   leaveFallSpeed: 0.9,
+  //   leaveEase: "gravity",
+  //   leaveSettle: 4.1,
+  //   leaveBounce: 3,
+  //   sway: 0.14,
+  //   hoverStretch: 0.83,
+  //   hoverLight: 0,
+  //   poofHeight: 1.29,
+  //   clickStretch: 0.59,
+  //   poofRise: 0.11,
+  //   poofSettle: 3.1,
+  //   poofBounce: 15,
+  //   poofEase: "ease-out",
+  //   poofHold: 0,
+  //   poofFallSpeed: 1.35,
+  //   poofFallEase: "gravity",
+  //   brush: 2.6,
+  //   brushSpeed: 3,
+  //   brushDamping: 0.6,
+  // },
+};
+var presets = Object.fromEntries(
+  Object.entries(presetSettings).map(([name, settings]) => [name.toLowerCase(), settings])
+);
+var presetNames = Object.fromEntries(
+  Object.keys(presetSettings).map((name) => [name.toLowerCase(), name])
+);
+
+// src/fur.ts
+var halo = 32;
+var emBase = 16;
+function scaleOf(value, fontSize) {
+  if (typeof value === "number") return value;
+  const n = parseFloat(value ?? "");
+  if (!n) return void 0;
+  return /^\s*[\d.eE+-]+em\s*$/.test(value) ? n * fontSize / emBase : n;
+}
+var levels = 24;
+var sheenLevels = 4;
+var reduceMotionQuery;
+var wideScreenQuery;
+var reduceMotion = () => (reduceMotionQuery ??= matchMedia("(prefers-reduced-motion: reduce)")).matches;
+var wideScreen = () => (wideScreenQuery ??= matchMedia("(color-gamut: p3)")).matches;
+var supportsWideGamut = () => typeof matchMedia === "function" && wideScreen();
+var probe;
+function hexOf(css) {
+  probe ??= document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+  probe.clearRect(0, 0, 1, 1);
+  probe.fillStyle = "#000";
+  probe.fillStyle = css;
+  probe.fillRect(0, 0, 1, 1);
+  const [r, g, b] = probe.getImageData(0, 0, 1, 1).data;
+  return "#" + [r, g, b].map((v) => v.toString(16).padStart(2, "0")).join("");
+}
+function shadeOf(color, L, middle, saturation) {
+  const [, a, b] = toOklab(color);
+  const depth = clamp((middle - L) / 0.2, 0, 1);
+  const k = saturation * (L < middle ? 1 + 0.6 * (middle - L) : 1);
+  let hue = Math.atan2(b, a);
+  const degrees = hue * 180 / Math.PI;
+  if (degrees > 60 && degrees < 125) hue -= 22 * Math.PI / 180 * depth * smoothstep(125, 95, degrees);
+  const chroma = Math.hypot(a, b) * k;
+  return [fromLightness(clamp(L, 0, 1)), chroma * Math.cos(hue), chroma * Math.sin(hue)];
+}
+function linearSrgb([L, a, b]) {
+  const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  return [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  ];
+}
+var linearP3 = ([r, g, b]) => [
+  0.8224621 * r + 0.177538 * g,
+  0.0331941 * r + 0.9668058 * g,
+  0.0170827 * r + 0.0723974 * g + 0.9105199 * b
+];
+var linearIn = (lab, gamut) => gamut === "srgb" ? linearSrgb(lab) : linearP3(linearSrgb(lab));
+var fitsIn = (lab, gamut) => linearIn(lab, gamut).every((v) => v >= -1e-6 && v <= 1 + 1e-6);
+function room(lab, gamut) {
+  if (Math.hypot(lab[1], lab[2]) < 1e-5) return 1;
+  let lo = 0, hi = 4;
+  for (let i = 0; i < 18; i++) {
+    const mid = (lo + hi) / 2;
+    if (fitsIn([lab[0], lab[1] * mid, lab[2] * mid], gamut)) lo = mid;
+    else hi = mid;
+  }
+  return lo;
+}
+var encode = (v) => v <= 31308e-7 ? 12.92 * v : 1.055 * v ** (1 / 2.4) - 0.055;
+function encodeIn(lab, gamut, vivid, buffer) {
+  let c = lab;
+  if (gamut !== "srgb" && vivid > 0) {
+    const spread = room(c, gamut) / Math.max(1e-3, room(c, "srgb"));
+    const k = 1 + clamp(vivid, 0, 1) * (Math.min(spread, 3) - 1);
+    if (k > 1) c = [c[0], c[1] * k, c[2] * k];
+  }
+  const fit = room(c, gamut);
+  if (fit < 1) c = [c[0], c[1] * fit, c[2] * fit];
+  const [r, g, b] = linearIn(c, buffer);
+  return [encode(clamp(r, 0, 1)), encode(clamp(g, 0, 1)), encode(clamp(b, 0, 1))];
+}
+function rng(seed) {
+  return () => {
+    seed |= 0;
+    seed = seed + 1831565813 | 0;
+    let t = Math.imul(seed ^ seed >>> 15, 1 | seed);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+var clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+var smoothstep = (a, b, x) => {
+  const t = clamp((x - a) / (b - a), 0, 1);
+  return t * t * (3 - 2 * t);
+};
+function bandOf(color, S, light) {
+  const Ls = lightness(color);
+  const middle = clamp(Ls + S.shift + light, 0.05, 0.95);
+  const low = Math.max(0.02, middle - S.darker), high = Math.min(0.97, middle + S.lighter);
+  const at = (u) => u < 0.6 ? middle - (0.6 - u) / 0.6 * (middle - low) : middle + (u - 0.6) / 0.4 * (high - middle);
+  return { middle, high, at };
+}
+function labelShades(color, S) {
+  const shades = [];
+  for (const light of [0, S.hoverLight]) {
+    const { middle, at } = bandOf(color, S, light);
+    for (const u of [0.35, 0.6, 0.85]) shades.push(fromOklab(shadeOf(color, at(u), middle, 1)));
+  }
+  return shades;
+}
+function labelContrast(label, color, S) {
+  return Math.min(...labelShades(color, S).map((shade) => Math.abs(apca(label, shade))));
+}
+var labelTarget = (text) => text.size >= 24 || text.size >= 16 && text.weight >= 600 ? 60 : 75;
+function autoLabel(color, S, text = { size: 16, weight: 700 }) {
+  return pickLabel(labelShades(color, S), color, labelTarget(text));
+}
+function pickLabel(shades, color, target) {
+  const worst = (label) => Math.min(...shades.map((shade) => Math.abs(apca(label, shade))));
+  const [, a, b] = toOklab(color);
+  const chroma = Math.hypot(a, b), hue = Math.atan2(b, a);
+  const tint = (L, c) => fromOklab([fromLightness(L), c * Math.cos(hue), c * Math.sin(hue)]);
+  const tints = chroma > 0.02 ? [tint(0.96, Math.min(chroma, 0.035)), tint(0.16, Math.min(chroma, 0.05))] : [];
+  const scored = (list) => list.map((label) => ({ label, lc: worst(label) })).sort((x, y) => y.lc - x.lc);
+  const [bestTint] = scored(tints);
+  if (bestTint && bestTint.lc >= target) return bestTint;
+  return scored([...tints, "#ffffff", "#000000"])[0];
+}
+var coatColors = (coat) => [.../* @__PURE__ */ new Set([coat.ground, coat.marks, coat.third])];
+function labelLook(coat, S, label, own, text) {
+  const target = labelTarget(text);
+  const colors = coatColors(coat);
+  const shades = colors.flatMap((color2) => labelShades(color2, S));
+  let color;
+  if (label === "auto") {
+    const whole = pickLabel(shades, coat.label, target);
+    color = whole.lc >= target || colors.length === 1 ? whole.label : pickLabel(labelShades(coat.label, S), coat.label, target).label;
+  } else color = label ?? own;
+  const bare = Math.min(...shades.map((shade) => Math.abs(apca(color, shade))));
+  const halo2 = S.haloStrength > 0 && (S.halo === "always" || S.halo === "auto" && colors.length > 1 && bare < target);
+  if (!halo2) return { color, contrast: bare, halo: halo2, shadow: "" };
+  const backing = haloOf(coat.label, color, S.haloShade);
+  return {
+    color,
+    // The halo backs every letter, so the label reads against it.
+    contrast: Math.max(bare, Math.abs(apca(color, backing))),
+    halo: halo2,
+    shadow: haloShadow(backing, S.haloSize, S.haloStrength)
+  };
+}
+function haloOf(base, label, shade) {
+  const [L, a, b] = toOklab(base);
+  const step = lightness(label) > lightness(base) ? shade : -shade;
+  return fromOklab([clamp(L - step, 0, 1), a, b]);
+}
+function haloShadow(color, size, strength) {
+  const [r, g, b] = [1, 3, 5].map((i) => parseInt(color.slice(i, i + 2), 16));
+  const alpha = (a) => `rgb(${r} ${g} ${b} / ${+Math.min(1, a * strength).toFixed(3)})`;
+  const edge = Array.from({ length: 12 }, (_, i) => {
+    const angle = i / 12 * Math.PI * 2;
+    return `${(Math.cos(angle) * 0.03).toFixed(3)}em ${(Math.sin(angle) * 0.03).toFixed(3)}em 0.01em ${alpha(1)}`;
+  });
+  const glow = ([blur, a]) => `0 0 ${+(blur * size).toFixed(3)}em ${alpha(a)}`;
+  return [...edge, ...[[0.35, 0.7], [0.6, 0.45], [0.95, 0.25]].map(glow)].join(", ");
+}
+var coats = {
+  zebra: { ground: "#eeeae1", marks: "#17140f", third: "#eeeae1", own: "ground" },
+  tiger: { ground: "#d4701c", marks: "#1b110a", third: "#d4701c", own: "ground" },
+  dalmatian: { ground: "#f2efe7", marks: "#1c1a18", third: "#f2efe7", own: "ground" },
+  leopard: { ground: "#d9a85c", marks: "#21170f", third: "#a9661f", own: "ground" },
+  giraffe: { ground: "#ecdcb8", marks: "#91501f", third: "#673312", own: "marks" }
+};
+function coatOf(color, S) {
+  if (S.pattern === "none" || !(S.pattern in coats)) return { ground: color, marks: color, third: color, label: color };
+  const coat = coats[S.pattern];
+  if (S.patternColors !== "tinted") return { ...coat, label: coat[coat.own] };
+  const from = lightness(coat[coat.own]), base = lightness(color);
+  const tint = (hex) => {
+    const L = clamp(base + lightness(hex) - from, 0.03, 0.97);
+    return fromOklab(shadeOf(color, L, L, 1 - 0.6 * smoothstep(0.15, 0.6, Math.abs(L - base))));
+  };
+  const pick = (key) => key === coat.own ? color : tint(coat[key]);
+  return { ground: pick("ground"), marks: pick("marks"), third: pick("third"), label: color };
+}
+function grow(w, h, radius, seed, scale, pad, S) {
+  const random = rng(seed);
+  const cx = w / 2, cy = h / 2, r = Math.min(radius, w / 2, h / 2);
+  const sdf = (x, y) => {
+    const qx = Math.abs(x - cx) - (w / 2 - r), qy = Math.abs(y - cy) - (h / 2 - r);
+    return Math.hypot(Math.max(qx, 0), Math.max(qy, 0)) + Math.min(Math.max(qx, qy), 0) - r;
+  };
+  const off = S.distance * scale, reach = Math.max(0, off);
+  const max = Math.max(0, Math.round((w * h / scale ** 1.6 + (w + h) * 7 / scale) * S.density));
+  const f = () => new Float32Array(max);
+  const s = {
+    x: f(),
+    y: f(),
+    restX: f(),
+    restY: f(),
+    leanX: f(),
+    leanY: f(),
+    standX: f(),
+    standY: f(),
+    len: f(),
+    curl: f(),
+    phase: f(),
+    rim: f()
+  };
+  const shadeLevel = f(), kindOf = f(), seedOf = f();
+  const seedRandom = rng(seed ^ 1540483477);
+  const lists = [0, 1].map(() => Array.from({ length: levels }, () => []));
+  const sheen = Array.from({ length: sheenLevels }, () => []);
+  let n = 0;
+  for (let tries = 0; n < max && tries < max * 4; tries++) {
+    const x = random() * (w + 4 + reach * 2) - 2 - reach, y = random() * (h + 4 + reach * 2) - 2 - reach;
+    const d = sdf(x, y) - off;
+    if (d > 0.5) continue;
+    const rim = smoothstep(-9 * scale, 0, d);
+    if (random() > 0.4 + 0.6 * rim) continue;
+    const gx = sdf(x + 0.5, y) - sdf(x - 0.5, y), gy = sdf(x, y + 0.5) - sdf(x, y - 0.5);
+    const g = Math.hypot(gx, gy) || 1;
+    const outX = gx / g, outY = gy / g;
+    const fromX = x - cx, fromY = y - cy;
+    const side = Math.tanh(fromX / (12 * scale));
+    const wantX = side * 0.6, wantY = 1;
+    const along = wantX * outX + wantY * outY;
+    let ax = (wantX - along * outX) * 1.4;
+    let ay = (wantY - along * outY) * 1.4 + 0.3;
+    const al = Math.hypot(ax, ay) || 1;
+    ax /= al;
+    ay /= al;
+    const swirl = side * 0.2 * Math.sin((Math.abs(fromX) * 0.05 + y * 0.035) / scale) + 0.5 * S.messiness * (random() - 0.5);
+    s.restX[n] = ax * Math.cos(swirl) - ay * Math.sin(swirl);
+    s.restY[n] = ax * Math.sin(swirl) + ay * Math.cos(swirl);
+    const lean = 0.32 * S.fuzz * rim * (0.25 + 0.75 * smoothstep(-1, 0.2, outY));
+    s.leanX[n] = outX * lean;
+    s.leanY[n] = outY * lean;
+    const stand = random() * Math.PI * 2;
+    const guard = random() < 0.3 + 0.3 * rim ? 1 : 0;
+    s.x[n] = x + pad;
+    s.y[n] = y + pad;
+    s.standX[n] = outX * rim + Math.cos(stand) * (1 - rim);
+    s.standY[n] = outY * rim + Math.sin(stand) * (1 - rim);
+    const vary = (spread2) => (random() - 0.5) * spread2 * S.lengthVariation;
+    const base = (guard ? 9.5 + vary(5) : 5.5 + vary(3)) + rim * (4 + vary(4));
+    s.len[n] = Math.max(1, base) * scale;
+    s.curl[n] = (random() * 2 - 1) * (guard ? 0.9 : 0.6) * S.curl;
+    s.phase[n] = random() * Math.PI * 2;
+    s.rim[n] = rim;
+    const px = fromX / (w / 2), py = fromY / (h / 2);
+    const occlusion = rim * Math.max(0, py) * 0.15;
+    const topEdge = rim * smoothstep(-0.2, -0.9, outY) * clamp(S.edgeShadow, 0, 1);
+    const shade = clamp(0.6 - 0.18 * py - 0.06 * px * px - occlusion - 0.4 * topEdge + (random() - 0.5) * 0.32 + (guard ? 0.06 : -0.08), 0, 1);
+    const center = clamp(S.sheenPosition, 0, 1) * 2 - 1, spread = Math.max(0.03, S.sheenSpread);
+    const band = Math.exp(-((py - center) ** 2) / (2 * spread * spread));
+    const shine = (0.14 * band + 0.04 * smoothstep(0.4, -0.9, py) * rim * (1 - topEdge)) * S.sheen;
+    seedOf[n] = seedRandom();
+    if (random() < shine) {
+      const level = Math.floor(random() * sheenLevels);
+      sheen[level].push(n);
+      shadeLevel[n] = level / (sheenLevels - 1);
+      kindOf[n] = 2;
+    } else {
+      const level = Math.round(shade * (levels - 1));
+      lists[guard][level].push(n);
+      shadeLevel[n] = level / (levels - 1);
+      kindOf[n] = guard;
+    }
+    n++;
+  }
+  const order = [...lists[0].flat(), ...lists[1].flat(), ...sheen.flat()];
+  const count = order.length;
+  const data = new Float32Array(count * hairFloats);
+  const roots = new Float32Array(count * 2);
+  order.forEach((i, j) => {
+    data.set([
+      s.x[i],
+      s.y[i],
+      s.restX[i],
+      s.restY[i],
+      s.leanX[i],
+      s.leanY[i],
+      s.standX[i],
+      s.standY[i],
+      s.len[i],
+      s.curl[i],
+      s.phase[i],
+      s.rim[i],
+      shadeLevel[i],
+      kindOf[i],
+      seedOf[i]
+    ], j * hairFloats);
+    roots[j * 2] = s.x[i];
+    roots[j * 2 + 1] = s.y[i];
+  });
+  return { n: count, roots, data };
+}
+var inert = { update() {
+}, play() {
+}, label: null, reach: 0, destroy() {
+} };
+function mountFur(button, initial) {
+  let config = initial;
+  let S = config.settings;
+  let destroyed = false;
+  const layer = createLayer(() => {
+    if (destroyed) return;
+    plant();
+    draw();
+  });
+  if (!layer) return inert;
+  const events = new AbortController();
+  const on = (type, listener) => button.addEventListener(type, listener, { signal: events.signal });
+  const before = {
+    position: button.style.position,
+    isolation: button.style.isolation,
+    backgroundColor: button.style.backgroundColor,
+    color: button.style.color,
+    textShadow: button.style.textShadow
+  };
+  const computed = getComputedStyle(button);
+  const ownBackground = computed.backgroundColor;
+  if (computed.position === "static") button.style.position = "relative";
+  button.style.isolation = "isolate";
+  let canvas, ctx;
+  let setup = "";
+  const gamutNow = () => config.wideGamut && layer.gamut === "display-p3" && wideScreen() ? "display-p3" : "srgb";
+  function makeCanvas() {
+    const gamut = gamutNow();
+    setup = gamut;
+    const next = document.createElement("canvas");
+    next.setAttribute("aria-hidden", "true");
+    next.setAttribute("data-hairy", "");
+    Object.assign(next.style, { position: "absolute", pointerEvents: "none", zIndex: "-1" });
+    ctx = next.getContext("2d", { colorSpace: gamut });
+    if (canvas) canvas.replaceWith(next);
+    else button.prepend(next);
+    canvas = next;
+  }
+  makeCanvas();
+  let scale = 1, pad = halo;
+  let w = 0, h = 0, radius = 0, dpr = 1;
+  let shift = 0;
+  let strands = null, brush = null;
+  let lift = clamp(S.static, 0, 1), velocity = 0, target = lift, hovering = false;
+  let stage = null, stageTime = 0;
+  let risePeak = 0, rose = false;
+  let poof = 0, poofVelocity = 0, recoil = false;
+  let grown = S.length, growth = 0;
+  let spring = "hover";
+  let pointerX = -1e3, pointerY = -1e3, brushing = 0;
+  let frame = 0, last = 0, time = 0;
+  let label = null;
+  const seed = [...button.textContent ?? ""].reduce((a, c) => a * 31 + c.charCodeAt(0) | 0, 7);
+  let surface = "#000";
+  let coat = coatOf(surface, S);
+  const shades = /* @__PURE__ */ new Map();
+  let uploaded = -1;
+  function readColors() {
+    surface = hexOf(config.color ?? ownBackground);
+    coat = coatOf(surface, S);
+    shades.clear();
+    uploaded = -1;
+    useShades(0);
+    button.style.backgroundColor = "transparent";
+    button.style.color = before.color;
+    const style = getComputedStyle(button);
+    const text = { size: parseFloat(style.fontSize) || 16, weight: parseFloat(style.fontWeight) || 400 };
+    const wanted = config.label === void 0 || config.label === "auto" ? config.label : hexOf(config.label);
+    const look = labelLook(coat, S, wanted, hexOf(style.color), text);
+    button.style.textShadow = look.shadow || before.textShadow;
+    label = config.label === void 0 ? null : { color: look.color, contrast: look.contrast, halo: look.halo };
+    if (label) button.style.color = label.color;
+  }
+  function useShades(light) {
+    const key = Math.round(light * 1e3);
+    if (key === uploaded) return;
+    let ramps = shades.get(key);
+    if (!ramps) {
+      if (shades.size > 2e3) shades.clear();
+      ramps = rampsAt(key / 1e3);
+      shades.set(key, ramps);
+    }
+    layer.setRamp(ramps);
+    uploaded = key;
+  }
+  function rampsAt(light) {
+    const { middle, high } = bandOf(coat.ground, S, light);
+    const gamut = gamutNow(), buffer = layer.gamut;
+    const bytes = new Uint8Array(rampWidth * rampRows * 4);
+    const palette = (color) => {
+      const band = bandOf(color, S, light);
+      return (u) => shadeOf(color, band.at(u), band.middle, 1);
+    };
+    const fur = palette(coat.ground);
+    const patterned = S.pattern !== "none";
+    const rows = [
+      fur,
+      (u) => shadeOf(coat.ground, Math.min(0.97, high + 0.03 + 0.06 * u), middle, 0.8),
+      patterned ? palette(coat.marks) : null,
+      patterned ? palette(coat.third) : null
+    ];
+    rows.forEach((row, r) => {
+      if (!row) {
+        bytes.copyWithin(r * rampWidth * 4, 0, rampWidth * 4);
+        return;
+      }
+      for (let i = 0; i < rampWidth; i++) {
+        const [cr, cg, cb] = encodeIn(row(i / (rampWidth - 1)), gamut, S.vividness, buffer);
+        const k = (r * rampWidth + i) * 4;
+        bytes[k] = Math.round(cr * 255);
+        bytes[k + 1] = Math.round(cg * 255);
+        bytes[k + 2] = Math.round(cb * 255);
+        bytes[k + 3] = 255;
+      }
+    });
+    return bytes;
+  }
+  function lightNow() {
+    if (!S.hoverLight && !S.clickLight) return 0;
+    const base = clamp(S.static, 0, 1), hoverTop = Math.min(1, base + S.hover);
+    const hovered = hoverTop - base > 1e-3 ? clamp((lift - base) / (hoverTop - base), 0, 1) : 0;
+    return S.hoverLight * hovered + S.clickLight * clamp(poof, -0.5, 1);
+  }
+  const padFor = (scale2) => Math.round(
+    halo * scale2 * Math.max(1, S.length / 1.4) * (1 + Math.max(0, S.hoverStretch) + Math.max(0, S.clickStretch)) + Math.max(0, S.distance) * scale2
+  );
+  const reachFor = (scale2) => {
+    const longest = (13.5 + 4.5 * Math.max(0, S.lengthVariation)) * scale2 * Math.max(0, S.length);
+    const resting = longest * (1 + 0.2 * Math.max(0, S.droop));
+    const standing = longest * 1.3 * (1 + 1.3 * Math.max(0, S.hoverStretch) + Math.max(0, S.clickStretch));
+    return Math.min(pad, Math.max(0, Math.round(Math.max(resting, standing) + S.distance * scale2)));
+  };
+  function layout() {
+    const b = button.getBoundingClientRect();
+    const style = getComputedStyle(button);
+    w = b.width;
+    h = b.height;
+    const fontSize = parseFloat(style.fontSize) || emBase;
+    scale = scaleOf(config.scale, fontSize) ?? scaleOf(style.getPropertyValue("--hairy-scale"), fontSize) ?? 1;
+    pad = padFor(scale);
+    Object.assign(canvas.style, { inset: `-${pad}px`, width: `calc(100% + ${pad * 2}px)`, height: `calc(100% + ${pad * 2}px)` });
+    radius = parseFloat(style.borderTopLeftRadius) || 0;
+    place();
+    dpr = config.pixelRatio ?? Math.min(2, devicePixelRatio || 1);
+    dpr = Math.min(dpr, layer.largest / Math.max(1, w + pad * 2, h + pad * 2));
+    canvas.width = Math.round((w + pad * 2) * dpr);
+    canvas.height = Math.round((h + pad * 2) * dpr);
+    plant();
+  }
+  function plant() {
+    const { data, ...rest } = grow(w, h, radius, seed, scale, pad, S);
+    strands = rest;
+    brush = null;
+    layer.setHairs(data, rest.n);
+  }
+  const choice = (key, value) => Math.max(0, settingChoices[key].indexOf(value));
+  function frameNow() {
+    const up = Math.max(-0.5, lift);
+    const base = clamp(S.static, 0, 1);
+    const sparse = 1 - clamp(S.density, 0, 1);
+    const rr = Math.min(radius, w / 2, h / 2);
+    const inset = Math.min((3 - S.distance - 5 * sparse) * scale, Math.min(w, h) / 2 - 1);
+    return {
+      width: canvas.width / dpr,
+      height: canvas.height / dpr,
+      dpr,
+      lift,
+      sway: reduceMotion() ? 0 : S.sway * Math.min(1, Math.abs(up) * 3),
+      time,
+      hovering,
+      pointerX,
+      pointerY,
+      near: 2 * (22 * scale) ** 2,
+      base,
+      // Stretch: hovering stretches hairs as they rise from rest to the hover
+      // lift (and a little past it in a bouncy overshoot). A click stretches
+      // them further along its own rise and fall, `poof`, so it works even
+      // when the fur already stands fully upright.
+      hoverTop: Math.min(1, base + S.hover),
+      hoverStretch: S.hoverStretch,
+      clicked: S.clickStretch * clamp(poof, -0.5, 1),
+      grown,
+      droop: S.droop,
+      scale,
+      thickness: S.thickness,
+      taper: clamp(S.taper, 0.05, 1),
+      softness: clamp(S.softness, 0, 2),
+      hairType: choice("hairType", S.hairType),
+      typeAmount: Math.max(0, S.typeAmount),
+      tightness: clamp(S.tightness, 0.1, 4),
+      tip: choice("tipShape", S.tipShape),
+      material: choice("material", S.material),
+      materialAmount: Math.max(0, S.materialAmount),
+      glitterDensity: clamp(S.glitterDensity, 0, maxGlitterDensity),
+      glitterSize: Math.max(0, S.glitterSize),
+      glitterSizeVariation: clamp(S.glitterSizeVariation, 0, 3),
+      pattern: choice("pattern", S.pattern),
+      patternScale: clamp(S.patternScale, 0.1, 10),
+      body: { x: pad + w / 2, y: pad + h / 2, w: w / 2, h: h / 2 },
+      coat: {
+        x: pad + inset,
+        y: pad + inset,
+        w: w - inset * 2,
+        h: h - inset * 2,
+        radius: Math.max(0, rr - inset),
+        // In CSS pixels, the same at any pixel ratio: divided by it, it was
+        // twice as wide on 1x screens and when zoomed out, and showed past the hairs.
+        blur: (1.25 + sparse) * scale,
+        top: pad,
+        bottom: pad + h
+      }
+    };
+  }
+  function place() {
+    shift = Number.isFinite(config.translate) ? config.translate : 0;
+    canvas.style.translate = shift ? `0 ${shift}px` : "";
+  }
+  function draw() {
+    if (!strands || destroyed) return;
+    useShades(lightNow());
+    layer.render(ctx, frameNow());
+  }
+  function relax(dt) {
+    if (!brush || brushing <= 0) return false;
+    const { bends, speeds } = brush;
+    const k = S.brushSpeed ** 2, damping = 2 * S.brushSpeed * S.brushDamping;
+    let moving = 0;
+    for (let i = 0; i < bends.length; i += 2) {
+      let bx = bends[i], by = bends[i + 1], vx = speeds[i], vy = speeds[i + 1];
+      if (bx === 0 && by === 0 && vx === 0 && vy === 0) continue;
+      vx += (-k * bx - damping * vx) * dt;
+      vy += (-k * by - damping * vy) * dt;
+      bx += vx * dt;
+      by += vy * dt;
+      if (Math.abs(bx) + Math.abs(by) + Math.abs(vx) + Math.abs(vy) < 2e-3) bx = by = vx = vy = 0;
+      else moving++;
+      bends[i] = bx;
+      bends[i + 1] = by;
+      speeds[i] = vx;
+      speeds[i + 1] = vy;
+    }
+    layer.setBends(bends);
+    brushing = moving;
+    if (!moving) brush = null;
+    return moving > 0;
+  }
+  const springOf = (speed, ratio) => [speed * speed, 2 * speed * ratio];
+  function springLift(to, k, damping, dt) {
+    const steps = Math.ceil(dt * 240);
+    for (let i = 0; i < steps; i++) {
+      velocity += (k * (to - lift) - damping * velocity) * (dt / steps);
+      lift += velocity * (dt / steps);
+    }
+  }
+  function springPoof(to, k, damping, dt) {
+    const steps = Math.ceil(dt * 240);
+    for (let i = 0; i < steps; i++) {
+      poofVelocity += (k * (to - poof) - damping * poofVelocity) * (dt / steps);
+      poof += poofVelocity * (dt / steps);
+    }
+  }
+  function tick(now) {
+    const dt = Math.min(0.05, last ? (now - last) / 1e3 : 1 / 60);
+    last = now;
+    time += dt;
+    if (reduceMotion()) {
+      lift = target;
+      velocity = 0;
+      stage = null;
+      poof = 0;
+      poofVelocity = 0;
+      recoil = false;
+      grown = S.length;
+      growth = 0;
+    } else if (stage === "rise" || stage === "hold") {
+      stageTime += dt;
+      const [k, damping] = springOf(S.clickRiseSpeed, S.clickRiseDamping);
+      springLift(risePeak, k, damping, dt);
+      springPoof(1, k, damping, dt);
+      if (stage === "rise") {
+        if (velocity > 0.01) rose = true;
+        const there = Math.abs(risePeak - lift) < 3e-3 && Math.abs(velocity) < 0.05;
+        if (rose && velocity <= 0 || there || stageTime > 2) {
+          stage = "hold";
+          stageTime = 0;
+        }
+      }
+      if (stage === "hold" && stageTime >= S.poofHold) {
+        stage = null;
+        spring = "click";
+        recoil = true;
+      }
+    } else {
+      const [k, damping] = spring === "click" ? springOf(S.clickFallSpeed, S.clickFallDamping) : spring === "leave" ? springOf(S.leaveSpeed, S.leaveDamping) : springOf(S.hoverSpeed, S.hoverDamping);
+      springLift(target, k, damping, dt);
+    }
+    if (recoil) {
+      const [k, damping] = springOf(S.clickFallSpeed, S.clickFallDamping);
+      springPoof(0, k, damping, dt);
+      if (Math.abs(poof) < 2e-3 && Math.abs(poofVelocity) < 0.01) {
+        poof = 0;
+        poofVelocity = 0;
+        recoil = false;
+      }
+    }
+    if (!reduceMotion() && (grown !== S.length || growth !== 0)) {
+      const [k, damping] = springOf(S.hoverSpeed, S.hoverDamping);
+      const steps = Math.ceil(dt * 240);
+      for (let i = 0; i < steps; i++) {
+        growth += (k * (S.length - grown) - damping * growth) * (dt / steps);
+        grown += growth * (dt / steps);
+      }
+      if (Math.abs(S.length - grown) < 2e-3 && Math.abs(growth) < 2e-3) {
+        grown = S.length;
+        growth = 0;
+      }
+    }
+    const moving = relax(dt);
+    draw();
+    const settled = stage === null && !recoil && growth === 0 && grown === S.length && Math.abs(target - lift) < 2e-3 && Math.abs(velocity) < 2e-3 && !moving;
+    if (settled) spring = "hover";
+    if (settled && (!hovering || reduceMotion())) {
+      lift = target;
+      draw();
+      frame = 0;
+      last = 0;
+      return;
+    }
+    frame = requestAnimationFrame(tick);
+  }
+  const run = () => {
+    if (!frame) frame = requestAnimationFrame(tick);
+  };
+  const focused = () => {
+    try {
+      return button.matches(":focus-visible");
+    } catch {
+      return false;
+    }
+  };
+  const aim = () => {
+    const rest = clamp(S.static, 0, 1);
+    target = hovering || focused() ? Math.min(1, rest + S.hover) : rest;
+    run();
+  };
+  const startPoof = () => {
+    if (reduceMotion()) return;
+    stage = "rise";
+    stageTime = 0;
+    rose = false;
+    recoil = false;
+    risePeak = Math.max(lift, Math.min(1, Math.max(lift, target) + S.poofHeight));
+    spring = "click";
+    run();
+  };
+  const hoverIn = () => {
+    hovering = true;
+    if (spring === "leave") spring = "hover";
+    aim();
+  };
+  const hoverOut = () => {
+    hovering = false;
+    pointerX = pointerY = -1e3;
+    aim();
+    if (stage === null && spring === "hover") spring = "leave";
+  };
+  let lastX = 0, lastY = 0;
+  const local = (event) => {
+    const rect = button.getBoundingClientRect();
+    pointerX = event.clientX - rect.left + pad;
+    pointerY = event.clientY - rect.top + pad - shift;
+  };
+  on("pointerenter", (event) => {
+    local(event);
+    lastX = pointerX;
+    lastY = pointerY;
+    hoverIn();
+  });
+  on("pointermove", (event) => {
+    local(event);
+    if (!strands || reduceMotion()) return;
+    let mx = pointerX - lastX, my = pointerY - lastY;
+    lastX = pointerX;
+    lastY = pointerY;
+    const speed = Math.hypot(mx, my);
+    if (speed < 0.01) return;
+    const most = 16 * scale;
+    if (speed > most) {
+      mx *= most / speed;
+      my *= most / speed;
+    }
+    mx /= scale;
+    my /= scale;
+    const clicking = stage === "rise" || stage === "hold" || stage === "fall" || spring === "click";
+    const { roots, n } = strands, reach = 34 * scale, push = 0.09 * S.brush * (clicking ? 0.3 : 1);
+    brush ??= { bends: new Float32Array(n * 2), speeds: new Float32Array(n * 2) };
+    const { bends, speeds } = brush;
+    for (let i = 0; i < n * 2; i += 2) {
+      const dx = roots[i] - pointerX, dy = roots[i + 1] - pointerY;
+      const d2 = dx * dx + dy * dy;
+      if (d2 > reach * reach * 4) continue;
+      const f = Math.exp(-d2 / (2 * reach * reach)) * push;
+      speeds[i] += mx * f * 4;
+      speeds[i + 1] += my * f * 4;
+      const v = Math.hypot(speeds[i], speeds[i + 1]);
+      if (v > 8) {
+        speeds[i] *= 8 / v;
+        speeds[i + 1] *= 8 / v;
+      }
+      const b = Math.hypot(bends[i], bends[i + 1]);
+      if (b > 1.1) {
+        bends[i] *= 1.1 / b;
+        bends[i + 1] *= 1.1 / b;
+      }
+    }
+    brushing = 1;
+    run();
+  });
+  on("pointerleave", hoverOut);
+  on("pointerdown", (event) => {
+    local(event);
+    startPoof();
+  });
+  on("keydown", (event) => {
+    if (event.repeat || event.key !== "Enter" && event.key !== " ") return;
+    startPoof();
+  });
+  on("focus", () => {
+    if (!focused() || hovering) return;
+    aim();
+  });
+  on("blur", aim);
+  const refresh = () => {
+    if (setup !== gamutNow()) {
+      makeCanvas();
+      layout();
+    } else if (padFor(scale) !== pad) layout();
+    readColors();
+    place();
+    draw();
+    aim();
+  };
+  const regrow = () => {
+    layout();
+    refresh();
+  };
+  const resize = new ResizeObserver(regrow);
+  resize.observe(button);
+  layout();
+  readColors();
+  draw();
+  return {
+    update(next) {
+      const regrows = next.scale !== config.scale || next.pixelRatio !== config.pixelRatio || Object.keys(next.settings).some((key) => regrowSettings.has(key) && next.settings[key] !== S[key]);
+      config = next;
+      S = next.settings;
+      if (regrows) regrow();
+      else refresh();
+    },
+    play(motion) {
+      if (motion === "click") startPoof();
+      else if (motion === "hover") hoverIn();
+      else hoverOut();
+    },
+    get label() {
+      return label;
+    },
+    get reach() {
+      return reachFor(scale);
+    },
+    destroy() {
+      destroyed = true;
+      layer.dispose();
+      events.abort();
+      resize.disconnect();
+      if (frame) cancelAnimationFrame(frame);
+      frame = 0;
+      canvas.remove();
+      Object.assign(button.style, before);
+    }
+  };
+}
+
+// src/options.ts
+var optionGroups = {
+  shade: {
+    /** Moves the fur's middle shade lighter or darker than the color, in L* (0–1). */
+    lightness: "shift",
+    /** How much darker the darkest hairs are than the middle shade. */
+    shadows: "darker",
+    /** How much lighter the lightest hairs are than the middle shade. */
+    highlights: "lighter",
+    /** On wide-gamut (P3) screens, how far colors move out toward the more vivid ones sRGB can't show (0 to 1). */
+    vividness: "vividness"
+  },
+  shine: {
+    /** How many glossy hairs catch the light. 0 is matte. */
+    amount: "sheen",
+    /** Where the band of shine sits: 0 at the top, 1 at the bottom. */
+    position: "sheenPosition",
+    /** How wide the band of shine is. */
+    spread: "sheenSpread",
+    /** Darkens the hairs along the top edge, where the surface turns away from the light. */
+    edgeShadow: "edgeShadow"
+  },
+  hair: {
+    density: "density",
+    length: "length",
+    thickness: "thickness",
+    /** Tip width compared to the root. */
+    taper: "taper",
+    /** How soft each hair's edge is, in px: 0 is crisp, higher fades it over more pixels, up to 2. */
+    softness: "softness",
+    curl: "curl",
+    droop: "droop",
+    /** How much hair lengths differ. 0 makes them all the same. */
+    lengthVariation: "lengthVariation",
+    /** How far hairs stray from the combed direction. */
+    messiness: "messiness",
+    /** How far hairs along the outline lean out, softening the edge. */
+    fuzz: "fuzz",
+    /** Where the fur starts from the element's edge, in px. Below 0 it eats into the element. */
+    distance: "distance",
+    /** The hairs' pattern: "straight", "wavy", "curly" or "frizzy". */
+    type: "hairType",
+    /** How strong the waves, curls or frizz are: 0 is straight, 1 the usual amount. */
+    typeAmount: "typeAmount",
+    /** How many waves, turns or kinks fit along each hair: higher is tighter. */
+    tightness: "tightness",
+    /** How each hair ends: "round", "sharp" or "square". */
+    end: "tipShape"
+  },
+  material: {
+    /** What the hair looks made of: "natural" or "glitter". */
+    type: "material",
+    /** How bright glitter's flashes are. */
+    amount: "materialAmount"
+  },
+  pattern: {
+    /** A coat pattern, as on an animal: "none", "zebra", "tiger", "dalmatian", "leopard" or "giraffe". */
+    type: "pattern",
+    /** "natural" takes the animal's own colors; "tinted" makes them from the fur's color. */
+    colors: "patternColors",
+    /** How big the stripes, spots or patches are: 1 the usual size. */
+    scale: "patternScale"
+  },
+  halo: {
+    /** When the label gets a halo: "auto" only when a pattern needs one, or "always" or "never". */
+    when: "halo",
+    /** How far its shade moves from the base color, away from the label's: darker under a light label, lighter under a dark one (L, 0–1). */
+    shade: "haloShade",
+    /** How far the glow spreads round the letters: 1 the usual size. */
+    size: "haloSize",
+    /** How strong it is: 1 the usual, 0 none. */
+    strength: "haloStrength"
+  },
+  glitter: {
+    /** How many flakes there are: 1 the usual amount, 0 none. */
+    density: "glitterDensity",
+    /** How big the flakes are: 1 the usual size. */
+    size: "glitterSize",
+    /** How much flake sizes differ: 0 all the same; at 1 they range from half to twice the size. */
+    sizeVariation: "glitterSizeVariation"
+  },
+  rest: {
+    /** How far the hairs stand up on their own: 0 lies combed flat, 1 stands straight up. */
+    static: "static"
+  },
+  hover: {
+    /** How much further the hairs stand up on hover, on top of the rest's static. */
+    static: "hover",
+    /** How much longer the hairs grow as they rise. 1 doubles them. */
+    stretch: "hoverStretch",
+    /** How much lighter the fur gets as it rises, in L*. Below 0 darkens. */
+    lightness: "hoverLight",
+    /** How far each hair rocks from side to side while hovered. */
+    sway: "sway",
+    /** How quickly the fur rises (rad/s). */
+    speed: "hoverSpeed",
+    /** How much the rise bounces: lower overshoots, 1 doesn't. */
+    damping: "hoverDamping"
+  },
+  leave: {
+    /** How quickly the fur springs back to rest when the pointer leaves (rad/s). */
+    speed: "leaveSpeed",
+    /** How much it bounces past rest: lower overshoots, 1 doesn't. */
+    damping: "leaveDamping"
+    // Falling along a curve, set aside for now: hovering out springs instead.
+    // /** How fast the fur falls when the pointer leaves: a full drop takes 1 ÷ this many seconds. */
+    // fallSpeed: "leaveFallSpeed",
+    // /** The curve of the fall. */
+    // easing: "leaveEase",
+    // /** How quickly the landing bounce fades. */
+    // settle: "leaveSettle",
+    // /** How fast the fur wobbles after it lands. 0 doesn't wobble. */
+    // bounce: "leaveBounce",
+  },
+  click: {
+    /** How much further a click makes the fur stand up, on top of hovering. */
+    static: "poofHeight",
+    /** How much longer still the hairs grow at the top of a click. */
+    stretch: "clickStretch",
+    /** How much lighter still a click makes the fur, in L*. */
+    lightness: "clickLight",
+    /** How quickly the fur poofs up (rad/s). */
+    riseSpeed: "clickRiseSpeed",
+    /** How far the poof overshoots its peak: lower overshoots more, 1 doesn't. */
+    riseDamping: "clickRiseDamping",
+    /** Seconds the fur hangs at the top. */
+    hold: "poofHold",
+    /** How quickly the fur comes back down, and the stretch springs back (rad/s). */
+    fallSpeed: "clickFallSpeed",
+    /** How much it bounces on the way down: lower bounces more, 1 doesn't. */
+    fallDamping: "clickFallDamping"
+    // Rising and falling along curves, set aside for now: a click springs instead.
+    // /** Seconds the fur takes to poof up. */
+    // rise: "poofRise",
+    // /** The curve of the rise. */
+    // riseEasing: "poofEase",
+    // /** How fast the fall comes down: a full drop takes 1 ÷ this many seconds. */
+    // fallSpeed: "poofFallSpeed",
+    // /** The curve of the fall. */
+    // fallEasing: "poofFallEase",
+    // /** How quickly the landing bounce fades. */
+    // settle: "poofSettle",
+    // /** How fast the fur wobbles after it lands. 0 doesn't wobble. */
+    // bounce: "poofBounce",
+  },
+  brush: {
+    /** How strongly moving the pointer across the fur pushes the hairs. 0 turns brushing off. */
+    amount: "brush",
+    /** How quickly brushed hairs spring back. */
+    speed: "brushSpeed",
+    /** How much brushed hairs wobble on the way back. */
+    damping: "brushDamping"
+  }
+};
+function resolveSettings(options) {
+  const base = options.preset && presets[options.preset] || defaultSettings;
+  const settings = { ...base };
+  for (const [group, names] of Object.entries(optionGroups)) {
+    const values = options[group];
+    if (!values) continue;
+    for (const [name, key] of Object.entries(names)) {
+      const value = values[name];
+      if (!isSettingValue(key, value)) continue;
+      Object.assign(settings, { [key]: value });
+    }
+  }
+  return settings;
+}
+function diffOptions(settings, preset = "plush") {
+  const base = presets[preset] ?? defaultSettings;
+  const out = {};
+  for (const [group, names] of Object.entries(optionGroups)) {
+    for (const [name, key] of Object.entries(names)) {
+      if (settings[key] === base[key]) continue;
+      (out[group] ??= {})[name] = settings[key];
+    }
+  }
+  return out;
+}
+
+// src/index.ts
+var configOf = (options) => ({
+  settings: resolveSettings(options),
+  color: options.color,
+  label: options.label,
+  scale: options.scale,
+  translate: options.translate,
+  pixelRatio: options.pixelRatio,
+  wideGamut: options.wideGamut ?? true
+});
+function hairy(element, options = {}) {
+  let current = { ...options };
+  const fur = mountFur(element, configOf(current));
+  return {
+    update(next) {
+      const merged = { ...current, ...next };
+      for (const group of Object.keys(optionGroups)) {
+        if (next[group]) Object.assign(merged, { [group]: { ...current[group], ...next[group] } });
+      }
+      current = merged;
+      fur.update(configOf(current));
+    },
+    set(next) {
+      current = { ...next };
+      fur.update(configOf(current));
+    },
+    play: (motion) => fur.play(motion),
+    get label() {
+      return fur.label;
+    },
+    get reach() {
+      return fur.reach;
+    },
+    destroy: () => fur.destroy()
+  };
+}
+
+export {
+  apca,
+  gpuSupported,
+  eases,
+  settingChoices,
+  defaultSettings,
+  isSettingValue,
+  regrowSettings,
+  presets,
+  presetNames,
+  supportsWideGamut,
+  labelContrast,
+  autoLabel,
+  optionGroups,
+  resolveSettings,
+  diffOptions,
+  hairy
+};
+//# sourceMappingURL=chunk-JIET4PY7.js.map