@yewdiel21/motion-kit 0.9.0 → 0.10.0

package/src/recipes/sticker/create-sticker.ts

@@ -0,0 +1,490 @@
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+
+/*
+ * Sticker (DOVV Studio hero and contact): a die-cut holographic sticker.
+ * - Holo: the foil and the shine follow the mouse over the sticker (lerp .08);
+ *   without a mouse they drift on their own (sin t/1600, cos t/2100).
+ * - Peel: drag from any point and the nearest edge lifts. The stuck part is the
+ *   art clipped to one side of the fold line; the flap is a copy reflected across
+ *   it. Released early, it sticks back (380 ms, ease-out cubic). Past `detachAt`
+ *   of the area (or a long drag) it comes off: it follows the pointer (lerp .22),
+ *   grows 8 % and leans with the speed (±16°). Let go, it falls with gravity
+ *   (1600 px/s²) and spin, and comes back to its place after `returnDelay`.
+ * Kit additions over the reference: the press freezes the current (hover) pose so
+ * nothing jumps, a press lifts the edge a little, pulling away also peels (the
+ * outward part of the drag folds the edge back), the corner cannot stretch past
+ * the opposite edge, and the back is a shaded paper face with a soft shadow.
+ * Entrance (pop .4 → 1, .7 s) and hover (scale 1.08, counter-rotation) are CSS.
+ */
+
+export interface StickerOptions {
+  /** Drag to peel the sticker off. */
+  peel?: boolean;
+  /** Pointer-driven foil and shine. */
+  holo?: boolean;
+  /** Share of the area lifted before the sticker comes off (0–1). */
+  detachAt?: number;
+  /** Drag length (px, unscaled) that takes it off whatever the area; default max(80, half the longest side). */
+  detachDistance?: number;
+  /** Time hidden after falling before it comes back, ms. */
+  returnDelay?: number;
+  onPeel?: () => void;
+  onReturn?: () => void;
+}
+
+export interface StickerInstance extends Instance {
+  /** idle | peeling | carried | falling | away */
+  readonly state: StickerState;
+}
+
+export type StickerState = 'idle' | 'peeling' | 'carried' | 'falling' | 'away';
+
+type Point = { x: number; y: number };
+
+const easeOutCubic = (t: number) => 1 - (1 - t) ** 3;
+const clamp = (v: number, min: number, max: number) => Math.min(max, Math.max(min, v));
+
+/** Part of a convex polygon on the side where (p − m)·n ≥ 0 (one Sutherland–Hodgman pass). */
+export function clipHalfPlane(poly: Point[], m: Point, n: Point): Point[] {
+  const side = (p: Point) => (p.x - m.x) * n.x + (p.y - m.y) * n.y;
+  const out: Point[] = [];
+  for (let i = 0; i < poly.length; i++) {
+    const a = poly[i];
+    const b = poly[(i + 1) % poly.length];
+    const sa = side(a);
+    const sb = side(b);
+    if (sa >= 0) out.push(a);
+    if ((sa >= 0) !== (sb >= 0)) {
+      const t = sa / (sa - sb);
+      out.push({ x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t });
+    }
+  }
+  return out;
+}
+
+const area = (poly: Point[]) => {
+  let sum = 0;
+  for (let i = 0; i < poly.length; i++) {
+    const a = poly[i];
+    const b = poly[(i + 1) % poly.length];
+    sum += a.x * b.y - b.x * a.y;
+  }
+  return Math.abs(sum) / 2;
+};
+
+const polygon = (poly: Point[]) => (poly.length < 3 ? 'polygon(0 0, 0 0, 0 0)' : `polygon(${poly.map((p) => `${p.x.toFixed(2)}px ${p.y.toFixed(2)}px`).join(', ')})`);
+
+export function createSticker(root: HTMLElement | null, options: StickerOptions = {}): StickerInstance {
+  if (!root) return inert({ state: 'idle' as StickerState });
+  const scope = createScope();
+  const still = reduced();
+  const detachAt = clamp(Number.isFinite(options.detachAt) ? options.detachAt! : 0.3, 0.05, 1);
+  const returnDelay = Math.max(0, Number.isFinite(options.returnDelay) ? options.returnDelay! : 2500);
+  let state: StickerState = 'idle';
+  const frames = new Set<number>();
+  const raf = (fn: FrameRequestCallback) => {
+    const id = requestAnimationFrame((time) => { frames.delete(id); fn(time); });
+    frames.add(id);
+  };
+  scope.add(() => { frames.forEach(cancelAnimationFrame); frames.clear(); });
+
+  scope.attr(root, 'data-mk-ready', '');
+  scope.attr(root, 'style', root.getAttribute('style'));
+  if (options.holo !== false) scope.attr(root, 'data-mk-holo', '');
+
+  // root > peel > top > (original children); the back is a reflected copy made on demand.
+  const original = [...root.childNodes];
+  const peelBox = document.createElement('div');
+  peelBox.className = 'mk-sticker__peel';
+  const top = document.createElement('div');
+  top.className = 'mk-sticker__top';
+  top.append(...original);
+  peelBox.append(top);
+  root.append(peelBox);
+  scope.add(() => root.replaceChildren(...original));
+  let back: HTMLElement | null = null;
+
+  /* ── Holo ───────────────────────────────────────────── */
+  if (options.holo !== false) {
+    const holo = { x: 0.5, y: 0.5 };
+    let mouse: Point | null = null;
+    let visible = typeof IntersectionObserver !== 'function';
+    const hoverless = typeof matchMedia === 'function' && matchMedia('(hover: none)').matches;
+    root.style.setProperty('--mk-sticker-x', '0.5');
+    root.style.setProperty('--mk-sticker-y', '0.5');
+    if (!still) {
+      scope.on(window, 'pointermove', (event) => {
+        const e = event as PointerEvent;
+        if (e.pointerType === 'mouse') mouse = { x: e.clientX, y: e.clientY };
+      }, { passive: true });
+      scope.on(document, 'pointerleave', () => { mouse = null; });
+      if (typeof IntersectionObserver === 'function') {
+        scope.observe(new IntersectionObserver(([entry]) => {
+          const was = visible;
+          visible = entry.isIntersecting;
+          if (visible && !was) raf(loop);
+        })).observe(root);
+      }
+      const loop = (time: number) => {
+        if (scope.disposed || !visible) return;
+        const box = top.getBoundingClientRect();
+        let x: number;
+        let y: number;
+        if (mouse && !hoverless && box.width && box.height) {
+          x = clamp((mouse.x - box.left) / box.width, -0.5, 1.5);
+          y = clamp((mouse.y - box.top) / box.height, -0.5, 1.5);
+        } else {
+          x = 0.5 + Math.sin(time / 1600 + box.left / 200) * 0.6;
+          y = 0.5 + Math.cos(time / 2100 + box.top / 200) * 0.6;
+        }
+        holo.x += (x - holo.x) * 0.08;
+        holo.y += (y - holo.y) * 0.08;
+        root.style.setProperty('--mk-sticker-x', holo.x.toFixed(4));
+        root.style.setProperty('--mk-sticker-y', holo.y.toFixed(4));
+        raf(loop);
+      };
+      if (visible) raf(loop);
+    }
+  }
+
+  if (options.peel === false) return { get state() { return state; }, destroy: () => scope.dispose() };
+
+  /* ── Peel geometry (local, unrotated coordinates of the peel box) ───── */
+  let w = 0;
+  let h = 0;
+  let corner: Point = { x: 0, y: 0 };
+  let current: Point = { x: 0, y: 0 };
+  let grabbed: Point = { x: 0, y: 0 };
+  let lifted = 0;
+
+  let anchor: Point = { x: 0, y: 0 };
+  let reach = 0;
+  let outward: Point = { x: 1, y: 0 };
+  let detachDistance = 80;
+
+  // The pose at the press (hover tilt and scale included) is frozen while peeling,
+  // so nothing jumps under the pointer; local coordinates use that pose.
+  let pose = { angle: 0, scale: 1, prop: 1 };
+  let frozen: { transform: string; transition: string } | null = null;
+  const readPose = () => {
+    const style = getComputedStyle(root);
+    const prop = parseFloat(style.scale) || 1;
+    const matrix = /^matrix\(([^)]+)\)$/.exec(style.transform || '');
+    if (matrix) {
+      const [a, b] = matrix[1].split(',').map(Number);
+      return { angle: Math.atan2(b, a), scale: Math.hypot(a, b) || 1, prop, transform: style.transform };
+    }
+    const angle = (parseFloat(style.getPropertyValue('--mk-sticker-rot')) || 0) * (Math.PI / 180);
+    return { angle, scale: 1, prop, transform: `rotate(${angle}rad)` };
+  };
+  const freeze = () => {
+    const now = readPose();
+    pose = now;
+    if (!frozen) frozen = { transform: root.style.transform, transition: root.style.transition };
+    root.style.transition = 'none';
+    root.style.transform = now.transform;
+  };
+  const unfreeze = () => {
+    if (!frozen) return;
+    root.style.transform = frozen.transform;
+    root.style.transition = frozen.transition;
+    frozen = null;
+  };
+  scope.add(unfreeze);
+  const toLocal = (clientX: number, clientY: number): Point => {
+    const box = peelBox.getBoundingClientRect();
+    const a = -pose.angle;
+    const s = pose.scale * pose.prop;
+    const dx = (clientX - (box.left + box.width / 2)) / s;
+    const dy = (clientY - (box.top + box.height / 2)) / s;
+    return { x: dx * Math.cos(a) - dy * Math.sin(a) + w / 2, y: dx * Math.sin(a) + dy * Math.cos(a) + h / 2 };
+  };
+  /*
+   * Which corner lifts. The reference projects the press onto the outline, which on a
+   * long pill pressed near the middle picks a point on a long edge and folds the whole
+   * strip. The kit uses the box's real corners (a diagonal curl): near the border, the
+   * corner closest to the press; from the middle, it waits for the first few pixels of
+   * drag and lifts the corner opposite to that direction, so it travels with the hand.
+   */
+  const CORNERS = () => [{ x: 0, y: 0 }, { x: w, y: 0 }, { x: w, y: h }, { x: 0, y: h }];
+  const nearBorder = (p: Point) => Math.min(p.x, w - p.x, p.y, h - p.y) < Math.min(w, h) * 0.35;
+  const closestCorner = (p: Point) => CORNERS().reduce((a, b) => (Math.hypot(b.x - p.x, b.y - p.y) < Math.hypot(a.x - p.x, a.y - p.y) ? b : a));
+  const cornerAgainst = (d: Point) => CORNERS().reduce((a, b) => ((b.x - w / 2) * -d.x + (b.y - h / 2) * -d.y > (a.x - w / 2) * -d.x + (a.y - h / 2) * -d.y + 1e-6 ? b : a));
+  let choosing = false;
+  const useCorner = (c: Point) => {
+    choosing = false;
+    corner = c;
+    anchor = { x: w - c.x, y: h - c.y };
+    reach = Math.hypot(c.x - anchor.x, c.y - anchor.y);
+    const ox = c.x - w / 2;
+    const oy = c.y - h / 2;
+    outward = { x: ox / (Math.hypot(ox, oy) || 1), y: oy / (Math.hypot(ox, oy) || 1) };
+    current = { ...c };
+  };
+  const ensureBack = () => {
+    if (back) return back;
+    // The shadow sits on the outer layer: a filter on the clipped face would be clipped with it.
+    back = document.createElement('div');
+    back.className = 'mk-sticker__back';
+    back.setAttribute('aria-hidden', 'true');
+    const face = document.createElement('div');
+    face.className = 'mk-sticker__back-face';
+    const copy = top.cloneNode(true) as HTMLElement;
+    copy.querySelectorAll('[id]').forEach((el) => el.removeAttribute('id'));
+    face.append(...copy.childNodes);
+    back.append(face);
+    peelBox.append(back);
+    return back;
+  };
+  const flat = () => {
+    top.style.clipPath = '';
+    if (back) back.style.visibility = 'hidden';
+    root.removeAttribute('data-mk-peeling');
+    lifted = 0;
+    unfreeze();
+  };
+  scope.add(() => { top.style.clipPath = ''; back?.remove(); back = null; });
+
+  const fold = (p: Point) => {
+    current = p;
+    const dx = p.x - corner.x;
+    const dy = p.y - corner.y;
+    const length = Math.hypot(dx, dy);
+    if (length < 0.5) {
+      top.style.clipPath = '';
+      if (back) back.style.visibility = 'hidden';
+      lifted = 0;
+      return;
+    }
+    const n = { x: dx / length, y: dy / length };
+    const m = { x: (corner.x + p.x) / 2, y: (corner.y + p.y) / 2 };
+    const rect = [{ x: 0, y: 0 }, { x: w, y: 0 }, { x: w, y: h }, { x: 0, y: h }];
+    const stuck = clipHalfPlane(rect, m, n);
+    const flap = clipHalfPlane(rect, m, { x: -n.x, y: -n.y });
+    lifted = area(flap) / (w * h || 1);
+    top.style.clipPath = polygon(stuck);
+    const b = ensureBack();
+    // Reflection across the fold line: X' = (I − 2nnᵀ)X + 2(m·n)n.
+    const d = m.x * n.x + m.y * n.y;
+    b.style.transform = `matrix(${1 - 2 * n.x * n.x}, ${-2 * n.x * n.y}, ${-2 * n.x * n.y}, ${1 - 2 * n.y * n.y}, ${2 * d * n.x}, ${2 * d * n.y})`;
+    (b.firstElementChild as HTMLElement).style.clipPath = polygon(flap);
+    // Shading runs from the fold (bright) to the lifted tip, in the face's own coordinates.
+    b.style.setProperty('--mk-sticker-fold', `${(Math.atan2(-n.x, n.y) * 180) / Math.PI}deg`);
+    b.style.visibility = flap.length >= 3 ? 'visible' : 'hidden';
+  };
+  const NUDGE = 8;
+  /**
+   * Peel point for a pointer at `at` (local). The fold deepens with the distance
+   * dragged in any direction (pulling away peels too, instead of flipping the whole
+   * sticker); the sideways part only tilts the fold (at most ~35°), so grabbing the
+   * end of a long pill never lifts the whole strip. The paper does not stretch.
+   */
+  const pull = (at: Point): Point => {
+    const dx = at.x - grabbed.x;
+    const dy = at.y - grabbed.y;
+    const depth = Math.hypot(dx, dy);
+    const perp = { x: -outward.y, y: outward.x };
+    const side = clamp(dx * perp.x + dy * perp.y, -depth * 0.7, depth * 0.7) * 0.6;
+    let p = {
+      x: corner.x - outward.x * (NUDGE + depth) + perp.x * side,
+      y: corner.y - outward.y * (NUDGE + depth) + perp.y * side,
+    };
+    const ax = p.x - anchor.x;
+    const ay = p.y - anchor.y;
+    const length = Math.hypot(ax, ay);
+    if (length > reach) p = { x: anchor.x + (ax * reach) / length, y: anchor.y + (ay * reach) / length };
+    return p;
+  };
+  // A new press cancels a sticker that is still settling back.
+  let generation = 0;
+  const settle = (from: Point, duration: number, done?: () => void) => {
+    const start = performance.now();
+    const mine = generation;
+    // performance.now(), not the rAF timestamp: some environments use another time base.
+    const step = () => {
+      if (scope.disposed || mine !== generation) return;
+      const t = Math.min(1, (performance.now() - start) / duration);
+      const e = easeOutCubic(t);
+      fold({ x: from.x + (corner.x - from.x) * e, y: from.y + (corner.y - from.y) * e });
+      if (t < 1) raf(step);
+      else { flat(); done?.(); }
+    };
+    raf(step);
+  };
+
+  /* ── Carry and fall ─────────────────────────────────── */
+  const velocity = { x: 0, y: 0 };
+  let last = { x: 0, y: 0, t: 0 };
+  const track = (e: PointerEvent) => {
+    const now = performance.now();
+    const frames60 = Math.max(1, (now - last.t) / 16);
+    velocity.x = velocity.x * 0.5 + ((e.clientX - last.x) / frames60) * 0.5;
+    velocity.y = velocity.y * 0.5 + ((e.clientY - last.y) / frames60) * 0.5;
+    last = { x: e.clientX, y: e.clientY, t: now };
+  };
+  let home: { parent: Node; next: Node | null; style: string | null } | null = null;
+  const carry = { x: 0, y: 0, tx: 0, ty: 0, offX: 0, offY: 0, lift: 0, tilt: 0, base: 0, from: 1, to: 1.08 };
+  const carryScale = () => carry.from + (carry.to - carry.from) * carry.lift;
+  const paint = () => {
+    root.style.left = `${carry.x}px`;
+    root.style.top = `${carry.y}px`;
+    root.style.transform = `rotate(${carry.base + carry.tilt}deg) scale(${carryScale()})`;
+    root.style.filter = `drop-shadow(0 ${8 + 14 * carry.lift}px ${14 + 12 * carry.lift}px rgb(0 0 0 / ${0.16 + 0.14 * carry.lift}))`;
+  };
+  const follow = () => {
+    if (state !== 'carried' || scope.disposed) return;
+    carry.x += (carry.tx - carry.x) * 0.22;
+    carry.y += (carry.ty - carry.y) * 0.22;
+    carry.lift += (1 - carry.lift) * 0.15;
+    carry.tilt += (clamp(velocity.x * 1.2, -16, 16) - carry.tilt) * 0.15;
+    paint();
+    raf(follow);
+  };
+  const detach = (e: PointerEvent) => {
+    state = 'carried';
+    root.removeAttribute('data-mk-peeling');
+    root.setAttribute('data-mk-carried', '');
+    settle({ ...current }, 160);
+    const box = root.getBoundingClientRect();
+    // Home keeps the consumer's own inline styles, not the frozen pose.
+    unfreeze();
+    carry.base = pose.angle * (180 / Math.PI);
+    carry.from = pose.scale;
+    carry.to = Math.max(1, pose.scale) + 0.08;
+    home = { parent: root.parentNode!, next: root.nextSibling, style: root.getAttribute('style') };
+    const width = root.offsetWidth;
+    const height = root.offsetHeight;
+    document.body.append(root);
+    // Pin the size: a --mk-sticker-scale inherited from the old parent does not reach <body>.
+    Object.assign(root.style, { position: 'fixed', right: 'auto', bottom: 'auto', margin: '0', translate: 'none', scale: String(pose.prop), zIndex: '999', animation: 'none', transition: 'none' });
+    carry.x = box.left + box.width / 2 - width / 2;
+    carry.y = box.top + box.height / 2 - height / 2;
+    carry.offX = e.clientX - carry.x;
+    carry.offY = e.clientY - carry.y;
+    carry.tx = carry.x;
+    carry.ty = carry.y;
+    carry.lift = 0;
+    carry.tilt = 0;
+    paint();
+    options.onPeel?.();
+    raf(follow);
+  };
+  const goHome = () => {
+    if (!home) return;
+    const { parent, next, style } = home;
+    home = null;
+    parent.insertBefore(root, next && next.parentNode === parent ? next : null);
+    if (style === null) root.removeAttribute('style');
+    else root.setAttribute('style', style);
+    root.style.animationDelay = '0s';
+    root.removeAttribute('data-mk-carried');
+    root.removeAttribute('data-mk-away');
+    state = 'idle';
+    options.onReturn?.();
+  };
+  scope.add(goHome);
+  const away = () => {
+    state = 'away';
+    root.setAttribute('data-mk-away', '');
+    scope.timeout(goHome, returnDelay);
+  };
+  const fall = () => {
+    state = 'falling';
+    root.style.pointerEvents = 'none';
+    if (still) { away(); return; }
+    let x = 0;
+    let y = 0;
+    let angle = carry.base + carry.tilt;
+    let vx = clamp(velocity.x * 40, -900, 900);
+    let vy = clamp(velocity.y * 40, -500, 600) - 120;
+    const spin = vx * 0.35 + (Math.random() - 0.5) * 120;
+    const startY = carry.y;
+    let then = performance.now();
+    const step = () => {
+      if (scope.disposed || state !== 'falling') return;
+      const time = performance.now();
+      const dt = Math.min(0.05, Math.max(0, time - then) / 1000);
+      then = time;
+      vy += 1600 * dt;
+      x += vx * dt;
+      y += vy * dt;
+      vx *= 1 - 0.6 * dt;
+      angle += spin * dt;
+      root.style.transform = `translate(${x}px, ${y}px) rotate(${angle}deg) scale(${carryScale()})`;
+      if (startY + y < innerHeight + 40) raf(step);
+      else away();
+    };
+    raf(step);
+  };
+
+  /* ── Pointer ───────────────────────────────────────── */
+  let pointerId: number | null = null;
+  scope.on(root, 'pointerdown', (event) => {
+    const e = event as PointerEvent;
+    if (state !== 'idle' || e.button !== 0) return;
+    e.preventDefault();
+    generation++;
+    freeze();
+    state = 'peeling';
+    root.setAttribute('data-mk-peeling', '');
+    pointerId = e.pointerId;
+    root.setPointerCapture?.(e.pointerId);
+    w = top.offsetWidth;
+    h = top.offsetHeight;
+    peelBox.style.width = `${w}px`;
+    peelBox.style.height = `${h}px`;
+    const at = toLocal(e.clientX, e.clientY);
+    grabbed = at;
+    detachDistance = Number.isFinite(options.detachDistance) ? Math.max(1, options.detachDistance!) : Math.max(80, Math.max(w, h) / 2);
+    last = { x: e.clientX, y: e.clientY, t: performance.now() };
+    velocity.x = velocity.y = 0;
+    if (nearBorder(at)) {
+      useCorner(closestCorner(at));
+      fold(pull(at));
+    } else {
+      // Nothing lifts until the drag says which way; settling from here is a no-op.
+      choosing = true;
+      corner = current = { ...at };
+    }
+  });
+  scope.on(root, 'pointermove', (event) => {
+    const e = event as PointerEvent;
+    if (state !== 'peeling' || e.pointerId !== pointerId) return;
+    track(e);
+    const at = toLocal(e.clientX, e.clientY);
+    if (choosing) {
+      const dx = at.x - grabbed.x;
+      const dy = at.y - grabbed.y;
+      const moved = Math.hypot(dx, dy);
+      if (moved < 4) return;
+      useCorner(cornerAgainst({ x: dx / moved, y: dy / moved }));
+    }
+    fold(pull(at));
+    if (lifted > detachAt || Math.hypot(at.x - grabbed.x, at.y - grabbed.y) > detachDistance) detach(e);
+  });
+  scope.on(document, 'pointermove', (event) => {
+    const e = event as PointerEvent;
+    if (state !== 'carried' || e.pointerId !== pointerId) return;
+    track(e);
+    carry.tx = e.clientX - carry.offX;
+    carry.ty = e.clientY - carry.offY;
+  });
+  const release = (event: Event) => {
+    const e = event as PointerEvent;
+    if (e.pointerId !== pointerId) return;
+    if (state === 'peeling') {
+      state = 'idle';
+      settle({ ...current }, 380);
+    } else if (state === 'carried') fall();
+  };
+  scope.on(document, 'pointerup', release);
+  scope.on(document, 'pointercancel', release);
+  scope.add(() => { peelBox.style.width = ''; peelBox.style.height = ''; });
+
+  return {
+    get state() { return state; },
+    destroy: () => scope.dispose(),
+  };
+}

package/src/recipes/sticker/sticker.css

@@ -0,0 +1,112 @@
+/* sticker — die-cut holographic sticker (DOVV Studio). Place it with position/left/top; tilt it with --mk-sticker-rot. */
+.mk-sticker {
+  --mk-sticker-rot: 0deg;
+  --mk-sticker-foil: linear-gradient(115deg, #ed4a1c, #ff6a3d 18%, #ff8f5e 34%, #ff4f7a 52%, #ed4a1c 68%, #ff7a3d 84%, #ed4a1c);
+  --mk-sticker-ink: #fff;
+  display: inline-block;
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+  scale: var(--mk-sticker-scale, 1);
+  transform: rotate(var(--mk-sticker-rot));
+  filter: drop-shadow(0 8px 14px rgb(0 0 0 / 0.16));
+  transition: transform 0.4s var(--mk-ease-slot), filter 0.3s;
+  animation: mk-sticker-pop 0.7s var(--mk-ease-slot) backwards;
+  animation-delay: var(--mk-sticker-delay, 0s);
+}
+@media (hover: hover) {
+  .mk-sticker:hover { transform: rotate(calc(var(--mk-sticker-rot) * -0.6)) scale(1.08); }
+}
+/* The engine freezes the pose it had at the press (inline transform), so there is no snap here. */
+.mk-sticker[data-mk-peeling],
+.mk-sticker[data-mk-peeling]:hover {
+  transition: none;
+  cursor: grabbing;
+}
+.mk-sticker[data-mk-carried] { cursor: grabbing; }
+.mk-sticker[data-mk-away] { visibility: hidden; }
+@keyframes mk-sticker-pop {
+  0% { opacity: 0; scale: 0.4; }
+}
+
+/* Peel layers: the top is clipped at the fold; the back is a reflected copy whose
+   face is clipped (inner) while the shadow lives on the outer layer, outside the clip. */
+.mk-sticker__peel { position: relative; display: inline-block; vertical-align: top; }
+.mk-sticker__top { display: block; }
+.mk-sticker__back {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  transform-origin: 0 0;
+  visibility: hidden;
+  pointer-events: none;
+  filter: drop-shadow(0 0 1.5px rgb(0 0 0 / 0.3)) drop-shadow(0 0 7px rgb(0 0 0 / 0.22));
+}
+.mk-sticker__back-face { width: 100%; height: 100%; }
+/* Paper backing: brightest along the fold, a little grey towards the lifted tip. */
+.mk-sticker:not([data-mk-sticker-back='silhouette']) .mk-sticker__back-face :is(.mk-sticker__art, .mk-sticker__pill, .mk-sticker__badge) {
+  /* The gradient runs under the die-cut border too, so the back reads as one piece of paper. */
+  background: linear-gradient(var(--mk-sticker-fold, 90deg), #fff 0%, #f6f6f4 40%, #e2e2de 100%) border-box !important;
+  color: transparent !important;
+  border-color: transparent !important;
+}
+.mk-sticker__back-face :is(.mk-sticker__art, .mk-sticker__pill, .mk-sticker__badge) * { visibility: hidden; }
+.mk-sticker__back-face :is(.mk-sticker__art, .mk-sticker__pill, .mk-sticker__badge)::after { display: none; }
+/* Free-form art (an <img> or <svg> shape): a white silhouette of it instead. */
+.mk-sticker[data-mk-sticker-back='silhouette'] .mk-sticker__back-face { filter: brightness(0) invert(0.95); }
+
+/* Art: a pill, a round badge or any element with .mk-sticker__art. The white die-cut border is part of the art. */
+.mk-sticker__art,
+.mk-sticker__pill,
+.mk-sticker__badge {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  isolation: isolate;
+  color: var(--mk-sticker-ink);
+  border: 4px solid #fff;
+}
+.mk-sticker__pill {
+  padding: 0.6em 1.1em;
+  border-radius: 999px;
+  font-weight: 800;
+  font-size: 1.15rem;
+  letter-spacing: -0.02em;
+  white-space: nowrap;
+}
+.mk-sticker__badge {
+  display: grid;
+  place-items: center;
+  width: var(--mk-sticker-size, 7rem);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  font-weight: 800;
+  text-align: center;
+}
+.mk-sticker__art { border-radius: var(--mk-sticker-radius, 24px); }
+.mk-sticker[data-mk-holo] :is(.mk-sticker__art, .mk-sticker__pill, .mk-sticker__badge) {
+  background: var(--mk-sticker-foil);
+  background-size: 220% 220%;
+  background-position: calc(var(--mk-sticker-x, 0.5) * 100%) calc(var(--mk-sticker-y, 0.5) * 100%);
+}
+.mk-sticker[data-mk-holo] :is(.mk-sticker__art, .mk-sticker__pill, .mk-sticker__badge)::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background: radial-gradient(circle at calc(var(--mk-sticker-x, 0.5) * 100%) calc(var(--mk-sticker-y, 0.5) * 100%), rgb(255 255 255 / 0.7), transparent 65%);
+  mix-blend-mode: soft-light;
+  opacity: 0.9;
+}
+.mk-sticker--pink { --mk-sticker-foil: linear-gradient(115deg, #ff7ac6, #c084fc 22%, #ffb3e1 44%, #7dd3fc 66%, #ff7ac6 84%, #f0abfc); --mk-sticker-ink: #3d0a26; }
+.mk-sticker--blue { --mk-sticker-foil: linear-gradient(115deg, #2e90fa, #7c5cff 25%, #38bdf8 50%, #2e90fa 75%, #a78bfa); --mk-sticker-ink: #fff; }
+.mk-sticker--lime { --mk-sticker-foil: linear-gradient(115deg, #c6f432, #fef08a 25%, #5eead4 50%, #a3e635 75%, #c6f432); --mk-sticker-ink: #1d2a00; }
+.mk-sticker--gold { --mk-sticker-foil: linear-gradient(115deg, #facc15, #fde68a 25%, #f59e0b 50%, #fef3c7 70%, #eab308); --mk-sticker-ink: #1a1a1a; }
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-sticker { animation: none; transition: none; }
+}

package/src/recipes/stretch-footer/README.md

@@ -2,8 +2,6 @@
 
 Footer fijo detrás de la página que aparece al final del scroll; su título gigante se estira de 0 a 1 en vertical siguiendo el scroll suavizado.
 
-Origen: spencergabor.com — Footer.vue.
-
 ## Vanilla / Astro
 
 ```html

package/src/recipes/stretch-footer/create-stretch-footer.ts

@@ -6,7 +6,7 @@ import { createScope } from '../../core/scope';
 import { inert, warnOnce, type Instance } from '../../core/types';
 
 /*
- * spencergabor.com footer: fixed behind the page and revealed by a 100dvh
+ * stretch-footer: fixed behind the page and revealed by a 100dvh
  * "phantom" at the end of the flow. Smoothed scroll g = damp(g, scrollY, λ)
  * drives the title's scaleY (0 → 1) and lifts the footer from "title on the
  * bottom edge" to its resting place.

package/src/recipes/stretch-footer/stretch-footer.css

@@ -1,5 +1,5 @@
 /*
- * stretch-footer — spencergabor.com (Footer). The page content must sit above it:
+ * stretch-footer — The page content must sit above it:
  * give <main> `position: relative; z-index: 1; background: <page colour>`.
  */
 

package/src/recipes/tabs/README.md

@@ -2,8 +2,6 @@
 
 Un indicador se desliza hasta la pestaña elegida en 0.45 s con la curva signature. Si la lista hace scroll, centra la pestaña. Flechas (según orientación), Inicio y Fin cambian la selección.
 
-Origen: Stepbro — PrettyTabs (`tabs`, `tabs-indicator` en el kit: `Flip.fit`, 0.45 s, `prettyTabsSlide`).
-
 ## Vanilla / Astro
 
 ```html

package/src/recipes/tabs/create-tabs.ts

@@ -5,7 +5,7 @@ import { TIMING } from '../../core/timing';
 import { slideIndicator } from '../../motion/indicator';
 
 /*
- * Stepbro's PrettyTabs: an indicator slides onto the selected tab in 0.45 s on
+ * Tabs: an indicator slides onto the selected tab in 0.45 s on
  * the signature curve; a scrolling tab list centres the selection. Arrow keys
  * (by orientation), Home and End move the selection.
  */

package/src/recipes/text-roll/README.md

@@ -2,8 +2,6 @@
 
 Un título que gira como una tragaperras: cada letra es un carrete (la letra y una copia debajo) que da entre 9 y 15 vueltas al azar; todas frenan con `expo.out` en 2 s, 40 ms entre letras en orden aleatorio, y se quedan en la misma letra. Puede repetirse cada 6 s mientras se ve y no hay scroll (espera 1 s de calma).
 
-Origen: Siena Film Foundation, títulos de película de la portada (copia `cloneText2`, `L.utils.random(8, 14)` repeticiones).
-
 ## HTML / Astro
 
 ```html
@@ -27,7 +25,7 @@ const roll = useTextRoll(ref, { trigger: 'manual' });
 | Opción | Por defecto | |
 |---|---|---|
 | `trigger` | `'load'` | `'scroll'`, `'hover'`, `'manual'` |
-| `interval` | `0` | ms entre repeticiones (Siena: 6000) |
+| `interval` | `0` | ms entre repeticiones |
 | `turns` | `[8, 14]` | repeticiones de la vuelta de cada letra |
 
 ## Accesibilidad