solid-drift 0.14.0 → 0.15.0

package/README.md

@@ -1164,6 +1164,36 @@ const machine = createSlotMachine({
 
 Options: `symbols` (required, at least 2), `reels` (default `3`), `duration` (ms for the first reel, default `1400`), `stagger` (extra ms per subsequent reel, default `500`), `minSpins` (full rotations before stopping, default `3`), `easing` (default `"easeOutQuart"`), `onTick(reel, symbol)`, `onDone(result)`. Returns `{ values, result, status, spin, stop, reset }`: `values()` is the visible symbol per reel, `result()` the final symbols of the last spin, `status()` is `"idle"`, `"spinning"`, or `"done"`. `stop()` halts at the current symbols; `reset()` returns to idle. SSR-safe and reduced-motion safe: `spin()` jumps straight to the result.
 
+### `createRedPacket(options?)`
+
+Crypto red packet ceremony: tap to open, coins burst out with physics, the amount counts up. The primitive owns the ceremony state machine (`"sealed"`, `"opening"`, `"bursting"`, `"revealed"`) and the coin particle physics; you render the envelope and the coins. Each coin carries position, rotation, size, opacity, and its share of the total, split randomly like a real red packet grab.
+
+```tsx
+import { createRedPacket } from "solid-drift"
+
+const packet = createRedPacket({ amount: 88, coins: 14 })
+
+<button onClick={() => packet.open()}>
+  {packet.status() === "sealed"
+    ? "🧧 Tap to open"
+    : `$${packet.revealed().toFixed(2)}`}
+</button>
+<For each={packet.coins()}>
+  {(coin) => (
+    <div
+      class="coin"
+      style={{
+        transform: `translate(${coin.x}px, ${coin.y}px) rotate(${coin.rotation}deg)`,
+        opacity: coin.opacity,
+        width: `${coin.size}px`,
+      }}
+    />
+  )}
+</For>
+```
+
+Options: `coins` (default `12`), `amount` (total, default `88`), `spread` (burst size in px, default `160`), `gravity` (px/s^2, default `900`), `openDuration` (ms, default `500`), `burstDuration` (ms, default `1600`), `revealDuration` (ms, default `800`), `onOpen`, `onReveal(amount)`. Returns `{ status, coins, revealed, open, reset }`. SSR-safe and reduced-motion safe: `open()` jumps straight to revealed with no burst.
+
 ### Easings
 
 Named easings: `linear`, `easeInQuad`, `easeOutQuad`, `easeInOutQuad`, `easeInCubic`, `easeOutCubic`, `easeInOutCubic`, `easeInQuart`, `easeOutQuart`, `easeInOutQuart`, `easeOutExpo`, `easeOutBack`, plus the cartoon set: `easeInBack` (anticipation dip before movement), `easeInOutBack` (wind-up, overshoot, settle), `easeOutElastic` (decaying rubber-band oscillation), `easeOutBounce` (shrinking cartoon bounces). Also `cubicBezier(x1, y1, x2, y2)` for CSS-style curves. Pass a name or a custom `(t) => number` function anywhere an easing is accepted.

package/dist/fun.d.ts

@@ -62,3 +62,90 @@ export interface SlotMachineControls<T = string> {
  * ```
  */
 export declare function createSlotMachine<T = string>(options: SlotMachineOptions<T>): SlotMachineControls<T>;
+export type RedPacketStatus = "sealed" | "opening" | "bursting" | "revealed";
+export interface RedPacketCoin {
+    id: number;
+    /** Pixels right from the packet center. */
+    x: number;
+    /** Pixels down from the packet center. */
+    y: number;
+    vx: number;
+    vy: number;
+    /** Degrees. */
+    rotation: number;
+    /** Degrees per second. */
+    vr: number;
+    /** Diameter in pixels. */
+    size: number;
+    /** 0..1, fades at the end of life. */
+    opacity: number;
+    /** This coin's share of the total amount. */
+    amount: number;
+}
+export interface RedPacketOptions {
+    /** Coins in the burst. Default 12. */
+    coins?: number;
+    /** Total amount, split randomly across coins like a real red packet. Default 88. */
+    amount?: number;
+    /** Burst size in pixels, scales launch speed. Default 160. */
+    spread?: number;
+    /** Gravity in px/s^2. Default 900. */
+    gravity?: number;
+    /** Envelope opening ceremony in ms. Default 500. */
+    openDuration?: number;
+    /** Coin burst in ms before the reveal. Default 1600. */
+    burstDuration?: number;
+    /** Amount count-up in ms once revealed. Default 800. */
+    revealDuration?: number;
+    /** Called when the packet is tapped open. */
+    onOpen?: () => void;
+    /** Called with the total amount when the reveal lands. */
+    onReveal?: (amount: number) => void;
+}
+export interface RedPacketControls {
+    status: Accessor<RedPacketStatus>;
+    /** Live coin particles, centered on the packet. Render them absolutely. */
+    coins: Accessor<RedPacketCoin[]>;
+    /** Amount counted up so far. Reaches the total when revealed. */
+    revealed: Accessor<number>;
+    /** Tap the packet: sealed -> opening -> bursting -> revealed. */
+    open: () => void;
+    /** Back to sealed. */
+    reset: () => void;
+}
+/**
+ * Crypto red packet ceremony: tap to open, coins burst out with physics,
+ * the amount counts up. The hongbao moment, as a signal-native primitive.
+ *
+ * The primitive owns the ceremony state machine and the coin particle
+ * physics; you render the envelope and the coins however fits your design.
+ * Each coin carries position, rotation, size, opacity, and its share of
+ * the total amount, split randomly like a real red packet grab.
+ *
+ * SSR-safe: `open()` jumps straight to revealed on the server. Under
+ * reduced motion the packet opens instantly with no burst: the amount
+ * just appears.
+ *
+ * ```tsx
+ * import { createRedPacket } from "solid-drift"
+ *
+ * const packet = createRedPacket({ amount: 88, coins: 14 })
+ *
+ * <button onClick={() => packet.open()}>
+ *   {packet.status() === "sealed" ? "🧧 Tap to open" : `$${packet.revealed().toFixed(2)}`}
+ * </button>
+ * <For each={packet.coins()}>
+ *   {(coin) => (
+ *     <div
+ *       class="coin"
+ *       style={{
+ *         transform: `translate(${coin.x}px, ${coin.y}px) rotate(${coin.rotation}deg)`,
+ *         opacity: coin.opacity,
+ *         width: `${coin.size}px`,
+ *       }}
+ *     />
+ *   )}
+ * </For>
+ * ```
+ */
+export declare function createRedPacket(options?: RedPacketOptions): RedPacketControls;

package/dist/fun.js

@@ -1,6 +1,7 @@
 import { createSignal, onCleanup, } from "solid-js";
 import { now, schedule } from "./engine.js";
 import { resolveEasing } from "./easing.js";
+import { createTween } from "./tween.js";
 import { prefersReducedMotion } from "./reduced-motion.js";
 /**
  * Gacha slot machine: reels launch fast, decelerate with momentum, and
@@ -131,3 +132,145 @@ export function createSlotMachine(options) {
     onCleanup(() => cancel?.());
     return { values, result, status, spin, stop, reset };
 }
+/**
+ * Crypto red packet ceremony: tap to open, coins burst out with physics,
+ * the amount counts up. The hongbao moment, as a signal-native primitive.
+ *
+ * The primitive owns the ceremony state machine and the coin particle
+ * physics; you render the envelope and the coins however fits your design.
+ * Each coin carries position, rotation, size, opacity, and its share of
+ * the total amount, split randomly like a real red packet grab.
+ *
+ * SSR-safe: `open()` jumps straight to revealed on the server. Under
+ * reduced motion the packet opens instantly with no burst: the amount
+ * just appears.
+ *
+ * ```tsx
+ * import { createRedPacket } from "solid-drift"
+ *
+ * const packet = createRedPacket({ amount: 88, coins: 14 })
+ *
+ * <button onClick={() => packet.open()}>
+ *   {packet.status() === "sealed" ? "🧧 Tap to open" : `$${packet.revealed().toFixed(2)}`}
+ * </button>
+ * <For each={packet.coins()}>
+ *   {(coin) => (
+ *     <div
+ *       class="coin"
+ *       style={{
+ *         transform: `translate(${coin.x}px, ${coin.y}px) rotate(${coin.rotation}deg)`,
+ *         opacity: coin.opacity,
+ *         width: `${coin.size}px`,
+ *       }}
+ *     />
+ *   )}
+ * </For>
+ * ```
+ */
+export function createRedPacket(options = {}) {
+    const { coins: coinCount = 12, amount = 88, spread = 160, gravity = 900, openDuration = 500, burstDuration = 1600, revealDuration = 800, onOpen, onReveal, } = options;
+    const [status, setStatus] = createSignal("sealed");
+    const [coinList, setCoinList] = createSignal([]);
+    const [target, setTarget] = createSignal(0);
+    const tweened = createTween(target, {
+        duration: revealDuration,
+        easing: "easeOutExpo",
+    });
+    // On the server the tween effect never runs, so read the target directly.
+    const revealed = () => typeof window === "undefined" ? target() : tweened();
+    let cancel = null;
+    let burstAt = 0;
+    let lastT = 0;
+    let nextCoinId = 1;
+    const spawnCoins = () => {
+        const weights = Array.from({ length: coinCount }, () => 0.5 + Math.random());
+        const totalWeight = weights.reduce((a, b) => a + b, 0);
+        const speedScale = spread / 160;
+        return weights.map((w, i) => {
+            const angle = ((Math.random() * 120 - 60) * Math.PI) / 180;
+            const speed = (200 + Math.random() * 220) * speedScale;
+            return {
+                id: nextCoinId++,
+                x: 0,
+                y: 0,
+                vx: Math.sin(angle) * speed,
+                vy: -Math.cos(angle) * speed,
+                rotation: Math.random() * 360,
+                vr: (Math.random() - 0.5) * 720,
+                size: 24 + Math.random() * 16,
+                opacity: 1,
+                amount: (amount * w) / totalWeight,
+            };
+        });
+    };
+    const stepCoins = (t) => {
+        // Every coin is born at burstAt, so they share one age and one fade.
+        const dt = Math.min(Math.max((t - lastT) / 1000, 0), 0.05);
+        lastT = t;
+        const age = t - burstAt;
+        if (age >= burstDuration) {
+            setCoinList([]);
+            return;
+        }
+        const fadeStart = burstDuration * 0.7;
+        const opacity = age < fadeStart
+            ? 1
+            : Math.max(1 - (age - fadeStart) / (burstDuration - fadeStart), 0);
+        setCoinList((prev) => prev.map((c) => {
+            const vy = c.vy + gravity * dt;
+            return {
+                ...c,
+                x: c.x + c.vx * dt,
+                y: c.y + vy * dt,
+                vy,
+                rotation: c.rotation + c.vr * dt,
+                opacity,
+            };
+        }));
+    };
+    const open = () => {
+        if (status() !== "sealed")
+            return;
+        onOpen?.();
+        if (typeof window === "undefined" || prefersReducedMotion()) {
+            // Accessibility / SSR: no ceremony, the amount just appears.
+            setTarget(amount);
+            setStatus("revealed");
+            onReveal?.(amount);
+            return;
+        }
+        setStatus("opening");
+        const t0 = now();
+        cancel?.();
+        cancel = schedule((t) => {
+            const s = status();
+            if (s === "opening" && t - t0 >= openDuration) {
+                burstAt = t;
+                lastT = t;
+                setCoinList(spawnCoins());
+                setStatus("bursting");
+            }
+            else if (s === "bursting") {
+                stepCoins(t);
+                if (t - burstAt >= burstDuration) {
+                    setCoinList([]);
+                    setTarget(amount);
+                    setStatus("revealed");
+                    onReveal?.(amount);
+                    cancel = null;
+                    return false;
+                }
+            }
+            return true;
+        });
+    };
+    const reset = () => {
+        cancel?.();
+        cancel = null;
+        setCoinList([]);
+        setTarget(0);
+        setStatus("sealed");
+    };
+    onCleanup(() => cancel?.());
+    return { status, coins: coinList, revealed, open, reset };
+}

package/dist/index.d.ts

@@ -12,7 +12,7 @@ export { createScrollProgress, type ScrollTarget } from "./scroll.js";
 export { createInView, type InViewOptions } from "./inview.js";
 export { usePrefersReducedMotion, prefersReducedMotion, } from "./reduced-motion.js";
 export { isLowPowerMode, useLowPowerMode, type LowPowerOptions, } from "./power.js";
-export { createSlotMachine, type SlotMachineControls, type SlotMachineOptions, type SlotMachineStatus, } from "./fun.js";
+export { createSlotMachine, type SlotMachineControls, type SlotMachineOptions, type SlotMachineStatus, createRedPacket, type RedPacketCoin, type RedPacketControls, type RedPacketOptions, type RedPacketStatus, } from "./fun.js";
 export { createStagger } from "./stagger.js";
 export { createHorizontalScroll, type HorizontalScrollOptions, type HorizontalScrollResult, } from "./horizontal.js";
 export { createScrub, type ScrubKeyframe, type ScrubOptions } from "./scrub.js";

package/dist/index.js

@@ -12,7 +12,7 @@ export { createScrollProgress } from "./scroll.js";
 export { createInView } from "./inview.js";
 export { usePrefersReducedMotion, prefersReducedMotion, } from "./reduced-motion.js";
 export { isLowPowerMode, useLowPowerMode, } from "./power.js";
-export { createSlotMachine, } from "./fun.js";
+export { createSlotMachine, createRedPacket, } from "./fun.js";
 export { createStagger } from "./stagger.js";
 export { createHorizontalScroll, } from "./horizontal.js";
 export { createScrub } from "./scrub.js";

package/package.json

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