solid-drift 0.17.0 → 0.18.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.

package/dist/index.d.ts

@@ -18,7 +18,7 @@ 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 { createTimeline, type TimelineStep, type TimelineStatus, type TimelineControls, } from "./timeline.js";
 export { animateFlip, type FlipOptions, createSharedLayout, type SharedLayoutOptions, type SharedLayoutResult, } from "./flip.js";

package/dist/index.js

@@ -18,7 +18,7 @@ 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 { createTimeline, } from "./timeline.js";
 export { animateFlip, createSharedLayout, } from "./flip.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.18.0"
 }