@yewdiel21/motion-kit 0.9.0 → 0.10.0

package/src/recipes/text-roll/create-text-roll.ts

@@ -5,7 +5,7 @@ import { inert, warnOnce, type Instance } from '../../core/types';
 import { shows, thresholds } from '../../core/visible';
 
 /*
- * Siena's slot title: every letter is a little reel — its face and a copy
+ * slot title: every letter is a little reel — its face and a copy
  * under it scroll up one height per turn, 8–14 turns picked at random, in a
  * paused timeline. play() pushes all those timelines from 0 to 1 in 2 s
  * (expo.out, 40 ms apart in random order), so the letters spin fast and settle
@@ -16,12 +16,12 @@ import { shows, thresholds } from '../../core/visible';
 export interface TextRollOptions {
   duration?: number;
   stagger?: number;
-  /** [min, max] repeats of each letter's turn (Siena: 8–14). */
+  /** [min, max] repeats of each letter's turn (default: 8–14). */
   turns?: readonly [number, number];
   /** 'load' (default) after `delay`; 'scroll' when it shows; 'hover'; 'manual'. */
   trigger?: 'load' | 'scroll' | 'hover' | 'manual';
   delay?: number;
-  /** Replay every n ms while visible and not scrolling (Siena: 6000). 0: off. */
+  /** Replay every n ms while visible and not scrolling (default: 6000). 0: off. */
   interval?: number;
 }
 

package/src/recipes/text-roll/text-roll.css

@@ -1,4 +1,4 @@
-/* text-roll — Siena's slot title: each letter is a reel (its face and a copy below), clipped to one line. */
+/* text-roll — slot title: each letter is a reel (its face and a copy below), clipped to one line. */
 .mk-roll-word {
   white-space: nowrap;
 }

package/src/recipes/thumbnail-nav/README.md

@@ -0,0 +1,16 @@
+# thumbnail-nav
+
+Selector de categorías inspirado en la cápsula inferior de Ottografie: tres previews apilados, expansión 222×53→289×68 y panel accesible de enlaces. Es una adaptación contenida; no reproduce su transición de pantalla completa.
+
+```html
+<nav data-mk="thumbnail-nav" aria-label="Colecciones">
+  <a data-mk-thumbnail-item aria-current="page" href="/campaigns"><img src="/campaigns.jpg" alt="" />Campañas</a>
+  <a data-mk-thumbnail-item href="/editorial"><img src="/editorial.jpg" alt="" />Editorial</a>
+</nav>
+```
+
+`createThumbnailNav(root, { index, label: 'Categoría', duration: .5, onSelect })` devuelve `open()`, `close()`, `toggle()`, `select(index)`, `index`, `expanded`, `destroy()`. Duración en segundos; panel GSAP `power3.out`, cierre .3 s por defecto. Emitimos `mk:select` cancelable con `{ index, item }`; cancelar evita también la navegación de ese click. Los enlaces conservan su destino. Usa botones si la selección cambia estado local. `data-mk-label` personaliza el nombre de una opción.
+
+React: `useThumbnailNav(ref, options, deps)`. La receta administra los hijos mientras está montada; no cambies la lista durante ese intervalo. Flechas y Home/End mueven foco, Escape devuelve foco al disparador; Tab y click exterior cierran sin atrapar el foco. Las opciones `disabled` / `aria-disabled="true"` se omiten. Touch usa el mismo botón de apertura. Sin JS los enlaces siguen disponibles. Con movimiento reducido no hay animación. `destroy()` devuelve nodos/atributos originales y cancela listeners y tweens.
+
+La cápsula se contiene en su padre por defecto. Añade `mk-thumbnail-nav--fixed` para fijarla abajo y controla `--mk-thumbnail-nav-surface`, `--mk-thumbnail-nav-color`. No contiene imágenes del sitio de referencia.

package/src/recipes/thumbnail-nav/create-thumbnail-nav.ts

@@ -0,0 +1,165 @@
+import { gsap, registerMotion } from '../../core/gsap';
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { wrap } from '../../core/math';
+import { inert, type Instance } from '../../core/types';
+
+export interface ThumbnailNavOptions {
+  index?: number;
+  label?: string;
+  /** Seconds for expansion and panel entry. */
+  duration?: number;
+  onSelect?: (index: number, item: HTMLElement) => void;
+}
+
+export interface ThumbnailNavInstance extends Instance {
+  open(): void;
+  close(): void;
+  toggle(): void;
+  select(index: number): void;
+  readonly index: number;
+  readonly expanded: boolean;
+}
+
+let panelSequence = 0;
+
+/** A category disclosure with stacked previews, real links and complete keyboard navigation. */
+export function createThumbnailNav(root: HTMLElement | null, options: ThumbnailNavOptions = {}): ThumbnailNavInstance {
+  const items = root ? [...root.querySelectorAll<HTMLElement>('[data-mk-thumbnail-item]')] : [];
+  if (!root || !items.length || typeof document === 'undefined') return inert({ open() {}, close() {}, toggle() {}, select() {}, index: 0, expanded: false });
+  registerMotion();
+  const scope = createScope();
+  const original = [...root.childNodes];
+  const duration = Math.max(0, options.duration ?? 0.5);
+  const disabled = (item: HTMLElement) => item.matches(':disabled, [aria-disabled="true"]');
+  const name = (item: HTMLElement) => item.dataset.mkLabel ?? item.textContent?.trim() ?? '';
+  let index = 0;
+  let expanded = false;
+  let animation: gsap.core.Tween | undefined;
+  const button = document.createElement('button');
+  button.type = 'button';
+  button.className = 'mk-thumbnail-nav__toggle';
+  button.setAttribute('aria-expanded', 'false');
+  const preview = document.createElement('span');
+  preview.className = 'mk-thumbnail-nav__preview';
+  preview.setAttribute('aria-hidden', 'true');
+  const copy = document.createElement('span');
+  copy.className = 'mk-thumbnail-nav__copy';
+  const kicker = document.createElement('span');
+  kicker.className = 'mk-thumbnail-nav__kicker';
+  kicker.textContent = options.label ?? root.dataset.mkLabel ?? 'Categoría';
+  const label = document.createElement('span');
+  label.className = 'mk-thumbnail-nav__label';
+  copy.append(kicker, label);
+  const arrow = document.createElement('span');
+  arrow.className = 'mk-thumbnail-nav__chevron';
+  arrow.setAttribute('aria-hidden', 'true');
+  arrow.textContent = '⌄';
+  button.append(preview, copy, arrow);
+  const panel = document.createElement('div');
+  panel.className = 'mk-thumbnail-nav__panel';
+  panel.id = `mk-thumbnail-panel-${++panelSequence}`;
+  while (document.getElementById(panel.id)) panel.id = `mk-thumbnail-panel-${++panelSequence}`;
+  panel.hidden = true;
+  panel.inert = true;
+  button.setAttribute('aria-controls', panel.id);
+  panel.append(...original);
+  root.replaceChildren(button, panel);
+  scope.add(() => root.replaceChildren(...original));
+  scope.attr(root, 'class', `${root.className} mk-thumbnail-nav`.trim());
+  scope.attr(root, 'style', root.getAttribute('style'));
+  root.style.setProperty('--mk-thumbnail-nav-duration', `${duration}s`);
+  scope.attr(root, 'data-mk-ready', '');
+
+  const updatePreview = () => {
+    label.textContent = name(items[index]!);
+    button.setAttribute('aria-label', `${kicker.textContent}: ${label.textContent}`);
+    preview.replaceChildren();
+    for (let offset = 0; offset < Math.min(3, items.length); offset++) {
+      const item = items[wrap(index + offset, items.length)]!;
+      const thumb = document.createElement('span');
+      thumb.className = 'mk-thumbnail-nav__thumb';
+      thumb.style.setProperty('--mk-thumbnail-order', String(offset));
+      const source = item.querySelector('img');
+      if (source) {
+        const image = source.cloneNode(false) as HTMLImageElement;
+        image.removeAttribute('id');
+        image.alt = '';
+        thumb.append(image);
+      } else thumb.textContent = name(item).slice(0, 1);
+      preview.append(thumb);
+    }
+  };
+  const focusItem = (candidate: number, direction = 1) => {
+    for (let attempt = 0; attempt < items.length; attempt++) {
+      const current = items[wrap(candidate, items.length)]!;
+      if (!disabled(current)) { current.focus(); return; }
+      candidate += direction;
+    }
+  };
+  const close = (restoreFocus = panel.contains(document.activeElement)) => {
+    if (scope.disposed || !expanded) return;
+    expanded = false;
+    button.setAttribute('aria-expanded', 'false');
+    scope.attr(root, 'data-mk-expanded', null);
+    panel.inert = true;
+    animation?.kill();
+    if (restoreFocus) button.focus();
+    if (reduced() || duration === 0) panel.hidden = true;
+    else animation = gsap.to(panel, { autoAlpha: 0, y: 10, scale: 0.98, duration: duration * 0.6, ease: 'power3.out', overwrite: true, onComplete: () => { panel.hidden = true; } });
+  };
+  const open = () => {
+    if (scope.disposed || expanded) return;
+    expanded = true;
+    panel.hidden = false;
+    panel.inert = false;
+    button.setAttribute('aria-expanded', 'true');
+    scope.attr(root, 'data-mk-expanded', '');
+    animation?.kill();
+    if (reduced() || duration === 0) gsap.set(panel, { autoAlpha: 1, y: 0, scale: 1 });
+    else animation = gsap.fromTo(panel, { autoAlpha: 0, y: 12, scale: 0.96 }, { autoAlpha: 1, y: 0, scale: 1, duration, ease: 'power3.out', overwrite: true });
+  };
+  const select = (next: number, notify = true) => {
+    if (scope.disposed || !Number.isFinite(next)) return false;
+    const candidate = wrap(Math.round(next), items.length);
+    const item = items[candidate]!;
+    if (disabled(item)) return false;
+    if (notify && !root.dispatchEvent(new CustomEvent('mk:select', { bubbles: true, cancelable: true, detail: { index: candidate, item } }))) return false;
+    index = candidate;
+    items.forEach((entry, position) => scope.attr(entry, 'aria-current', position === index ? 'page' : null));
+    updatePreview();
+    if (notify) options.onSelect?.(index, item);
+    return true;
+  };
+  scope.on(button, 'click', () => { if (expanded) close(); else open(); });
+  scope.on(root, 'click', (event) => {
+    const item = (event.target as Element).closest<HTMLElement>('[data-mk-thumbnail-item]');
+    if (!item || !items.includes(item)) return;
+    if (!select(items.indexOf(item))) { event.preventDefault(); return; }
+    close(true);
+  });
+  scope.on(root, 'keydown', (event) => {
+    if (event.key === 'Escape' && expanded) { event.preventDefault(); event.stopPropagation(); close(true); return; }
+    const current = items.indexOf(document.activeElement as HTMLElement);
+    const onTrigger = document.activeElement === button;
+    const direction = event.key === 'ArrowDown' || event.key === 'ArrowRight' ? 1 : event.key === 'ArrowUp' || event.key === 'ArrowLeft' ? -1 : 0;
+    if ((!direction && event.key !== 'Home' && event.key !== 'End') || (!onTrigger && current < 0)) return;
+    event.preventDefault();
+    open();
+    const candidate = event.key === 'Home' ? 0 : event.key === 'End' ? items.length - 1 : onTrigger ? index : current + direction;
+    focusItem(candidate, event.key === 'End' ? -1 : direction || 1);
+  });
+  scope.on(root, 'focusout', (event) => {
+    if (event.relatedTarget instanceof Node && root.contains(event.relatedTarget)) return;
+    scope.timeout(() => { if (!scope.disposed && !root.contains(document.activeElement)) close(false); }, 0);
+  });
+  scope.on(document, 'pointerdown', (event) => { if (event.target instanceof Node && !root.contains(event.target)) close(false); });
+  scope.add(() => animation?.kill());
+  const initial = options.index ?? Math.max(0, items.findIndex((item) => item.getAttribute('aria-current') === 'page'));
+  const enabled = items.findIndex((item) => !disabled(item));
+  if (!select(initial, false)) {
+    if (enabled >= 0) select(enabled, false);
+    else { updatePreview(); button.disabled = true; }
+  }
+  return { open, close: () => close(), toggle: () => { if (expanded) close(); else open(); }, select: (next) => { select(next); }, get index() { return index; }, get expanded() { return expanded; }, destroy: () => scope.dispose() };
+}

package/src/recipes/thumbnail-nav/thumbnail-nav.css

@@ -0,0 +1,108 @@
+.mk-thumbnail-nav {
+  --mk-thumbnail-nav-surface: #181716e6;
+  --mk-thumbnail-nav-color: #fff;
+  --mk-thumbnail-nav-duration: .5s;
+  --mk-thumbnail-nav-ease: cubic-bezier(.165,.84,.44,1);
+  position: relative;
+  display: flex;
+  align-items: end;
+  justify-content: center;
+  inline-size: min(100%, 18.0625rem);
+  min-block-size: 4.25rem;
+  margin-inline: auto;
+  color: var(--mk-thumbnail-nav-color);
+  font-family: var(--mk-font, sans-serif);
+  isolation: isolate;
+}
+.mk-thumbnail-nav--fixed { position: fixed; z-index: 20; inset: auto auto max(1.25rem, env(safe-area-inset-bottom)) 50%; transform: translateX(-50%); }
+.mk-thumbnail-nav__toggle {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: none;
+  gap: .5rem;
+  inline-size: 13.875rem;
+  max-inline-size: 100%;
+  min-block-size: 3.3125rem;
+  padding: .40625rem .75rem;
+  border: 0;
+  border-radius: 3.3125rem;
+  background: var(--mk-thumbnail-nav-surface);
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  transition: inline-size var(--mk-thumbnail-nav-duration) var(--mk-thumbnail-nav-ease), min-block-size var(--mk-thumbnail-nav-duration) var(--mk-thumbnail-nav-ease), border-radius var(--mk-thumbnail-nav-duration) var(--mk-thumbnail-nav-ease);
+}
+.mk-thumbnail-nav[data-mk-expanded] .mk-thumbnail-nav__toggle { inline-size: 18.0625rem; min-block-size: 4.25rem; border-radius: 4.25rem; }
+.mk-thumbnail-nav__preview { position: relative; display: block; flex: 0 0 4.25rem; block-size: 2.5rem; }
+.mk-thumbnail-nav__thumb {
+  position: absolute;
+  inset: 0 auto auto 0;
+  display: grid;
+  place-items: center;
+  inline-size: 2.5rem;
+  block-size: 2.5rem;
+  overflow: hidden;
+  border-radius: 100%;
+  background: var(--mk-accent, #dda063);
+  color: var(--mk-on-accent, #181716);
+  font-size: .75rem;
+  font-weight: 600;
+  z-index: calc(3 - var(--mk-thumbnail-order));
+  transform-origin: left center;
+  transform: translateX(calc((2 - var(--mk-thumbnail-order)) * .625rem)) scale(.725);
+  transition: transform var(--mk-thumbnail-nav-duration) var(--mk-thumbnail-nav-ease);
+}
+.mk-thumbnail-nav[data-mk-expanded] .mk-thumbnail-nav__thumb { transform: translateX(calc((2 - var(--mk-thumbnail-order)) * .5rem)) scale(1); }
+.mk-thumbnail-nav__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
+.mk-thumbnail-nav__copy { display: grid; flex: 1; min-inline-size: 0; gap: .125rem; text-align: start; }
+.mk-thumbnail-nav__kicker { display: none; font-size: .6875rem; opacity: .6; line-height: 1.1; }
+.mk-thumbnail-nav[data-mk-expanded] .mk-thumbnail-nav__kicker { display: block; }
+.mk-thumbnail-nav__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; font-weight: 600; line-height: 1.3; }
+.mk-thumbnail-nav__chevron { display: grid; flex: 0 0 1.8125rem; place-items: center; block-size: 1.8125rem; border-radius: 50%; background: #ffffff1a; line-height: 1; transition: transform var(--mk-thumbnail-nav-duration) var(--mk-thumbnail-nav-ease); }
+.mk-thumbnail-nav[data-mk-expanded] .mk-thumbnail-nav__chevron { transform: rotate(180deg); }
+.mk-thumbnail-nav__panel {
+  position: absolute;
+  z-index: 2;
+  inset: auto 0 calc(100% + .625rem);
+  display: grid;
+  gap: .25rem;
+  max-block-size: min(20rem, 55vh);
+  overflow: auto;
+  padding: .5rem;
+  border: 1px solid #ffffff1a;
+  border-radius: 1.125rem;
+  background: var(--mk-thumbnail-nav-surface);
+  color: inherit;
+  box-shadow: 0 1rem 3rem #0003;
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  transform-origin: center bottom;
+}
+.mk-thumbnail-nav__panel[hidden] { display: none; }
+.mk-thumbnail-nav__panel :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
+.mk-thumbnail-nav__panel [data-mk-thumbnail-item] {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: .75rem;
+  inline-size: 100%;
+  min-block-size: 3rem;
+  padding: .5rem .625rem;
+  border: 0;
+  border-radius: .75rem;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+.mk-thumbnail-nav__panel [data-mk-thumbnail-item]:is(:hover, [aria-current='page']) { background: #ffffff1a; }
+.mk-thumbnail-nav__panel [data-mk-thumbnail-item]:is(:disabled, [aria-disabled='true']) { opacity: .4; cursor: default; }
+.mk-thumbnail-nav__panel [data-mk-thumbnail-item] img { inline-size: 2rem; block-size: 2rem; object-fit: cover; border-radius: 50%; }
+.mk-thumbnail-nav__toggle:focus-visible, .mk-thumbnail-nav__panel [data-mk-thumbnail-item]:focus-visible { outline: 2px solid var(--mk-accent, #dda063); outline-offset: 2px; }
+@media (prefers-reduced-motion: reduce) {
+  .mk-thumbnail-nav *, .mk-thumbnail-nav *::before, .mk-thumbnail-nav *::after { transition: none !important; }
+}

package/src/recipes/ticket-menu/README.md

@@ -1,6 +1,6 @@
 # ticket-menu
 
-Menú boleto de Siena sobre menu: recorte, filas escalonadas, teclado y foco.
+Menú boleto sobre menu: recorte, filas escalonadas, teclado y foco.
 
 ```html
 <button data-mk-open="sections">Secciones</button>
@@ -17,8 +17,8 @@ const instance = createTicketMenu(root);
 instance.destroy();
 ```
 
-`createTicketMenu(dialog, MenuOptions)` reutiliza el motor de menú. También `<mk-menu ticket>` y `<Menu.Root ticket>`. Apertura por clip-path .9 s; filas desde yPercent 150, 1.1 s, stagger .02. `open(origin?)`, `close()`, `toggle()`, `items`, `isOpen`. Origen: Siena `siena.menu.expand` y `siena.menu.details`; adaptación de sus grid rows a un diálogo local.
+`createTicketMenu(dialog, MenuOptions)` reutiliza el motor de menú. También `<mk-menu ticket>` y `<Menu.Root ticket>`. Apertura por clip-path .9 s; filas desde yPercent 150, 1.1 s, stagger .02. `open(origin?)`, `close()`, `toggle()`, `items`, `isOpen`.
 
 Vanilla declarativo: `autoInit(root)`. React: `useTicketMenu(ref, options, deps)` devuelve una ref a la instancia; se destruye al desmontar. Con movimiento reducido no se ejecuta movimiento decorativo. `destroy()` restaura atributos y estilos y quita listeners, observers y nodos generados.
 
-Desde 0.8.0. Parámetros investigados en `REA - Dousan OFFFICE Siena/`; implementación propia, sin código ni assets de esos sitios.
+Desde 0.8.0.

package/src/recipes/weight-hover/README.md

@@ -0,0 +1,37 @@
+# weight-hover
+
+Cada letra adelgaza al acercarse el puntero, como el titular y el «SAY HELLO» de DOVV Studio. El valor del eje sale de `reposo + (cerca − reposo) · smoothstep(1 − distancia / radio)`. Cada frame recorre un 10 % de lo que falta, y el bucle se detiene cuando ninguna letra se mueve más de media unidad. Valores de la referencia: reposo 900, cerca 200 y radio 400 px (380 en el contacto).
+
+Necesita una fuente variable con el eje (por defecto `wght`), por ejemplo Archivo, Inter o Roboto Flex; con una fuente estática no hay efecto. Funciona con cualquier texto y `<br>`: las letras visibles son `aria-hidden` y una copia `.mk-sr-only` conserva el texto completo para lectores de pantalla.
+
+## Vanilla / Astro
+
+```html
+<h2 class="mk-weight-hover" data-mk="weight-hover" data-mk-rest="900" data-mk-near="200" data-mk-radius="400"
+    style="font-family: 'Archivo', sans-serif">WE BUILD SITES<br>THAT MOVE PEOPLE</h2>
+```
+
+Con `autoInit()` las opciones van como `data-mk-<opción>`. Sin `autoInit`: `createWeightHover(el, opciones)`, que devuelve `pointAt({x, y} | null)` y `destroy()`.
+
+## React
+
+```tsx
+const ref = useRef<HTMLHeadingElement>(null);
+useWeightHover(ref, { rest: 900, near: 200, radius: 400 });
+return <h2 ref={ref} className="mk-weight-hover">SAY HELLO</h2>;
+```
+
+## Opciones
+
+| Opción | Por defecto | Qué hace |
+|---|---|---|
+| `rest` | `900` | Valor del eje lejos del puntero |
+| `near` | `200` | Valor bajo el puntero |
+| `radius` | `400` | Alcance en px |
+| `axis` | `'wght'` | Eje variable (4 letras) |
+| `lerp` | `0.1` | Fracción del camino por frame |
+| `anyPointer` | `false` | Reaccionar también a táctil y lápiz; la referencia sólo usa ratón |
+
+## Accesibilidad
+
+El texto no cambia, sólo su grosor. Con movimiento reducido no parte el texto ni anima. `destroy()` restaura los nodos originales.

package/src/recipes/weight-hover/create-weight-hover.ts

@@ -0,0 +1,136 @@
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+
+/*
+ * Weight hover (DOVV Studio hero and "SAY HELLO"): every letter drops its
+ * variable-font weight as the pointer gets close. Target = rest + (near − rest)
+ * · smoothstep(1 − distance / radius); each frame moves 10 % of the way and the
+ * loop stops once no letter moves more than half a unit. Mouse only, off with
+ * reduced motion. Needs a font with the axis (default "wght").
+ */
+
+export interface WeightHoverOptions {
+  /** Axis value far from the pointer. */
+  rest?: number;
+  /** Axis value right under the pointer. */
+  near?: number;
+  /** Reach of the effect, px. */
+  radius?: number;
+  /** Variable-font axis tag. */
+  axis?: string;
+  /** Share of the remaining distance covered per frame (0–1). */
+  lerp?: number;
+  /** React to touch and pen too (the reference reacts to the mouse only). */
+  anyPointer?: boolean;
+}
+
+export interface WeightHoverInstance extends Instance {
+  /** Point the effect at viewport coordinates (null releases it). */
+  pointAt(point: { x: number; y: number } | null): void;
+}
+
+interface Letter { span: HTMLElement; value: number; x: number; y: number }
+
+const FAR = -1e5;
+
+export function createWeightHover(root: HTMLElement | null, options: WeightHoverOptions = {}): WeightHoverInstance {
+  if (!root) return inert({ pointAt() {} });
+  const scope = createScope();
+  scope.attr(root, 'data-mk-ready', '');
+  if (reduced()) return { pointAt() {}, destroy: () => scope.dispose() };
+
+  const num = (value: number | undefined, fallback: number) => (Number.isFinite(value) ? value! : fallback);
+  const rest = num(options.rest, 900);
+  const near = num(options.near, 200);
+  const radius = Math.max(1, num(options.radius, 400));
+  const lerp = Math.min(1, Math.max(0.01, num(options.lerp, 0.1)));
+  const axis = /^[A-Za-z]{4}$/.test(options.axis ?? '') ? options.axis! : 'wght';
+  const setting = (value: number) => `"${axis}" ${value.toFixed(1)}`;
+
+  // Visual letters are aria-hidden; one screen-reader copy keeps the text whole.
+  const original = [...root.childNodes];
+  const copy = document.createElement('span');
+  copy.className = 'mk-sr-only';
+  const spoken = root.cloneNode(true) as HTMLElement;
+  spoken.querySelectorAll('br').forEach((br) => br.replaceWith(' '));
+  copy.textContent = spoken.textContent?.replace(/\s+/g, ' ').trim() ?? '';
+  const visual = document.createElement('span');
+  visual.className = 'mk-weight-hover__visual';
+  visual.setAttribute('aria-hidden', 'true');
+  visual.append(...original.map((node) => node.cloneNode(true)));
+  const letters: Letter[] = [];
+  const walker = document.createTreeWalker(visual, NodeFilter.SHOW_TEXT);
+  const texts: Text[] = [];
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) texts.push(node as Text);
+  for (const text of texts) {
+    const fragment = document.createDocumentFragment();
+    for (const char of text.data) {
+      if (/\s/.test(char)) {
+        fragment.append(char);
+        continue;
+      }
+      const span = document.createElement('span');
+      span.dataset.mkWeightChar = '';
+      span.textContent = char;
+      span.style.fontVariationSettings = setting(rest);
+      fragment.append(span);
+      letters.push({ span, value: rest, x: 0, y: 0 });
+    }
+    text.replaceWith(fragment);
+  }
+  root.replaceChildren(copy, visual);
+  scope.add(() => root.replaceChildren(...original));
+
+  // Letter centres relative to the root, re-measured when layout or fonts change.
+  const measure = () => {
+    const box = root.getBoundingClientRect();
+    for (const letter of letters) {
+      const r = letter.span.getBoundingClientRect();
+      letter.x = r.left + r.width / 2 - box.left;
+      letter.y = r.top + r.height / 2 - box.top;
+    }
+  };
+  measure();
+  if (typeof ResizeObserver === 'function') scope.observe(new ResizeObserver(measure)).observe(root);
+  document.fonts?.ready.then(() => { if (!scope.disposed) measure(); });
+
+  const pointer = { x: FAR, y: FAR };
+  let frame = 0;
+  const tick = () => {
+    frame = 0;
+    if (scope.disposed) return;
+    const box = root.getBoundingClientRect();
+    let moving = false;
+    for (const letter of letters) {
+      const distance = Math.hypot(pointer.x - (box.left + letter.x), pointer.y - (box.top + letter.y));
+      const d = Math.max(0, 1 - distance / radius);
+      const target = rest + (near - rest) * d * d * (3 - 2 * d);
+      letter.value += (target - letter.value) * lerp;
+      if (Math.abs(target - letter.value) > 0.5) moving = true;
+      else letter.value = target;
+      letter.span.style.fontVariationSettings = setting(letter.value);
+    }
+    if (moving) frame = requestAnimationFrame(tick);
+  };
+  const wake = () => { if (!frame && !scope.disposed) frame = requestAnimationFrame(tick); };
+  scope.add(() => cancelAnimationFrame(frame));
+  scope.on(window, 'pointermove', (event) => {
+    const e = event as PointerEvent;
+    if (!options.anyPointer && e.pointerType && e.pointerType !== 'mouse') return;
+    pointer.x = e.clientX;
+    pointer.y = e.clientY;
+    wake();
+  }, { passive: true });
+  scope.on(document, 'pointerleave', () => { pointer.x = pointer.y = FAR; wake(); });
+
+  return {
+    pointAt(point) {
+      if (scope.disposed) return;
+      pointer.x = point ? point.x : FAR;
+      pointer.y = point ? point.y : FAR;
+      wake();
+    },
+    destroy: () => scope.dispose(),
+  };
+}

package/src/recipes/weight-hover/weight-hover.css

@@ -0,0 +1,7 @@
+/* weight-hover — each letter carries its own axis value; the font must be variable. */
+.mk-weight-hover {
+  font-kerning: none;
+}
+.mk-weight-hover__visual [data-mk-weight-char] {
+  will-change: font-variation-settings;
+}

package/src/recipes/words/README.md

@@ -2,8 +2,6 @@
 
 Cada palabra (o letra) crece desde la base con rebote: `scaleY 0 → 1`, 100 ms entre palabras (60 ms entre letras).
 
-Origen: spencergabor.com — titulares del Hero.
-
 ## Vanilla / Astro
 
 ```html

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

@@ -3,7 +3,7 @@ import { entrances } from '../../core/reduced';
 import { inert, warnOnce, type Instance } from '../../core/types';
 
 /*
- * spencergabor.com headlines: every word (or letter) grows from its baseline,
+ * words: every word (or letter) grows from its baseline,
  * scaleY 0 → 1 and 25 % up → 0, elastic, 100 ms apart (60 ms for letters).
  */
 

package/src/theme/generate.ts

@@ -16,7 +16,7 @@ import { themeCss, type Palette, type ThemePalettes } from './css-format';
 import { registerTheme, setTheme } from './theme';
 
 /*
- * Material 3 palettes from any colour, in the same 37 roles as Stepbro's themes.
+ * Material 3 palettes from any colour, with the 37 theme color roles.
  * Needs the optional peer @material/material-color-utilities ^0.3.0
  * (0.4.0 publishes ESM imports without extensions that Node cannot load).
  */

package/src/theme/presets.ts

@@ -1,4 +1,4 @@
-// Generated by scripts/import-themes.mjs from the Stepbro replication kit; do not edit.
+// Theme preset metadata; keep in sync with the CSS palettes.
 
 /** The 37 Material 3 colour roles every theme defines (`--md-sys-color-<role>`). */
 export const ROLES = [
@@ -45,7 +45,7 @@ export type Role = (typeof ROLES)[number];
 export interface ThemePreset {
   readonly id: string;
   readonly name: string;
-  /** Hidden from Stepbro's own picker (kept in its code). */
+  /** Hidden from the picker unless showHidden is enabled. */
   readonly hidden: boolean;
   /** Modes with their own palette. OLED is dark-only and uses Black in light mode. */
   readonly modes: readonly ('light' | 'dark')[];

package/src/theme/theme.ts

@@ -3,8 +3,7 @@ import { warnOnce } from '../core/types';
 
 /*
  * Theme and mode on <html data-mk-theme="neogreen" data-mk-mode="system|light|dark">,
- * remembered in localStorage (Stepbro stores the palette per app and follows the
- * system for light/dark unless told otherwise). Nothing runs at import time.
+ * remembered in localStorage; the mode can follow the system or an explicit choice. Nothing runs at import time.
  */
 
 export type ThemeMode = 'light' | 'dark' | 'system';

package/dist/chunk-2BQGFOA7.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/motion/effects.ts","../src/motion/confetti.ts"],"sourcesContent":["import { reduced } from '../core/reduced';\nimport { TIMING } from '../core/timing';\nimport { warnOnce } from '../core/types';\n\n/*\n * Play Stepbro's utility animations (css/effects/anim.css) from code: animate()\n * restarts one even when it is already playing and resolves when it ends;\n * leave() plays an exit and then removes (or hides) the element.\n */\n\nexport const ANIMATIONS = [\n  'out',\n  'out-left',\n  'out-bottom',\n  'collapse',\n  'highlight',\n  'shake',\n  'shake-strong',\n  'fade',\n  'wipe',\n  'progress-in',\n] as const;\nexport type AnimationName = (typeof ANIMATIONS)[number];\nexport type ExitName = 'out' | 'out-left' | 'out-bottom' | 'collapse';\n\nconst EXITS = new Set<AnimationName>(['out', 'out-left', 'out-bottom', 'collapse']);\n\nexport interface AnimateOptions {\n  signal?: AbortSignal;\n}\n\nexport function animate(el: Element, name: AnimationName, { signal }: AnimateOptions = {}): Promise<void> {\n  const className = `mk-anim-${name}`;\n  if (!ANIMATIONS.includes(name)) {\n    warnOnce(`animate: unknown animation \"${String(name)}\" (use ${ANIMATIONS.join(', ')})`);\n    return Promise.resolve();\n  }\n  if (reduced()) return Promise.resolve();\n  const element = el as HTMLElement;\n  if (name === 'collapse') element.style.setProperty('--mk-collapse-from', `${element.offsetHeight}px`);\n  // Off, reflow, on: the browser starts the animation over.\n  element.classList.remove(className);\n  void element.offsetWidth;\n  element.classList.add(className);\n  return new Promise((resolve) => {\n    const finish = (keep: boolean) => {\n      element.removeEventListener('animationend', onEnd);\n      signal?.removeEventListener('abort', onAbort);\n      clearTimeout(timer);\n      if (!keep) element.classList.remove(className);\n      resolve();\n    };\n    const onEnd = (event: Event) => {\n      if ((event as AnimationEvent).animationName === `mk-${name}`) finish(EXITS.has(name));\n    };\n    const onAbort = () => finish(false);\n    element.addEventListener('animationend', onEnd);\n    signal?.addEventListener('abort', onAbort, { once: true });\n    const timer = setTimeout(() => finish(EXITS.has(name)), TIMING.effects[name] * 1000 + 100);\n    if (signal?.aborted) onAbort();\n  });\n}\n\nexport interface LeaveOptions {\n  /** Remove the element (default) or hide it. */\n  remove?: boolean;\n}\n\nexport async function leave(el: Element, name: ExitName, { remove = true }: LeaveOptions = {}): Promise<void> {\n  const focused = el.contains(document.activeElement) ? (document.activeElement as HTMLElement) : null;\n  await animate(el, name);\n  focused?.blur();\n  if (remove) {\n    el.remove();\n    return;\n  }\n  (el as HTMLElement).hidden = true;\n  el.classList.remove(`mk-anim-${name}`);\n  (el as HTMLElement).style.removeProperty('--mk-collapse-from');\n  if (el.getAttribute('style') === '') el.removeAttribute('style');\n}\n","import { reduced } from '../core/reduced';\nimport { TIMING } from '../core/timing';\n\n/*\n * Dousan's success confetti: 45 paper pieces burst from a point (2–8 px a\n * frame, a little upward), fall with gravity .15, slow by .98 a frame, spin and\n * fade (.015–.03 a frame). Physics per 60 fps frame, scaled by the real frame\n * time. The canvas is decorative and removes itself when the last piece fades.\n */\n\nexport interface ConfettiOptions {\n  count?: number;\n  /** Default: the theme's primary, tertiary, secondary and containers. */\n  colors?: string[];\n  /** Draw inside this (positioned) element instead of over the whole window. */\n  container?: HTMLElement | null;\n}\n\nexport interface ConfettiHandle {\n  stop(): void;\n  finished: Promise<void>;\n}\n\nconst FALLBACK = ['#3DDC84', '#A3E8C1', '#E8D0A3', '#1A73E8', '#8AB4F8'];\nconst ROLES = ['primary', 'tertiary', 'secondary', 'primary-container', 'tertiary-container'];\nconst between = ([min, max]: readonly [number, number]) => min + Math.random() * (max - min);\n\nfunction themeColors(from: Element) {\n  const style = getComputedStyle(from);\n  const colors = ROLES.map((role) => style.getPropertyValue(`--md-sys-color-${role}`).trim()).filter(Boolean);\n  return colors.length ? colors : FALLBACK;\n}\n\nexport function confetti(origin?: Element | { x: number; y: number } | null, options: ConfettiOptions = {}): ConfettiHandle {\n  const idle: ConfettiHandle = { stop() {}, finished: Promise.resolve() };\n  if (typeof document === 'undefined' || reduced()) return idle;\n  const canvas = document.createElement('canvas');\n  const context = canvas.getContext('2d');\n  if (!context) return idle;\n  const config = TIMING.confetti;\n  const container = options.container ?? null;\n  const box = container ? container.getBoundingClientRect() : { left: 0, top: 0, width: innerWidth, height: innerHeight };\n  const ratio = window.devicePixelRatio || 1;\n  canvas.width = Math.max(1, Math.round(box.width * ratio));\n  canvas.height = Math.max(1, Math.round(box.height * ratio));\n  canvas.setAttribute('aria-hidden', 'true');\n  canvas.dataset.mkConfetti = '';\n  Object.assign(canvas.style, {\n    position: container ? 'absolute' : 'fixed',\n    inset: '0',\n    width: container ? '100%' : '100vw',\n    height: container ? '100%' : '100vh',\n    zIndex: '2147483647',\n    pointerEvents: 'none',\n  });\n  context.scale(ratio, ratio);\n\n  let x = box.width / 2;\n  let y = box.height / 2;\n  if (origin instanceof Element) {\n    const rect = origin.getBoundingClientRect();\n    x = rect.left + rect.width / 2 - box.left;\n    y = rect.top + rect.height / 2 - box.top;\n  } else if (origin) {\n    x = origin.x - box.left;\n    y = origin.y - box.top;\n  }\n  const colors = options.colors?.length\n    ? options.colors\n    : themeColors(origin instanceof Element ? origin : (container ?? document.documentElement));\n  const pieces = Array.from({ length: options.count ?? config.count }, () => {\n    const angle = Math.random() * Math.PI * 2;\n    const speed = between(config.speed);\n    return {\n      x,\n      y,\n      vx: Math.cos(angle) * speed,\n      vy: Math.sin(angle) * speed - config.lift,\n      radius: between(config.radius),\n      color: colors[Math.floor(Math.random() * colors.length)]!,\n      alpha: 1,\n      decay: between(config.decay),\n      rotation: Math.random() * 360,\n      spin: (Math.random() * 2 - 1) * config.spin,\n    };\n  });\n\n  let frame = 0;\n  let last = 0;\n  let stopped = false;\n  let resolve!: () => void;\n  const finished = new Promise<void>((done) => (resolve = done));\n  const stop = () => {\n    if (stopped) return;\n    stopped = true;\n    cancelAnimationFrame(frame);\n    canvas.remove();\n    resolve();\n  };\n  const draw = (now: number) => {\n    const f = last ? Math.min((now - last) / (1000 / 60), 3) : 1;\n    last = now;\n    context.clearRect(0, 0, box.width, box.height);\n    let alive = false;\n    const drag = Math.pow(config.drag, f);\n    for (const piece of pieces) {\n      if (piece.alpha <= 0) continue;\n      alive = true;\n      piece.x += piece.vx * f;\n      piece.y += piece.vy * f;\n      piece.vy += config.gravity * f;\n      piece.vx *= drag;\n      piece.vy *= drag;\n      piece.alpha -= piece.decay * f;\n      piece.rotation += piece.spin * f;\n      context.save();\n      context.translate(piece.x, piece.y);\n      context.rotate((piece.rotation * Math.PI) / 180);\n      context.globalAlpha = Math.max(0, piece.alpha);\n      context.fillStyle = piece.color;\n      context.fillRect(-piece.radius, -piece.radius / 2, piece.radius * 2, piece.radius);\n      context.restore();\n    }\n    if (alive && !stopped) frame = requestAnimationFrame(draw);\n    else stop();\n  };\n  (container ?? document.body).append(canvas);\n  frame = requestAnimationFrame(draw);\n  return { stop, finished };\n}\n"],"mappings":"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","names":[]}