fancy-ui-react 0.2.1 → 0.3.0

package/README.md

@@ -4,7 +4,7 @@ React counterpart of [`fancy-ui-svelte`](https://www.npmjs.com/package/fancy-ui-
 same components, same visual contract, ported from the Svelte 5 reference
 implementation that lives at the root of this repo.
 
-Status: at parity. All 144 components of `fancy-ui-svelte` are ported and
+Status: at parity. All 145 components of `fancy-ui-svelte` are ported and
 exported from the package root, alongside the `sound` family; the cameleon
 skin engine (FancyProvider + primitives + skins) ships on the
 `fancy-ui-react/cameleon` subpath. The Svelte package remains the reference;
@@ -240,6 +240,9 @@ Deliberate, small, and documented — everything else is a faithful transpose:
 - **confetti**: No behavioural divergence in `ConfettiButton`: no className, no rest-prop spread, no `type` attribute — the Svelte source declares only `options`, `children` and `sound` on a bare `<button>`.
 - **confetti**: `Confetti` gains one extra file over the Svelte tree (`context.ts`), mirroring the `button-group` precedent; one file per Svelte file is otherwise preserved.
 - **confetti**: `fire()` reaches consumers through the ref channel, not a component instance. Svelte declares `export function fire(opts)` (callable via `bind:this`); React has no instance, so `Confetti` is a `forwardRef<ConfettiHandle, ConfettiProps>` whose ref carries `{ fire }` rather than the DOM node. This is the one forwardRef in the port not backed by a `ref = $bindable` declaration (PORTING.md C-4); the alternative was deleting a public method. `ConfettiHandle` is exported from `Confetti.tsx` but deliberately NOT from `index.ts`, since the mandated export list is exactly Confetti/ConfettiButton + Props types.
+- **datamosh-transition**: `cover()`, `reveal()` and `play()` reach consumers through the ref channel, not a component instance. Svelte declares them with `export function` (callable via `bind:this`) and also binds the overlay element through `ref = $bindable(null)`; React has no instance, so `DatamoshTransition` is a `forwardRef<DatamoshTransitionHandle, DatamoshTransitionProps>` whose ref carries `{ cover, reveal, play, element }` — the three methods plus the overlay element that the Svelte `ref` published.
+- **datamosh-transition**: The read-only bindable `phase` becomes an `onPhaseChange(phase)` callback, called on every change (`covering`, `covered`, `revealing`, `idle`); `data-state` on the overlay carries the same value on both sides.
+- **datamosh-transition**: SSR markup: React serialises the overlay's inline style as `style="z-index:9999"` (no space after the colon) where Svelte emits `z-index: 9999`. Same declaration, different byte string.
 - **direction-aware-hover**: fade transitions on the overlay and caption are reproduced via usePresence + a local fade300 TransitionSpec (WAAPI mechanism per internals-api §5) instead of a framework transition directive — same 300ms linear opacity curve
 - **direction-aware-hover**: isMobile lives in a ref rather than state — it is only read in event handlers and never drives markup, so resize events no longer trigger re-renders (no observable difference)
 - **direction-aware-hover**: non-null assertion added on event.touches[0] to satisfy the React tsconfig's indexed-access checking (no runtime change)

package/dist/components/button/Button.js

@@ -42,7 +42,11 @@ const Button = forwardRef(
     const classes = cn(
       "ft-btn",
       "inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium",
-      "cursor-pointer transition-colors",
+      // No `transition-colors` here: the colour channel is declared in
+      // `button.css` instead, alongside the press, so one rule owns the
+      // whole transition list. The utility would only add a second,
+      // competing declaration over the same three properties.
+      "cursor-pointer",
       "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ft-btn-accent)]/35",
       // `data-disabled` covers the anchor branch, which has no native `:disabled`
       // pseudo-class to hang the same dimmed treatment off. It tracks `disabled`

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

@@ -0,0 +1,76 @@
+import type { HTMLAttributes } from "react";
+import { type DatamoshEffect, type DatamoshPaletteName, type DatamoshSweep } from "./datamosh-transition-core.js";
+export type DatamoshTransitionPhase = "idle" | "covering" | "covered" | "revealing";
+/**
+ * What the forwarded ref carries. The Svelte source exposes `cover()`,
+ * `reveal()` and `play()` on the component instance and binds the overlay
+ * element through `ref`; React has no instance, so both travel through one
+ * handle: the three methods plus `element`.
+ */
+export interface DatamoshTransitionHandle {
+    /** Cover the page. Resolves once every column is down. */
+    cover: () => Promise<void>;
+    /** Clear the page. Resolves once every column has fallen away. */
+    reveal: () => Promise<void>;
+    /** Cover, then reveal — a one-shot flash. */
+    play: () => Promise<void>;
+    /** The overlay element. */
+    readonly element: HTMLDivElement | null;
+}
+/**
+ * DatamoshTransition — a page-transition overlay that looks like a corrupted
+ * video decode.
+ *
+ * A fixed grid of columns (narrow on the left, wide on the right) fills with
+ * flat blocks of saturated colour. Inside each column a stack of tiles falls
+ * along one sigmoid: slivers at the edges, one tile snapping open through
+ * the middle. `cover()` drops the columns over the page like a curtain,
+ * right to left; `reveal()` lets them fall away. Nothing moves sideways.
+ *
+ * Mount once (root layout) and drive it from your router's navigation hook.
+ */
+export interface DatamoshTransitionProps extends Omit<HTMLAttributes<HTMLDivElement>, "color"> {
+    /** Additional classes on the overlay */
+    className?: string;
+    /**
+     * Palette name or colour list (hex or rgb()). The lightest and darkest
+     * colours recur most often.
+     */
+    colors?: string[] | DatamoshPaletteName;
+    /** Shape of the covering band: curtain, rise, split or interlace */
+    variant?: DatamoshEffect;
+    /** Order in which the columns move */
+    sweep?: DatamoshSweep;
+    /**
+     * Picture to decode: tiles take their colours from it instead of the
+     * palette. A URL (same-origin or CORS-enabled), an image or a canvas.
+     */
+    source?: string | HTMLImageElement | HTMLCanvasElement;
+    /** Seed for the colour order — same seed, same strip */
+    seed?: number;
+    /** Number of columns */
+    columns?: number;
+    /** Column edge exponent: 1 = uniform grid, higher = wider columns to the right */
+    power?: number;
+    /** Tiles per column stack (forced odd) */
+    tiles?: number;
+    /** Time for one column to cover, ms */
+    coverDuration?: number;
+    /** Time for one column to clear, ms */
+    revealDuration?: number;
+    /** Delay between neighbouring columns, ms (rightmost first) */
+    stagger?: number;
+    /** Speed of the falling tiles, 1 = default */
+    speed?: number;
+    /** Fill the positioned parent instead of the viewport */
+    contained?: boolean;
+    /** Stacking order of the overlay */
+    zIndex?: number;
+    /** Called with every phase change (the Svelte `bind:phase`) */
+    onPhaseChange?: (phase: DatamoshTransitionPhase) => void;
+    /** Called once the page is fully covered */
+    oncovered?: () => void;
+    /** Called once the page is fully revealed */
+    onrevealed?: () => void;
+}
+export declare const DatamoshTransition: import("react").ForwardRefExoticComponent<DatamoshTransitionProps & import("react").RefAttributes<DatamoshTransitionHandle>>;

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

@@ -0,0 +1,368 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo, useState, useRef, useCallback, useImperativeHandle, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { useReducedMotion } from "../../internals/motion/media-query.js";
+import { resolvePalette, buildStrip, columnDelays, paletteRoles, createCoverage, DEFAULT_POWER, oddTiles, DEFAULT_COLUMNS, DEFAULT_TILES, coverFit, sampleSource, columnEdges, settleCoverage, CYCLE, FALL_STAGGER, columnBand, easeEdge, columnFlow, columnTiles, sourceSlot, stripIndex, stepCoverage, BLEED } from "./datamosh-transition-core.js";
+function currentDpr() {
+  return Math.min(typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1, 2);
+}
+const DatamoshTransition = forwardRef(
+  function DatamoshTransition2({
+    className,
+    colors = "broadcast",
+    variant = "curtain",
+    sweep = "right",
+    source,
+    seed = 1,
+    columns = DEFAULT_COLUMNS,
+    power = DEFAULT_POWER,
+    tiles = DEFAULT_TILES,
+    coverDuration = 380,
+    revealDuration = 480,
+    stagger = 28,
+    speed = 1,
+    contained = false,
+    zIndex = 9999,
+    onPhaseChange,
+    oncovered,
+    onrevealed,
+    style,
+    ...restProps
+  }, ref) {
+    const reduced = useReducedMotion();
+    const palette = useMemo(() => resolvePalette(colors), [colors]);
+    const columnsC = Math.max(1, Math.round(Number.isFinite(columns) ? columns : DEFAULT_COLUMNS));
+    const powerC = Number.isFinite(power) && power > 0 ? power : DEFAULT_POWER;
+    const tilesC = oddTiles(tiles);
+    const speedC = Number.isFinite(speed) && speed > 0 ? speed : 1;
+    const strip = useMemo(() => buildStrip(seed, palette), [seed, palette]);
+    const delays = useMemo(
+      () => columnDelays(
+        columnsC,
+        sweep,
+        Math.max(0, Number.isFinite(stagger) ? stagger : 0) / 1e3,
+        seed
+      ),
+      [columnsC, sweep, stagger, seed]
+    );
+    const backing = palette[paletteRoles(palette).darks[0] ?? 0] ?? "#14101f";
+    const [phase, setPhaseState] = useState("idle");
+    const hostRef = useRef(null);
+    const canvasRef = useRef(null);
+    const live = useLiveRef({
+      reduced,
+      palette,
+      columnsC,
+      powerC,
+      tilesC,
+      speedC,
+      strip,
+      delays,
+      backing,
+      variant,
+      coverDuration,
+      revealDuration,
+      onPhaseChange,
+      oncovered,
+      onrevealed
+    });
+    const s = useRef({
+      ctx: null,
+      w: 0,
+      h: 0,
+      edges: [],
+      cov: createCoverage(DEFAULT_COLUMNS),
+      direction: "reveal",
+      phase: "idle",
+      phaseTime: 0,
+      elapsed: 0,
+      rafId: null,
+      lastT: 0,
+      pending: [],
+      sourceImage: null,
+      sourceSize: { w: 0, h: 0 },
+      sourceTable: null
+    }).current;
+    const engine = useMemo(() => {
+      function setPhase(next) {
+        if (s.phase === next) return;
+        s.phase = next;
+        setPhaseState(next);
+        live.current.onPhaseChange?.(next);
+      }
+      function settlePending() {
+        const list = s.pending;
+        s.pending = [];
+        for (const resolve of list) resolve();
+      }
+      function clear() {
+        s.ctx?.clearRect(0, 0, s.w, s.h);
+      }
+      function draw() {
+        const c = s.ctx;
+        const p = live.current;
+        if (!c || !s.edges.length) return;
+        const { w, h } = s;
+        c.clearRect(0, 0, w, h);
+        const bleed = Math.round(BLEED * h);
+        const len = p.palette.length;
+        const t = p.reduced ? CYCLE * 0.45 + p.columnsC * FALL_STAGGER : s.elapsed;
+        for (let i = 0; i < p.columnsC; i++) {
+          const x0 = s.edges[i];
+          const cw = s.edges[i + 1] - x0;
+          if (cw <= 0) continue;
+          const band = columnBand(
+            p.variant,
+            i,
+            easeEdge(s.cov.top[i] ?? 0),
+            easeEdge(s.cov.bot[i] ?? 0)
+          );
+          const bandTop = Math.round(band.y0 * h);
+          const bandBot = Math.round(band.y1 * h);
+          if (bandBot <= bandTop) continue;
+          c.fillStyle = p.backing;
+          c.fillRect(x0, bandTop, cw, bandBot - bandTop);
+          const flow = columnFlow(t, i, p.columnsC, p.speedC);
+          for (const tile of columnTiles(flow, p.tilesC, h, bleed)) {
+            const top = band.mirror ? h - tile.bot : tile.top;
+            const bot = band.mirror ? h - tile.top : tile.bot;
+            const y0 = Math.max(bandTop, top);
+            const y1 = Math.min(bandBot, bot);
+            if (y1 <= y0) continue;
+            c.fillStyle = s.sourceTable?.[i]?.[sourceSlot(tile.id, i, p.tilesC)] ?? p.palette[stripIndex(p.strip, tile.id, i) % len];
+            c.fillRect(x0, y0, cw, y1 - y0);
+          }
+        }
+      }
+      function stopLoop() {
+        if (s.rafId !== null && typeof cancelAnimationFrame === "function")
+          cancelAnimationFrame(s.rafId);
+        s.rafId = null;
+      }
+      function requestFrame() {
+        if (s.rafId !== null || !s.ctx || typeof requestAnimationFrame !== "function") return;
+        s.lastT = 0;
+        s.rafId = requestAnimationFrame(tick);
+      }
+      function finish(dir) {
+        settleCoverage(s.cov, dir);
+        setPhase(dir === "cover" ? "covered" : "idle");
+        if (dir === "reveal") {
+          stopLoop();
+          clear();
+        } else if (!live.current.reduced) {
+          requestFrame();
+        } else {
+          draw();
+        }
+        settlePending();
+        if (dir === "cover") live.current.oncovered?.();
+        else live.current.onrevealed?.();
+      }
+      function tick(now) {
+        s.rafId = null;
+        if (!s.ctx) return;
+        const dt = s.lastT ? Math.min(0.05, Math.max(0, (now - s.lastT) / 1e3)) : 0;
+        s.lastT = now;
+        s.elapsed += dt;
+        if (s.phase === "covering" || s.phase === "revealing") {
+          s.phaseTime += dt;
+          const p = live.current;
+          const duration = (s.direction === "cover" ? p.coverDuration : p.revealDuration) / 1e3;
+          const done = stepCoverage(s.cov, s.direction, s.phaseTime, dt, duration, p.delays);
+          if (done) {
+            finish(s.direction);
+            return;
+          }
+        }
+        draw();
+        if (s.phase !== "idle") s.rafId = requestAnimationFrame(tick);
+      }
+      function run(dir) {
+        settlePending();
+        const promise = new Promise((resolve) => s.pending.push(resolve));
+        if (dir === "reveal" && s.phase === "idle" || dir === "cover" && s.phase === "covered") {
+          settlePending();
+          return promise;
+        }
+        s.direction = dir;
+        s.phaseTime = 0;
+        setPhase(dir === "cover" ? "covering" : "revealing");
+        const instant = !s.ctx || live.current.reduced || typeof requestAnimationFrame !== "function" || typeof document !== "undefined" && document.hidden;
+        if (instant) finish(dir);
+        else requestFrame();
+        return promise;
+      }
+      function buildSourceTable() {
+        s.sourceTable = null;
+        if (!s.sourceImage || !s.edges.length || typeof document === "undefined") return;
+        const pw = 96;
+        const ph = Math.max(8, Math.round(pw * s.h / Math.max(1, s.w)));
+        try {
+          const scratch = document.createElement("canvas");
+          scratch.width = pw;
+          scratch.height = ph;
+          const sctx = scratch.getContext("2d", { willReadFrequently: true });
+          if (!sctx) return;
+          const fit = coverFit(s.sourceSize.w, s.sourceSize.h, pw, ph);
+          sctx.drawImage(s.sourceImage, fit.sx, fit.sy, fit.sw, fit.sh, 0, 0, pw, ph);
+          const { data } = sctx.getImageData(0, 0, pw, ph);
+          const norm = s.edges.map((e) => e / Math.max(1, s.w));
+          s.sourceTable = sampleSource(data, pw, ph, norm, live.current.tilesC);
+        } catch {
+          s.sourceTable = null;
+        }
+      }
+      function measure() {
+        const host = hostRef.current;
+        const canvas = canvasRef.current;
+        if (!host || !canvas || !s.ctx) return;
+        const p = live.current;
+        const dpr = currentDpr();
+        s.w = Math.max(1, Math.round(host.clientWidth * dpr));
+        s.h = Math.max(1, Math.round(host.clientHeight * dpr));
+        canvas.width = s.w;
+        canvas.height = s.h;
+        s.ctx.imageSmoothingEnabled = false;
+        s.edges = columnEdges(s.w, p.columnsC, p.powerC);
+        buildSourceTable();
+        if (s.cov.top.length !== p.columnsC) {
+          const covered = s.phase === "covered" || s.phase === "covering";
+          s.cov = createCoverage(p.columnsC, covered);
+        }
+        if (s.phase !== "idle") draw();
+      }
+      return {
+        run,
+        draw,
+        finish,
+        measure,
+        stopLoop,
+        requestFrame,
+        settlePending,
+        buildSourceTable
+      };
+    }, [live, s]);
+    const cover = useCallback(() => engine.run("cover"), [engine]);
+    const reveal = useCallback(() => engine.run("reveal"), [engine]);
+    const play = useCallback(async () => {
+      await engine.run("cover");
+      await engine.run("reveal");
+    }, [engine]);
+    useImperativeHandle(
+      ref,
+      () => ({
+        cover,
+        reveal,
+        play,
+        get element() {
+          return hostRef.current;
+        }
+      }),
+      [cover, reveal, play]
+    );
+    useEffect(() => {
+      const host = hostRef.current;
+      const canvas = canvasRef.current;
+      if (!host || !canvas) return;
+      s.ctx = canvas.getContext("2d");
+      if (!s.ctx) return;
+      engine.measure();
+      let ro;
+      if (typeof ResizeObserver !== "undefined") {
+        ro = new ResizeObserver(() => engine.measure());
+        ro.observe(host);
+      }
+      const onVisibility = () => {
+        if (!document.hidden) {
+          if (s.phase !== "idle") engine.requestFrame();
+          return;
+        }
+        engine.stopLoop();
+        if (s.phase === "covering") engine.finish("cover");
+        else if (s.phase === "revealing") engine.finish("reveal");
+      };
+      document.addEventListener("visibilitychange", onVisibility);
+      return () => {
+        engine.stopLoop();
+        ro?.disconnect();
+        document.removeEventListener("visibilitychange", onVisibility);
+        engine.settlePending();
+        s.ctx = null;
+      };
+    }, [engine, s]);
+    const gridInit = useRef(false);
+    useEffect(() => {
+      if (!gridInit.current) {
+        gridInit.current = true;
+        return;
+      }
+      engine.measure();
+    }, [columnsC, powerC, engine]);
+    useEffect(() => {
+      if (!reduced) return;
+      if (s.phase === "covering") engine.finish("cover");
+      else if (s.phase === "revealing") engine.finish("reveal");
+      else if (s.phase === "covered") {
+        engine.stopLoop();
+        engine.draw();
+      }
+    }, [reduced, engine, s]);
+    useEffect(() => {
+      s.sourceImage = null;
+      s.sourceTable = null;
+      const src = source;
+      if (!src || typeof window === "undefined") return;
+      let cancelled = false;
+      const ready = (img2, iw, ih) => {
+        if (cancelled || iw <= 0 || ih <= 0) return;
+        s.sourceImage = img2;
+        s.sourceSize = { w: iw, h: ih };
+        engine.buildSourceTable();
+        if (s.phase !== "idle") engine.draw();
+      };
+      if (typeof src !== "string") {
+        if (src instanceof HTMLCanvasElement) ready(src, src.width, src.height);
+        else if (src.complete && src.naturalWidth) ready(src, src.naturalWidth, src.naturalHeight);
+        else
+          src.addEventListener("load", () => ready(src, src.naturalWidth, src.naturalHeight), {
+            once: true
+          });
+        return () => {
+          cancelled = true;
+        };
+      }
+      const img = new Image();
+      img.decoding = "async";
+      if (!src.startsWith("data:")) img.crossOrigin = "anonymous";
+      img.onload = () => ready(img, img.naturalWidth || 300, img.naturalHeight || 150);
+      img.src = src;
+      return () => {
+        cancelled = true;
+        img.onload = null;
+      };
+    }, [source, tilesC, engine, s]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: hostRef,
+        className: cn(
+          "datamosh-transition inset-0",
+          contained ? "absolute" : "fixed",
+          phase === "idle" ? "pointer-events-none invisible" : "pointer-events-auto",
+          className
+        ),
+        style: { zIndex, ...style },
+        "data-state": phase,
+        "aria-hidden": "true",
+        ...restProps,
+        children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "block h-full w-full" })
+      }
+    );
+  }
+);
+export {
+  DatamoshTransition
+};

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

@@ -0,0 +1,180 @@
+/**
+ * DatamoshTransition core — pure math, no DOM.
+ *
+ * The look: flat blocks of saturated colour in a FIXED column grid, each column
+ * a stack of tiles falling along one sigmoid curve — slivers at the top and
+ * bottom, one fat tile snapping open through the middle. Nothing ever moves
+ * horizontally; only the vertical tiling animates.
+ *
+ * On top of that sits the transition itself: every column owns a covered band
+ * [top, bot] (0..1 of the height). Cover drops the band's bottom edge like a
+ * curtain, reveal lets its top edge fall away, columns staggered right to left.
+ */
+export declare const DEFAULT_COLORS: readonly ["#ffffff", "#3566ff", "#ffcf00", "#192aff", "#d62036", "#282142", "#ec4978", "#ff9900", "#14101f", "#00dd33", "#00ef82"];
+/** Column edges sit at W·(i/N)^power: narrow left, wide right — reads as receding perspective. */
+export declare const DEFAULT_COLUMNS = 11;
+export declare const DEFAULT_POWER = 1.65;
+/** Odd so exactly one tile sits dead centre and takes the whole bulge. */
+export declare const DEFAULT_TILES = 15;
+/** Seconds per tile step at speed 1. */
+export declare const CYCLE = 0.2;
+/** Seconds between neighbouring columns starting to fall (right column first). */
+export declare const FALL_STAGGER = 0.006;
+/** Sigmoid exponent — steepness at the centre is tile height. */
+export declare const STRETCH = 8.5;
+/** Exponential arrival rate inside a tile step (the "spring"). */
+export declare const SPRING_K = 1.6;
+/** Each tile overhangs the one below by this fraction of the height. */
+export declare const BLEED = 0.012;
+/** Phase offset per column, in tiles — the zig-zag. Negative: stacks ride higher to the right. */
+export declare const COL_PHASE = -0.4;
+/** Slope of the curve past both ends; clamping would pile off-screen tiles onto y = 0. */
+export declare const TAIL_SLOPE = 0.05;
+/** Length of the cyclic colour strip every column reads. */
+export declare const STRIP_LENGTH = 61;
+/** Small, fast, seedable PRNG (32-bit state). Same seed → same sequence. */
+export declare function mulberry32(seed: number): () => number;
+/** Relative luminance of a hex (#rgb / #rrggbb) or rgb() colour; null when unparseable. */
+export declare function luminance(color: string): number | null;
+export interface PaletteRoles {
+    /** The lightest colour — recurs most often (~a quarter of the strip). */
+    light: number;
+    /** The darkest one or two colours — the other contrast anchor. */
+    darks: number[];
+    /** Everything else. */
+    hues: number[];
+}
+/** Split a palette into contrast anchors and mid-tone hues by luminance. */
+export declare function paletteRoles(colors: readonly string[]): PaletteRoles;
+/**
+ * The cyclic colour strip, as palette indices. Light and dark anchors recur
+ * often on purpose: a fixed palette stride walks past them and leaves flat
+ * mid-tone corduroy. No two neighbours repeat, including across the wrap.
+ */
+export declare function buildStrip(seed: number, colors: readonly string[], len?: number): number[];
+/** Colour for a tile, keyed by its IDENTITY (never its on-screen slot) — colours stay put. */
+export declare function stripIndex(strip: readonly number[], id: number, column: number): number;
+/** Column edges in device px: W·(i/N)^power, rounded. Length = columns + 1. */
+export declare function columnEdges(width: number, columns: number, power: number): number[];
+/** Force a usable odd tile count (≥ 3). */
+export declare function oddTiles(tiles: number): number;
+/**
+ * Where tile boundary `k` sits, 0..1 of the height. Sigmoid across [0, tiles],
+ * extended LINEARLY (shallow slope) past both ends rather than clamped.
+ */
+export declare function tileEdge(k: number, tiles: number, stretch?: number): number;
+/**
+ * Re-time the fraction of one tile step: exponential arrival mirrored at the
+ * halfway point. Rushes in, hangs at the centre (fattest), releases. Monotonic,
+ * exact at 0 and 1, so the stack never drifts off schedule.
+ */
+export declare function springStep(p: number): number;
+/**
+ * Unbounded phase of column `i` at `elapsed` seconds. Never wrapped: tile
+ * identity is derived from it, so a wrap would teleport every boundary.
+ */
+export declare function columnFlow(elapsed: number, column: number, columns: number, speed?: number): number;
+export interface TileRect {
+    id: number;
+    /** Device px, unclamped. */
+    top: number;
+    /** Device px, bleed included, unclamped. */
+    bot: number;
+}
+/**
+ * The tiles of one column at `flow`, ordered BOTTOM-UP (paint order): each
+ * tile overhangs the one below it by `bleed` px, so painting upward laps the
+ * overhang over the lower tile instead of hiding it under it.
+ */
+export declare function columnTiles(flow: number, tiles: number, height: number, bleed: number): TileRect[];
+export type Direction = "cover" | "reveal";
+export interface Coverage {
+    /** Covered band per column, linear 0..1 (eased only when drawn). */
+    top: Float32Array;
+    bot: Float32Array;
+}
+export declare function createCoverage(columns: number, covered?: boolean): Coverage;
+/** Order in which the columns move. */
+export type DatamoshSweep = "right" | "left" | "center" | "edges" | "random";
+/**
+ * Delay before each column moves, in seconds. `right` starts at the rightmost
+ * column, `center` fans out from the middle, `edges` closes in from both
+ * sides, `random` is a seeded shuffle.
+ */
+export declare function columnDelays(columns: number, sweep: DatamoshSweep, stagger: number, seed?: number): number[];
+/**
+ * Advance every column one step toward `direction`. Cover drops the band's
+ * bottom edge to 1 (and pulls a half-fallen top back up); reveal lets the top
+ * edge fall onto the bottom one. Monotonic per column, so an interruption just
+ * reverses from wherever each column is. Returns true once every column is done.
+ */
+export declare function stepCoverage(cov: Coverage, direction: Direction, phaseTime: number, dt: number, duration: number, delays: ArrayLike<number>): boolean;
+/** Snap every column to the end of `direction`. */
+export declare function settleCoverage(cov: Coverage, direction: Direction): void;
+/** Ease for a band edge: cubic in-out, exact at 0 and 1. */
+export declare function easeEdge(a: number): number;
+/**
+ * Shape of the covered band. `curtain` drops from the top and falls away,
+ * `rise` climbs from the bottom and lifts off, `split` opens from the centre
+ * line and squeezes shut onto it, `interlace` alternates curtain and rise
+ * column by column. Everything stays vertical.
+ */
+export type DatamoshEffect = "curtain" | "rise" | "split" | "interlace";
+export interface Band {
+    /** 0..1 of the height. */
+    y0: number;
+    y1: number;
+    /** Draw the tile stack upside down (tiles rise instead of fall). */
+    mirror: boolean;
+}
+/**
+ * Map a column's curtain-space band `[top, bot]` (already eased) onto the
+ * screen for `effect`. Curtain space is what `stepCoverage` animates; every
+ * effect is a pure re-mapping of it, so interruptions behave the same.
+ */
+export declare function columnBand(effect: DatamoshEffect, column: number, top: number, bot: number): Band;
+/** Ready-made palettes. Each keeps one light anchor and a couple of near-blacks. */
+export declare const DATAMOSH_PALETTES: {
+    readonly broadcast: readonly ["#ffffff", "#3566ff", "#ffcf00", "#192aff", "#d62036", "#282142", "#ec4978", "#ff9900", "#14101f", "#00dd33", "#00ef82"];
+    readonly thermal: readonly ["#fff4d6", "#ffd23f", "#ff9f1c", "#ff5a1f", "#e0282e", "#b0125b", "#6a0f63", "#2a0a3d", "#0d0614"];
+    readonly sunset: readonly ["#fff6d8", "#fbc56b", "#f59a3a", "#e97a1d", "#c85a14", "#8a4a22", "#5a3b25", "#2d1c16", "#140b08"];
+    readonly mono: readonly ["#ffffff", "#e5e5e5", "#b5b5b5", "#8a8a8a", "#5c5c5c", "#2e2e2e", "#141414", "#050505"];
+    readonly acid: readonly ["#f4ffe8", "#e4ff1a", "#00ff9c", "#00e0ff", "#3d5afe", "#8c3dff", "#ff2bd6", "#1b0b36", "#070707"];
+};
+export type DatamoshPaletteName = keyof typeof DATAMOSH_PALETTES;
+/** Resolve a palette name or colour list; falls back to the default for anything unusable. */
+export declare function resolvePalette(colors: readonly string[] | DatamoshPaletteName | undefined): string[];
+/** Largest brightness gain the `boost` auto-levels may apply. */
+export declare const MAX_GAIN = 1.6;
+/** Share of the picture's height the slots sample from, centred. */
+export declare const SOURCE_SPAN = 0.6;
+/**
+ * Height (0..1) a slot samples the picture at: spread linearly over the middle
+ * `SOURCE_SPAN` of the picture. Not along the fall's sigmoid, which packs
+ * almost every slot against the edges, and not over the full height, where
+ * frames and borders (the darkest, dullest parts of most pictures) sit.
+ */
+export declare function sourceSlotY(slot: number, tiles: number): number;
+/**
+ * Which rest slot a tile's colour is sampled from. Keyed by IDENTITY, like the
+ * colour strip: a tile keeps its piece of the picture as it falls, so the
+ * image gets dragged down in chunks instead of sliding under the grid.
+ */
+export declare function sourceSlot(id: number, column: number, tiles: number): number;
+/** Source rect that fits an image over a box like `object-fit: cover`. */
+export declare function coverFit(imgW: number, imgH: number, boxW: number, boxH: number): {
+    sx: number;
+    sy: number;
+    sw: number;
+    sh: number;
+};
+/**
+ * Colour table `[column][slot]` sampled from an RGBA buffer that already maps
+ * onto the overlay box. Each cell averages a 3×3 neighbourhood at the column's
+ * centre and the slot's height. `edges` are column edges normalised to 0..1.
+ *
+ * With `boost` (default), the table is auto-levelled (darkest cell → black,
+ * brightest → white) and saturated, so a moody picture still decodes into the
+ * flat, saturated blocks the effect is about.
+ */
+export declare function sampleSource(pixels: ArrayLike<number>, pw: number, ph: number, edges: readonly number[], tiles: number, boost?: boolean): string[][];

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/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.1",
+  "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",