@yewdiel21/motion-kit 0.9.0 → 0.10.0

package/src/recipes/joined-cta/create-joined-cta.ts

@@ -0,0 +1,22 @@
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+
+export interface JoinedCtaOptions { duration?: number; }
+export interface JoinedCtaInstance extends Instance { expand(): void; collapse(): void; readonly expanded: boolean; }
+
+/** Silvia's three contact capsules joining into one. Motion is entirely CSS. */
+export function createJoinedCta(root: HTMLElement | null, options: JoinedCtaOptions = {}): JoinedCtaInstance {
+  if (!root) return inert({ expand() {}, collapse() {}, expanded: false });
+  const scope = createScope();
+  let expanded = false;
+  let pointer = false;
+  scope.attr(root, 'style', root.getAttribute('style'));
+  scope.attr(root, 'data-mk-ready', '');
+  if (Number.isFinite(options.duration)) root.style.setProperty('--mk-joined-duration', `${Math.max(0, options.duration!)}s`);
+  const set = (value: boolean) => { if (!scope.disposed) { expanded = value; scope.attr(root, 'data-mk-expanded', value ? '' : null); } };
+  scope.on(root, 'pointerenter', () => { pointer = true; set(true); });
+  scope.on(root, 'pointerleave', () => { pointer = false; if (!root.contains(document.activeElement)) set(false); });
+  scope.on(root, 'focusin', () => set(true));
+  scope.on(root, 'focusout', (event) => { if (!pointer && !root.contains((event as FocusEvent).relatedTarget as Node | null)) set(false); });
+  return { expand: () => set(true), collapse: () => set(false), get expanded() { return expanded; }, destroy: () => scope.dispose() };
+}

package/src/recipes/joined-cta/joined-cta.css

@@ -0,0 +1,17 @@
+.mk-joined-cta { --mk-joined-duration: .5s; --mk-joined-bg: var(--mk-text); --mk-joined-color: var(--mk-bg); position: relative; display: inline-flex; align-items: center; justify-content: center; width: 17.7rem; height: 5.9rem; max-width: 100%; border: 0; padding: 0; background: transparent; text-decoration: none; color: var(--mk-joined-color); cursor: pointer; font: inherit; isolation: isolate; border-radius: var(--mk-radius-full); }
+.mk-joined-cta::before { content: ''; position: absolute; left: 0; width: 7.3rem; height: 5.9rem; border-radius: 100px; background: var(--mk-joined-bg); z-index: -1; transition: width var(--mk-joined-duration) ease-in-out; }
+.mk-joined-cta > span { position: relative; display: grid; place-items: center; flex-shrink: 0; background: var(--mk-joined-bg); border-radius: 100px; height: 5.9rem; transition: left var(--mk-joined-duration) ease-in-out, height var(--mk-joined-duration) ease-in-out, transform var(--mk-joined-duration) ease-in-out, background var(--mk-joined-duration); }
+.mk-joined-cta > span:nth-child(1) { width: 7.3rem; left: 0; }
+.mk-joined-cta > span:nth-child(2) { width: 4.5rem; left: 0; z-index: 2; }
+.mk-joined-cta > span:nth-child(3) { width: 5.9rem; height: 3.05rem; left: -1.45rem; transform: rotate(-90deg); }
+.mk-joined-cta:is(:hover,:focus-visible,[data-mk-expanded])::before { width: 17.7rem; }
+.mk-joined-cta:is(:hover,:focus-visible,[data-mk-expanded]) > span:nth-child(1) { left: 3.2rem; }
+.mk-joined-cta:is(:hover,:focus-visible,[data-mk-expanded]) > span:nth-child(2) { left: -.75rem; background: transparent; }
+.mk-joined-cta:is(:hover,:focus-visible,[data-mk-expanded]) > span:nth-child(3) { left: -3.65rem; height: 5.9rem; transform: rotate(0); }
+.mk-joined-cta:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 5px; }
+@media (hover: none), (max-width: 420px) {
+  .mk-joined-cta { width: auto; height: auto; padding: 1.25rem 2rem; gap: .3em; background: var(--mk-joined-bg); }
+  .mk-joined-cta::before { display: none; }
+  .mk-joined-cta > span:nth-child(n) { width: auto; height: auto; left: 0; transform: none; background: transparent; }
+}
+@media (prefers-reduced-motion: reduce) { .mk-joined-cta::before, .mk-joined-cta > span { transition: none; } }

package/src/recipes/letters/README.md

@@ -5,13 +5,11 @@ Letras que juegan:
 - **`scale`**: al pasar el ratón por la palabra cada letra crece (`scale 1.3`, sube 5 px) con un resorte con rebote (Motion 300/10), 30 ms después de la anterior; vuelve igual al salir.
 - **`blink`**: cada letra pasa a un color pastel y vuelve (0.6 s, `ease-in-out`) con retardos desordenados (.1, .6, .2, 1, .4, 1.2, .15, .8, .3 s), dos veces. Arranca 0.6 s después de crearse y al pasar el ratón.
 
-Origen: Dousan Miao, el titular de la portada («impactful»: `hero-letters-blink`, `hero-scale-letters`).
-
 ## HTML / Astro
 
 ```html
 <h1>I design <span data-mk="letters" data-mk-effect="blink">impactful</span> products</h1>
-<span data-mk="letters" data-mk-effect="scale">Dousan</span>
+<span data-mk="letters" data-mk-effect="scale">letters</span>
 ```
 
 ## React
@@ -23,7 +21,7 @@ useLetters(ref, { effect: 'blink', colors: ['#FFD6FF', '#C8B6FF'] });
 
 ## API
 
-`createLetters(el, { effect, colors, autoplay })` → `{ play(), destroy }`. `colors` por defecto: los pastel de Dousan (`#FFD6FF #E7C6FF #C8B6FF #B8C0FF #BBD0FF`).
+`createLetters(el, { effect, colors, autoplay })` → `{ play(), destroy }`. `colors` por defecto: los pastel (`#FFD6FF #E7C6FF #C8B6FF #B8C0FF #BBD0FF`).
 
 ## Accesibilidad
 

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

@@ -6,15 +6,15 @@ import { TIMING } from '../../core/timing';
 import { inert, warnOnce, type Instance } from '../../core/types';
 
 /*
- * Dousan's hero words. 'scale': on hover every letter springs up (scale 1.3,
+ * hero words. 'scale': on hover every letter springs up (scale 1.3,
  * y −5 px, Motion 300/10), 30 ms after the previous one, and back on leave.
  * 'blink': every letter flashes a pastel and returns (0.6 s, ease-in-out) with
- * Dousan's scattered delays, twice; it plays 0.6 s after start and on hover.
+ * scattered delays, twice; it plays 0.6 s after start and on hover.
  */
 
 export interface LettersOptions {
   effect?: 'scale' | 'blink';
-  /** Blink colours (default Dousan's pastels). */
+  /** Blink colours. */
   colors?: string[];
   /** Blink once 0.6 s after start (default true). */
   autoplay?: boolean;

package/src/recipes/local-clock/README.md

@@ -0,0 +1,31 @@
+# local-clock
+
+La hora de otra zona en vivo, como el «20:48 local time» del contacto de DOVV Studio. Se actualiza justo al cambiar el minuto (o el segundo, con `seconds`). En un `<time>` también mantiene el atributo `datetime`.
+
+## Vanilla / Astro
+
+```html
+<p><span class="mk-status__dot"></span> <time data-mk="local-clock" data-mk-time-zone="America/Mexico_City">--:--</time> hora local</p>
+```
+
+Con `autoInit()` las opciones van como `data-mk-<opción>`. Sin `autoInit`: `createLocalClock(el, opciones)`, que devuelve `text` y `destroy()`. El contenido inicial (por ejemplo `--:--`) se ve sin JavaScript y vuelve con `destroy()`.
+
+## React
+
+```tsx
+const ref = useRef<HTMLTimeElement>(null);
+useLocalClock(ref, { timeZone: 'America/Argentina/Buenos_Aires' });
+return <time ref={ref}>--:--</time>;
+```
+
+## Opciones
+
+| Opción | Por defecto | Qué hace |
+|---|---|---|
+| `timeZone` | la del visitante | Zona IANA |
+| `locale` | `'es'` | Idioma del formato |
+| `hour12` | `false` | 12 h con a. m./p. m. |
+| `seconds` | `false` | Mostrar y actualizar segundos |
+| `format` | — | `Intl.DateTimeFormatOptions` completo |
+
+Una zona o un idioma desconocidos usan los del visitante en lugar de fallar. No anuncia cada cambio a lectores de pantalla.

package/src/recipes/local-clock/create-local-clock.ts

@@ -0,0 +1,61 @@
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+
+/*
+ * Local clock (DOVV Studio contact: "20:48 local time"): the time in a given
+ * zone, refreshed on the minute (or the second). A <time> element also gets
+ * its datetime attribute. The text node is replaced; destroy() puts it back.
+ */
+
+export interface LocalClockOptions {
+  /** IANA zone, e.g. "America/Mexico_City". The visitor's zone by default. */
+  timeZone?: string;
+  locale?: string;
+  hour12?: boolean;
+  seconds?: boolean;
+  /** Full control over the format (overrides hour12/seconds). */
+  format?: Intl.DateTimeFormatOptions;
+}
+
+export interface LocalClockInstance extends Instance {
+  /** Text currently shown. */
+  readonly text: string;
+}
+
+export function createLocalClock(root: HTMLElement | null, options: LocalClockOptions = {}): LocalClockInstance {
+  if (!root) return inert({ text: '' });
+  const scope = createScope();
+  const original = [...root.childNodes];
+  scope.add(() => root.replaceChildren(...original));
+  scope.attr(root, 'data-mk-ready', '');
+  let formatter: Intl.DateTimeFormat;
+  try {
+    formatter = new Intl.DateTimeFormat(options.locale ?? 'es', options.format ?? {
+      hour: '2-digit',
+      minute: '2-digit',
+      ...(options.seconds ? { second: '2-digit' } : {}),
+      hour12: options.hour12 ?? false,
+      timeZone: options.timeZone,
+    });
+  } catch {
+    // Unknown zone or locale: the visitor's own.
+    formatter = new Intl.DateTimeFormat(undefined, { hour: '2-digit', minute: '2-digit', hour12: options.hour12 ?? false });
+  }
+  let text = '';
+  const isTime = root instanceof HTMLTimeElement;
+  const render = () => {
+    const now = new Date();
+    text = formatter.format(now);
+    if (root.textContent !== text) root.textContent = text;
+    if (isTime) scope.attr(root, 'datetime', now.toISOString());
+  };
+  const step = options.seconds || options.format?.second ? 1000 : 60000;
+  const schedule = () => {
+    // Land just after the next boundary so the minute flips with the system clock.
+    const wait = step - (Date.now() % step) + 20;
+    scope.timeout(() => { if (!scope.disposed) { render(); schedule(); } }, wait);
+  };
+  render();
+  schedule();
+  return { get text() { return text; }, destroy: () => scope.dispose() };
+}

package/src/recipes/marquee/README.md

@@ -2,8 +2,6 @@
 
 Una banda infinita: el primer hijo (el grupo) se copia hasta llenar la banda más una vez y cada copia se desplaza su propio tamaño en bucle lineal, sin cortes. Velocidad: 2 s por elemento del grupo (cuenta hasta 14).
 
-Origen: Siena Film Foundation, marquesina vertical de la página de película. Siena la usa en vertical; aquí el eje por defecto es horizontal (`axis: 'y'` para la de Siena).
-
 ## HTML / Astro
 
 ```html

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

@@ -4,14 +4,14 @@ import { TIMING } from '../../core/timing';
 import { inert, warnOnce, type Instance } from '../../core/types';
 
 /*
- * Siena's marquee: the first child (the group) is copied until the strip is
+ * marquee: the first child (the group) is copied until the strip is
  * full, plus one; every copy slides its own length in a linear loop, so the
  * strip never shows a seam. Speed: 2 s per item in the group (at most 14).
  * Copies are aria-hidden and inert: readers and keyboards meet the group once.
  */
 
 export interface MarqueeOptions {
-  /** 'x' (default) or 'y' (Siena's vertical strip). */
+  /** 'x' (default) or 'y'. */
   axis?: 'x' | 'y';
   /** Seconds per item. */
   speed?: number;
@@ -47,7 +47,7 @@ export function createMarquee(root: HTMLElement | null, options: MarqueeOptions
     if (!entrances()) return;
     const size = axis === 'x' ? group.offsetWidth : group.offsetHeight;
     const room = axis === 'x' ? root.clientWidth : root.clientHeight;
-    // Unmeasurable (hidden, not laid out yet): five copies, like Siena.
+    // Unmeasurable (hidden, not laid out yet): five copies.
     const count = size > 0 ? Math.max(1, Math.ceil(room / size)) + 1 : 5;
     for (let i = 0; i < count; i++) {
       const copy = group.cloneNode(true) as HTMLElement;

package/src/recipes/marquee/marquee.css

@@ -1,4 +1,4 @@
-/* marquee — Siena's strip: every copy of the group slides its own length in a linear loop. */
+/* marquee — strip: every copy of the group slides its own length in a linear loop. */
 .mk-marquee {
   display: flex;
   gap: var(--mk-marquee-gap, 0px);

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

@@ -1,13 +1,11 @@
 # mask-text
 
-El texto sale de su máscara: cada línea (o palabra, o letra) vive en un recorte y sube desde abajo (`yPercent 100 → 0`, 1.2 s `expo.out`, retardo 0.1 s, 20 ms entre piezas) cuando el 80 % del bloque está en pantalla. Al salir de la pantalla vuelve a esconderse, así que se repite cada vez que regresa (salvo `once`). SplitText lo vuelve a partir al cambiar el tamaño o al cargar la fuente, algo que OFFFICE no hacía.
-
-Origen: OFFFICE (offficestud.io) `masked-type`; Siena usa el mismo gesto en los títulos de película partiendo de 120 %.
+El texto sale de su máscara: cada línea (o palabra, o letra) vive en un recorte y sube desde abajo (`yPercent 100 → 0`, 1.2 s `expo.out`, retardo 0.1 s, 20 ms entre piezas) cuando el 80 % del bloque está en pantalla. Al salir de la pantalla vuelve a esconderse, así que se repite cada vez que regresa (salvo `once`). SplitText lo vuelve a partir al cambiar el tamaño o al cargar la fuente.
 
 ## HTML / Astro
 
 ```html
-<h2 data-mk="mask-text">Office for future furnishing</h2>
+<h2 data-mk="mask-text">Texto que aparece desde su máscara</h2>
 <p data-mk="mask-text" data-mk-by="words" data-mk-once>Texto que entra palabra a palabra.</p>
 <h1 data-mk="mask-text" data-mk-y="120" data-mk-trigger="load">Savoy</h1>
 ```
@@ -32,7 +30,7 @@ const text = useMaskText(ref, { by: 'lines' });
 | `trigger` | `'scroll'` | `'load'`, `'manual'` |
 | `once` | `false` | no vuelve a esconderse al salir |
 
-`hide()` es la salida de OFFFICE: todas bajan a su recorte con 2 ms entre piezas.
+`hide()` es la salida: todas bajan a su recorte con 2 ms entre piezas.
 
 ## Accesibilidad
 

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

@@ -5,7 +5,7 @@ import { shows, thresholds } from '../../core/visible';
 import { inert, warnOnce, type Instance } from '../../core/types';
 
 /*
- * OFFFICE's masked type (and Siena's case titles): the text is split into lines,
+ * masked type: the text is split into lines,
  * words or letters, each inside its own clip, and rises from below it
  * (yPercent 100 → 0, 1.2 s expo.out, 0.1 s delay, 20 ms apart) once 80 % of it
  * is on screen. It hides again when it leaves the screen (unless `once`), so it
@@ -14,7 +14,7 @@ import { inert, warnOnce, type Instance } from '../../core/types';
 
 export interface MaskTextOptions {
   by?: 'lines' | 'words' | 'chars';
-  /** Start offset in % of each piece (Siena's case titles: 120). */
+  /** Start offset in % of each piece. */
   y?: number;
   duration?: number;
   ease?: string;
@@ -22,13 +22,13 @@ export interface MaskTextOptions {
   stagger?: number;
   /** 'scroll' (default) plays when 80 % is visible; 'load' now; 'manual' waits for play(). */
   trigger?: 'scroll' | 'load' | 'manual';
-  /** Play once and stay (OFFFICE's data-a-mod). */
+  /** Play once and stay. */
   once?: boolean;
 }
 
 export interface MaskTextInstance extends Instance {
   play(): void;
-  /** OFFFICE's exit: back down into the clips, 2 ms apart. */
+  /** exit: back down into the clips, 2 ms apart. */
   hide(): void;
   readonly split: SplitText | null;
 }

package/src/recipes/parallax/README.md

@@ -1,8 +1,6 @@
 # parallax
 
-La foto se mueve dentro de su marco mientras el marco cruza la pantalla: escalada a 1.2 (1.3 con `amount` distinto de 1, salvo en el móvil), viaja de −10 % a +10 % de su altura × `amount`. Sigue al scroll de la página sin retraso (Siena suavizaba la página entera con Lenis; con scroll nativo un suavizado propio deja la foto arrastrándose detrás del marco — `lerp: .1` si lo quieres). Una foto arriba del todo de la página cuenta desde `top top`, así que empieza en −10 %.
-
-Origen: Siena Film Foundation, fotos de las páginas de película y About (`translateY(-10·a + p·20·a %) scale(1.2)`).
+La foto se mueve dentro de su marco mientras cruza la pantalla: escala 1.2 (1.3 con `amount` distinto de 1 en escritorio), recorrido de −10 % a +10 % de su altura × `amount`. Sigue al scroll sin retraso adicional; `lerp: .1` permite suavizado opcional. Arriba de la página comienza en `top top`.
 
 ## HTML / Astro
 

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

@@ -5,7 +5,7 @@ import { TIMING } from '../../core/timing';
 import { inert, warnOnce, type Instance } from '../../core/types';
 
 /*
- * Siena's photo parallax: the frame clips, the picture inside is scaled up
+ * photo parallax: the frame clips, the picture inside is scaled up
  * (1.2, or 1.3 for a stronger amount on wide screens) and travels from −10 % to
  * +10 % of its height × amount while the frame crosses the screen (a frame at
  * the top of the page counts from "top top", so it starts at −10 %). Target:

package/src/recipes/pile/README.md

@@ -2,8 +2,6 @@
 
 Un proyecto como pila de 2–3 capas giradas que escalan con rebote al entrar en pantalla y reaccionan al hover.
 
-Origen: spencergabor.com — Overview / GridEntry.
-
 ## Vanilla / Astro
 
 ```html

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

@@ -6,7 +6,7 @@ import type { PileLayer } from './pile-math';
 export { pileLayers, type PileLayer } from './pile-math';
 
 /*
- * spencergabor.com project grid: a pile of two or three rotated layers that
+ * pile: a pile of two or three rotated layers that
  * scale in (CSS, elastic) once the pile scrolls into view. The rotations are
  * generated once with `pileLayers()` and written into the markup with
  * `pileStyle()`, so server and client render the same pile.

package/src/recipes/pile/pile-math.ts

@@ -15,7 +15,7 @@ function mulberry32(seed: number) {
   };
 }
 
-/** Spencer's stack transforms, seeded so SSR output is stable. Layer 0 is the back. */
+/** stack transforms, seeded so SSR output is stable. Layer 0 is the back. */
 export function pileLayers(count: number, seed: number): PileLayer[] {
   const rand = mulberry32(seed + 1);
   const range = (min: number, max: number) => rand() * (max - min) + min;

package/src/recipes/pile/pile.css

@@ -1,4 +1,4 @@
-/* pile — stack recipe from spencergabor.com (GridEntry) */
+/* pile — stacked card geometry */
 
 .mk-pile {
   display: grid;

package/src/recipes/pill/README.md

@@ -2,8 +2,6 @@
 
 Botón píldora con escala elástica al pasar (1.05 + sombra) y al pulsar (.95), y `.mk-stretch` para enlaces que se estiran al pasar.
 
-Origen: spencergabor.com — Button.vue.
-
 ## Vanilla / Astro
 
 ```html

package/src/recipes/pill/pill.css

@@ -1,4 +1,4 @@
-/* pill — spencergabor.com button: elastic scale and shadow */
+/* pill — pill: elastic scale and shadow */
 
 .mk-pill {
   display: inline-flex;
@@ -34,7 +34,7 @@
   }
 }
 
-/* Stretch on hover (spencergabor.com footer links) */
+/* Stretch on hover (stretch-footer links) */
 .mk-stretch {
   display: inline-block;
   transform-origin: 50% 100%;

package/src/recipes/pop/README.md

@@ -2,8 +2,6 @@
 
 Un elemento entra escalando de .7 a 1 con rebote.
 
-Origen: spencergabor.com — imágenes de proyecto.
-
 ## Vanilla / Astro
 
 ```html

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

@@ -2,7 +2,7 @@ import { gsap, ELASTIC, ScrollTrigger, registerMotion } from '../../core/gsap';
 import { entrances } from '../../core/reduced';
 import { inert, warnOnce, type Instance } from '../../core/types';
 
-/* Elastic scale-in for a single element (spencergabor.com project images, scale .7 → 1). */
+/* Elastic scale-in for a single element (scale .7 → 1). */
 
 export interface PopOptions {
   scale?: number;

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

@@ -2,8 +2,6 @@
 
 Un botón redondo cuyas opciones salen en arco con rebote; cerrado, las opciones quedan `inert`. Cierra con Escape y al pulsar fuera.
 
-Origen: spencergabor.com — selector de color.
-
 ## Vanilla / Astro
 
 ```html

package/src/recipes/radial-menu/create-radial-menu.ts

@@ -2,7 +2,7 @@ import { createScope } from '../../core/scope';
 import { inert, warnOnce, type Instance } from '../../core/types';
 
 /*
- * spencergabor.com colour picker, generalised: options fan out in an arc from a
+ * radial-menu: options fan out in an arc from a
  * round toggle (CSS trig on --mk-i), elastic, 50 ms apart. Closed options are
  * `inert`, so they are skipped by Tab and screen readers.
  */

package/src/recipes/radial-menu/radial-menu.css

@@ -1,4 +1,4 @@
-/* radial-menu — spencergabor.com colour picker, generalised. Scoped to its root:
+/* radial-menu — radial-menu. Scoped to its root:
    [data-mk-item] and [data-mk-open] are also used by other recipes and components. */
 
 [data-mk~="radial-menu"],

package/src/recipes/reflow/README.md

@@ -2,8 +2,6 @@
 
 Cuando una lista cambia (ordenar, filtrar, añadir), los elementos viajan a su nuevo lugar con un resorte (0.62 s, razón .52) y los nuevos crecen desde 94 %.
 
-Origen: Stepbro — task-layout (`layoutReflow`, `FA(.52)` en el kit).
-
 ## Vanilla / Astro
 
 ```html
@@ -15,9 +13,9 @@ Origen: Stepbro — task-layout (`layoutReflow`, `FA(.52)` en el kit).
 
 ```js
 const reflow = createReflow(lista);
-reflow.capture();      // antes de cambiar el DOM
-reordenar(lista);      // tu cambio
-reflow.play();         // después
+reflow.capture(); // antes de cambiar el DOM
+reordenar(lista); // tu cambio
+reflow.play(); // después
 ```
 
 `data-flip-id` estable empareja cada elemento con su posición anterior. No pongas los elementos en `position: absolute`.

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

@@ -4,7 +4,7 @@ import { TIMING } from '../../core/timing';
 import { captureLayout, reflowLayout, type CapturedLayout } from '../../motion/layout';
 
 /*
- * Stepbro's layout reflow on a list: call `capture()` before changing the DOM
+ * layout reflow on a list: call `capture()` before changing the DOM
  * and `play()` after it; moved items travel on a spring and new ones grow in.
  * Give items a stable `data-flip-id` so moves pair up.
  */

package/src/recipes/repel-bento/README.md

@@ -1,6 +1,6 @@
 # repel-bento
 
-Bento con entrada spring y repulsión de tarjetas vecinas (Dousan).
+Bento con entrada spring y repulsión de tarjetas vecinas.
 
 ```html
 <div class="mk-repel-bento" data-mk="repel-bento"><article>Uno</article><article>Dos</article></div>
@@ -14,8 +14,8 @@ const instance = createRepelBento(root);
 instance.destroy();
 ```
 
-`distance` máximo 30 px; `breakpoint` 1024. Entrada con spring 60/15 y desfase .006 s; repulsión de vecinos min(5000/distancia,30) con spring 300/25. `play()` repite la entrada; `reset()` vuelve al reposo. Bajo el breakpoint, puntero grueso y movimiento reducido no hay repulsión. Origen: Dousan `desktop-card-enter` y `neighbor-card-repulsion`.
+`distance` máximo 30 px; `breakpoint` 1024. Entrada con spring 60/15 y desfase .006 s; repulsión de vecinos min(5000/distancia,30) con spring 300/25. `play()` repite la entrada; `reset()` vuelve al reposo. Bajo el breakpoint, puntero grueso y movimiento reducido no hay repulsión.
 
 Vanilla declarativo: `autoInit(root)`. React: `useRepelBento(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/reveal/README.md

@@ -2,8 +2,6 @@
 
 Un velo del color de la superficie la cubre y se abre como una onda desde un punto; luego se desvanece. El sobrepaso de 2 hace que la apertura pase la esquina más lejana a mitad de camino, y el final queda suave.
 
-Origen: Stepbro — reveal (`reveal-wipe` en el kit; usado en la navegación, el calendario y la hora). Velocidades `fast` 0.5/0.25 s, `normal` 0.7/0.35, `slow` 1.05/0.5, `slower` 1.6/0.75 (recorrido/fundido), `power2.out` y fundido `power1.out`.
-
 ## Vanilla / Astro
 
 ```html

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

@@ -3,7 +3,7 @@ import { inert, warnOnce, type Instance } from '../../core/types';
 import { revealFrom, type RevealHandle, type RevealSpeed } from '../../motion/reveal';
 
 /*
- * Stepbro's reveal on an element: a veil in its own colour opens like a wave
+ * reveal on an element: a veil in its own colour opens like a wave
  * from the origin (an element, else the last pointer position, else the centre).
  */
 

package/src/recipes/rotator/README.md

@@ -1,6 +1,6 @@
 # rotator
 
-Rotador de testimonios con autoplay, pausa al enfocar y controles manuales (Dousan).
+Rotador de testimonios con autoplay, pausa al enfocar y controles manuales.
 
 ```html
 <div class="mk-rotator" data-mk="rotator"><blockquote>Uno</blockquote><blockquote>Dos</blockquote></div>
@@ -14,8 +14,8 @@ const instance = createRotator(root);
 instance.destroy();
 ```
 
-`interval` 8000 ms, `autoplay` true, `index` 0, `onChange(index)`. `select(index)`, `next()`, `previous()`, `index`. Pausa al señalar, enfocar o esconder la pestaña; los controles reinician el intervalo. Solo la pieza activa es visible y accesible. Entrada opacity/y 5 a 0, .25 s. Origen: testimonios de Dousan.
+`interval` 8000 ms, `autoplay` true, `index` 0, `onChange(index)`. `select(index)`, `next()`, `previous()`, `index`. Pausa al señalar, enfocar o esconder la pestaña; los controles reinician el intervalo. Solo la pieza activa es visible y accesible. Entrada opacity/y 5 a 0, .25 s.
 
 Vanilla declarativo: `autoInit(root)`. React: `useRotator(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/scroll-dock/README.md

@@ -0,0 +1,46 @@
+# scroll-dock
+
+La navegación rápida de DOVV Studio: una cápsula invertida fija abajo y al centro. Aparece cuando el scroll pasa de 0.6 alturas de ventana y se esconde cuando el footer llega a 40 px del borde inferior. Sube desde `translateY(140%)` en 0.6 s `cubic-bezier(.32,1.25,.5,1)`, un resorte con un poco de rebote, y su opacidad cambia en 0.3 s.
+
+## Vanilla / Astro
+
+```html
+<nav class="mk-scroll-dock" data-mk="scroll-dock" data-mk-hide-when="footer" aria-label="Navegación rápida">
+  <a href="#proyectos">Proyectos</a>
+  <a href="#proceso">Cómo trabajamos</a>
+  <a href="#precios">Precios</a>
+  <a href="#contacto">Contacto</a>
+</nav>
+```
+
+Con `autoInit()` las opciones van como `data-mk-<opción>` (`data-mk-threshold`, `data-mk-hide-when`, `data-mk-hide-offset`). Sin `autoInit`: `createScrollDock(el, opciones)`, que devuelve `visible`, `update()` y `destroy()`. Cada cambio emite `mk:change` con `{ visible }`.
+
+## React
+
+```tsx
+const ref = useRef<HTMLElement>(null);
+useScrollDock(ref, { hideWhen: 'footer' });
+return <nav ref={ref} className="mk-scroll-dock" aria-label="Navegación rápida">…</nav>;
+```
+
+## Opciones
+
+| Opción | Por defecto | Qué hace |
+|---|---|---|
+| `threshold` | `0.6` | Scroll mínimo, en alturas de ventana |
+| `hideWhen` | — | Elemento o selector que la esconde al llegar abajo |
+| `hideOffset` | `40` | px antes del borde inferior |
+| `scroller` | `window` | Contenedor con scroll propio (elemento o selector, buscado desde la cápsula hacia arriba) |
+| `onChange(visible)` | — | Al aparecer o esconderse |
+
+Dentro de un contenedor con scroll propio, añade `.mk-scroll-dock--sticky` y pasa `scroller`. Así queda pegada al borde inferior del contenedor en vez de al de la ventana. Ponla como último hijo del contenido. No ocupa sitio: se superpone a la última sección, como la versión fija, así que no deja una franja vacía al final.
+
+## Variables CSS
+
+`--mk-scroll-dock-bottom` (24 px) y `--mk-scroll-dock-height` (58 px, 64 px en móvil; sólo la usa `--sticky`; cámbiala si cambias el alto de los botones).
+
+En pantallas de 680 px o menos los botones pasan a pestañas (icono sobre etiqueta, 11 px), así caben cuatro o cinco en un teléfono. Si aun así no caben, la cápsula se desplaza por dentro y nunca desborda la página.
+
+## Accesibilidad
+
+Los enlaces siguen en el orden de tabulación. Si reciben foco con la cápsula escondida, `:focus-within` la muestra. Con movimiento reducido sólo cambia la opacidad.

package/src/recipes/scroll-dock/create-scroll-dock.ts

@@ -0,0 +1,72 @@
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+
+/*
+ * Scroll dock (DOVV Studio quick navigation): a floating capsule that rises
+ * once the page is scrolled past `threshold` viewports and sinks again when
+ * `hideWhen` (the footer) comes within `hideOffset` px of the bottom edge.
+ * The rise is CSS: translateY 140 % → 0 in .6 s cubic-bezier(.32,1.25,.5,1),
+ * opacity .3 s. Keyboard focus inside shows it whatever the scroll.
+ */
+
+export interface ScrollDockOptions {
+  /** Scroll distance before it shows, in viewport heights. */
+  threshold?: number;
+  /** Element (or selector) that sends it away when it reaches the viewport bottom. */
+  hideWhen?: Element | string | null;
+  /** px above the bottom edge at which `hideWhen` counts as reached. */
+  hideOffset?: number;
+  /** Scrolling element (or selector, looked up from the dock outwards); the window by default. */
+  scroller?: HTMLElement | string | null;
+  onChange?: (visible: boolean) => void;
+}
+
+export interface ScrollDockInstance extends Instance {
+  readonly visible: boolean;
+  /** Re-read the scroll position (after layout changes). */
+  update(): void;
+}
+
+export function createScrollDock(root: HTMLElement | null, options: ScrollDockOptions = {}): ScrollDockInstance {
+  if (!root) return inert({ visible: false, update() {} });
+  const scope = createScope();
+  const threshold = Number.isFinite(options.threshold) ? Math.max(0, options.threshold!) : 0.6;
+  const hideOffset = Number.isFinite(options.hideOffset) ? options.hideOffset! : 40;
+  const scroller = typeof options.scroller === 'string'
+    ? root.closest<HTMLElement>(options.scroller) ?? document.querySelector<HTMLElement>(options.scroller)
+    : options.scroller ?? null;
+  const hideTarget = () => (typeof options.hideWhen === 'string' ? document.querySelector(options.hideWhen) : options.hideWhen ?? null);
+  let visible = false;
+  let queued = false;
+  scope.attr(root, 'data-mk-ready', '');
+
+  const update = () => {
+    queued = false;
+    if (scope.disposed) return;
+    const offset = scroller ? scroller.scrollTop : window.scrollY;
+    const viewport = scroller ? scroller.clientHeight : window.innerHeight;
+    const bottom = scroller ? scroller.getBoundingClientRect().bottom : window.innerHeight;
+    const end = hideTarget();
+    const reachedEnd = end ? end.getBoundingClientRect().top < bottom - hideOffset : false;
+    const next = offset > viewport * threshold && !reachedEnd;
+    if (next === visible) return;
+    visible = next;
+    scope.attr(root, 'data-mk-visible', next ? '' : null);
+    options.onChange?.(next);
+    root.dispatchEvent(new CustomEvent('mk:change', { bubbles: true, detail: { visible: next } }));
+  };
+  const queue = () => {
+    if (queued) return;
+    queued = true;
+    requestAnimationFrame(update);
+  };
+  scope.on(scroller ?? window, 'scroll', queue, { passive: true });
+  scope.on(window, 'resize', queue, { passive: true });
+  update();
+
+  return {
+    get visible() { return visible; },
+    update,
+    destroy: () => scope.dispose(),
+  };
+}