fancy-ui-react 0.2.0 → 0.3.0

package/dist/components/fluid-cursor/webgpu-engine.js

@@ -52,7 +52,11 @@ fn fs_splat(in: VSOut) -> @location(0) vec4f {
 	p.x = p.x * u.aspect;
 	let splat = exp(-dot(p, p) / u.radius) * u.color.rgb;
 	let base = textureSample(tex0, smpLinear, in.uv).rgb;
-	return vec4f(base + splat, 1.0);
+	// color.a is the click flag: a click splat lifts each texel to its own
+	// profile instead of adding to it, so a burst of clicks paints the same
+	// disc once instead of summing towards white and widening every click.
+	let sum = select(base + splat, max(base, splat), u.color.a > 0.5);
+	return vec4f(sum, 1.0);
 }
 
 @fragment
@@ -233,7 +237,7 @@ async function createWebGpuFluid(canvas, opts) {
         scratch[OFF_COLOR] = v.color[0];
         scratch[OFF_COLOR + 1] = v.color[1];
         scratch[OFF_COLOR + 2] = v.color[2];
-        scratch[OFF_COLOR + 3] = 1;
+        scratch[OFF_COLOR + 3] = v.color[3] ?? 0;
       }
       scratch[OFF_DT] = v.dt ?? 0;
       scratch[OFF_DISSIPATION] = v.dissipation ?? 0;
@@ -368,7 +372,7 @@ async function createWebGpuFluid(canvas, opts) {
         canvas.height = height;
         initTextures();
       }
-    }, splat = function(x, y, dx, dy, color) {
+    }, splat = function(x, y, dx, dy, color, saturate = false) {
       if (destroyed || lost || !velocity || !dye) return;
       let radius = correctRadius(opts.splatRadius / 100, canvas.width, canvas.height);
       if (opts.contained) {
@@ -383,7 +387,7 @@ async function createWebGpuFluid(canvas, opts) {
       });
       writeUniforms(uSplatDye, {
         point: [x, y],
-        color: [color.r, color.g, color.b],
+        color: [color.r, color.g, color.b, saturate ? 1 : 0],
         aspect,
         radius
       });
@@ -716,13 +720,15 @@ async function startWebGpuFluid(canvas, opts) {
     engine.splat(pointer.texcoordX, pointer.texcoordY, dx, dy, pointer.color);
   }
   function clickSplat(pointer) {
-    const color = opts.generateColor();
-    color.r *= 10;
-    color.g *= 10;
-    color.b *= 10;
+    const base = opts.generateColor();
+    const color = {
+      r: base.r * opts.clickBoost,
+      g: base.g * opts.clickBoost,
+      b: base.b * opts.clickBoost
+    };
     const dx = 10 * (Math.random() - 0.5);
     const dy = 30 * (Math.random() - 0.5);
-    engine.splat(pointer.texcoordX, pointer.texcoordY, dx, dy, color);
+    engine.splat(pointer.texcoordX, pointer.texcoordY, dx, dy, color, true);
   }
   function multipleSplats(steps) {
     const angle = Math.random() * Math.PI * 2;
@@ -780,6 +786,9 @@ async function startWebGpuFluid(canvas, opts) {
     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);
@@ -826,11 +835,14 @@ async function startWebGpuFluid(canvas, opts) {
   }
   if (opts.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 (opts.pauseWhenHidden) {
@@ -903,11 +915,14 @@ async function startWebGpuFluid(canvas, opts) {
       if (autoSplatTimer) clearInterval(autoSplatTimer);
       if (opts.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 (opts.contained) {
         window.removeEventListener("resize", updateCanvasRectCache);

package/dist/index.d.ts

@@ -85,6 +85,7 @@ export * from "./components/marquee/index.js";
 export * from "./components/matrix-rain/index.js";
 export * from "./components/meteors/index.js";
 export * from "./components/mosaic-glow/index.js";
+export * from "./components/datamosh-transition/index.js";
 export * from "./components/navbar/index.js";
 export * from "./components/navigation-menu/index.js";
 export * from "./components/neon-border/index.js";

package/dist/index.js

@@ -134,6 +134,8 @@ import { ReviewCard } from "./components/marquee/ReviewCard.js";
 import { MatrixRain } from "./components/matrix-rain/MatrixRain.js";
 import { Meteors } from "./components/meteors/Meteors.js";
 import { MosaicGlow } from "./components/mosaic-glow/MosaicGlow.js";
+import { DatamoshTransition } from "./components/datamosh-transition/DatamoshTransition.js";
+import { DATAMOSH_PALETTES } from "./components/datamosh-transition/datamosh-transition-core.js";
 import { Navbar } from "./components/navbar/Navbar.js";
 import { NavbarLink } from "./components/navbar/NavbarLink.js";
 import { NavigationMenu } from "./components/navigation-menu/NavigationMenu.js";
@@ -302,9 +304,11 @@ export {
   ContextMenuTrigger,
   ContextRing,
   CopyButton,
+  DATAMOSH_PALETTES,
   DEFAULT_SOUND_FEEDBACK_ON,
   DEFAULT_SOUND_PREFERENCES,
   DROPDOWN_MENU_KEY,
+  DatamoshTransition,
   DatePicker,
   Dialog,
   DimSiblings,

package/dist/styles.css

@@ -313,7 +313,81 @@
  * scales the panel about its own centre without touching the centring.
  */
 .ft-btn {
-	--ft-btn-accent: var(--ft-accent, light-dark(oklch(0.5432 0.2528 300.22), oklch(0.604 0.2606 301.75)));
+	--ft-btn-accent: var(
+		--ft-accent,
+		light-dark(oklch(0.5432 0.2528 300.22), oklch(0.604 0.2606 301.75))
+	);
+	/* 150ms = tokens.DURATIONS.fast, cubic-bezier(0.4, 0, 0.2, 1) =
+	   tokens.EASINGS.inout — the reversible-state pair. It runs the colour
+	   channel, and the release half of the press: letting go settles, it does
+	   not snap back. */
+	--ft-btn-motion: var(--ft-duration-fast, 150ms) var(--ft-ease-inout, cubic-bezier(0.4, 0, 0.2, 1));
+	/* The down-stroke only. 150ms = tokens.DURATIONS.fast,
+	   cubic-bezier(0.16, 1, 0.3, 1) = tokens.EASINGS.out — the arrival curve,
+	   which spends most of the scale in the first frames, so the press bites
+	   instead of easing in. Pressing is an arrival; releasing is what resolves
+	   either way. */
+	--ft-btn-press: var(--ft-duration-fast, 150ms) var(--ft-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
+	/*
+	 * Replaces the `transition-colors` utility removed from the class string,
+	 * at exactly the values that utility already resolved to. Colour is a state
+	 * change, not motion, so it stays OUTSIDE the reduced-motion query — gating
+	 * it would only make a theme flip look broken for the people who asked for
+	 * less movement.
+	 *
+	 * `box-shadow` is deliberately absent, and must stay absent: this button's
+	 * focus ring is `focus-visible:ring-*`, which compiles to a `box-shadow`,
+	 * and a focus ring must never animate.
+	 */
+	transition:
+		color var(--ft-btn-motion),
+		background-color var(--ft-btn-motion),
+		border-color var(--ft-btn-motion);
+	/* Kills the ~300ms tap delay without blocking scroll. A press that answers
+	   a third of a second late is not press feedback. */
+	touch-action: manipulation;
+}
+
+/*
+ * The press. Pressable's contract inlined as a plain rule on the native
+ * control rather than wrapping a `<button>` in a `<Pressable>` div — same
+ * `0.97`, same clock, one element instead of two.
+ *
+ * Only the property list is re-declared in here: `transform` joins the colour
+ * channel under `no-preference` and nowhere else, so with motion reduced the
+ * colours still cross and the button simply does not move. The resting state
+ * (no `transform` at all) is the ungated fallback.
+ *
+ * The two strokes are timed apart. The rule below carries the release curve,
+ * because that is the transition the button runs on its way back to rest;
+ * `:active` overrides `transform` with the arrival curve for the way down.
+ */
+@media (prefers-reduced-motion: no-preference) {
+	.ft-btn {
+		transition:
+			color var(--ft-btn-motion),
+			background-color var(--ft-btn-motion),
+			border-color var(--ft-btn-motion),
+			transform var(--ft-btn-motion);
+	}
+
+	/* Both inert states are excluded so a press that does nothing does not
+	   pretend to. `[data-disabled]` is the anchor branch, which has no native
+	   `:disabled` to hang this off; `[aria-busy]` is the loading one, on both
+	   branches. A native disabled `<button>` never matches `:active` anyway —
+	   the attribute selectors are what make the anchor behave like it. */
+	.ft-btn:not([data-disabled="true"]):not([aria-busy="true"]):active {
+		transform: scale(0.97);
+		/* The whole list is re-declared rather than just
+		   `transition-timing-function`, which has no per-property form here: a
+		   single value would retime the colour channel too. Only `transform`
+		   differs from the rule above. */
+		transition:
+			color var(--ft-btn-motion),
+			background-color var(--ft-btn-motion),
+			border-color var(--ft-btn-motion),
+			transform var(--ft-btn-press);
+	}
 }
 
 .ft-btn--accent {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fancy-ui-react",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Animated UI components for React — the React counterpart of fancy-ui-svelte. WebGL, GSAP and CSS motion, styled with Tailwind CSS v4.",
   "license": "MIT",
   "type": "module",