fancy-ui-react 0.2.0 → 0.3.0

package/dist/components/datamosh-transition/datamosh-transition-core.js

@@ -0,0 +1,370 @@
+"use client";
+const DEFAULT_COLORS = [
+  "#ffffff",
+  "#3566ff",
+  "#ffcf00",
+  "#192aff",
+  "#d62036",
+  "#282142",
+  "#ec4978",
+  "#ff9900",
+  "#14101f",
+  "#00dd33",
+  "#00ef82"
+];
+const DEFAULT_COLUMNS = 11;
+const DEFAULT_POWER = 1.65;
+const DEFAULT_TILES = 15;
+const CYCLE = 0.2;
+const FALL_STAGGER = 6e-3;
+const STRETCH = 8.5;
+const BLEED = 0.012;
+const COL_PHASE = -0.4;
+const TAIL_SLOPE = 0.05;
+const STRIP_LENGTH = 61;
+function mulberry32(seed) {
+  let a = seed >>> 0;
+  return () => {
+    a = a + 1831565813 >>> 0;
+    let t = a;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function luminance(color) {
+  const s = color.trim().toLowerCase();
+  let rgb = null;
+  const hex = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/);
+  if (hex) {
+    const h = hex[1];
+    const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+    rgb = [0, 2, 4].map((i) => parseInt(full.slice(i, i + 2), 16));
+  } else {
+    const m = s.match(/^rgba?\(\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)/);
+    if (m) rgb = [Number(m[1]), Number(m[2]), Number(m[3])];
+  }
+  if (!rgb) return null;
+  const [r, g, b] = rgb.map((v) => {
+    const c = Math.min(255, v) / 255;
+    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function paletteRoles(colors) {
+  const ranked = colors.map((c, i) => ({ i, l: luminance(c) ?? 0.5 })).sort((a, b) => a.l - b.l || a.i - b.i);
+  const light = ranked[ranked.length - 1].i;
+  const darkCount = colors.length >= 5 ? 2 : 1;
+  const darks = ranked.slice(0, darkCount).map((r) => r.i);
+  const hues = ranked.slice(darkCount, -1).map((r) => r.i);
+  return { light, darks, hues };
+}
+function pickDifferent(from, avoid, len) {
+  for (let i = 1; i <= len; i++) {
+    const c = (from + i) % len;
+    if (!avoid.includes(c)) return c;
+  }
+  return from;
+}
+function buildStrip(seed, colors, len = STRIP_LENGTH) {
+  const n = colors.length;
+  if (n < 2) return Array.from({ length: len }, () => 0);
+  const { light, darks, hues } = paletteRoles(colors);
+  const pool = hues.length ? hues : darks;
+  const rand = mulberry32(seed);
+  const strip = [];
+  let lastHue = -1;
+  for (let k = 0; k < len; k++) {
+    const r = rand();
+    let next;
+    if (r < 0.26) {
+      next = light;
+    } else if (r < 0.42) {
+      next = darks[Math.floor(rand() * darks.length)];
+    } else {
+      let h = pool[Math.floor(rand() * pool.length)];
+      if (h === lastHue && pool.length > 1) h = pool[(pool.indexOf(h) + 1) % pool.length];
+      lastHue = h;
+      next = h;
+    }
+    if (k > 0 && next === strip[k - 1]) next = pickDifferent(next, [strip[k - 1]], n);
+    strip.push(next);
+  }
+  if (len > 2 && strip[len - 1] === strip[0]) {
+    strip[len - 1] = pickDifferent(strip[len - 1], [strip[len - 2], strip[0]], n);
+  }
+  return strip;
+}
+function stripIndex(strip, id, column) {
+  const len = strip.length;
+  const s = id - column;
+  return strip[(s % len + len) % len];
+}
+function columnEdges(width, columns, power) {
+  const edges = [];
+  for (let i = 0; i <= columns; i++) {
+    edges.push(Math.round(width * Math.pow(i / columns, power)));
+  }
+  return edges;
+}
+function oddTiles(tiles) {
+  const t = Math.max(3, Math.round(Number.isFinite(tiles) ? tiles : DEFAULT_TILES));
+  return t % 2 === 0 ? t + 1 : t;
+}
+function tileEdge(k, tiles, stretch = STRETCH) {
+  const u = k / tiles;
+  if (u < 0) return u * TAIL_SLOPE;
+  if (u > 1) return 1 + (u - 1) * TAIL_SLOPE;
+  const a = Math.pow(u, stretch);
+  return a / (a + Math.pow(1 - u, stretch));
+}
+const SPRING_NORM = 1 - Math.exp(-1.6);
+function springStep(p) {
+  const half = (t) => (1 - Math.exp(-1.6 * t)) / SPRING_NORM;
+  return p < 0.5 ? 0.5 * half(2 * p) : 1 - 0.5 * half(2 * (1 - p));
+}
+function columnFlow(elapsed, column, columns, speed = 1) {
+  const delay = (columns - 1 - column) * FALL_STAGGER;
+  const t = elapsed - delay;
+  const raw = t <= 0 ? 0 : t * speed / CYCLE;
+  const linear = raw + column * COL_PHASE;
+  const step = Math.floor(linear);
+  return step + springStep(linear - step);
+}
+function columnTiles(flow, tiles, height, bleed) {
+  const out = [];
+  const base = -Math.floor(flow);
+  for (let n = tiles + 2; n >= -2; n--) {
+    const id = base + n;
+    const k = id + flow;
+    const top = Math.round(tileEdge(k, tiles) * height);
+    const bot = Math.round(tileEdge(k + 1, tiles) * height) + bleed;
+    if (bot <= top) continue;
+    out.push({ id, top, bot });
+  }
+  return out;
+}
+function createCoverage(columns, covered = false) {
+  const top = new Float32Array(columns);
+  const bot = new Float32Array(columns);
+  if (covered) bot.fill(1);
+  return { top, bot };
+}
+function columnDelays(columns, sweep, stagger, seed = 1) {
+  const mid = (columns - 1) / 2;
+  const rank = (i) => {
+    switch (sweep) {
+      case "left":
+        return i;
+      case "center":
+        return Math.abs(i - mid);
+      case "edges":
+        return mid - Math.abs(i - mid);
+      case "random":
+        return 0;
+      default:
+        return columns - 1 - i;
+    }
+  };
+  if (sweep === "random") {
+    const order = Array.from({ length: columns }, (_, i) => i);
+    const rand = mulberry32(seed ^ 24301);
+    for (let i = order.length - 1; i > 0; i--) {
+      const j = Math.floor(rand() * (i + 1));
+      [order[i], order[j]] = [order[j], order[i]];
+    }
+    const delays = new Array(columns);
+    order.forEach((col, k) => delays[col] = k * stagger);
+    return delays;
+  }
+  return Array.from({ length: columns }, (_, i) => rank(i) * stagger);
+}
+function stepCoverage(cov, direction, phaseTime, dt, duration, delays) {
+  const n = cov.top.length;
+  const rate = duration > 0 ? dt / duration : Infinity;
+  let done = true;
+  for (let i = 0; i < n; i++) {
+    const started = phaseTime >= (delays[i] ?? 0);
+    if (direction === "cover") {
+      if (cov.bot[i] - cov.top[i] <= 1e-6 && cov.bot[i] < 1) {
+        cov.top[i] = 0;
+        cov.bot[i] = 0;
+      }
+      if (started) {
+        cov.bot[i] = Math.min(1, cov.bot[i] + rate);
+        cov.top[i] = Math.max(0, cov.top[i] - rate);
+      }
+      if (cov.bot[i] < 1 || cov.top[i] > 0) done = false;
+    } else {
+      if (started) cov.top[i] = Math.min(cov.bot[i], cov.top[i] + rate);
+      if (cov.top[i] < cov.bot[i]) done = false;
+    }
+  }
+  return done;
+}
+function settleCoverage(cov, direction) {
+  if (direction === "cover") {
+    cov.top.fill(0);
+    cov.bot.fill(1);
+  } else {
+    cov.top.fill(0);
+    cov.bot.fill(0);
+  }
+}
+function easeEdge(a) {
+  const x = Math.min(1, Math.max(0, a));
+  return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
+}
+function columnBand(effect, column, top, bot) {
+  const rise = effect === "rise" || effect === "interlace" && column % 2 === 1;
+  if (effect === "split") {
+    const half = Math.max(0, bot - top) / 2;
+    return { y0: 0.5 - half, y1: 0.5 + half, mirror: false };
+  }
+  if (rise) return { y0: 1 - bot, y1: 1 - top, mirror: true };
+  return { y0: top, y1: bot, mirror: false };
+}
+const DATAMOSH_PALETTES = {
+  broadcast: DEFAULT_COLORS,
+  thermal: [
+    "#fff4d6",
+    "#ffd23f",
+    "#ff9f1c",
+    "#ff5a1f",
+    "#e0282e",
+    "#b0125b",
+    "#6a0f63",
+    "#2a0a3d",
+    "#0d0614"
+  ],
+  sunset: [
+    "#fff6d8",
+    "#fbc56b",
+    "#f59a3a",
+    "#e97a1d",
+    "#c85a14",
+    "#8a4a22",
+    "#5a3b25",
+    "#2d1c16",
+    "#140b08"
+  ],
+  mono: ["#ffffff", "#e5e5e5", "#b5b5b5", "#8a8a8a", "#5c5c5c", "#2e2e2e", "#141414", "#050505"],
+  acid: [
+    "#f4ffe8",
+    "#e4ff1a",
+    "#00ff9c",
+    "#00e0ff",
+    "#3d5afe",
+    "#8c3dff",
+    "#ff2bd6",
+    "#1b0b36",
+    "#070707"
+  ]
+};
+function resolvePalette(colors) {
+  if (typeof colors === "string") return [...DATAMOSH_PALETTES[colors] ?? DEFAULT_COLORS];
+  return colors && colors.length >= 2 ? [...colors] : [...DEFAULT_COLORS];
+}
+const MAX_GAIN = 1.6;
+const SOURCE_SPAN = 0.6;
+function sourceSlotY(slot, tiles) {
+  return 0.5 + ((slot + 0.5) / tiles - 0.5) * SOURCE_SPAN;
+}
+function sourceSlot(id, column, tiles) {
+  const s = id - column;
+  return (s % tiles + tiles) % tiles;
+}
+function coverFit(imgW, imgH, boxW, boxH) {
+  if (imgW <= 0 || imgH <= 0 || boxW <= 0 || boxH <= 0) return { sx: 0, sy: 0, sw: imgW, sh: imgH };
+  const scale = Math.max(boxW / imgW, boxH / imgH);
+  const sw = boxW / scale;
+  const sh = boxH / scale;
+  return { sx: (imgW - sw) / 2, sy: (imgH - sh) / 2, sw, sh };
+}
+function sampleSource(pixels, pw, ph, edges, tiles, boost = true) {
+  const at = (x, y) => {
+    const cx = Math.min(pw - 1, Math.max(0, x));
+    const cy = Math.min(ph - 1, Math.max(0, y));
+    return (cy * pw + cx) * 4;
+  };
+  const cells = [];
+  let lo = Infinity;
+  let hi = -Infinity;
+  for (let i = 0; i + 1 < edges.length; i++) {
+    const x = Math.round((edges[i] + edges[i + 1]) / 2 * (pw - 1));
+    const row = [];
+    for (let s = 0; s < tiles; s++) {
+      const y = Math.round(sourceSlotY(s, tiles) * (ph - 1));
+      let r = 0;
+      let g = 0;
+      let b = 0;
+      for (let dy = -1; dy <= 1; dy++) {
+        for (let dx = -1; dx <= 1; dx++) {
+          const k = at(x + dx, y + dy);
+          r += pixels[k];
+          g += pixels[k + 1];
+          b += pixels[k + 2];
+        }
+      }
+      const cell = [r / 9, g / 9, b / 9];
+      const l = 0.2126 * cell[0] + 0.7152 * cell[1] + 0.0722 * cell[2];
+      lo = Math.min(lo, l);
+      hi = Math.max(hi, l);
+      row.push(cell);
+    }
+    cells.push(row);
+  }
+  const span = hi - lo;
+  const level = boost && span > 8 ? Math.min(MAX_GAIN, 255 / (hi - lo * 0.5)) : 1;
+  const offset = boost && span > 8 ? lo * 0.5 : 0;
+  const saturation = boost ? 1.35 : 1;
+  const clamp = (v) => Math.round(Math.min(255, Math.max(0, v)));
+  return cells.map(
+    (row) => row.map(([r, g, b]) => {
+      let [nr, ng, nb] = [(r - offset) * level, (g - offset) * level, (b - offset) * level];
+      const l = 0.2126 * nr + 0.7152 * ng + 0.0722 * nb;
+      nr = l + (nr - l) * saturation;
+      ng = l + (ng - l) * saturation;
+      nb = l + (nb - l) * saturation;
+      return `rgb(${clamp(nr)}, ${clamp(ng)}, ${clamp(nb)})`;
+    })
+  );
+}
+export {
+  BLEED,
+  COL_PHASE,
+  CYCLE,
+  DATAMOSH_PALETTES,
+  DEFAULT_COLORS,
+  DEFAULT_COLUMNS,
+  DEFAULT_POWER,
+  DEFAULT_TILES,
+  FALL_STAGGER,
+  MAX_GAIN,
+  SOURCE_SPAN,
+  STRETCH,
+  STRIP_LENGTH,
+  TAIL_SLOPE,
+  buildStrip,
+  columnBand,
+  columnDelays,
+  columnEdges,
+  columnFlow,
+  columnTiles,
+  coverFit,
+  createCoverage,
+  easeEdge,
+  luminance,
+  mulberry32,
+  oddTiles,
+  paletteRoles,
+  resolvePalette,
+  sampleSource,
+  settleCoverage,
+  sourceSlot,
+  sourceSlotY,
+  springStep,
+  stepCoverage,
+  stripIndex,
+  tileEdge
+};

package/dist/components/datamosh-transition/index.d.ts

@@ -0,0 +1,3 @@
+export { DatamoshTransition } from "./DatamoshTransition.js";
+export type { DatamoshTransitionProps, DatamoshTransitionPhase, DatamoshTransitionHandle, } from "./DatamoshTransition.js";
+export { DATAMOSH_PALETTES, type DatamoshEffect, type DatamoshSweep, type DatamoshPaletteName, } from "./datamosh-transition-core.js";

package/dist/components/fluid-cursor/FluidCursor.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
 import { useLiveRef } from "../../internals/dom/use-live-ref.js";
 import { cn } from "../../utils.js";
-import { hexToRgb, DEV, wrap, pointerPrototype, scaleRadiusForContainer, HSVtoRGB } from "./fluid-shared.js";
+import { hexToRgb, clickBoost, DEV, wrap, pointerPrototype, scaleRadiusForContainer, HSVtoRGB } from "./fluid-shared.js";
 import { startWebGpuFluid } from "./webgpu-engine.js";
 function FluidCursor({
   simResolution = 128,
@@ -38,13 +38,19 @@ function FluidCursor({
   ditherLevels = 4,
   onReady
 }) {
-  const [derived] = useState(() => ({
-    clampedColorIntensity: Math.max(0, Math.min(1, colorIntensity)),
-    clampedHdrBoost: Math.max(1, Math.min(4, hdrBoost)),
-    clampedDitherPixelSize: Math.max(1, ditherPixelSize),
-    clampedDitherLevels: Math.max(2, Math.min(16, Math.floor(ditherLevels))),
-    resolvedBackColor: typeof backColor === "string" ? hexToRgb(backColor) : backColor
-  }));
+  const [derived] = useState(() => {
+    const clampedColorIntensity = Math.max(0, Math.min(1, colorIntensity));
+    return {
+      clampedColorIntensity,
+      // A click's extra brightness, capped so it never compounds
+      // colorIntensity into the dither pass's clamp — see clickBoost().
+      clickColorBoost: clickBoost(clampedColorIntensity),
+      clampedHdrBoost: Math.max(1, Math.min(4, hdrBoost)),
+      clampedDitherPixelSize: Math.max(1, ditherPixelSize),
+      clampedDitherLevels: Math.max(2, Math.min(16, Math.floor(ditherLevels))),
+      resolvedBackColor: typeof backColor === "string" ? hexToRgb(backColor) : backColor
+    };
+  });
   const canvasRef = useRef(null);
   const activeInstanceRef = useRef(null);
   const mountCounterRef = useRef(0);
@@ -61,11 +67,11 @@ function FluidCursor({
   const onReadyRef = useLiveRef(onReady);
   function getScaledColor(hex) {
     const { r, g, b } = hexToRgb(hex);
-    return {
+    return Object.freeze({
       r: r * derived.clampedColorIntensity,
       g: g * derived.clampedColorIntensity,
       b: b * derived.clampedColorIntensity
-    };
+    });
   }
   function getCachedFluidColor(hex) {
     const cache = colorCacheRef.current;
@@ -186,7 +192,8 @@ function FluidCursor({
         autoSplatInterval,
         pauseWhenHidden,
         splatOnMount,
-        generateColor
+        generateColor,
+        clickBoost: derived.clickColorBoost
       }).then((handle) => {
         if (disposed) {
           handle?.cleanup();
@@ -581,13 +588,19 @@ function FluidCursor({
 			uniform vec3 color;
 			uniform vec2 point;
 			uniform float radius;
+			uniform float saturate;
 
 			void main () {
 				vec2 p = vUv - point.xy;
 				p.x *= aspectRatio;
 				vec3 splat = exp(-dot(p, p) / radius) * color;
 				vec3 base = texture2D(uTarget, vUv).xyz;
-				gl_FragColor = vec4(base + splat, 1.0);
+				// A click splat lifts each texel to its own profile instead of adding
+				// to it: what is already there never rises past what one click would
+				// leave at that spot, so a burst of clicks paints the same disc once
+				// instead of summing towards white and widening with every click.
+				vec3 sum = saturate > 0.5 ? max(base, splat) : base + splat;
+				gl_FragColor = vec4(sum, 1.0);
 			}
 		`
       );
@@ -1211,15 +1224,17 @@ function FluidCursor({
         splat(pointer.texcoordX, pointer.texcoordY, dx, dy, pointer.color);
       }
       function clickSplat(pointer) {
-        const color = generateColor();
-        color.r *= 10;
-        color.g *= 10;
-        color.b *= 10;
+        const base = generateColor();
+        const color = {
+          r: base.r * derived.clickColorBoost,
+          g: base.g * derived.clickColorBoost,
+          b: base.b * derived.clickColorBoost
+        };
         const dx = 10 * (Math.random() - 0.5);
         const dy = 30 * (Math.random() - 0.5);
-        splat(pointer.texcoordX, pointer.texcoordY, dx, dy, color);
+        splat(pointer.texcoordX, pointer.texcoordY, dx, dy, color, true);
       }
-      function splat(x, y, dx, dy, color) {
+      function splat(x, y, dx, dy, color, saturate = false) {
         splatProgram.bind();
         if (splatProgram.uniforms.uTarget) {
           gl.uniform1i(splatProgram.uniforms.uTarget, velocity.read.attach(0));
@@ -1233,6 +1248,9 @@ function FluidCursor({
         if (splatProgram.uniforms.color) {
           gl.uniform3f(splatProgram.uniforms.color, dx, dy, 0);
         }
+        if (splatProgram.uniforms.saturate) {
+          gl.uniform1f(splatProgram.uniforms.saturate, 0);
+        }
         if (splatProgram.uniforms.radius) {
           let radius = correctRadius(config.SPLAT_RADIUS / 100);
           if (containedRef.current) {
@@ -1248,6 +1266,9 @@ function FluidCursor({
         if (splatProgram.uniforms.color) {
           gl.uniform3f(splatProgram.uniforms.color, color.r, color.g, color.b);
         }
+        if (splatProgram.uniforms.saturate) {
+          gl.uniform1f(splatProgram.uniforms.saturate, saturate ? 1 : 0);
+        }
         blit(dye.write);
         dye.swap();
       }
@@ -1347,6 +1368,9 @@ function FluidCursor({
         updatePointerDownData(pointer, -1, posX, posY);
         clickSplat(pointer);
       }
+      function handlePointerUp() {
+        pointers[0].down = false;
+      }
       function handleFirstMouseMove(e) {
         const pointer = pointers[0];
         const { x: posX, y: posY } = getCanvasPos(e.clientX, e.clientY);
@@ -1389,11 +1413,14 @@ function FluidCursor({
       }
       if (interactive) {
         window.addEventListener("mousedown", handleMouseDown);
+        window.addEventListener("mouseup", handlePointerUp);
         document.body.addEventListener("mousemove", handleFirstMouseMove);
         window.addEventListener("mousemove", handleMouseMove);
         document.body.addEventListener("touchstart", handleFirstTouchStart);
         window.addEventListener("touchstart", handleTouchStart, false);
         window.addEventListener("touchmove", handleTouchMove, false);
+        window.addEventListener("touchend", handlePointerUp);
+        window.addEventListener("touchcancel", handlePointerUp);
       }
       let observer = null;
       if (pauseWhenHidden) {
@@ -1432,11 +1459,14 @@ function FluidCursor({
         if (autoSplatTimer) clearInterval(autoSplatTimer);
         if (interactive) {
           window.removeEventListener("mousedown", handleMouseDown);
+          window.removeEventListener("mouseup", handlePointerUp);
           document.body.removeEventListener("mousemove", handleFirstMouseMove);
           window.removeEventListener("mousemove", handleMouseMove);
           document.body.removeEventListener("touchstart", handleFirstTouchStart);
           window.removeEventListener("touchstart", handleTouchStart);
           window.removeEventListener("touchmove", handleTouchMove);
+          window.removeEventListener("touchend", handlePointerUp);
+          window.removeEventListener("touchcancel", handlePointerUp);
         }
         if (contained) {
           window.removeEventListener("resize", updateCanvasRectCache);

package/dist/components/fluid-cursor/fluid-shared.d.ts

@@ -36,6 +36,24 @@ export declare function correctRadius(radius: number, width: number, height: num
  * length under ~30% of the container height.
  */
 export declare function scaleRadiusForContainer(radius: number, containerHeight: number, viewportHeight: number): number;
+/**
+ * Dye a click deposits at its centre, in multiples of the hue: the engine's
+ * default `colorIntensity` (0.15) times the ×10 boost the solver has always
+ * given a click — the amount that reads as a bright pop on every renderer.
+ */
+export declare const CLICK_PEAK = 1.5;
+/**
+ * The boost a click applies to an already intensity-scaled colour, chosen so
+ * the peak lands on CLICK_PEAK whatever `colorIntensity` is.
+ *
+ * The historical fixed ×10 compounded `colorIntensity`. At the default 0.15
+ * that is a 1.5 peak; but the dither pass asks consumers to raise the
+ * intensity to ≈0.4+, and at 0.6 the same ×10 stacked 5.4 per click into an
+ * unclamped half-float dye buffer that the dither display then clamps to 1
+ * and quantises — every click grew a flat, saturated disc that never read as
+ * a splat. Capping the boost at 10 keeps intensities ≤ 0.15 byte-identical.
+ */
+export declare function clickBoost(colorIntensity: number): number;
 export declare function correctDeltaX(delta: number, width: number, height: number): number;
 export declare function correctDeltaY(delta: number, width: number, height: number): number;
 /**

package/dist/components/fluid-cursor/fluid-shared.js

@@ -95,6 +95,11 @@ function scaleRadiusForContainer(radius, containerHeight, viewportHeight) {
   if (k <= 1) return radius;
   return Math.max(radius, Math.min(radius * k, 0.09));
 }
+const CLICK_PEAK = 1.5;
+function clickBoost(colorIntensity) {
+  if (!(colorIntensity > 0)) return 0;
+  return Math.min(10, CLICK_PEAK / colorIntensity);
+}
 function correctDeltaX(delta, width, height) {
   const aspectRatio = width / height;
   if (aspectRatio < 1) return delta * aspectRatio;
@@ -107,8 +112,10 @@ function correctDeltaY(delta, width, height) {
 }
 const DEV = typeof process !== "undefined" && process.env.NODE_ENV !== "production";
 export {
+  CLICK_PEAK,
   DEV,
   HSVtoRGB,
+  clickBoost,
   correctDeltaX,
   correctDeltaY,
   correctRadius,

package/dist/components/fluid-cursor/webgpu-engine.d.ts

@@ -20,6 +20,12 @@ export interface WebGpuFluidOptions {
     pauseWhenHidden: boolean;
     splatOnMount: boolean;
     generateColor: () => ColorRGB;
+    /**
+     * Multiplier a click applies to the (already intensity-scaled) colour
+     * `generateColor()` returns — `clickBoost(colorIntensity)` from
+     * fluid-shared, so the peak is the same whatever the intensity.
+     */
+    clickBoost: number;
 }
 /**
  * Full WebGPU setup for FluidCursor: engine + pointer wiring + rAF loop +