@jasonbelmonti/signal-ui 0.9.0 → 0.10.1

package/README.md

@@ -11,10 +11,22 @@ bun run typecheck
 bun run build
 ```
 
+The Storybook catalog is organized in this order:
+
+1. `Overview` – landing, getting started, and catalog context.
+2. `Foundations` – baseline visual and token references.
+3. `Components` – primary reusable components.
+4. `Recipes` – recommended patterns and composition examples for real product flows.
+5. `Lab` – secondary experimental or edge-case surfaces.
+
 Pushes to `main` also publish the static Storybook to GitHub Pages via
 `.github/workflows/storybook-pages.yml`, so the theme can be shared without a local build.
 The default URL for this repository is `https://jasonbelmonti.github.io/signal-ui/`.
 
+`Recipes` and `Lab` remain in the catalog intentionally, but they are secondary to
+`Foundations` and `Components` so designers and integrators can quickly separate stable
+reference surfaces from exploratory patterns.
+
 `bun run build` emits the consumable package contract in `dist/`:
 
 - `dist/index.js`

package/dist/src/components/FullScreenWipe.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type FullScreenWipeVariant = "flat-iris" | "procedural-pixel";
+export type FullScreenWipeState = "open" | "closed";
+export interface FullScreenWipeProps extends HTMLAttributes<HTMLDivElement> {
+    accentColor?: string;
+    children?: ReactNode;
+    coverColor?: string;
+    durationMs?: number;
+    overlayLabel?: string;
+    state?: FullScreenWipeState;
+    variant?: FullScreenWipeVariant;
+}
+export declare function FullScreenWipe({ accentColor, children, className, coverColor, durationMs, overlayLabel, state, style, variant, ...divProps }: FullScreenWipeProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/FullScreenWipe.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { joinClassNames } from "../utils/joinClassNames.js";
+import { getFullScreenWipePhaseDurationMs, useFullScreenWipeState } from "./fullScreenWipe/useFullScreenWipeState.js";
+import { useProceduralPixelWipeCanvas } from "./fullScreenWipe/useProceduralPixelWipeCanvas.js";
+const DEFAULT_DURATION_MS = 140;
+export function FullScreenWipe({ accentColor = "var(--signal-ui-primary)", children, className, coverColor = "rgb(4 5 8 / 0.98)", durationMs = DEFAULT_DURATION_MS, overlayLabel, state = "open", style, variant = "flat-iris", ...divProps }) {
+    const canvasRef = useRef(null);
+    const { blocksInteraction, phase, reducedMotion, renderedState } = useFullScreenWipeState({
+        durationMs,
+        state,
+    });
+    const openingDurationMs = getFullScreenWipePhaseDurationMs(durationMs, "opening");
+    const closingDurationMs = getFullScreenWipePhaseDurationMs(durationMs, "closing");
+    const phaseDurationMs = phase ? getFullScreenWipePhaseDurationMs(durationMs, phase) : durationMs;
+    useProceduralPixelWipeCanvas({
+        canvasRef,
+        durationMs: phaseDurationMs,
+        phase: variant === "procedural-pixel" ? phase : undefined,
+        reducedMotion,
+        state: variant === "procedural-pixel" ? state : "open",
+    });
+    const rootStyle = {
+        ...style,
+        "--signal-ui-full-screen-wipe-accent": accentColor,
+        "--signal-ui-full-screen-wipe-closing-duration": `${closingDurationMs}ms`,
+        "--signal-ui-full-screen-wipe-cover": coverColor,
+        "--signal-ui-full-screen-wipe-duration": `${durationMs}ms`,
+        "--signal-ui-full-screen-wipe-opening-duration": `${openingDurationMs}ms`,
+    };
+    return (_jsxs("div", { ...divProps, className: joinClassNames("signal-ui-full-screen-wipe", className), "data-signal-ui-full-screen-wipe-blocking": blocksInteraction ? "true" : "false", "data-signal-ui-full-screen-wipe-phase": phase, "data-signal-ui-full-screen-wipe-rendered-state": renderedState, "data-signal-ui-full-screen-wipe-state": state, "data-signal-ui-full-screen-wipe-variant": variant, style: rootStyle, children: [_jsx("div", { "aria-hidden": blocksInteraction, className: "signal-ui-full-screen-wipe__content", inert: blocksInteraction ? true : undefined, children: children }), _jsxs("div", { "aria-hidden": "true", className: "signal-ui-full-screen-wipe__overlay", children: [_jsx("div", { className: "signal-ui-full-screen-wipe__scan" }), variant === "flat-iris" ? (_jsxs("div", { className: "signal-ui-full-screen-wipe__flat-iris", children: [flatIrisPanelClassNames.map((panelClassName) => (_jsx("span", { className: joinClassNames("signal-ui-full-screen-wipe__panel", panelClassName) }, panelClassName))), _jsx("span", { className: "signal-ui-full-screen-wipe__iris-core" })] })) : (_jsx("div", { className: "signal-ui-full-screen-wipe__procedural", children: _jsx("canvas", { className: "signal-ui-full-screen-wipe__canvas", ref: canvasRef }) })), overlayLabel ? (_jsx("div", { className: "signal-ui-full-screen-wipe__label", children: _jsx("span", { children: overlayLabel }) })) : null] })] }));
+}
+const flatIrisPanelClassNames = [
+    "signal-ui-full-screen-wipe__panel--northwest",
+    "signal-ui-full-screen-wipe__panel--northeast",
+    "signal-ui-full-screen-wipe__panel--southwest",
+    "signal-ui-full-screen-wipe__panel--southeast",
+];

package/dist/src/components/GlitchGhost.d.ts

@@ -0,0 +1,24 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+export type GlitchGhostMask = "signal" | "lattice";
+export type GlitchGhostBlendMode = "screen" | "plus-lighter" | "exclusion";
+type CssLength = number | string;
+type CssAngle = number | string;
+export interface GlitchGhostProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+    animated?: boolean;
+    blendMode?: GlitchGhostBlendMode;
+    blur?: CssLength;
+    children: ReactNode;
+    depth?: CssLength;
+    ghost?: ReactNode;
+    ghostColor?: string;
+    ghostCount?: 1 | 2 | 3;
+    ghostOpacity?: number;
+    mask?: GlitchGhostMask;
+    offsetX?: CssLength;
+    offsetY?: CssLength;
+    perspective?: CssLength;
+    tiltX?: CssAngle;
+    tiltY?: CssAngle;
+}
+export declare function GlitchGhost({ animated, blendMode, blur, children, className, depth, ghost, ghostColor, ghostCount, ghostOpacity, mask, offsetX, offsetY, perspective, style, tiltX, tiltY, ...props }: GlitchGhostProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/GlitchGhost.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useEffectEvent, useRef } from "react";
+import { hasCanvasSnapshotSource } from "./glitchGhost/hasCanvasSnapshotSource.js";
+import { hasCustomGhostContent } from "./glitchGhost/hasCustomGhostContent.js";
+import { syncGhostSnapshotLayers } from "./glitchGhost/snapshot.js";
+import { joinClassNames } from "../utils/joinClassNames.js";
+const glitchGhostLayers = [
+    "signal-ui-glitch-ghost__ghost--lead",
+    "signal-ui-glitch-ghost__ghost--trail",
+    "signal-ui-glitch-ghost__ghost--echo",
+];
+function toCssLength(value, fallback) {
+    if (value === undefined) {
+        return fallback;
+    }
+    return typeof value === "number" ? `${value}px` : value;
+}
+function toCssAngle(value, fallback) {
+    if (value === undefined) {
+        return fallback;
+    }
+    return typeof value === "number" ? `${value}deg` : value;
+}
+export function GlitchGhost({ animated = true, blendMode = "screen", blur = 0.85, children, className, depth = 18, ghost, ghostColor = "rgb(var(--signal-ui-primary-rgb) / 0.74)", ghostCount = 3, ghostOpacity = 0.42, mask = "signal", offsetX = 12, offsetY = 7, perspective = 580, style, tiltX = 7, tiltY = -8, ...props }) {
+    const mainRef = useRef(null);
+    const ghostCopyRefs = useRef([]);
+    const hasCustomGhost = hasCustomGhostContent(ghost);
+    const ghostStyle = {
+        ...style,
+        "--signal-ui-glitch-ghost-blend-mode": blendMode,
+        "--signal-ui-glitch-ghost-blur": toCssLength(blur, "0.85px"),
+        "--signal-ui-glitch-ghost-color": ghostColor,
+        "--signal-ui-glitch-ghost-depth": toCssLength(depth, "18px"),
+        "--signal-ui-glitch-ghost-offset-x": toCssLength(offsetX, "12px"),
+        "--signal-ui-glitch-ghost-offset-y": toCssLength(offsetY, "7px"),
+        "--signal-ui-glitch-ghost-opacity": ghostOpacity,
+        "--signal-ui-glitch-ghost-perspective": toCssLength(perspective, "580px"),
+        "--signal-ui-glitch-ghost-tilt-x": toCssAngle(tiltX, "7deg"),
+        "--signal-ui-glitch-ghost-tilt-y": toCssAngle(tiltY, "-8deg"),
+    };
+    const syncGhostSnapshots = useEffectEvent(() => {
+        if (hasCustomGhost) {
+            return;
+        }
+        const mainElement = mainRef.current;
+        const targetElements = ghostCopyRefs.current
+            .slice(0, ghostCount)
+            .filter((element) => element !== null);
+        if (!mainElement || targetElements.length === 0) {
+            return;
+        }
+        syncGhostSnapshotLayers(mainElement, targetElements);
+    });
+    useEffect(() => {
+        ghostCopyRefs.current.length = ghostCount;
+        if (hasCustomGhost || typeof window === "undefined") {
+            return undefined;
+        }
+        const mainElement = mainRef.current;
+        if (!mainElement) {
+            return undefined;
+        }
+        let animationFrameId = null;
+        let continuousSyncFrameId = null;
+        const stopContinuousSync = () => {
+            if (continuousSyncFrameId === null) {
+                return;
+            }
+            window.cancelAnimationFrame(continuousSyncFrameId);
+            continuousSyncFrameId = null;
+        };
+        const updateContinuousSync = () => {
+            if (!hasCanvasSnapshotSource(mainElement)) {
+                stopContinuousSync();
+                return;
+            }
+            if (continuousSyncFrameId !== null) {
+                return;
+            }
+            continuousSyncFrameId = window.requestAnimationFrame(function syncCanvasGhostFrame() {
+                continuousSyncFrameId = null;
+                syncGhostSnapshots();
+                updateContinuousSync();
+            });
+        };
+        const scheduleSnapshotSync = () => {
+            if (animationFrameId !== null) {
+                return;
+            }
+            animationFrameId = window.requestAnimationFrame(() => {
+                animationFrameId = null;
+                syncGhostSnapshots();
+                updateContinuousSync();
+            });
+        };
+        scheduleSnapshotSync();
+        const observer = new MutationObserver(() => {
+            scheduleSnapshotSync();
+        });
+        observer.observe(mainElement, {
+            attributes: true,
+            characterData: true,
+            childList: true,
+            subtree: true,
+        });
+        return () => {
+            observer.disconnect();
+            stopContinuousSync();
+            if (animationFrameId !== null) {
+                window.cancelAnimationFrame(animationFrameId);
+            }
+            for (const ghostCopyElement of ghostCopyRefs.current) {
+                ghostCopyElement?.replaceChildren();
+            }
+        };
+    }, [ghostCount, hasCustomGhost, syncGhostSnapshots]);
+    return (_jsxs("div", { className: joinClassNames("signal-ui-glitch-ghost", animated && "signal-ui-glitch-ghost--animated", className), "data-mask": mask, style: ghostStyle, ...props, children: [_jsx("div", { "aria-hidden": "true", className: "signal-ui-glitch-ghost__layers", children: glitchGhostLayers.slice(0, ghostCount).map((layerClassName, index) => (_jsx("div", { inert: true, className: joinClassNames("signal-ui-glitch-ghost__ghost", layerClassName), children: _jsx("div", { ref: (element) => {
+                            ghostCopyRefs.current[index] = element;
+                        }, className: "signal-ui-glitch-ghost__copy", children: hasCustomGhost ? ghost : null }) }, layerClassName))) }), _jsx("div", { ref: mainRef, className: "signal-ui-glitch-ghost__main", children: children })] }));
+}

package/dist/src/components/Panel.d.ts

@@ -2,6 +2,11 @@ import type { CardProps } from "antd";
 export type PanelCutCorner = "accent" | "notch";
 export type PanelCutCornerPreset = "tactical" | "architectural";
 export type PanelFrame = "reticle";
+export type PanelSurface = "glass";
+export type PanelReveal = "holographic";
+export type PanelRevealIntro = "point";
+export type PanelRevealOutro = "point";
+export type PanelRevealState = "open" | "closed" | "hidden";
 export type PanelCutCornerPlacement = "top-left" | "top-right" | "bottom-left" | "bottom-right";
 export interface PanelProps extends CardProps {
     cutCornerPreset?: PanelCutCornerPreset;
@@ -12,6 +17,15 @@ export interface PanelProps extends CardProps {
     frame?: PanelFrame;
     frameColor?: string;
     frameSize?: number | string;
+    surface?: PanelSurface;
+    surfaceColor?: string;
+    surfaceBlur?: number | string;
+    reveal?: PanelReveal;
+    revealColor?: string;
+    revealIntro?: PanelRevealIntro;
+    revealOutro?: PanelRevealOutro;
+    revealState?: PanelRevealState;
+    cursorTilt?: boolean;
 }
 export declare const panelCutCornerPresets: {
     tactical: {
@@ -27,4 +41,4 @@ export declare const panelCutCornerPresets: {
         cutCornerSize: number;
     };
 };
-export declare function Panel({ className, cutCorner, cutCornerColor, cutCornerPreset, cutCornerPlacement, cutCornerSize, frame, frameColor, frameSize, style, ...cardProps }: PanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function Panel({ className, cursorTilt, cutCorner, cutCornerColor, cutCornerPreset, cutCornerPlacement, cutCornerSize, frame, frameColor, frameSize, surface, surfaceColor, surfaceBlur, reveal, revealColor, revealIntro, revealOutro, revealState, style, onPointerCancel, onPointerLeave, onPointerMove, ...cardProps }: PanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Panel.js

@@ -1,5 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Card } from "antd";
+import { joinClassNames } from "../utils/joinClassNames.js";
+import { PanelRevealCanvas } from "./panel/PanelRevealCanvas.js";
+import { usePanelCursorTilt } from "./panel/usePanelCursorTilt.js";
+import { usePanelRevealState as usePanelPixelRevealState } from "./panel/usePanelRevealState.js";
+import { usePanelShellRevealState } from "./panel/usePanelShellRevealState.js";
 export const panelCutCornerPresets = {
     tactical: {
         cutCorner: "accent",
@@ -14,21 +19,33 @@ export const panelCutCornerPresets = {
         cutCornerSize: 24,
     },
 };
-function toCssLength(value) {
-    if (value === undefined) {
-        return undefined;
-    }
-    return typeof value === "number" ? `${value}px` : value;
-}
-function joinClassNames(...classNames) {
-    return classNames.filter(Boolean).join(" ");
+function getPanelRevealCssVariables(style) {
+    return Object.fromEntries(Object.entries(style).filter(([propertyName]) => propertyName.startsWith("--signal-ui-panel-reveal-")));
 }
-export function Panel({ className, cutCorner, cutCornerColor, cutCornerPreset, cutCornerPlacement, cutCornerSize, frame, frameColor, frameSize, style, ...cardProps }) {
+export function Panel({ className, cursorTilt, cutCorner, cutCornerColor, cutCornerPreset, cutCornerPlacement, cutCornerSize, frame, frameColor, frameSize, surface, surfaceColor, surfaceBlur, reveal, revealColor, revealIntro, revealOutro, revealState = "open", style, onPointerCancel, onPointerLeave, onPointerMove, ...cardProps }) {
     const preset = cutCornerPreset ? panelCutCornerPresets[cutCornerPreset] : undefined;
     const resolvedCutCorner = cutCorner ?? preset?.cutCorner;
     const resolvedCutCornerColor = cutCornerColor ?? preset?.cutCornerColor ?? "var(--signal-ui-primary)";
     const resolvedCutCornerPlacement = cutCornerPlacement ?? preset?.cutCornerPlacement ?? "top-right";
     const resolvedCutCornerSize = cutCornerSize ?? preset?.cutCornerSize ?? 26;
+    const resolvedSurfaceColor = surfaceColor ?? frameColor ?? resolvedCutCornerColor;
+    const resolvedRevealColor = revealColor ?? resolvedSurfaceColor;
+    const { renderedRevealState, revealPhase } = usePanelShellRevealState({
+        reveal,
+        revealIntro,
+        revealOutro,
+        revealState,
+    });
+    const shouldRenderPixelReveal = reveal === "holographic" && surface === "glass";
+    const { renderedRevealState: renderedPixelRevealState, revealPhase: pixelRevealPhase } = usePanelPixelRevealState({
+        reveal: shouldRenderPixelReveal ? reveal : undefined,
+        revealIntro,
+        revealOutro,
+        revealState,
+    });
+    const { surfacePointerHandlers, surfaceRef } = usePanelCursorTilt({
+        enabled: cursorTilt,
+    });
     const panelStyle = {
         ...style,
         ...(resolvedCutCorner
@@ -43,6 +60,51 @@ export function Panel({ className, cutCorner, cutCornerColor, cutCornerPreset, c
                 "--signal-ui-panel-reticle-size": toCssLength(frameSize) ?? "28px",
             }
             : {}),
+        ...(surface === "glass"
+            ? {
+                "--signal-ui-panel-surface-color": resolvedSurfaceColor,
+                "--signal-ui-panel-surface-blur": toCssLength(surfaceBlur) ?? "10px",
+            }
+            : {}),
+        ...(reveal === "holographic"
+            ? {
+                "--signal-ui-panel-reveal-color": resolvedRevealColor,
+            }
+            : {}),
+    };
+    const panelCard = (_jsx(Card, { ...cardProps, onPointerCancel: reveal === "holographic"
+            ? onPointerCancel
+            : cursorTilt
+                ? composeEventHandlers(onPointerCancel, surfacePointerHandlers.onPointerCancel)
+                : onPointerCancel, onPointerLeave: reveal === "holographic"
+            ? onPointerLeave
+            : cursorTilt
+                ? composeEventHandlers(onPointerLeave, surfacePointerHandlers.onPointerLeave)
+                : onPointerLeave, onPointerMove: reveal === "holographic"
+            ? onPointerMove
+            : cursorTilt
+                ? composeEventHandlers(onPointerMove, surfacePointerHandlers.onPointerMove)
+                : onPointerMove, className: joinClassNames("signal-ui-panel", cursorTilt && reveal !== "holographic" ? "signal-ui-panel--cursor-tilt" : undefined, frame && `signal-ui-panel--frame-${frame}`, surface && `signal-ui-panel--surface-${surface}`, resolvedCutCorner && `signal-ui-panel--cut-${resolvedCutCorner}`, resolvedCutCorner && `signal-ui-panel--corner-${resolvedCutCornerPlacement}`, reveal && `signal-ui-panel--reveal-${reveal}`, className), ref: cursorTilt && reveal !== "holographic" ? surfaceRef : undefined, style: panelStyle }));
+    if (reveal !== "holographic") {
+        return panelCard;
+    }
+    const shellStyle = {
+        ...getPanelRevealCssVariables(panelStyle),
+        "--signal-ui-panel-surface-blur": panelStyle["--signal-ui-panel-surface-blur"],
+        "--signal-ui-panel-surface-color": panelStyle["--signal-ui-panel-surface-color"],
     };
-    return (_jsx(Card, { ...cardProps, className: joinClassNames("signal-ui-panel", frame ? `signal-ui-panel--frame-${frame}` : undefined, resolvedCutCorner ? `signal-ui-panel--cut-${resolvedCutCorner}` : undefined, resolvedCutCorner ? `signal-ui-panel--corner-${resolvedCutCornerPlacement}` : undefined, className), style: panelStyle }));
+    return (_jsxs("div", { onPointerCancel: cursorTilt ? surfacePointerHandlers.onPointerCancel : undefined, onPointerLeave: cursorTilt ? surfacePointerHandlers.onPointerLeave : undefined, onPointerMove: cursorTilt ? surfacePointerHandlers.onPointerMove : undefined, ref: cursorTilt ? surfaceRef : undefined, className: joinClassNames("signal-ui-panel-shell", "signal-ui-panel-shell--reveal-holographic", surface === "glass" ? "signal-ui-panel-shell--surface-glass" : undefined, shouldRenderPixelReveal && "signal-ui-panel-shell--pixel-reveal", cursorTilt ? "signal-ui-panel-shell--cursor-tilt" : undefined), "data-signal-ui-panel-reveal-phase": revealPhase, "data-signal-ui-panel-reveal-state": renderedRevealState, style: shellStyle, children: [_jsx("div", { "aria-hidden": "true", className: "signal-ui-panel-shell__pixels" }), _jsx("div", { "aria-hidden": "true", className: "signal-ui-panel-shell__beam" }), _jsx("div", { "aria-hidden": "true", className: "signal-ui-panel-shell__edges" }), _jsxs("div", { "aria-hidden": renderedRevealState !== "open", className: "signal-ui-panel-shell__stage", inert: renderedRevealState !== "open" ? true : undefined, children: [shouldRenderPixelReveal && renderedRevealState !== "hidden" ? (_jsx("div", { "aria-hidden": "true", className: "signal-ui-panel-shell__pixel-layer", children: _jsx(PanelRevealCanvas, { revealPhase: pixelRevealPhase, revealState: renderedPixelRevealState }) })) : undefined, panelCard] })] }));
+}
+function composeEventHandlers(...handlers) {
+    return (event) => {
+        handlers.forEach((handler) => {
+            handler?.(event);
+        });
+    };
+}
+function toCssLength(value) {
+    if (value === undefined) {
+        return undefined;
+    }
+    return typeof value === "number" ? `${value}px` : value;
 }

package/dist/src/components/fullScreenWipe/renderProceduralPixelWipeBuffer.d.ts

@@ -0,0 +1,14 @@
+import { type RgbChannels } from "../signalButton/utils.js";
+import type { FullScreenWipePhase } from "./useFullScreenWipeState.js";
+type RenderProceduralPixelWipeBufferOptions = {
+    accent: RgbChannels;
+    cols: number;
+    cover: RgbChannels;
+    ctx: CanvasRenderingContext2D;
+    phase: FullScreenWipePhase | "closed";
+    progress: number;
+    rows: number;
+    timeMs: number;
+};
+export declare function renderProceduralPixelWipeBuffer({ accent, cols, cover, ctx, phase, progress, rows, timeMs, }: RenderProceduralPixelWipeBufferOptions): void;
+export {};

package/dist/src/components/fullScreenWipe/renderProceduralPixelWipeBuffer.js

@@ -0,0 +1,65 @@
+import { drawPixel } from "../signalButton/color.js";
+import { hash } from "../signalButton/noise.js";
+import { clamp } from "../signalButton/utils.js";
+export function renderProceduralPixelWipeBuffer({ accent, cols, cover, ctx, phase, progress, rows, timeMs, }) {
+    const easedProgress = phase === "opening"
+        ? 1 - easeOutQuint(progress)
+        : phase === "closing"
+            ? easeInOutCubic(progress)
+            : 1;
+    const timePhase = timeMs * 0.001;
+    const diagonalSpan = Math.max(cols + rows - 2, 1);
+    const frontierWidth = 0.14;
+    const travelOvershoot = 0.26;
+    const frontierPosition = lerp(-travelOvershoot, 1 + travelOvershoot, easedProgress);
+    ctx.clearRect(0, 0, cols, rows);
+    for (let y = 0; y < rows; y += 1) {
+        for (let x = 0; x < cols; x += 1) {
+            const diagonal = (x + y) / diagonalSpan;
+            const stableNoise = hash(x * 9 + 11, y * 13 + 7, 23);
+            const pulseWave = 0.5 +
+                0.5 *
+                    Math.sin(timePhase * 4.8 + x * 0.58 - y * 0.3 + stableNoise * Math.PI * 2);
+            const driftWave = 0.5 + 0.5 * Math.sin(timePhase * 2.7 - diagonal * 10.4 + stableNoise * Math.PI * 1.5);
+            const diagonalNoise = (stableNoise - 0.5) * 0.22 + (pulseWave - 0.5) * 0.08 + (driftWave - 0.5) * 0.06;
+            const threshold = diagonal + diagonalNoise;
+            const coverage = clamp((frontierPosition - threshold + frontierWidth) / (frontierWidth * 2), 0, 1);
+            if (coverage <= 0.02) {
+                continue;
+            }
+            const frontier = clamp(1 - Math.abs(frontierPosition - threshold) / frontierWidth, 0, 1);
+            const alpha = 0.12 + coverage * 0.86;
+            const coverLift = 0.02 + frontier * 0.08 + pulseWave * 0.04;
+            const coverSaturation = 0.08 + driftWave * 0.16;
+            ctx.fillStyle = rgba(cover, coverSaturation, coverLift, clamp(alpha + (phase === "closed" ? 0.04 : 0), 0, 1));
+            ctx.fillRect(x, y, 1, 1);
+            const accentThreshold = 0.46 - frontier * 0.12;
+            const accentNoise = hash(x * 7 + 17, y * 5 + 29, 41);
+            if (frontier > 0.12) {
+                drawPixel(ctx, x, y, accent, 0.88 + frontier * 0.12, 0.08 + frontier * 0.18 + pulseWave * 0.08, 0.06 + frontier * 0.34 + pulseWave * 0.06);
+            }
+            else if (coverage > 0.82 && accentNoise > accentThreshold) {
+                drawPixel(ctx, x, y, accent, 0.62 + pulseWave * 0.18, 0.03 + driftWave * 0.08, 0.03 + accentNoise * 0.08);
+            }
+        }
+    }
+}
+function rgba(channels, saturation, lift, alpha) {
+    const red = liftChannel(channels[0], saturation, lift);
+    const green = liftChannel(channels[1], saturation, lift);
+    const blue = liftChannel(channels[2], saturation, lift);
+    return `rgba(${red}, ${green}, ${blue}, ${clamp(alpha, 0, 1)})`;
+}
+function liftChannel(channel, saturation, lift) {
+    const scaled = channel * saturation;
+    return Math.round(clamp(scaled + (255 - scaled) * lift, 0, 255));
+}
+function easeInOutCubic(value) {
+    return value < 0.5 ? 4 * value * value * value : 1 - Math.pow(-2 * value + 2, 3) / 2;
+}
+function easeOutQuint(value) {
+    return 1 - Math.pow(1 - value, 5);
+}
+function lerp(start, end, amount) {
+    return start + (end - start) * amount;
+}

package/dist/src/components/fullScreenWipe/useFullScreenWipeState.d.ts

@@ -0,0 +1,14 @@
+import type { FullScreenWipeState } from "../FullScreenWipe.js";
+export type FullScreenWipePhase = "opening" | "closing";
+export declare function getFullScreenWipePhaseDurationMs(durationMs: number, _phase: FullScreenWipePhase): number;
+type UseFullScreenWipeStateOptions = {
+    durationMs: number;
+    state: FullScreenWipeState;
+};
+export declare function useFullScreenWipeState({ durationMs, state, }: UseFullScreenWipeStateOptions): {
+    blocksInteraction: boolean;
+    phase: FullScreenWipePhase | undefined;
+    renderedState: FullScreenWipeState;
+    reducedMotion: boolean;
+};
+export {};

package/dist/src/components/fullScreenWipe/useFullScreenWipeState.js

@@ -0,0 +1,47 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+export function getFullScreenWipePhaseDurationMs(durationMs, _phase) {
+    return durationMs;
+}
+export function useFullScreenWipeState({ durationMs, state, }) {
+    const reducedMotion = prefersReducedMotion();
+    const [visualState, setVisualState] = useState({
+        phase: undefined,
+        renderedState: state,
+    });
+    const previousStateRef = useRef(state);
+    useIsomorphicLayoutEffect(() => {
+        const previousState = previousStateRef.current;
+        previousStateRef.current = state;
+        if (reducedMotion || previousState === state) {
+            setVisualState({
+                phase: undefined,
+                renderedState: state,
+            });
+            return undefined;
+        }
+        const nextPhase = state === "open" ? "opening" : "closing";
+        setVisualState({
+            phase: nextPhase,
+            renderedState: previousState,
+        });
+        const timeoutId = window.setTimeout(() => {
+            setVisualState({
+                phase: undefined,
+                renderedState: state,
+            });
+        }, getFullScreenWipePhaseDurationMs(durationMs, nextPhase));
+        return () => {
+            window.clearTimeout(timeoutId);
+        };
+    }, [durationMs, reducedMotion, state]);
+    return {
+        blocksInteraction: reducedMotion ? state === "closed" : state === "closed" || visualState.phase !== undefined,
+        phase: visualState.phase,
+        renderedState: visualState.renderedState,
+        reducedMotion,
+    };
+}
+function prefersReducedMotion() {
+    return typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;

package/dist/src/components/fullScreenWipe/useProceduralPixelWipeCanvas.d.ts

@@ -0,0 +1,12 @@
+import type { RefObject } from "react";
+import type { FullScreenWipeState } from "../FullScreenWipe.js";
+import type { FullScreenWipePhase } from "./useFullScreenWipeState.js";
+type UseProceduralPixelWipeCanvasOptions = {
+    canvasRef: RefObject<HTMLCanvasElement | null>;
+    durationMs: number;
+    phase?: FullScreenWipePhase;
+    reducedMotion: boolean;
+    state: FullScreenWipeState;
+};
+export declare function useProceduralPixelWipeCanvas({ canvasRef, durationMs, phase, reducedMotion, state, }: UseProceduralPixelWipeCanvasOptions): void;
+export {};