@yewdiel21/motion-kit 0.9.0 → 0.10.0

package/src/css/tokens.css

@@ -1,12 +1,12 @@
 /* motion-kit tokens — override any of them on :root, on a [data-mk-theme] or on a component. */
 :root {
-  /* spencergabor.com elastic curves */
+  /* Elastic curves */
   --mk-ease-elastic: linear(0, 0.5737 7.6%, 0.8382 11.87%, 0.9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, 0.9995 46.99%, 0.9872 51.63%, 0.9842 58.77%, 1.0011 81.26%, 1);
   --mk-ease-elastic-hover: linear(0, 0.2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, 0.941 24.01%, 0.8912 25.91%, 0.8694 27.84%, 0.8698 29.21%, 0.8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, 0.9961 53.26%, 0.9839 57.54%, 0.9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, 0.9981 86.66%, 1);
 
-  /* Stepbro curves. The signature is a multi-point path: CSS gets Stepbro's own linear() sampling of it. */
+  /* Motion curves. The signature is a multi-point path sampled as CSS linear(). */
   --mk-ease-signature: linear(0 0%, .017 2.5%, .037 5%, .061 7.5%, .091 10%, .13 12.5%, .184 15%, .275 17.5%, .562 20%, .733 22.5%, .803 25%, .848 27.5%, .88 30%, .902 32.5%, .942 40%, .97 50%, .985 60%, .993 70%, .998 80%, 1 90%, 1 100%);
-  /* Stepbro's backdrop tint uses the same curve. */
+  /* backdrop tint uses the same curve. */
   --mk-ease-tint: var(--mk-ease-signature);
   --mk-ease-flow: cubic-bezier(0.25, 0.1, 0.25, 1);
   --mk-ease-close: cubic-bezier(0.56, 0.27, 0, 1);
@@ -16,12 +16,12 @@
   --mk-ease-swatch: cubic-bezier(0.38, 0.49, 0, 1.5);
   --mk-ease-swatch-light: cubic-bezier(0.11, 1, 0, 1);
   --mk-ease-slot: cubic-bezier(0.34, 1.56, 0.64, 1);
-  /* Dousan Miao / Siena Film Foundation curves */
+  /* Glass, sheet and control curves */
   --mk-ease-glass: cubic-bezier(0.25, 1, 0.5, 1);
   --mk-ease-sheet: cubic-bezier(0.16, 1, 0.3, 1);
   --mk-ease-siena: cubic-bezier(0.19, 1, 0.22, 1);
   --mk-ease-quint: cubic-bezier(0.23, 1, 0.32, 1);
-  /* Dousan's springs (Motion 400/10 press, 260/18 success), sampled by springLinear(); a test keeps them in sync. */
+  /* springs (Motion 400/10 press, 260/18 success), sampled by springLinear(); a test keeps them in sync. */
   --mk-ease-press: linear(0, 0.1957, 0.6333, 1.0817, 1.3717, 1.4412, 1.3274, 1.1249, 0.934, 0.8221, 0.808, 0.8691, 0.9612, 1.0413, 1.0833, 1.0824, 1.0513, 1.01, 0.9769, 0.9618, 0.9651, 0.9804, 0.9986, 1.0121, 1.0173, 1.0146, 1.0072, 0.9993, 0.9939, 0.9923, 0.994, 0.9974, 1.0008, 1.003, 1.0034, 1.0024, 1.0008, 0.9994, 0.9986, 0.9985, 1);
   --mk-dur-press: 1.346s;
   --mk-ease-success: linear(0, 0.0437, 0.1533, 0.3004, 0.4617, 0.6197, 0.7624, 0.8825, 0.9767, 1.0451, 1.0895, 1.1133, 1.1208, 1.1161, 1.1032, 1.0856, 1.0662, 1.047, 1.0296, 1.0149, 1.0034, 0.9949, 0.9894, 0.9864, 0.9854, 0.9859, 0.9874, 0.9895, 0.9919, 0.9942, 0.9963, 0.9981, 0.9995, 1.0006, 1.0012, 1.0016, 1.0018, 1.0017, 1.0015, 1.0013, 1);
@@ -34,7 +34,7 @@
   --mk-shadow: 0 9px 21px rgb(0 0 0 / 0.1), 0 38px 38px rgb(0 0 0 / 0.09), 0 85px 51px rgb(0 0 0 / 0.05);
   --mk-shadow-soft: 0 9px 21px rgb(0 0 0 / 0.05), 0 38px 38px rgb(0 0 0 / 0.045), 0 85px 51px rgb(0 0 0 / 0.025);
 
-  /* Shape: Stepbro's large capsules */
+  /* Shape: large capsules */
   --mk-radius-card: 1rem;
   --mk-radius-xs: 8px;
   --mk-radius-sm: 12px;
@@ -50,7 +50,7 @@
   --mk-radius-chat: var(--mk-radius-3xl);
   --mk-radius-dock: var(--mk-radius-4xl);
 
-  /* Spacing, 4 px steps. Stepbro's navigation breakpoint is 680px (media queries use it literally). */
+  /* Spacing, 4 px steps. navigation breakpoint is 680px (media queries use it literally). */
   --mk-space-1: 4px;
   --mk-space-2: 8px;
   --mk-space-3: 12px;
@@ -72,7 +72,7 @@
   /* Type: DM Sans, Geist Mono, Material Symbols Rounded (css/fonts.css loads them). */
   --mk-font: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
   --mk-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
-  /* Material 3 type scale with Stepbro's values (its bundle writes weights as "400px"; here they are numbers). */
+  /* Material 3 type scale; font weights are unitless. */
   --md-sys-typescale-display-large-font: var(--mk-font);
   --md-sys-typescale-display-large-size: 57px;
   --md-sys-typescale-display-large-line-height: 64px;

package/src/elements/index.ts

@@ -1,3 +1,5 @@
+import { MkStudioDockElement } from '../components/studio-dock/element';
+import { MkTrailerElement } from '../components/trailer/element';
 import { defineElement } from './base';
 import { MkThemePickerElement } from '../components/theme-picker/element';
 import { MkDialogElement } from '../components/dialog/element';
@@ -9,6 +11,12 @@ import { MkNavElement } from '../components/nav/element';
 import { MkStepsElement } from '../components/steps/element';
 import { MkCursorElement } from '../components/cursor/element';
 import { MkIslandElement } from '../components/island/element';
+import { MkQuantityElement } from '../components/quantity/element';
+import { MkPaginationElement } from '../components/pagination/element';
+import { MkHoverCardElement } from '../components/hover-card/element';
+import { MkInputOtpElement } from '../components/input-otp/element';
+import { MkCalendarElement } from '../components/calendar/element';
+import { MkSlotPickerElement } from '../components/slot-picker/element';
 // new-component:imports (scripts/new-component.mjs inserts above this line)
 
 export { MkElement, SafeHTMLElement, defineElement, type OptionType } from './base';
@@ -23,6 +31,14 @@ export { MkStepsElement } from '../components/steps/element';
 export { MkCursorElement } from '../components/cursor/element';
 export { toast } from '../components/toast/store';
 export { MkIslandElement } from '../components/island/element';
+export { MkQuantityElement } from '../components/quantity/element';
+export { MkPaginationElement } from '../components/pagination/element';
+export { MkHoverCardElement } from '../components/hover-card/element';
+export { MkInputOtpElement } from '../components/input-otp/element';
+export { MkStudioDockElement, defineStudioDock } from '../components/studio-dock/element';
+export { MkTrailerElement, defineTrailer } from '../components/trailer/element';
+export { MkCalendarElement } from '../components/calendar/element';
+export { MkSlotPickerElement } from '../components/slot-picker/element';
 // new-component:exports
 
 /** Tag name → element class, for every component. */
@@ -37,6 +53,14 @@ export const ELEMENTS = {
   'mk-steps': MkStepsElement,
   'mk-cursor': MkCursorElement,
   'mk-island': MkIslandElement,
+  'mk-quantity': MkQuantityElement,
+  'mk-pagination': MkPaginationElement,
+  'mk-hover-card': MkHoverCardElement,
+  'mk-input-otp': MkInputOtpElement,
+  'mk-studio-dock': MkStudioDockElement,
+'mk-trailer': MkTrailerElement,
+  'mk-calendar': MkCalendarElement,
+  'mk-slot-picker': MkSlotPickerElement,
   // new-component:entries
 } as const;
 

package/src/gl/liquid-blend/README.md

@@ -1,6 +1,6 @@
 # liquid-blend
 
-Mezcla de dos texturas con deformación UV (OFFFICE, adaptación).
+Mezcla de dos texturas con deformación UV.
 
 ```ts
 import { createLiquidBlend } from '@yewdiel21/motion-kit/gl';
@@ -18,6 +18,6 @@ Controles: `setProgress(0..1)`, `setAmount(0..100)`, `pause()`, `resume()`, `mod
 
 Pausa fuera de pantalla y con pestaña oculta. Movimiento reducido: frame fijo, con controles manuales. Sin WebGL, error de textura o contexto perdido: canvas oculto, HTML original disponible. Contexto restaurado: recompila y vuelve a cargar texturas. Destroy libera texturas, buffer, shaders y programa, desconecta observers y restaura la clase original.
 
-OFFFICE `liquid-swap`: mezcla de las imágenes renderizadas, UV deformadas en torno al centro. Adaptación: dos texturas de imagen y ondas propias, sin modelos, ruido cnoise ni render targets. Amount .15; progreso 0/1 conserva exactamente la primera/segunda imagen.
+Mezcla dos texturas de imagen con ondas UV centradas. `amount` vale.15 por defecto; los extremos de progreso 0 y 1 conservan exactamente la primera y la segunda imagen.
 
-Desde 0.9.0. Fuentes de parámetros: `REA - Dousan OFFFICE Siena/`. Shaders originales, sin redistribuir código ni assets de terceros.
+Desde 0.9.0.

package/src/gl/matcap/README.md

@@ -1,6 +1,6 @@
 # matcap
 
-Superficie esférica iluminada con matcap y hemisferio (OFFFICE, adaptación).
+Superficie esférica iluminada con matcap y hemisferio.
 
 ```ts
 import { createMatcap } from '@yewdiel21/motion-kit/gl';
@@ -18,6 +18,6 @@ Controles: `setProgress(0..1)`, `setAmount(0..100)`, `pause()`, `resume()`, `mod
 
 Pausa fuera de pantalla y con pestaña oculta. Movimiento reducido: frame fijo, con controles manuales. Sin WebGL, error de textura o contexto perdido: canvas oculto, HTML original disponible. Contexto restaurado: recompila y vuelve a cargar texturas. Destroy libera texturas, buffer, shaders y programa, desconecta observers y restaura la clase original.
 
-OFFFICE `matcap`: normales en UV .495+.5, hemisferio y ganancia .15. Adaptación: esfera analítica y luz propia si no hay imagen; una imagen opcional actúa como matcap. Progreso gira el matcap; amount regula el brillo. No es un cargador de modelos ni reflexión de escena.
+Calcula normales de una esfera analítica y coordenadas UV.495+.5, con iluminación hemisférica y ganancia.15. Una imagen opcional actúa como matcap; sin imagen utiliza iluminación calculada. El progreso gira el material y `amount` regula el brillo. No carga modelos ni refleja una escena.
 
-Desde 0.9.0. Fuentes de parámetros: `REA - Dousan OFFFICE Siena/`. Shaders originales, sin redistribuir código ni assets de terceros.
+Desde 0.9.0.

package/src/gl/particle-hero/README.md

@@ -2,7 +2,7 @@
 
 Una nube de puntos simulada en la GPU que se posa sobre las líneas de un patrón de interferencia que cambia solo (modos de Chladni de [3, 5, 7] cada 6–12 s, frecuencia 20–45 cada 5–10 s, distorsión 0–5 en 1.2–3 s) mientras una parte de los puntos (40–80 %) se va a dibujar una palabra y luego vuelve. El puntero los empuja según su velocidad. Aparece en 1 s tras 0.3 s.
 
-Origen: iyo.ai, hero de la home (escena `wK`, sistema `YW`, simulación `dE`): dos texturas de estado RGBA alternadas (posición XY, velocidad ZW), proyección tipo Newton hacia los ceros del campo, destino por hash estable según `texturePercent`, repulsión del puntero, ciclo de palabras en cuatro fases. Es una **implementación propia**: iyo mueve 1 638 400 puntos con Three.js y nueve imágenes de palabras; aquí son `size²` puntos (16 384 por defecto, hasta 65 536), palabras dibujadas en local con `system-ui`, tres campos base y tiempos aproximados. Sin WebGL2 con texturas float cae a unos 1800 puntos en un canvas 2D (un círculo que respira, sin Chladni); sin canvas no hace nada.
+Simula `size²` puntos (16 384 por defecto, hasta 65 536) y dibuja las palabras en local. Sin WebGL2 con texturas float utiliza unos 1800 puntos en Canvas2D; sin canvas mantiene el HTML visible.
 
 Vive en la entrada opcional `@yewdiel21/motion-kit/gl`, así las páginas sin él no cargan sus shaders.
 

package/src/gl/particle-hero/create-particle-hero.ts

@@ -6,16 +6,14 @@ import { warnOnce, type Instance } from '../../core/types';
 import { fullscreenVertex, pointsFragment, pointsVertex, simulationFragment } from './shaders';
 
 /*
- * iyo.ai's hero, adapted: a cloud of points simulated on the GPU (two RGBA32F
+ * particle-hero: a cloud of points simulated on the GPU (two RGBA32F
  * textures, position + velocity, ping-pong) that settles on the zero lines of a
  * shifting interference pattern — Chladni modes from [3, 5, 7] every 6–12 s, a
  * frequency of 20–45 every 5–10 s, a distortion tween of 1.2–3 s — while part of
  * the points (40–80 %, eased) leave to draw a word, then return. The pointer
  * pushes them away in proportion to its speed. It fades in over 1 s after 0.3 s.
  *
- * iyo runs 1 638 400 points on Three.js with its own word pictures; this is a
- * smaller own implementation (size² points, 16 384 by default) with words drawn
- * locally. Without WebGL2 float targets it falls back to ~1800 points on a 2D
+ * Simulates size² points (16 384 by default), with words drawn locally. Without WebGL2 float targets it falls back to ~1800 points on a 2D
  * canvas; with no canvas at all it does nothing. Reduced motion draws one still
  * frame. The canvas is decorative (aria-hidden): the hero's text lives in HTML.
  */
@@ -89,7 +87,7 @@ function random(seed: number) {
   };
 }
 
-/** Points sampled from the dark pixels of a word drawn on a 640 × 320 canvas (iyo: red < 120). */
+/** Points sampled from the dark pixels of a word drawn on a 640 × 320 canvas (default: red < 120). */
 function wordMask(word: string, count: number, rng: () => number) {
   const result = new Float32Array(count * 4);
   const canvas = document.createElement('canvas');

package/src/gl/particle-hero/shaders.ts

@@ -1,5 +1,5 @@
 /*
- * Shaders for the particle hero. Own GLSL (not iyo's): state texture XY = position,
+ * Shaders for the particle hero. Own GLSL: state texture XY = position,
  * ZW = velocity; the simulation pulls each point toward the zero lines of a
  * radial / grid / square field mixed with a Chladni plate (four Newton-like
  * projections, step .4) or toward a word, and pushes it away from the pointer.

package/src/gl/shader-blur/README.md

@@ -1,6 +1,6 @@
 # shader-blur
 
-Desenfoque direccional de siete muestras por shader (Siena).
+Desenfoque direccional de siete muestras por shader.
 
 ```ts
 import { createShaderBlur } from '@yewdiel21/motion-kit/gl';
@@ -18,6 +18,6 @@ Controles: `setProgress(0..1)`, `setAmount(0..100)`, `pause()`, `resume()`, `mod
 
 Pausa fuera de pantalla y con pestaña oculta. Movimiento reducido: frame fijo, con controles manuales. Sin WebGL, error de textura o contexto perdido: canvas oculto, HTML original disponible. Contexto restaurado: recompila y vuelve a cargar texturas. Destroy libera texturas, buffer, shaders y programa, desconecta observers y restaura la clase original.
 
-Siena `siena.webgl.work`: siete muestras, pesos .19648255/.29690696/.09447040/.01038136 y offsets 1.41176471/3.29411765/5.17647059. Amount 5 en píxeles de la imagen; progreso rota la dirección de horizontal a vertical. Amount 0 conserva la imagen.
+Aplica siete muestras con pesos.19648255/.29690696/.09447040/.01038136 y offsets 1.41176471/3.29411765/5.17647059. `amount` vale 5 píxeles de la imagen por defecto; el progreso rota la dirección de horizontal a vertical. `amount` 0 conserva la imagen.
 
-Desde 0.9.0. Fuentes de parámetros: `REA - Dousan OFFFICE Siena/`. Shaders originales, sin redistribuir código ni assets de terceros.
+Desde 0.9.0.

package/src/gl/shader-grain/README.md

@@ -1,6 +1,6 @@
 # shader-grain
 
-Grano de película animado por shader, intensidad .07 (Siena).
+Grano de película animado por shader, intensidad.07.
 
 ```ts
 import { createShaderGrain } from '@yewdiel21/motion-kit/gl';
@@ -18,6 +18,6 @@ Controles: `setProgress(0..1)`, `setAmount(0..100)`, `pause()`, `resume()`, `mod
 
 Pausa fuera de pantalla y con pestaña oculta. Movimiento reducido: frame fijo, con controles manuales. Sin WebGL, error de textura o contexto perdido: canvas oculto, HTML original disponible. Contexto restaurado: recompila y vuelve a cargar texturas. Destroy libera texturas, buffer, shaders y programa, desconecta observers y restaura la clase original.
 
-Siena `siena.webgl.post`: intensidad .07. Ruido propio con semilla temporal a 24 Hz; amount 0 conserva la imagen. No reproduce el pipeline de postprocesado del sitio completo.
+Genera ruido con semilla temporal a 24 Hz e intensidad.07 por defecto. `amount` 0 conserva la imagen. Con movimiento reducido mantiene un frame fijo.
 
-Desde 0.9.0. Fuentes de parámetros: `REA - Dousan OFFFICE Siena/`. Shaders originales, sin redistribuir código ni assets de terceros.
+Desde 0.9.0.

package/src/index.ts

@@ -175,3 +175,28 @@ export {
   type ToastAction,
 } from './components/toast/store';
 export { createIsland, type IslandOptions, type IslandInstance } from './components/island/engine';
+export { createQuantity, type QuantityOptions, type QuantityInstance } from './components/quantity/engine';
+export { createPagination, type PaginationOptions, type PaginationInstance } from './components/pagination/engine';
+export { createHoverCard, type HoverCardOptions, type HoverCardInstance } from './components/hover-card/engine';
+export { createInputOtp, type InputOtpOptions, type InputOtpInstance } from './components/input-otp/engine';
+export { createJoinedCta, type JoinedCtaOptions, type JoinedCtaInstance } from './recipes/joined-cta/create-joined-cta';
+export { createImageZoom, type ImageZoomOptions, type ImageZoomInstance } from './recipes/image-zoom/create-image-zoom';
+export { createFontCycle, type FontCycleOptions, type FontCycleInstance } from './recipes/font-cycle/create-font-cycle';
+export { createThumbnailNav, type ThumbnailNavOptions, type ThumbnailNavInstance } from './recipes/thumbnail-nav/create-thumbnail-nav';
+export { createActionButton, type ActionButtonOptions, type ActionButtonInstance } from './recipes/action-button/create-action-button';
+export { createFilmHero, type FilmHeroOptions, type FilmHeroInstance } from './recipes/film-hero/create-film-hero';
+export { createEditorialReveal, type EditorialRevealOptions, type EditorialRevealInstance } from './recipes/editorial-reveal/create-editorial-reveal';
+export { createStudioDock, type StudioDockOptions, type StudioDockInstance } from './components/studio-dock/engine';
+export { createTrailer, type TrailerOptions, type TrailerInstance } from './components/trailer/engine';
+export type { FontCycleFace } from './recipes/font-cycle/create-font-cycle';
+export type { ActionButtonVariant } from './recipes/action-button/create-action-button';
+export type { StudioDockState, StudioDockView } from './components/studio-dock/engine';
+export { createCalendar, type CalendarOptions, type CalendarInstance } from './components/calendar/engine';
+export { createSlotPicker, type SlotPickerOptions, type SlotPickerInstance } from './components/slot-picker/engine';
+export type { CalendarEvent, CalendarEventStatus, CalendarRange, CalendarView, CalendarLabels } from './components/calendar/engine';
+export type { SlotSource, SlotValue, SlotPickerLabels } from './components/slot-picker/engine';
+export { dayKey, toDate, type DateInput } from './core/dates';
+export { createWeightHover, type WeightHoverOptions, type WeightHoverInstance } from './recipes/weight-hover/create-weight-hover';
+export { createSticker, type StickerOptions, type StickerInstance, type StickerState } from './recipes/sticker/create-sticker';
+export { createScrollDock, type ScrollDockOptions, type ScrollDockInstance } from './recipes/scroll-dock/create-scroll-dock';
+export { createLocalClock, type LocalClockOptions, type LocalClockInstance } from './recipes/local-clock/create-local-clock';

package/src/motion/chat.ts

@@ -4,7 +4,7 @@ import { TIMING } from '../core/timing';
 import { splitWords } from '../core/split';
 
 /*
- * Stepbro's chat (PrettyChat): new bubbles grow from their speaker's side
+ * chat (PrettyChat): new bubbles grow from their speaker's side
  * (scale .5, 24 px blur, 0.7 s, 60 ms apart) while their words rise into place
  * (16 px, 6 px blur, 0.25 s, 50 ms apart, back.out). Words are split only for
  * the animation; tables and code stay whole; if splitting would reflow the text
@@ -76,7 +76,7 @@ export function fitComposer(field: HTMLTextAreaElement, min = 64) {
   return gsap.to(field, { height: to, duration: TIMING.composer, ease: 'power2.out', overwrite: 'auto' });
 }
 
-/** Scroll a conversation to its newest message (0.35 s, Stepbro's chat scroll curve). */
+/** Scroll a conversation to its newest message. */
 export function scrollToLatest(scroller: HTMLElement) {
   const top = scroller.scrollHeight - scroller.clientHeight;
   if (reduced()) {

package/src/motion/confetti.ts

@@ -2,7 +2,7 @@ import { reduced } from '../core/reduced';
 import { TIMING } from '../core/timing';
 
 /*
- * Dousan's success confetti: 45 paper pieces burst from a point (2–8 px a
+ * success confetti: 45 paper pieces burst from a point (2–8 px a
  * frame, a little upward), fall with gravity .15, slow by .98 a frame, spin and
  * fade (.015–.03 a frame). Physics per 60 fps frame, scaled by the real frame
  * time. The canvas is decorative and removes itself when the last piece fades.

package/src/motion/count.ts

@@ -4,7 +4,7 @@ import { TIMING } from '../core/timing';
 import { requestFrame } from '../core/frame';
 
 /*
- * Numbers that count to their new value: Stepbro's animated number (`numberSoft`,
+ * Numbers that count to their new value: animated number (`numberSoft`,
  * 0.6 s; 0.7 s on prices) and the onboarding's revealed balance (rAF, 0.9 s,
  * ease-out cubic). Both continue from the value currently shown.
  */

package/src/motion/details.ts

@@ -3,7 +3,7 @@ import { reduced } from '../core/reduced';
 import { TIMING } from '../core/timing';
 
 /*
- * Stepbro's PrettyDetails: a disclosure grows to its content's height while the
+ * Details: a disclosure grows to its content's height while the
  * content fades in, and folds back to its summary (0.32 s, signature). A
  * `[data-mk-chevron]` inside the summary turns 180° in 0.25 s.
  */

package/src/motion/drag-dismiss.ts

@@ -3,7 +3,7 @@ import { reduced } from '../core/reduced';
 import { TIMING } from '../core/timing';
 
 /*
- * Stepbro's modal drag (ported from Kayro): a surface follows a drag (or a pull
+ * modal drag: a surface follows a drag (or a pull
  * with the wheel) at half speed and shrinks as it goes down (1 − y/400); past
  * 100 px it is dismissed, otherwise it springs back (elastic.out(.5,.5), 0.5 s).
  * A drag starts after 6 px, ignores controls, scrollable areas that can still

package/src/motion/effects.ts

@@ -3,7 +3,7 @@ import { TIMING } from '../core/timing';
 import { warnOnce } from '../core/types';
 
 /*
- * Play Stepbro's utility animations (css/effects/anim.css) from code: animate()
+ * Play utility animations (css/effects/anim.css) from code: animate()
  * restarts one even when it is already playing and resolves when it ends;
  * leave() plays an exit and then removes (or hides) the element.
  */

package/src/motion/entrances.ts

@@ -2,7 +2,7 @@ import { TIMING } from '../core/timing';
 import { flowIn } from './flow';
 
 /*
- * Named entrances from Stepbro (money/replication-catalog.json): the same
+ * Named entrances: the same
  * flowIn with each surface's own scale, blur and rhythm.
  */
 

package/src/motion/floating.ts

@@ -3,7 +3,7 @@ import { reduced } from '../core/reduced';
 import { TIMING } from '../core/timing';
 
 /*
- * Stepbro's floating modal (ported from Kayro): on desktop (≥ 680 px) a handle
+ * floating modal: on desktop (≥ 680 px) a handle
  * lifts a surface into a window that moves on a spring (1100/38, mass by area),
  * glides when flung (≥ 350 px/s, decays in 0.18 s), stays inside the viewport
  * (8 px margin), resizes from its corners (min 320 × 240) and remembers where it

package/src/motion/flow.ts

@@ -5,7 +5,7 @@ import { nextFrame } from '../core/frame';
 import { clearStyles } from '../core/styles';
 
 /*
- * Stepbro flowIn / flowOut: items drop in from 20 px above out of a 16 px blur,
+ * flowIn / flowOut: items drop in from 20 px above out of a 16 px blur,
  * 0.5 s, 50 ms apart (`flowSoft`), and leave 20 px down into the same blur.
  * Style 2 grows them from 90 % instead of moving them.
  */
@@ -98,7 +98,7 @@ export function flowOut(targets: gsap.TweenTarget, options: FlowOutOptions = {})
 }
 
 /**
- * Stepbro's step change: the current children flow out, `mutate` swaps the
+ * step change: the current children flow out, `mutate` swaps the
  * content (render the next step there), and after a frame the new children flow in.
  */
 export async function stepChange(

package/src/motion/indicator.ts

@@ -3,7 +3,7 @@ import { reduced } from '../core/reduced';
 import { TIMING } from '../core/timing';
 
 /*
- * Stepbro's PrettyTabs: the indicator fits the selected option's box in 0.45 s
+ * Tabs: the indicator fits the selected option's box in 0.45 s
  * on the signature curve (Flip.fit in the original; here the same box is
  * tweened directly). The indicator is an absolutely positioned child at 0,0 of
  * the group. A scrolling group centres the selected option.

package/src/motion/layout.ts

@@ -3,7 +3,7 @@ import { reduced } from '../core/reduced';
 import { TIMING } from '../core/timing';
 
 /*
- * Stepbro's layout reflow: items that changed place travel there on a spring
+ * layout reflow: items that changed place travel there on a spring
  * (0.62 s, ratio .52) and new ones grow in (scale .94, in 60 % of the time).
  * Capture before the DOM change, reflow after it; items pair by `data-flip-id`.
  * Don't make the items `position: absolute` — the list would collapse.

package/src/motion/liquid.ts

@@ -4,7 +4,7 @@ import { TIMING } from '../core/timing';
 import { transparentColor } from './surface';
 
 /*
- * Stepbro's liquid modal (ported from Kayro): the opener's colour melts into the
+ * liquid modal: the opener's colour melts into the
  * surface. Two blobs (one on the opener, one with the surface's shape) sit under
  * a "goo" filter (blur 20, alpha threshold 19·a − 9), so while the surface's
  * blob swings out of the opener on a spring (144/14, kick 2400 px/s) they

package/src/motion/morph.ts

@@ -6,7 +6,7 @@ import { liquidClose, liquidOpen } from './liquid';
 import { backdropVeil, ghostOf, transparentColor } from './surface';
 
 /*
- * Container transform after Stepbro's ModalHost (ported from Kayro): a surface
+ * Container transform: a surface
  * (dialog, menu, option list) grows out of the control that opened it and folds
  * back into it. The surface itself is never scaled: it starts clipped to the
  * opener's size and corners, moved onto the opener, and widens to its own box
@@ -460,7 +460,7 @@ export function morphClose(surface: HTMLElement, origin: HTMLElement | null, onC
     if (parts.length) {
       timeline
         .to(parts, { ...group, duration, ease: toward }, 0)
-        // Stepbro rounds the content toward a 400 px radius while it fades and blurs.
+        // Rounds the content toward a 400 px radius while it fades and blurs.
         .to(parts, { opacity: 0, borderRadius: '400px', duration, ease: EASE.fadeAway }, 0)
         .to(parts, { filter: 'blur(32px)', duration, ease: EASE.blurAway }, 0);
     }

package/src/motion/reveal.ts

@@ -4,7 +4,7 @@ import { pointer } from '../core/pointer';
 import { TIMING } from '../core/timing';
 
 /*
- * Stepbro's reveal (PrettyCalendarMenu, Nav, SupportModal): a veil in the
+ * reveal: a veil in the
  * surface's own colour covers it and a round opening grows from the origin,
  * uncovering the content like a wave; then the veil fades. Overshoot 2 lets the
  * opening pass the far corner halfway through, so the end is soft.

package/src/motion/sheet.ts

@@ -6,7 +6,7 @@ import { TIMING } from '../core/timing';
 import { backdropVeil, ghostOf } from './surface';
 
 /*
- * Dousan's project sheet: the surface rises from below the screen (0.72 s,
+ * project sheet: the surface rises from below the screen (0.72 s,
  * cubic(.16,1,.3,1)) while the page behind ([data-mk-underlay]) sinks to
  * scale .98 / opacity .4 on a 300/30 spring. It closes through an inert copy
  * that drops away, so focus returns at once.

package/src/motion/surface.ts

@@ -28,7 +28,7 @@ export function closeModal(dialog: DialogLike) {
 }
 
 /**
- * Fade a modal <dialog>'s ::backdrop in (Stepbro's tint: 0.5 s on the signature
+ * Fade a modal <dialog>'s ::backdrop in (tint: 0.5 s on the signature
  * curve) or out (linear). Resolves at once without the Web Animations API.
  */
 export function fadeBackdrop(dialog: HTMLElement, direction: 'in' | 'out'): Promise<void> {

package/src/react/animated-number.tsx

@@ -7,13 +7,13 @@ export interface AnimatedNumberProps {
   value: number;
   /** How the shown value is written. Default: whole numbers. */
   format?: (shown: number) => string;
-  /** Seconds. Default 0.6 (Stepbro's numberSoft); prices use 0.7. */
+  /** Seconds. Default 0.6; prices use 0.7. */
   duration?: number;
 }
 
 const whole = (shown: number) => String(Math.round(shown));
 
-/** A number that counts to each new value from the one shown (Stepbro's AnimatedNumber). */
+/** A number that counts to each new value from the one shown. */
 export function AnimatedNumber({ value, format = whole, duration }: AnimatedNumberProps) {
   const [shown, setShown] = useState(value);
   const current = useRef(value);

package/src/react/flip-group.tsx

@@ -14,7 +14,7 @@ export interface FlipGroupProps {
 }
 
 /**
- * Plays Stepbro's layout reflow when `signature` changes: the layout is
+ * Plays layout reflow when `signature` changes: the layout is
  * measured just before React commits and the items travel from there. A class
  * component, because only `getSnapshotBeforeUpdate` reads the DOM before the commit.
  */

package/src/react/frost.tsx

@@ -12,7 +12,7 @@ export interface FrostProps {
   style?: CSSProperties;
 }
 
-/** Dousan's progressive frost: five blur layers. Put it inside a positioned container (or use `fixed`). */
+/** progressive frost: five blur layers. Put it inside a positioned container (or use `fixed`). */
 export function Frost({ position = 'bottom', fixed = false, height, strength, className, style }: FrostProps) {
   const vars: Record<string, string> = {};
   if (height !== undefined) vars['--mk-frost-height'] = typeof height === 'number' ? `${height}px` : height;

package/src/react/index.ts

@@ -78,3 +78,24 @@ export { confetti, type ConfettiOptions } from '../motion/confetti';
 export { MK_HEAD_SCRIPT } from '../core/reduced';
 export { MK_THEME_HEAD_SCRIPT, themeHeadScript } from '../theme/theme';
 export { Island, IslandDots, type IslandProps, type IslandPanel } from '../components/island/react';
+export { Quantity, type QuantityProps } from '../components/quantity/react';
+export { Pagination, type PaginationProps } from '../components/pagination/react';
+export { HoverCard, type HoverCardProps } from '../components/hover-card/react';
+export { InputOtp, type InputOtpProps } from '../components/input-otp/react';
+export { useJoinedCta } from './use-joined-cta';
+export { useImageZoom } from './use-image-zoom';
+export { useFontCycle } from './use-font-cycle';
+export { useThumbnailNav } from './use-thumbnail-nav';
+export { useActionButton } from './use-action-button';
+export { useFilmHero } from './use-film-hero';
+export { useEditorialReveal } from './use-editorial-reveal';
+export { useStudioDock } from './use-studio-dock';
+export { useTrailer } from './use-trailer';
+export { StudioDock, type StudioDockProps } from '../components/studio-dock/react';
+export { Trailer, type TrailerProps } from '../components/trailer/react';
+export { Calendar, type CalendarProps } from '../components/calendar/react';
+export { SlotPicker, type SlotPickerProps } from '../components/slot-picker/react';
+export { useWeightHover } from './use-weight-hover';
+export { useSticker } from './use-sticker';
+export { useScrollDock } from './use-scroll-dock';
+export { useLocalClock } from './use-local-clock';

package/src/react/slot-text.tsx

@@ -12,7 +12,7 @@ export interface SlotTextProps extends Omit<SlotTextOptions, 'text' | 'accessibl
 const escapeHtml = (text: string) => text.replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);
 
 /**
- * Text whose letters roll when it changes (Stepbro's SlotText). The server
+ * Text whose letters roll when it changes. The server
  * renders the text itself; React never reconciles the letters (they belong to
  * the recipe), and screen readers read the plain copy.
  */

package/src/react/use-action-button.ts

@@ -0,0 +1,6 @@
+'use client';
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createActionButton, type ActionButtonOptions } from '../recipes/action-button/create-action-button';
+export const useActionButton = (ref: RefObject<HTMLElement | null>, options?: ActionButtonOptions, deps?: DependencyList) =>
+  useRecipe(ref, createActionButton, options, deps);

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

@@ -4,6 +4,6 @@ import type { DependencyList, RefObject } from 'react';
 import { useRecipe } from './use-recipe';
 import { createCardDock, type CardDockOptions } from '../recipes/card-dock/create-card-dock';
 
-/** iyo.ai's product dock (stacked glass cards that spread on hover). */
+/** product dock (stacked glass cards that spread on hover). */
 export const useCardDock = (ref: RefObject<HTMLElement | null>, options?: CardDockOptions, deps?: DependencyList) =>
   useRecipe(ref, createCardDock, options, deps);

package/src/react/use-cascade.ts

@@ -4,6 +4,6 @@ import type { DependencyList, RefObject } from 'react';
 import { useRecipe } from './use-recipe';
 import { createCascade, type CascadeOptions } from '../recipes/cascade/create-cascade';
 
-/** Siena's reveal group: rules, fades and rises one after another. */
+/** reveal group: rules, fades and rises one after another. */
 export const useCascade = (ref: RefObject<HTMLElement | null>, options?: CascadeOptions, deps?: DependencyList) =>
   useRecipe(ref, createCascade, options, deps);

package/src/react/use-contrast.ts

@@ -4,6 +4,6 @@ import type { DependencyList, RefObject } from 'react';
 import { useRecipe } from './use-recipe';
 import { createContrast, type ContrastOptions } from '../recipes/contrast/create-contrast';
 
-/** Siena's header contrast from the section under it. */
+/** header contrast from the section under it. */
 export const useContrast = (ref: RefObject<HTMLElement | null>, options?: ContrastOptions, deps?: DependencyList) =>
   useRecipe(ref, createContrast, options, deps);

package/src/react/use-depth-grid.ts

@@ -4,6 +4,6 @@ import type { DependencyList, RefObject } from 'react';
 import { useRecipe } from './use-recipe';
 import { createDepthGrid, type DepthGridOptions } from '../recipes/depth-grid/create-depth-grid';
 
-/** Siena's grid gathering from depth as it scrolls. */
+/** grid gathering from depth as it scrolls. */
 export const useDepthGrid = (ref: RefObject<HTMLElement | null>, options?: DepthGridOptions, deps?: DependencyList) =>
   useRecipe(ref, createDepthGrid, options, deps);

package/src/react/use-editorial-reveal.ts

@@ -0,0 +1,7 @@
+'use client';
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createEditorialReveal, type EditorialRevealOptions } from '../recipes/editorial-reveal/create-editorial-reveal';
+export function useEditorialReveal(ref: RefObject<HTMLElement | null>, options: EditorialRevealOptions = {}, deps?: DependencyList) {
+  return useRecipe(ref, createEditorialReveal, options, deps);
+}

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

@@ -4,6 +4,6 @@ import type { DependencyList, RefObject } from 'react';
 import { useRecipe } from './use-recipe';
 import { createFillText, type FillTextOptions } from '../recipes/fill-text/create-fill-text';
 
-/** iyo.ai's fill-text: letters fill in as the text scrolls up. */
+/** fill-text: letters fill in as the text scrolls up. */
 export const useFillText = (ref: RefObject<HTMLElement | null>, options?: FillTextOptions, deps?: DependencyList) =>
   useRecipe(ref, createFillText, options, deps);

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

@@ -0,0 +1,6 @@
+'use client';
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createFilmHero, type FilmHeroOptions } from '../recipes/film-hero/create-film-hero';
+export const useFilmHero = (ref: RefObject<HTMLElement | null>, options?: FilmHeroOptions, deps?: DependencyList) =>
+  useRecipe(ref, createFilmHero, options, deps);

package/src/react/use-font-cycle.ts

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