@yewdiel21/motion-kit 0.9.0 → 0.10.0

package/src/react/use-frame-zoom.ts

@@ -4,6 +4,6 @@ import type { DependencyList, RefObject } from 'react';
 import { useRecipe } from './use-recipe';
 import { createFrameZoom, type FrameZoomOptions } from '../recipes/frame-zoom/create-frame-zoom';
 
-/** Siena's video mask: frame and picture scale in opposite directions. */
+/** video mask: frame and picture scale in opposite directions. */
 export const useFrameZoom = (ref: RefObject<HTMLElement | null>, options?: FrameZoomOptions, deps?: DependencyList) =>
   useRecipe(ref, createFrameZoom, options, deps);

package/src/react/use-image-zoom.ts

@@ -0,0 +1,5 @@
+'use client';
+import type { RefObject, DependencyList } from 'react';
+import { useRecipe } from './use-recipe';
+import { createImageZoom, type ImageZoomOptions } from '../recipes/image-zoom/create-image-zoom';
+export const useImageZoom = (ref: RefObject<HTMLElement | null>, options?: ImageZoomOptions, deps?: DependencyList) => useRecipe(ref, createImageZoom, options, deps);

package/src/react/use-joined-cta.ts

@@ -0,0 +1,5 @@
+'use client';
+import type { RefObject, DependencyList } from 'react';
+import { useRecipe } from './use-recipe';
+import { createJoinedCta, type JoinedCtaOptions } from '../recipes/joined-cta/create-joined-cta';
+export const useJoinedCta = (ref: RefObject<HTMLElement | null>, options?: JoinedCtaOptions, deps?: DependencyList) => useRecipe(ref, createJoinedCta, options, deps);

package/src/react/use-letters.ts

@@ -4,6 +4,6 @@ import type { DependencyList, RefObject } from 'react';
 import { useRecipe } from './use-recipe';
 import { createLetters, type LettersOptions } from '../recipes/letters/create-letters';
 
-/** Dousan's hero letters (scale on hover or pastel blink). */
+/** hero letters (scale on hover or pastel blink). */
 export const useLetters = (ref: RefObject<HTMLElement | null>, options?: LettersOptions, deps?: DependencyList) =>
   useRecipe(ref, createLetters, options, deps);

package/src/react/use-local-clock.ts

@@ -0,0 +1,5 @@
+'use client';
+import type { RefObject, DependencyList } from 'react';
+import { useRecipe } from './use-recipe';
+import { createLocalClock, type LocalClockOptions } from '../recipes/local-clock/create-local-clock';
+export const useLocalClock = (ref: RefObject<HTMLElement | null>, options?: LocalClockOptions, deps?: DependencyList) => useRecipe(ref, createLocalClock, options, deps);

package/src/react/use-marquee.ts

@@ -4,6 +4,6 @@ import type { DependencyList, RefObject } from 'react';
 import { useRecipe } from './use-recipe';
 import { createMarquee, type MarqueeOptions } from '../recipes/marquee/create-marquee';
 
-/** Siena's seamless marquee. */
+/** seamless marquee. */
 export const useMarquee = (ref: RefObject<HTMLElement | null>, options?: MarqueeOptions, deps?: DependencyList) =>
   useRecipe(ref, createMarquee, options, deps);

package/src/react/use-mask-text.ts

@@ -4,6 +4,6 @@ import type { DependencyList, RefObject } from 'react';
 import { useRecipe } from './use-recipe';
 import { createMaskText, type MaskTextOptions } from '../recipes/mask-text/create-mask-text';
 
-/** Masked lines / words / letters rising into view (OFFFICE). */
+/** Masked lines / words / letters rising into view. */
 export const useMaskText = (ref: RefObject<HTMLElement | null>, options?: MaskTextOptions, deps?: DependencyList) =>
   useRecipe(ref, createMaskText, options, deps);

package/src/react/use-parallax.ts

@@ -4,6 +4,6 @@ import type { DependencyList, RefObject } from 'react';
 import { useRecipe } from './use-recipe';
 import { createParallax, type ParallaxOptions } from '../recipes/parallax/create-parallax';
 
-/** Siena's photo parallax inside its frame. */
+/** photo parallax inside its frame. */
 export const useParallax = (ref: RefObject<HTMLElement | null>, options?: ParallaxOptions, deps?: DependencyList) =>
   useRecipe(ref, createParallax, options, deps);

package/src/react/use-particle-hero.ts

@@ -4,6 +4,6 @@ import type { DependencyList, RefObject } from 'react';
 import { useRecipe } from './use-recipe';
 import { createParticleHero, type ParticleHeroOptions } from '../gl/particle-hero/create-particle-hero';
 
-/** iyo.ai's particle hero (WebGL2, Canvas2D fallback). The canvas joins the ref's element. */
+/** particle hero (WebGL2, Canvas2D fallback). The canvas joins the ref's element. */
 export const useParticleHero = (ref: RefObject<HTMLElement | null>, options?: ParticleHeroOptions, deps?: DependencyList) =>
   useRecipe(ref, createParticleHero, options, deps);

package/src/react/use-scroll-dock.ts

@@ -0,0 +1,5 @@
+'use client';
+import type { RefObject, DependencyList } from 'react';
+import { useRecipe } from './use-recipe';
+import { createScrollDock, type ScrollDockOptions } from '../recipes/scroll-dock/create-scroll-dock';
+export const useScrollDock = (ref: RefObject<HTMLElement | null>, options?: ScrollDockOptions, deps?: DependencyList) => useRecipe(ref, createScrollDock, options, deps);

package/src/react/use-snap-strip.ts

@@ -4,6 +4,6 @@ import type { DependencyList, RefObject } from 'react';
 import { useRecipe } from './use-recipe';
 import { createSnapStrip, type SnapStripOptions } from '../recipes/snap-strip/create-snap-strip';
 
-/** iyo.ai's phone cards: an autoplaying scroll-snap strip. */
+/** phone cards: an autoplaying scroll-snap strip. */
 export const useSnapStrip = (ref: RefObject<HTMLElement | null>, options?: SnapStripOptions, deps?: DependencyList) =>
   useRecipe(ref, createSnapStrip, options, deps);

package/src/react/use-sticker.ts

@@ -0,0 +1,5 @@
+'use client';
+import type { RefObject, DependencyList } from 'react';
+import { useRecipe } from './use-recipe';
+import { createSticker, type StickerOptions } from '../recipes/sticker/create-sticker';
+export const useSticker = (ref: RefObject<HTMLElement | null>, options?: StickerOptions, deps?: DependencyList) => useRecipe(ref, createSticker, options, deps);

package/src/react/use-studio-dock.ts

@@ -0,0 +1,8 @@
+'use client';
+import type { DependencyList, RefObject } from 'react';
+import { useLatest, useRecipe } from './use-recipe';
+import { createStudioDock, type StudioDockOptions } from '../components/studio-dock/engine';
+export function useStudioDock(ref: RefObject<HTMLElement | null>, options: StudioDockOptions = {}, deps?: DependencyList) {
+  const change = useLatest(options.onChange);
+  return useRecipe(ref, createStudioDock, { ...options, onChange: state => change.current?.(state) }, deps);
+}

package/src/react/use-text-roll.ts

@@ -4,6 +4,6 @@ import type { DependencyList, RefObject } from 'react';
 import { useRecipe } from './use-recipe';
 import { createTextRoll, type TextRollOptions } from '../recipes/text-roll/create-text-roll';
 
-/** Siena's slot title. `.current.play()` spins it. */
+/** slot title. `.current.play()` spins it. */
 export const useTextRoll = (ref: RefObject<HTMLElement | null>, options?: TextRollOptions, deps?: DependencyList) =>
   useRecipe(ref, createTextRoll, options, deps);

package/src/react/use-thumbnail-nav.ts

@@ -0,0 +1,7 @@
+'use client';
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createThumbnailNav, type ThumbnailNavOptions } from '../recipes/thumbnail-nav/create-thumbnail-nav';
+
+export const useThumbnailNav = (ref: RefObject<HTMLElement | null>, options?: ThumbnailNavOptions, deps?: DependencyList) =>
+  useRecipe(ref, createThumbnailNav, options, deps);

package/src/react/use-trailer.ts

@@ -0,0 +1,6 @@
+'use client';
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createTrailer, type TrailerOptions } from '../components/trailer/engine';
+export const useTrailer = (ref: RefObject<HTMLElement | null>, options?: TrailerOptions, deps?: DependencyList) =>
+  useRecipe(ref, createTrailer, options, deps);

package/src/react/use-weight-hover.ts

@@ -0,0 +1,5 @@
+'use client';
+import type { RefObject, DependencyList } from 'react';
+import { useRecipe } from './use-recipe';
+import { createWeightHover, type WeightHoverOptions } from '../recipes/weight-hover/create-weight-hover';
+export const useWeightHover = (ref: RefObject<HTMLElement | null>, options?: WeightHoverOptions, deps?: DependencyList) => useRecipe(ref, createWeightHover, options, deps);

package/src/recipes/action-button/README.md

@@ -0,0 +1,31 @@
+# action-button
+
+Botones con sombra firme inspirados en Don't Look Up y etiquetas en máscara inspiradas en la ficha A24.
+
+## HTML / Astro
+
+```html
+<button class="mk-action-button" data-mk="action-button" data-mk-variant="primary">Empezar</button>
+<button class="mk-action-button" data-mk="action-button" data-mk-variant="film">
+  <span data-mk-action-label>Ver trailer ↗</span>
+</button>
+```
+
+```ts
+const button = createActionButton(element, {
+  variant: 'icon', toggle: true,
+  onPressedChange: value => console.log(value),
+});
+button.setPressed(true);
+button.destroy();
+```
+
+React: `useActionButton(ref, options, deps?)`. Conserva botones/enlaces semánticos escritos por el consumidor; la receta no ejecuta navegación ni reproduce sonidos. Variantes: `primary`, `secondary`, `icon`, `stepper`, `film`. Las variantes también pueden usarse sólo con CSS mediante `data-mk-action-variant`; `film` necesita el motor para duplicar su etiqueta marcada.
+
+## Movimiento / accesibilidad
+
+Press 130ms ease-out, color150ms ease. Hover baja3px y reduce sombra; active5×6px. Film usa clip.4s/translate.35s/scale.3s y copia retrasada75ms. Es una adaptación reusable; no reproduce todos los overrides particulares del juego original ni su lógica económica.
+
+`toggle` es opt-in y usa `aria-pressed`; controles disabled y `aria-disabled` no cambian el estado. Un icono necesita `aria-label`. La copia rolling tiene `aria-hidden`, el nodo original se conserva. Focus visible explícito. Reduced-motion elimina las transiciones y la duplicación visual; los gestos de botón siguen indicando estado. `destroy()` restaura nodos/atributos y retira listeners.
+
+Tokens: `--mk-action-ink`, `--mk-action-paper`, `--mk-action-lift`, `--mk-action-tilt`, `--mk-action-focus`, `--mk-film-font`.

package/src/recipes/action-button/action-button.css

@@ -0,0 +1,113 @@
+.mk-action-button {
+  --mk-action-ink: var(--mk-text, #171713);
+  --mk-action-paper: var(--mk-surface, #f7f5ee);
+  --mk-action-lift: 5px;
+  --mk-action-tilt: -1.2deg;
+  appearance: none;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: .6em;
+  min-height: 44px;
+  padding: .65em 1.5em;
+  border: 3px solid var(--mk-action-paper);
+  border-radius: 24px 30px 22px 28px / 30px 22px 28px 24px;
+  background: var(--mk-action-ink);
+  color: var(--mk-action-paper);
+  box-shadow: var(--mk-action-lift) calc(var(--mk-action-lift) + 1px) 0 var(--mk-action-ink);
+  transform: rotate(var(--mk-action-tilt));
+  font: 700 .85rem/1.15 var(--mk-font, sans-serif);
+  letter-spacing: .045em;
+  text-transform: uppercase;
+  text-decoration: none;
+  cursor: pointer;
+  touch-action: manipulation;
+  transition: transform 130ms ease-out, box-shadow 130ms ease-out, background-color 150ms ease, color 150ms ease, border-color 150ms ease;
+}
+.mk-action-button[data-mk-action-variant="secondary"],
+.mk-action-button[data-mk-action-variant="icon"] {
+  --mk-action-tilt: 1.1deg;
+  background: var(--mk-action-paper);
+  border-color: var(--mk-action-ink);
+  color: var(--mk-action-ink);
+}
+.mk-action-button[data-mk-action-variant="icon"] {
+  width: 44px;
+  padding: 8px;
+  border-radius: 16px 20px 15px 19px / 20px 15px 19px 16px;
+}
+.mk-action-button svg { width: 1.25em; height: 1.25em; flex: none; }
+.mk-action-button[data-mk-action-variant="stepper"] {
+  --mk-action-tilt: 0deg;
+  min-width: 44px;
+  padding: .5em;
+  border: 2px solid var(--mk-action-ink);
+  border-radius: 11px;
+  background: var(--mk-action-paper);
+  color: var(--mk-action-ink);
+  box-shadow: none;
+}
+.mk-action-button[data-mk-action-variant="film"] {
+  --mk-action-tilt: 0deg;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  box-shadow: none;
+  padding: .5em 0;
+  font-family: var(--mk-film-font, Georgia, serif);
+  font-size: 1.25rem;
+}
+.mk-action-button[data-mk-action-variant="film"]::before,
+.mk-action-button[data-mk-action-variant="film"]::after {
+  content: "";
+  position: absolute;
+  inset: 0 0 auto;
+  height: 1px;
+  background: currentColor;
+  transition: transform .4s cubic-bezier(.32,.72,0,1);
+}
+.mk-action-button[data-mk-action-variant="film"]::after { inset: auto 0 0; }
+[data-mk-action-label] { display: inline-grid; overflow: clip; }
+.mk-action-button__line, .mk-action-button__copy {
+  grid-area: 1 / 1;
+  transition: clip-path .4s cubic-bezier(.32,.72,0,1), translate .35s cubic-bezier(.32,.72,0,1), scale .3s cubic-bezier(.34,2.27,.64,1);
+}
+.mk-action-button__line { clip-path: inset(0); transform-origin: bottom; }
+.mk-action-button__copy { clip-path: inset(0 0 100%); translate: 0 -.25em; scale: 1.05; transform-origin: top; }
+@media (hover: hover) {
+  .mk-action-button:not(:disabled):not([aria-disabled="true"]):hover {
+    transform: rotate(var(--mk-action-tilt)) translate(3px, 3px);
+    box-shadow: 2px 3px 0 var(--mk-action-ink);
+  }
+  .mk-action-button:is([data-mk-action-variant="secondary"], [data-mk-action-variant="icon"], [data-mk-action-variant="stepper"]):not(:disabled):not([aria-disabled="true"]):hover {
+    background: var(--mk-action-ink);
+    border-color: var(--mk-action-paper);
+    color: var(--mk-action-paper);
+  }
+  .mk-action-button[data-mk-action-variant="stepper"]:not(:disabled):not([aria-disabled="true"]):hover { transform: none; box-shadow: none; }
+}
+.mk-action-button:not(:disabled):not([aria-disabled="true"]):active,
+.mk-action-button[aria-pressed="true"] {
+  transform: rotate(var(--mk-action-tilt)) translate(var(--mk-action-lift), calc(var(--mk-action-lift) + 1px));
+  box-shadow: 0 0 0 var(--mk-action-ink);
+}
+.mk-action-button[aria-pressed="true"] { background: var(--mk-action-ink); color: var(--mk-action-paper); }
+.mk-action-button[aria-pressed="true"]:not(:disabled):not([aria-disabled="true"]):hover { transform: rotate(var(--mk-action-tilt)) translate(var(--mk-action-lift), calc(var(--mk-action-lift) + 1px)); box-shadow: none; }
+.mk-action-button[data-mk-action-variant="stepper"]:not(:disabled):not([aria-disabled="true"]):active { transform: translateY(1px); box-shadow: none; }
+.mk-action-button[data-mk-action-variant="film"]:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) {
+  transform: scale(1.03) rotate(-.75deg);
+  box-shadow: none;
+}
+.mk-action-button[data-mk-action-variant="film"]:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) .mk-action-button__line { clip-path: inset(100% 0 0); translate: 0 .25em; scale: .95; }
+.mk-action-button[data-mk-action-variant="film"]:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) .mk-action-button__copy { clip-path: inset(0); translate: 0; scale: 1; transition-delay: 75ms; }
+.mk-action-button[data-mk-action-variant="film"]:active:not(:disabled) { transform: scale(.97); }
+.mk-action-button:focus-visible { outline: 3px solid var(--mk-action-focus, #356bdf); outline-offset: 7px; }
+.mk-action-button:disabled, .mk-action-button[aria-disabled="true"] { opacity: .35; cursor: default; }
+@media (prefers-reduced-motion: reduce) {
+  .mk-action-button, .mk-action-button *, .mk-action-button::before, .mk-action-button::after { transition: none; }
+  .mk-action-button[data-mk-action-variant="film"]:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) { transform: none; }
+  .mk-action-button[data-mk-action-variant="film"]:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) .mk-action-button__line { clip-path: none; translate: none; scale: 1; }
+  .mk-action-button__copy { display: none; }
+}

package/src/recipes/action-button/create-action-button.ts

@@ -0,0 +1,56 @@
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+
+export type ActionButtonVariant = 'primary' | 'secondary' | 'icon' | 'stepper' | 'film';
+export interface ActionButtonOptions {
+  variant?: ActionButtonVariant;
+  /** Toggle aria-pressed on activation. Ordinary action buttons leave it unset. */
+  toggle?: boolean;
+  pressed?: boolean;
+  onPressedChange?: (pressed: boolean) => void;
+}
+export interface ActionButtonInstance extends Instance {
+  setPressed(pressed: boolean): void;
+  readonly pressed: boolean;
+}
+
+/** Drawn press buttons and a masked rolling-label film variant. Uses native activation. */
+export function createActionButton(root: HTMLElement | null, options: ActionButtonOptions = {}): ActionButtonInstance {
+  if (!root) return inert({ setPressed() {}, pressed: false });
+  const scope = createScope();
+  const variant = options.variant ?? (root.getAttribute('data-mk-action-variant') as ActionButtonVariant | null) ?? 'primary';
+  scope.attr(root, 'data-mk-action-variant', variant);
+  scope.attr(root, 'data-mk-action-ready', '');
+  const label = root.querySelector<HTMLElement>('[data-mk-action-label]');
+  if (label && variant === 'film') {
+    const nodes = [...label.childNodes];
+    const line = document.createElement('span');
+    line.className = 'mk-action-button__line';
+    line.append(...nodes);
+    const copy = document.createElement('span');
+    copy.className = 'mk-action-button__copy';
+    copy.setAttribute('aria-hidden', 'true');
+    // Plain text prevents duplicate interactive controls or IDs inside the label.
+    copy.textContent = line.textContent;
+    label.append(line, copy);
+    scope.add(() => { label.replaceChildren(...nodes); });
+  }
+  let pressed = options.pressed ?? root.getAttribute('aria-pressed') === 'true';
+  if (options.toggle || options.pressed !== undefined) scope.attr(root, 'aria-pressed', String(pressed));
+  const setPressed = (next: boolean) => {
+    if (scope.disposed || next === pressed) return;
+    pressed = next;
+    scope.attr(root, 'aria-pressed', String(pressed));
+    options.onPressedChange?.(pressed);
+    root.dispatchEvent(new CustomEvent('mk:action-change', { bubbles: true, detail: { pressed } }));
+  };
+  scope.on(root, 'click', (event) => {
+    if (event.defaultPrevented) return;
+    if (root.hasAttribute('disabled') || root.getAttribute('aria-disabled') === 'true') {
+      event.preventDefault();
+      return;
+    }
+    if (options.toggle) setPressed(!pressed);
+  });
+  return { setPressed, get pressed() { return pressed; }, destroy: () => scope.dispose() };
+}

package/src/recipes/card-dock/README.md

@@ -2,7 +2,7 @@
 
 Un dock de tarjetas de cristal apiladas: las que están detrás de la del frente bajan 90 % / 180 % / 270 % (360 % la quinta) y encogen a .93 / .87 / .8 (.73). Al pasar el puntero o enfocar se despliegan hacia arriba (0.8 s `cubic-bezier(.48,.01,0,1.08)`, con un pequeño rebote), la tarjeta bajo el puntero crece de 4rem a 4.5rem (0.6 s) y su nombre sale hacia la izquierda; al salir se apilan de nuevo (0.64 s). Al cargar se ven desplegadas 1.6 s y luego se apilan y aparece el CTA.
 
-Origen: iyo.ai, dock fijo de productos de la home (`product-cards`, `PM`): cristal `blur(19px)` sobre `#38383899` (`#555555b0` al pasar), borde `#8a8a8a1a`, radio .9rem, nombres a .7rem con tracking .07em. El movimiento es CSS; la receta añade la presentación de carga, el primer toque en tabletas táctiles (768–1024 px sin hover: abre en vez de navegar), Escape y clic fuera.
+Superficie con blur de 19 px, borde sutil y radio .9rem. Incluye presentación de carga, primer toque para desplegar en tabletas sin hover, Escape y cierre al hacer clic fuera.
 
 ## HTML / Astro
 

package/src/recipes/card-dock/card-dock.css

@@ -1,5 +1,5 @@
 /*
- * iyo.ai's product dock. Cards are .mk-card-dock__item children (the last one
+ * product dock. Cards are .mk-card-dock__item children (the last one
  * is the front card); the optional .mk-card-dock__cta shows next to the stack
  * once it has settled. Without JavaScript the stack still opens on hover/focus.
  */

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

@@ -4,7 +4,7 @@ import { TIMING } from '../../core/timing';
 import { inert, warnOnce, type Instance } from '../../core/types';
 
 /*
- * iyo.ai's product dock: a stack of glass cards where the ones behind the front
+ * product dock: a stack of glass cards where the ones behind the front
  * card drop 90 % / 180 % / 270 % and shrink to .93 / .87 / .8. Hover or focus
  * spreads them out (0.8 s, cubic-bezier(.48,.01,0,1.08)), the card under the
  * pointer grows and its name slides out; leaving stacks them again (0.64 s).
@@ -13,7 +13,7 @@ import { inert, warnOnce, type Instance } from '../../core/types';
  */
 
 export interface CardDockOptions {
-  /** Milliseconds the cards stay spread out on load before stacking (iyo: 1600; 0 skips it). */
+  /** Milliseconds the cards stay spread out on load before stacking (default: 1600; 0 skips it). */
   intro?: number;
 }
 

package/src/recipes/cascade/README.md

@@ -1,8 +1,6 @@
 # cascade
 
-Un bloque que entra pieza a pieza: rayas que crecen desde un lado (alternando izquierda y derecha), textos que aparecen y líneas que suben desde su recorte. 1.2 s `expo.out`, 30 ms entre piezas, cuando el 30 % del bloque se ve (o el 30 % de la pantalla si el bloque es más alto). Al salir de la pantalla todo vuelve a su estado inicial, así que entra de nuevo al volver (salvo `once`), como el `isOut` de Siena.
-
-Origen: Siena Film Foundation, grupos `[data-a]` (`line`, `alpha`, `item`); el `fade` es también el `alpha` de OFFFICE.
+Un bloque que entra pieza a pieza: rayas que crecen desde un lado (alternando izquierda y derecha), textos que aparecen y líneas que suben desde su recorte. 1.2 s `expo.out`, 30 ms entre piezas, cuando el 30 % del bloque se ve (o el 30 % de la pantalla si el bloque es más alto). Al salir de la pantalla todo vuelve a su estado inicial, así que entra de nuevo al volver (salvo `once`).
 
 ## HTML / Astro
 

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

@@ -6,9 +6,9 @@ import { inert, warnOnce, type Instance } from '../../core/types';
 import { shows, thresholds } from '../../core/visible';
 
 /*
- * Siena's reveal group: when the block shows (30 %), its marked children enter
+ * reveal group: when the block shows (30 %), its marked children enter
  * one after another, 30 ms apart, 1.2 s expo.out — rules grow from alternating
- * sides (scaleX 0 → 1), fades appear (OFFFICE's alpha), rises come up from 200 %
+ * sides (scaleX 0 → 1), fades appear, rises come up from 200 %
  * inside their clip. When it leaves, every child goes back to its start state
  * so the block enters again next time (unless once).
  * Children: [data-mk-cascade="rule|fade|rise"].
@@ -26,7 +26,7 @@ export interface CascadeOptions {
 
 export interface CascadeInstance extends Instance {
   play(): void;
-  /** Every child back to its start state (what Siena does when the block leaves). */
+  /** Every child back to its start state. */
   reset(): void;
 }
 

package/src/recipes/contrast/README.md

@@ -2,8 +2,6 @@
 
 La cabecera cambia de tono según la sección que tiene debajo: las secciones dicen si son claras u oscuras (`data-mk-tone="light"` / `"dark"`) y la que cruza el 10 % superior de la pantalla escribe su tono en la cabecera (`data-mk-on`). Tu CSS decide los colores.
 
-Origen: Siena Film Foundation, logo que pasa a negro sobre secciones claras (`rootMargin: 0% 0% -90% 0%`).
-
 ## HTML / Astro
 
 ```html

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

@@ -2,7 +2,7 @@ import { createScope } from '../../core/scope';
 import { inert, warnOnce, type Instance } from '../../core/types';
 
 /*
- * Siena's header contrast: sections say what they are (data-mk-tone="light" or
+ * header contrast: sections say what they are (data-mk-tone="light" or
  * "dark"); the section crossing the top 10 % of the screen gives its tone to
  * the header (data-mk-on), and the page's CSS turns the logo and links dark on
  * light sections and light on dark ones.

package/src/recipes/counter/README.md

@@ -2,8 +2,6 @@
 
 Un número cuenta hasta su valor con la curva `numberSoft` (0.6 s), partiendo del valor que muestra.
 
-Origen: Stepbro — animated number (`numeric-counter` en el kit: 0.6 s, 0.7 s en precios, `M0,0 C0.25,0.1 0.25,1 1,1`).
-
 ## Vanilla / Astro
 
 ```html

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

@@ -4,7 +4,7 @@ import { inert, warnOnce, type Instance } from '../../core/types';
 import { TIMING } from '../../core/timing';
 import { countTo } from '../../motion/count';
 
-/* Stepbro's animated number: counts to its value with `numberSoft` (0.6 s), from the value shown. */
+/* animated number: counts to its value with `numberSoft` (0.6 s), from the value shown. */
 
 export interface CounterOptions {
   /** Final value. Default: the number written in the element. */

package/src/recipes/curved-carousel/README.md

@@ -2,8 +2,6 @@
 
 Carrusel en arco: se arrastra con inercia (fricción .85), se centra solo en la slide más cercana, da la vuelta infinita y responde a la rueda horizontal, las flechas y el foco.
 
-Origen: spencergabor.com — Carousel.global.vue.
-
 ## Vanilla / Astro
 
 ```html

package/src/recipes/curved-carousel/create-curved-carousel.ts

@@ -8,7 +8,7 @@ import { wrap } from '../../core/math';
 import { FRICTION, slideX, snapOffset } from './carousel-math';
 
 /*
- * spencergabor.com carousel: offset with friction .85, drag follows the pointer,
+ * curved-carousel: offset with friction .85, drag follows the pointer,
  * release multiplies the velocity and snaps to the slide nearest the projected
  * rest. Slides loop by wrapping their x; CSS turns the distance from the centre
  * (`--mk-t`) into the arc (see curved-carousel.css).
@@ -130,7 +130,7 @@ export function createCurvedCarousel(root: HTMLElement | null, options: CurvedCa
       dragDelta = 0;
       offset -= v;
     } else if (target !== null) {
-      // Geometric approach to the snap point: the same path as Spencer's computed velocity.
+      // Geometric approach to the snap point: using velocity decay.
       const next = offset + (target - offset) * (1 - Math.pow(o.friction, dt));
       v = offset - next;
       offset = next;

package/src/recipes/curved-carousel/curved-carousel.css

@@ -1,5 +1,5 @@
 /*
- * curved-carousel — spencergabor.com (Carousel). Layout rules apply only while the
+ * curved-carousel — Layout rules apply only while the
  * recipe runs (`[data-mk-carousel]`); without JS the root keeps whatever fallback
  * the page gives it (e.g. a horizontal scroll row).
  */

package/src/recipes/depth-grid/README.md

@@ -2,8 +2,6 @@
 
 Un grid de imágenes que llega desde la profundidad: cada imagen parte empujada hacia fuera del centro (900 px), hundida en la pantalla (hasta −3000 px), girada (hasta 160°), casi transparente (.05) y pequeña (.4), y se coloca en su sitio mientras el grid baja desde que su borde superior toca el centro de la pantalla hasta que su borde inferior toca el borde inferior. Primero las del centro; 0.15 s repartidos hacia los bordes. Sigue al scroll sin retraso (`lerp: .1` para suavizarlo).
 
-Origen: Siena Film Foundation, página About (`Rv`, `Un`). Siena busca el timeline en segundos y las del borde se quedan al 85 %; aquí se usa el progreso y el grid termina montado.
-
 ## HTML / Astro
 
 ```html

package/src/recipes/depth-grid/create-depth-grid.ts

@@ -6,13 +6,12 @@ import { TIMING } from '../../core/timing';
 import { inert, warnOnce, type Instance } from '../../core/types';
 
 /*
- * Siena's About grid: the pictures come from far away — pushed out from the
+ * About grid: the pictures come from far away — pushed out from the
  * grid's centre (900 px), deep into the screen (up to −3000 px), tilted (up to
  * 160°), nearly transparent (.05) and small (.4) — and gather into their places
  * as the grid scrolls from its top at the screen's centre to its bottom at the
  * screen's bottom (eased .1 a frame). Centre first, 0.15 s spread to the edges.
- * Siena seeks the timeline in seconds (edges stop at 85 %); this uses its
- * progress, so the grid ends fully assembled.
+ * The timeline follows normalized progress, ending with the grid fully assembled.
  */
 
 export interface DepthGridOptions {
@@ -29,7 +28,7 @@ export interface DepthGridInstance extends Instance {
 
 const STYLES = ['transform', 'translate', 'rotate', 'scale', 'opacity', 'visibility'];
 
-/** Siena's Un(): where a child starts, from its centre relative to the grid's. */
+/** Initial position: where a child starts, from its centre relative to the grid's. */
 function origin(child: Element, box: DOMRect) {
   const t = TIMING.depthGrid;
   const own = child.getBoundingClientRect();

package/src/recipes/details/README.md

@@ -2,8 +2,6 @@
 
 Los `<details>` crecen hasta la altura de su contenido mientras este aparece, y se pliegan de vuelta (0.32 s, curva signature). Un `[data-mk-chevron]` dentro del `<summary>` gira 180° en 0.25 s.
 
-Origen: Stepbro — PrettyDetails (`details` en el kit).
-
 ## Vanilla / Astro
 
 ```html

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

@@ -2,7 +2,7 @@ import { inert, warnOnce, type Instance } from '../../core/types';
 import { installDetailsMotion } from '../../motion/details';
 
 /*
- * Stepbro's PrettyDetails for every <details> under `root` (or `root` itself):
+ * Details for every <details> under `root` (or `root` itself):
  * height and content fade in 0.32 s on the signature curve, chevron 180° in 0.25 s.
  */
 

package/src/recipes/dock-pill/README.md

@@ -1,6 +1,6 @@
 # dock-pill
 
-Indicador spring que sigue la opción activa de un dock (Dousan).
+Indicador spring que sigue la opción activa de un dock.
 
 ```html
 <nav class="mk-dock-pill" data-mk="dock-pill" aria-label="Secciones">
@@ -16,8 +16,8 @@ const instance = createDockPill(root);
 instance.destroy();
 ```
 
-`index` (o aria-current="page" existente), `onSelect(index,item)`. `select(index)`, `index`; evento `mk:select`. Medición de la opción activa con ResizeObserver, indicador spring 380/30. Flechas, Home/End; evita opciones deshabilitadas. Conserva los enlaces y la navegación del consumidor. Origen: `activeTabPill` del dock móvil de Dousan.
+`index` (o aria-current="page" existente), `onSelect(index,item)`. `select(index)`, `index`; evento `mk:select`. Medición de la opción activa con ResizeObserver, indicador spring 380/30. Flechas, Home/End; evita opciones deshabilitadas. Conserva los enlaces y la navegación del consumidor.
 
 Vanilla declarativo: `autoInit(root)`. React: `useDockPill(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/drag-ruler/README.md

@@ -1,6 +1,6 @@
 # drag-ruler
 
-Regla numérica arrastrable de 60 px por unidad, paso y teclado (Dousan).
+Regla numérica arrastrable de 60 px por unidad, paso y teclado.
 
 ```html
 <div class="mk-drag-ruler" data-mk="drag-ruler" aria-label="Años de experiencia" data-mk-value="8"></div>
@@ -14,8 +14,8 @@ const instance = createDragRuler(root);
 instance.destroy();
 ```
 
-`min` 0, `max` 8, `step` .1, `value` max, `pixelsPerUnit` 60, `onChange(value)`. `set(value)`, `value`; evento `mk:change` con detail.value. Role slider, aria-valuemin/max/now y nombre accesible provisto por el consumidor. Flechas, Home/End y PageUp/PageDown. Drag usa pointer capture, respeta pointercancel. Origen: regla de años de Dousan; marcas generadas según el rango, sin su formulario.
+`min` 0, `max` 8, `step` .1, `value` max, `pixelsPerUnit` 60, `onChange(value)`. `set(value)`, `value`; evento `mk:change` con detail.value. Role slider, aria-valuemin/max/now y nombre accesible provisto por el consumidor. Flechas, Home/End y PageUp/PageDown. Drag usa pointer capture, respeta pointercancel.
 
 Vanilla declarativo: `autoInit(root)`. React: `useDragRuler(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.