@yewdiel21/motion-kit 0.9.1 → 0.10.0

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/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;
+}