solid-drift 0.17.0 → 0.19.0

package/README.md

@@ -345,6 +345,36 @@ const { rotateX, rotateY } = createTilt(() => card, { maxAngle: 12 })
 
 Returns `{ rotateX, rotateY }`: spring-smoothed tilt in degrees. SSR-safe and reduced-motion safe: both return constant `0` accessors.
 
+### `createTiltCard(ref, options?)`
+
+Holographic trading-card tilt: 3D lean plus every signal a holo foil needs. Beyond `createTilt`'s rotation, this tracks `glareX`/`glareY` (pointer position 0..1, for a radial glare overlay), `holoAngle` (a rainbow angle that sweeps with the pointer, for a gradient foil overlay), `shine` (0..1 overlay intensity that fades in on hover and out on leave), `scale` (hover pop), `hovering`, and a ready-made `transform()` string (perspective, rotateX/rotateY, scale). SSR-safe and reduced-motion safe: static constants, no tilt, no shine. Touch drags tilt while touching, release settles back.
+
+```tsx
+import { createTiltCard } from "solid-drift"
+
+let card!: HTMLDivElement
+const c = createTiltCard(() => card, { maxAngle: 14 })
+<div style={{ transform: c.transform() }} ref={card}>
+  {art}
+  <div style={{
+    background: `radial-gradient(circle at ${c.glareX() * 100}% ${c.glareY() * 100}%, rgba(255,255,255,0.6), transparent 60%)`,
+    opacity: c.shine(),
+  }} />
+  <div style={{
+    background: `linear-gradient(${c.holoAngle()}deg, #ff0080, #ff8000, #ffff00, #00ff80, #0080ff, #8000ff)`,
+    "mix-blend-mode": "color-dodge",
+    opacity: c.shine() * 0.55,
+  }} />
+</div>
+```
+
+| Option        | Default | Description                          |
+| ------------- | ------- | ------------------------------------ |
+| `maxAngle`    | `12`    | Maximum tilt in degrees at the edge  |
+| `scale`       | `1.04`  | Scale while hovering                 |
+| `perspective` | `900`   | Perspective distance in px           |
+| `spring`      | default | Spring physics for tilt, shine, pop  |
+
 ### `createDrag(ref, options?)`
 
 Pointer drag with spring physics, constraints, and momentum. The gesture workhorse: draggable cards, sliders, bottom-sheet handles, sortable rows. While the pointer is down the element tracks it 1:1; on release it glides with inertia and springs into its constraints, stretching elastically past the edges while dragged. Set `touch-action: none` on the draggable element so touch drags do not fight the page scroll. For the physics-toy flavor (exponential friction plus bouncing off walls), see `createFling` instead.
@@ -1074,6 +1104,28 @@ const reveal = createMintReveal(() => card, {
 
 Returns `{ play, reset, status }`. `status()` walks `"idle"`, `"anticipating"`, `"flipping"`, `"revealed"`. Under reduced motion (and on the server) `play()` applies the revealed state immediately and still calls `onFlip`.
 
+### `createDepixelate(image, canvas, options?)`
+
+Pixel-to-sharp image reveal, the classic NFT mint ceremony. An image renders into a canvas fully pixelated, then resolves to sharp in discrete chunky steps on the shared animation clock. Owns the canvas drawing: give it an image and a canvas, call `play()` when the art should reveal. The pixelated teaser frame paints itself as soon as the image loads, so the pre-reveal state needs no manual setup. Pair with `createMintReveal` for the full ceremony: flip the card, depixelate the art.
+
+```tsx
+let img!: HTMLImageElement
+let cvs!: HTMLCanvasElement
+const reveal = createDepixelate(() => img, () => cvs, { duration: 1800 })
+<img ref={img} src={artUrl} style={{ display: "none" }} />
+<canvas ref={cvs} />
+<button onClick={() => reveal.play()}>Reveal</button>
+```
+
+| Option       | Default           | Description                                    |
+| ------------ | ----------------- | ---------------------------------------------- |
+| `levels`     | `10`              | Discrete pixelation steps from blocky to sharp |
+| `duration`   | `1600`            | Full reveal duration in ms                     |
+| `easing`     | `"easeInOutCubic"`| Easing for the reveal progress                 |
+| `onComplete` | none              | Called when the reveal reaches sharp           |
+
+Returns `{ pixelSize, progress, status, play, complete, reset, stop }`. `status()` walks `"idle"`, `"revealing"`, `"revealed"`; `pixelSize()` is the current block size in px (1 means sharp). `stop()` halts mid-reveal and resolves the pending `play()` promise; `reset()` repaints the teaser; `complete()` jumps to sharp. Under reduced motion (and on the server) the art is sharp immediately.
+
 ### `createConnectButton(ref, options?)`
 
 Wallet connect button micro-interactions: magnetic pull toward the pointer, a press scale, an animated check overlay for copy-address feedback, and a chain pulse ring. Pointer handling is global (presses that start inside still count if released outside), and everything cleans up on unmount.

package/dist/depixelate.d.ts

@@ -0,0 +1,57 @@
+import { type Accessor } from "solid-js";
+import { type Easing, type EasingName } from "./easing.js";
+/**
+ * Pixel-to-sharp image reveal, the classic NFT mint ceremony.
+ *
+ * An image renders into a canvas fully pixelated, then resolves to
+ * sharp in discrete chunky steps. Owns the canvas drawing: give it
+ * an image and a canvas, call `play()` when the art should reveal.
+ *
+ * ```tsx
+ * let img!: HTMLImageElement
+ * let cvs!: HTMLCanvasElement
+ * const reveal = createDepixelate(() => img, () => cvs, { duration: 1800 })
+ * <img ref={img} src={artUrl} style={{ display: "none" }} />
+ * <canvas ref={cvs} />
+ * <button onClick={() => reveal.play()}>Reveal</button>
+ * ```
+ *
+ * The pixelated teaser frame paints itself as soon as the image
+ * loads, so the pre-reveal state needs no manual setup. Call `play()`
+ * after the image has loaded; if the image or canvas is missing,
+ * `play()` resolves immediately as revealed.
+ *
+ * SSR-safe: `status()` starts `"revealed"` and `play()` resolves
+ * immediately. Reduced-motion safe: `play()` and `complete()` jump
+ * straight to sharp.
+ */
+export type DepixelateStatus = "idle" | "revealing" | "revealed";
+export interface DepixelateOptions {
+    /**
+     * Discrete pixelation steps from blocky to sharp. Default 10.
+     * More steps make a smoother, longer-feeling resolve.
+     */
+    levels?: number;
+    /** Full reveal duration in ms. Default 1600. */
+    duration?: number;
+    /** Easing for the reveal progress. Default "easeInOutCubic". */
+    easing?: Easing | EasingName;
+    /** Called when the reveal reaches sharp. */
+    onComplete?: () => void;
+}
+export interface DepixelateControls {
+    /** Current pixel block size in px. 1 (or 0) means fully sharp. */
+    pixelSize: Accessor<number>;
+    /** Reveal progress 0..1. */
+    progress: Accessor<number>;
+    status: Accessor<DepixelateStatus>;
+    /** Start (or restart) the reveal. Resolves when sharp or stopped. */
+    play: () => Promise<void>;
+    /** Jump straight to sharp. */
+    complete: () => void;
+    /** Back to the fully pixelated teaser frame. */
+    reset: () => void;
+    /** Stop the reveal where it is. */
+    stop: () => void;
+}
+export declare function createDepixelate(image: () => HTMLImageElement | null | undefined, canvas: () => HTMLCanvasElement | null | undefined, options?: DepixelateOptions): DepixelateControls;

package/dist/depixelate.js

@@ -0,0 +1,190 @@
+import { createEffect, createSignal, onCleanup, } from "solid-js";
+import { now, schedule } from "./engine.js";
+import { resolveEasing } from "./easing.js";
+import { prefersReducedMotion } from "./reduced-motion.js";
+export function createDepixelate(image, canvas, options = {}) {
+    const server = typeof window === "undefined";
+    const { levels = 10, duration = 1600, easing: easingOpt = "easeInOutCubic", onComplete, } = options;
+    const easing = resolveEasing(easingOpt);
+    const steps = Math.max(1, Math.round(levels));
+    const [pixelSize, setPixelSize] = createSignal(1);
+    const [progress, setProgress] = createSignal(0);
+    const [status, setStatus] = createSignal(server ? "revealed" : "idle");
+    let off = null;
+    const scratch = () => {
+        if (off || typeof document === "undefined")
+            return off;
+        off = document.createElement("canvas");
+        return off;
+    };
+    /** Largest block size: chunky enough to hide the art, small enough to hint at it. */
+    const startBlock = (img) => Math.max(8, Math.floor(Math.min(img.naturalWidth, img.naturalHeight) / 12));
+    const blockFor = (step, start) => {
+        if (step >= steps - 1)
+            return 1;
+        const t = 1 - step / Math.max(1, steps - 1);
+        return Math.max(2, Math.round(start * t * t));
+    };
+    const draw = (block) => {
+        const img = image();
+        const cvs = canvas();
+        if (!img || !cvs)
+            return;
+        if (!img.complete || img.naturalWidth === 0)
+            return;
+        const w = img.naturalWidth;
+        const h = img.naturalHeight;
+        if (cvs.width !== w || cvs.height !== h) {
+            cvs.width = w;
+            cvs.height = h;
+        }
+        const ctx = cvs.getContext("2d");
+        if (!ctx)
+            return;
+        if (block <= 1) {
+            ctx.imageSmoothingEnabled = true;
+            ctx.clearRect(0, 0, w, h);
+            ctx.drawImage(img, 0, 0, w, h);
+            return;
+        }
+        const buf = scratch();
+        if (!buf)
+            return;
+        const sw = Math.max(1, Math.round(w / block));
+        const sh = Math.max(1, Math.round(h / block));
+        buf.width = sw;
+        buf.height = sh;
+        const bctx = buf.getContext("2d");
+        if (!bctx)
+            return;
+        bctx.imageSmoothingEnabled = true;
+        bctx.drawImage(img, 0, 0, sw, sh);
+        ctx.imageSmoothingEnabled = false;
+        ctx.clearRect(0, 0, w, h);
+        ctx.drawImage(buf, 0, 0, sw, sh, 0, 0, w, h);
+    };
+    const paintTeaser = () => {
+        const img = image();
+        if (!img)
+            return;
+        const block = startBlock(img);
+        draw(block);
+        setPixelSize(block);
+        setProgress(0);
+    };
+    const paintSharp = () => {
+        draw(1);
+        setPixelSize(1);
+        setProgress(1);
+    };
+    // Paint the teaser frame as soon as the image is ready, so the
+    // pre-reveal state works with no manual setup. Under reduced motion
+    // the teaser is the sharp art, since the reveal itself is skipped.
+    if (!server) {
+        createEffect(() => {
+            const img = image();
+            if (!img || !img.complete || img.naturalWidth === 0)
+                return;
+            if (!canvas())
+                return;
+            if (status() !== "idle")
+                return;
+            if (prefersReducedMotion()) {
+                paintSharp();
+            }
+            else {
+                paintTeaser();
+            }
+        });
+    }
+    let cancelTask = null;
+    let finish = null;
+    // Creation-time owner: cancel any in-flight reveal on unmount so a
+    // disposed component never keeps drawing into a dead canvas.
+    if (!server) {
+        onCleanup(() => {
+            cancelTask?.();
+            cancelTask = null;
+            finish?.();
+            finish = null;
+        });
+    }
+    const settle = (final) => {
+        cancelTask?.();
+        cancelTask = null;
+        setStatus(final);
+        finish?.();
+        finish = null;
+    };
+    const play = () => {
+        cancelTask?.();
+        cancelTask = null;
+        finish?.();
+        finish = null;
+        if (server) {
+            setStatus("revealed");
+            return Promise.resolve();
+        }
+        const img = image();
+        const cvs = canvas();
+        if (!img || !cvs || !img.complete || img.naturalWidth === 0) {
+            setStatus("revealed");
+            return Promise.resolve();
+        }
+        if (prefersReducedMotion() || duration <= 0) {
+            paintSharp();
+            setStatus("revealed");
+            onComplete?.();
+            return Promise.resolve();
+        }
+        const start = startBlock(img);
+        paintTeaser();
+        setStatus("revealing");
+        const t0 = now();
+        let resolvePromise;
+        const done = new Promise((resolve) => {
+            resolvePromise = resolve;
+        });
+        finish = resolvePromise;
+        cancelTask = schedule((t) => {
+            const p = Math.min(1, (t - t0) / duration);
+            const eased = easing(p);
+            const step = Math.min(steps - 1, Math.floor(eased * steps));
+            const block = blockFor(step, start);
+            draw(block);
+            setPixelSize(block);
+            setProgress(eased);
+            if (p >= 1) {
+                paintSharp();
+                settle("revealed");
+                onComplete?.();
+                return false;
+            }
+            return true;
+        });
+        return done;
+    };
+    const stop = () => {
+        if (status() === "revealing") {
+            settle("idle");
+        }
+    };
+    const complete = () => {
+        cancelTask?.();
+        cancelTask = null;
+        finish?.();
+        finish = null;
+        paintSharp();
+        setStatus("revealed");
+        onComplete?.();
+    };
+    const reset = () => {
+        cancelTask?.();
+        cancelTask = null;
+        finish?.();
+        finish = null;
+        paintTeaser();
+        setStatus("idle");
+    };
+    return { pixelSize, progress, status, play, complete, reset, stop };
+}

package/dist/index.d.ts

@@ -18,8 +18,9 @@ export { createHorizontalScroll, type HorizontalScrollOptions, type HorizontalSc
 export { createScrub, type ScrubKeyframe, type ScrubOptions } from "./scrub.js";
 export { createScrollColor, type ScrollColorStop, type ScrollColorOptions, type ScrollColorFormat, createScrollTracking, type ScrollTrackingOptions, createScrollLine, type ScrollLineOptions, type ScrollLineStyle, type ScrollLineAxis, type ScrollLineOrigin, } from "./scrollfx.js";
 export { createVelocity, type VelocityOptions } from "./velocity.js";
-export { createMagnetic, type MagneticOptions, type MagneticResult, createTilt, type TiltOptions, type TiltResult, } from "./pointer.js";
+export { createMagnetic, type MagneticOptions, type MagneticResult, createTilt, type TiltOptions, type TiltResult, createTiltCard, type TiltCardOptions, type TiltCardResult, } from "./pointer.js";
 export { createTrail, type TrailOptions } from "./trail.js";
+export { createDepixelate, type DepixelateOptions, type DepixelateStatus, type DepixelateControls, } from "./depixelate.js";
 export { createTimeline, type TimelineStep, type TimelineStatus, type TimelineControls, } from "./timeline.js";
 export { animateFlip, type FlipOptions, createSharedLayout, type SharedLayoutOptions, type SharedLayoutResult, } from "./flip.js";
 export { createToast, type Toast, type ToastControls, type ToastKind, type ToastOptions, type ToastQueueOptions, type ToastState, } from "./toast.js";

package/dist/index.js

@@ -18,8 +18,9 @@ export { createHorizontalScroll, } from "./horizontal.js";
 export { createScrub } from "./scrub.js";
 export { createScrollColor, createScrollTracking, createScrollLine, } from "./scrollfx.js";
 export { createVelocity } from "./velocity.js";
-export { createMagnetic, createTilt, } from "./pointer.js";
+export { createMagnetic, createTilt, createTiltCard, } from "./pointer.js";
 export { createTrail } from "./trail.js";
+export { createDepixelate, } from "./depixelate.js";
 export { createTimeline, } from "./timeline.js";
 export { animateFlip, createSharedLayout, } from "./flip.js";
 export { createToast, } from "./toast.js";

package/dist/pointer.d.ts

@@ -74,3 +74,64 @@ export declare function createMagnetic(ref: () => Element | null | undefined, op
  * ```
  */
 export declare function createTilt(ref: () => Element | null | undefined, options?: TiltOptions): TiltResult;
+export interface TiltCardOptions {
+    /** Max tilt angle in degrees. Default 12. */
+    maxAngle?: number;
+    /** Scale while hovering. Default 1.04. */
+    scale?: number;
+    /** Perspective distance in px for the transform. Default 900. */
+    perspective?: number;
+    /** Spring options for tilt, shine, and scale. */
+    spring?: SpringOptions;
+}
+export interface TiltCardResult {
+    /** Spring-smoothed rotateX in degrees. */
+    rotateX: Accessor<number>;
+    /** Spring-smoothed rotateY in degrees. */
+    rotateY: Accessor<number>;
+    /** Pointer position 0..1 across the card, for glare placement. */
+    glareX: Accessor<number>;
+    /** Pointer position 0..1 down the card, for glare placement. */
+    glareY: Accessor<number>;
+    /** Rainbow angle in degrees, follows the pointer. Spring-smoothed. */
+    holoAngle: Accessor<number>;
+    /** 0..1 shine intensity, spring-smoothed, 0 when not hovering. */
+    shine: Accessor<number>;
+    /** Spring-smoothed scale. */
+    scale: Accessor<number>;
+    /** Whether the pointer is over the card. */
+    hovering: Accessor<boolean>;
+    /** Ready-made transform: perspective, rotateX/rotateY, scale. */
+    transform: Accessor<string>;
+}
+/**
+ * Holographic trading-card tilt: 3D lean plus the signals a holo
+ * foil needs.
+ *
+ * Beyond `createTilt`'s spring-smoothed rotation, this tracks the
+ * pointer as `glareX`/`glareY` (0..1, for a radial glare overlay),
+ * `holoAngle` (a rainbow angle that sweeps with the pointer, for a
+ * gradient foil overlay), `shine` (0..1 overlay intensity that fades
+ * in on hover and out on leave), and a hover `scale` pop. Bind them
+ * to two absolutely-positioned overlays over your card art:
+ *
+ * ```tsx
+ * const card = createTiltCard(() => el, { maxAngle: 14 });
+ * <div style={{ transform: card.transform() }}>
+ *   {art}
+ *   <div style={{
+ *     background: `radial-gradient(circle at ${card.glareX() * 100}% ${card.glareY() * 100}%, rgba(255,255,255,0.6), transparent 60%)`,
+ *     opacity: card.shine(),
+ *   }} />
+ *   <div style={{
+ *     background: `linear-gradient(${card.holoAngle()}deg, #ff0080, #ff8000, #ffff00, #00ff80, #0080ff, #8000ff)`,
+ *     "mix-blend-mode": "color-dodge",
+ *     opacity: card.shine() * 0.55,
+ *   }} />
+ * </div>
+ * ```
+ *
+ * SSR-safe and reduced-motion safe: static constants (no tilt, no
+ * shine). Touch drags tilt while touching, release settles back.
+ */
+export declare function createTiltCard(ref: () => Element | null | undefined, options?: TiltCardOptions): TiltCardResult;

package/dist/pointer.js

@@ -121,3 +121,121 @@ export function createTilt(ref, options = {}) {
     onCleanup(() => window.removeEventListener("pointermove", onMove));
     return { rotateX, rotateY };
 }
+/**
+ * Holographic trading-card tilt: 3D lean plus the signals a holo
+ * foil needs.
+ *
+ * Beyond `createTilt`'s spring-smoothed rotation, this tracks the
+ * pointer as `glareX`/`glareY` (0..1, for a radial glare overlay),
+ * `holoAngle` (a rainbow angle that sweeps with the pointer, for a
+ * gradient foil overlay), `shine` (0..1 overlay intensity that fades
+ * in on hover and out on leave), and a hover `scale` pop. Bind them
+ * to two absolutely-positioned overlays over your card art:
+ *
+ * ```tsx
+ * const card = createTiltCard(() => el, { maxAngle: 14 });
+ * <div style={{ transform: card.transform() }}>
+ *   {art}
+ *   <div style={{
+ *     background: `radial-gradient(circle at ${card.glareX() * 100}% ${card.glareY() * 100}%, rgba(255,255,255,0.6), transparent 60%)`,
+ *     opacity: card.shine(),
+ *   }} />
+ *   <div style={{
+ *     background: `linear-gradient(${card.holoAngle()}deg, #ff0080, #ff8000, #ffff00, #00ff80, #0080ff, #8000ff)`,
+ *     "mix-blend-mode": "color-dodge",
+ *     opacity: card.shine() * 0.55,
+ *   }} />
+ * </div>
+ * ```
+ *
+ * SSR-safe and reduced-motion safe: static constants (no tilt, no
+ * shine). Touch drags tilt while touching, release settles back.
+ */
+export function createTiltCard(ref, options = {}) {
+    const half = () => 0.5;
+    const one = () => 1;
+    const no = () => false;
+    if (typeof window === "undefined" || prefersReducedMotion()) {
+        const p = options.perspective ?? 900;
+        return {
+            rotateX: zero,
+            rotateY: zero,
+            glareX: half,
+            glareY: half,
+            holoAngle: zero,
+            shine: zero,
+            scale: one,
+            hovering: no,
+            transform: () => `perspective(${p}px) rotateX(0deg) rotateY(0deg) scale(1)`,
+        };
+    }
+    const { maxAngle = 12, scale: hoverScale = 1.04, perspective = 900, spring, } = options;
+    const [targetRX, setTargetRX] = createSignal(0);
+    const [targetRY, setTargetRY] = createSignal(0);
+    const [targetHolo, setTargetHolo] = createSignal(0);
+    const [targetShine, setTargetShine] = createSignal(0);
+    const [targetScale, setTargetScale] = createSignal(1);
+    const [glareX, setGlareX] = createSignal(0.5);
+    const [glareY, setGlareY] = createSignal(0.5);
+    const [hovering, setHovering] = createSignal(false);
+    const rotateX = createSpring(targetRX, spring);
+    const rotateY = createSpring(targetRY, spring);
+    const holoAngle = createSpring(targetHolo, spring);
+    const shine = createSpring(targetShine, spring);
+    const scale = createSpring(targetScale, spring);
+    const onMove = (event) => {
+        const el = ref();
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        if (rect.width === 0 || rect.height === 0)
+            return;
+        if (event.clientX < rect.left ||
+            event.clientX > rect.right ||
+            event.clientY < rect.top ||
+            event.clientY > rect.bottom) {
+            return; // outside: pointerleave resets the card
+        }
+        const px = (event.clientX - rect.left) / rect.width;
+        const py = (event.clientY - rect.top) / rect.height;
+        const cx = px - 0.5;
+        const cy = py - 0.5;
+        setTargetRY(cx * 2 * maxAngle);
+        setTargetRX(-cy * 2 * maxAngle);
+        setGlareX(px);
+        setGlareY(py);
+        setTargetHolo((cx + cy) * 180);
+        setTargetShine(1);
+        setTargetScale(hoverScale);
+        setHovering(true);
+    };
+    const onLeave = () => {
+        setTargetRX(0);
+        setTargetRY(0);
+        setTargetHolo(0);
+        setTargetShine(0);
+        setTargetScale(1);
+        setHovering(false);
+    };
+    window.addEventListener("pointermove", onMove, { passive: true });
+    // Late-bound refs (Solid assigns `ref` after mount) still get the reset.
+    createEffect(() => {
+        const el = ref();
+        if (!el)
+            return;
+        el.addEventListener("pointerleave", onLeave);
+        onCleanup(() => el.removeEventListener("pointerleave", onLeave));
+    });
+    onCleanup(() => window.removeEventListener("pointermove", onMove));
+    return {
+        rotateX,
+        rotateY,
+        glareX,
+        glareY,
+        holoAngle,
+        shine,
+        scale,
+        hovering,
+        transform: () => `perspective(${perspective}px) rotateX(${rotateX()}deg) rotateY(${rotateY()}deg) scale(${scale()})`,
+    };
+}

package/package.json

@@ -43,5 +43,5 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "0.17.0"
+  "version": "0.19.0"
 }