@yewdiel21/motion-kit 0.9.0 → 0.10.0

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

@@ -0,0 +1,70 @@
+/* scroll-dock — inverted capsule at the bottom centre; rises with a soft overshoot. */
+.mk-scroll-dock {
+  position: fixed;
+  left: 50%;
+  bottom: var(--mk-scroll-dock-bottom, 24px);
+  z-index: 20;
+  display: flex;
+  gap: 4px;
+  max-width: calc(100vw - 32px);
+  padding: 6px;
+  /* Too many items for the width: scroll inside the capsule, never overflow the page. */
+  overflow-x: auto;
+  scrollbar-width: none;
+  border-radius: 100px;
+  background: var(--mk-text);
+  color: var(--mk-bg);
+  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mk-bg) 20%, transparent), 0 12px 30px -10px rgb(0 0 0 / 0.5);
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(-50%, 140%);
+  transition: transform 0.6s cubic-bezier(0.32, 1.25, 0.5, 1), opacity 0.3s;
+}
+.mk-scroll-dock[data-mk-visible],
+.mk-scroll-dock:focus-within {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translate(-50%, 0);
+}
+/* Inside a scrolling container: sticks to its bottom edge instead of the viewport's.
+   Scrollable overflow counts the un-stuck box plus its transform, so the negative
+   margin lifts that box by its height + bottom gap and the hide offset equals the
+   gap: nothing reaches past the last section, no empty band at the end. */
+.mk-scroll-dock--sticky {
+  position: sticky;
+  left: auto;
+  width: max-content;
+  max-width: calc(100% - 16px);
+  margin: calc(-1 * (var(--mk-scroll-dock-height, 58px) + var(--mk-scroll-dock-bottom, 24px))) auto 0;
+  transform: translateY(var(--mk-scroll-dock-bottom, 24px)) scale(0.96);
+}
+.mk-scroll-dock--sticky:is([data-mk-visible], :focus-within) { transform: none; }
+.mk-scroll-dock > :is(a, button) {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 46px;
+  padding: 0 18px;
+  border: 0;
+  border-radius: 100px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 15px;
+  font-weight: 500;
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 0.25s;
+}
+.mk-scroll-dock > :is(a, button):hover { background: color-mix(in srgb, var(--mk-bg) 15%, transparent); }
+.mk-scroll-dock > :is(a, button):focus-visible { outline: 2px solid var(--mk-bg); outline-offset: -2px; }
+.mk-scroll-dock::-webkit-scrollbar { display: none; }
+/* Phones: a tab bar, icon over label, so four or five items fit in 360 px. */
+@media (max-width: 680px) {
+  .mk-scroll-dock > :is(a, button) { flex-direction: column; justify-content: center; gap: 2px; height: 52px; padding: 0 12px; border-radius: 26px; font-size: 11px; }
+  .mk-scroll-dock--sticky { margin-top: calc(-1 * (var(--mk-scroll-dock-height, 64px) + var(--mk-scroll-dock-bottom, 24px))); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mk-scroll-dock { transition: opacity 0.2s; }
+}

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

@@ -2,8 +2,6 @@
 
 Cuando el texto cambia, cada letra distinta sale rodando y entra la nueva (300 ms, curva con rebote `cubic-bezier(.34,1.56,.64,1)`), con una inclinación determinista de hasta 5° y 45 ms entre letras; el ancho de cada letra se ajusta. Las letras se agrupan por palabra para que el texto parta línea entre palabras.
 
-Origen: Stepbro — SlotText (`slot-text` en el kit), portado desde Kayro.
-
 ## Vanilla / Astro
 
 ```html

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

@@ -4,7 +4,7 @@ import { TIMING } from '../../core/timing';
 import { splitGraphemes } from '../../core/split';
 
 /*
- * Stepbro's SlotText (ported from Kayro): when the text changes, each letter
+ * Slot text: when the text changes, each letter
  * that differs rolls out and the new one rolls in (300 ms, a springy curve),
  * with a slight deterministic tilt (≤ 5°) and a 45 ms cascade; letter boxes ease
  * to their new width. Letters are grouped by word so lines only break between

package/src/recipes/snap-strip/README.md

@@ -2,7 +2,7 @@
 
 Una tira horizontal de tarjetas con scroll-snap nativo que pasa a la siguiente cada 5 s mientras se ve (empieza medio segundo después de aparecer), espera 2 s después de un toque, arrastre o rueda antes de seguir y vuelve de la última a la primera.
 
-Origen: iyo.ai, tarjetas de producto en móvil (`product-card-mobile`, `CM`): cadencia 5000 ms, espera 2000 ms, `data-delay="500"`, tarjetas de 68vw. iyo usa el slider físico Smooothy con bucle clonado; aquí desliza el navegador con su propio snap.
+Avanza cada 5000 ms, espera 2000 ms tras una interacción y empieza 500 ms después de hacerse visible. Utiliza el scroll-snap nativo del navegador.
 
 ## HTML / Astro
 

package/src/recipes/snap-strip/create-snap-strip.ts

@@ -4,20 +4,19 @@ import { TIMING } from '../../core/timing';
 import { inert, warnOnce, type Instance } from '../../core/types';
 
 /*
- * iyo.ai's phone cards: a native scroll-snap strip that moves on by one card
+ * phone cards: a native scroll-snap strip that moves on by one card
  * every 5 s while it is on screen (starting `delay` ms after it shows), waits
  * 2 s after a touch, drag or wheel before carrying on, and wraps from the last
- * card to the first. iyo drives it with Smooothy; this keeps the browser's own
- * scrolling and snapping instead of a physics slider.
+ * card to the first. Uses the browser's native scrolling and snapping.
  */
 
 export interface SnapStripOptions {
   autoplay?: boolean;
-  /** Milliseconds between cards (iyo: 5000). */
+  /** Milliseconds between cards (default: 5000). */
   interval?: number;
-  /** Milliseconds to wait after the reader touches it (iyo: 2000). */
+  /** Milliseconds to wait after the reader touches it (default: 2000). */
   resume?: number;
-  /** Milliseconds after it shows before autoplay starts (iyo's data-delay: 500). */
+  /** Milliseconds after it shows before autoplay starts. */
   delay?: number;
 }
 

package/src/recipes/snap-strip/snap-strip.css

@@ -1,4 +1,4 @@
-/* iyo.ai's phone cards: a strip of cards that snaps to each one. */
+/* phone cards: a strip of cards that snaps to each one. */
 .mk-snap-strip {
   --mk-snap-strip-item: 68vw;
   --mk-snap-strip-gap: 0.75rem;

package/src/recipes/sortable/README.md

@@ -1,6 +1,6 @@
 # sortable
 
-El arrastre para reordenar de Stepbro Tasks (`useDragReorder`, modo "transform"):
+Arrastre para reordenar listas y mover elementos entre grupos:
 
 - **Levantar:** pasados 6 px el elemento se convierte en una copia flotante (0.18 s, `power2.out`) que crece un 3 % y gana sombra. El hueco que deja queda invisible.
 - **Seguir:** la copia sigue al puntero con un resorte (rigidez 1100, amortiguación 38; más pesada cuanto más grande) y se inclina según la velocidad y la aceleración, como si colgara del punto por donde la agarraste (resorte 170/13, hasta 14°).
@@ -9,9 +9,7 @@ El arrastre para reordenar de Stepbro Tasks (`useDragReorder`, modo "transform")
 - **Bordes:** cerca del borde (56 px) el contenedor que hace scroll se desplaza solo, hasta 16 px por frame.
 - **Cancelar:** Escape (o soltar donde estaba) la devuelve a su sitio.
 
-En pantallas táctiles solo se arrastra desde `[data-mk-sort-handle]`, para que la lista siga haciendo scroll. Teclado (añadido): Espacio o Enter levanta, flechas arriba/abajo mueven, izquierda/derecha cambian de lista, Espacio o Enter suelta, Escape lo devuelve; cada paso se anuncia.
-
-Origen: Stepbro Tasks `useDragReorder` (`stepbro-tasks.js`, líneas 39021–39330).
+En pantallas táctiles solo se arrastra desde `[data-mk-sort-handle]`, para que la lista siga haciendo scroll. Teclado: Espacio o Enter levanta, flechas arriba/abajo mueven, izquierda/derecha cambian de lista, Espacio o Enter suelta, Escape lo devuelve; cada paso se anuncia.
 
 ## HTML / Astro
 
@@ -75,7 +73,7 @@ En React el motor no toca el orden del DOM (`mutate: false`): llama `onReorder`,
 | `labels` | español | `lifted`, `moved`, `dropped` (funciones de posición y total), `cancelled` |
 | `onReorder` | — | `(detalle) => void` |
 
-`detalle` (también en el evento `mk:reorder`, cancelable): `id`, `item`, `fromGroup`, `toGroup`, `fromIndex`, `toIndex`, `groupChanged`, `afterId`, `beforeId` (el vecino en el destino, para guardar el orden en un servidor como hace Stepbro). `moveItem(lista, desde, hasta)` mueve una entrada de un array.
+`detalle` (también en el evento `mk:reorder`, cancelable): `id`, `item`, `fromGroup`, `toGroup`, `fromIndex`, `toIndex`, `groupChanged`, `afterId`, `beforeId` (el vecino en el destino, para guardar el orden en un servidor). `moveItem(lista, desde, hasta)` mueve una entrada de un array.
 
 Partes: `[data-mk-item]` con `data-mk-id`, `[data-mk-sort-handle]`, `[data-mk-sortable-group]` (opcional; `data-mk-sortable-locked` no acepta elementos). Durante el arrastre: `[data-mk-sorting]` en la raíz, `[data-mk-dragging]` en el hueco, `[data-mk-sortable-clone]` en la copia; levantado con teclado: `[data-mk-sort-grabbed]`.
 

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

@@ -7,7 +7,7 @@ import { inert, warnOnce, type Instance } from '../../core/types';
 import { captureLayout, reflowLayout } from '../../motion/layout';
 
 /*
- * Stepbro's drag reorder (Tasks useDragReorder, "transform" mode). Past 6 px
+ * Drag reorder for lists and groups. Past 6 px
  * the item lifts (0.18 s) into a floating copy that follows the pointer on a
  * spring (1100/38, heavier when bigger) and tilts with its speed (spring
  * 170/13, up to 14°); the item it left is a hidden slot. The others never
@@ -36,7 +36,7 @@ export interface SortableOptions {
   /** Drag only from [data-mk-sort-handle] (always so on touch screens). */
   handle?: boolean;
   autoScroll?: boolean;
-  /** The floating copy's spring (Stepbro: 1100 / 38). */
+  /** The floating copy's spring (default: 1100 / 38). */
   follow?: { stiffness?: number; damping?: number };
   labels?: SortableLabels;
   onReorder?: (detail: ReorderDetail) => void;
@@ -50,7 +50,7 @@ export interface ReorderDetail {
   fromIndex: number;
   toIndex: number;
   groupChanged: boolean;
-  /** Neighbours at the destination (Stepbro sends one to its API as the anchor). */
+  /** Neighbours at the destination. */
   afterId: string | null;
   beforeId: string | null;
 }
@@ -537,7 +537,7 @@ export function createSortable(root: HTMLElement | null, options: SortableOption
       draggedEls.add(item);
     }
     const box = item.getBoundingClientRect();
-    // Arriving somewhere else: cross-fade to a copy styled by the new place (Stepbro's "floatingTo").
+    // Arriving somewhere else: cross-fade to a copy styled by the new place.
     if (layers.length === 1 && ownerOf(item) !== layers[0]!.el.parentElement) {
       const origin = layers[0]!.el.style.transformOrigin.split(' ').map(parseFloat);
       layers.push(makeLayer(item, ownerOf(item), origin[0] ?? 0, origin[1] ?? 0));

package/src/recipes/sortable/sortable.css

@@ -1,4 +1,4 @@
-/* sortable — Stepbro's drag reorder (Tasks): the item lifts into a floating copy that tilts; the others make room. */
+/* sortable — drag reorder: the item lifts into a floating copy that tilts; the others make room. */
 [data-mk-sorting] {
   -webkit-user-select: none;
   user-select: none;

package/src/recipes/spring-cards/README.md

@@ -2,8 +2,6 @@
 
 Tarjetas en abanico: entran escalando con rebote, cada una tiene un resorte que arranca desplazado al azar y vuelve a su sitio, y el cursor las empuja al pasar cerca.
 
-Origen: spencergabor.com — portada (Hero.vue, `useSpring`).
-
 ## Vanilla / Astro
 
 ```html

package/src/recipes/spring-cards/create-spring-cards.ts

@@ -8,7 +8,7 @@ import { createScope } from '../../core/scope';
 import { inert, warnOnce, type Instance } from '../../core/types';
 
 /*
- * spencergabor.com hero: each card owns a spring that starts at a random offset
+ * spring-cards: each card owns a spring that starts at a random offset
  * and is pulled home shortly after; pointer movement near a card adds velocity
  * with a (1 − distance)^falloff · push weight. CSS turns the variables into
  * translate/rotate (see spring-cards.css).

package/src/recipes/spring-cards/spring-cards.css

@@ -1,4 +1,4 @@
-/* spring-cards — card geometry and tilt from spencergabor.com (Hero) */
+/* spring-cards — card geometry and tilt */
 
 [data-mk-card] {
   display: grid;

package/src/recipes/sticker/README.md

@@ -0,0 +1,59 @@
+# sticker
+
+Un sticker troquelado y holográfico, como los del hero y el contacto de DOVV Studio:
+
+- **Entrada:** pasa de escala .4 y opacidad 0 a su tamaño en 0.7 s con la curva `slot` (`.34,1.56,.64,1`). Para escalonarlos, usa `--mk-sticker-delay` (0.15 s entre uno y otro en la referencia).
+- **Hover:** la rotación pasa a `--mk-sticker-rot × −0.6` y la escala a 1.08, en 0.4 s con la misma curva.
+- **Holograma:** el foil y el brillo siguen al ratón sobre el sticker (lerp .08). Sin ratón, o en táctil, derivan solos. Sólo se anima mientras el sticker es visible.
+- **Despegar:** al presionar, el borde más cercano se levanta un poco y el sticker conserva la pose que tenía, sin saltos aunque estuviera en hover. Al arrastrar en cualquier dirección (también hacia fuera, como al jalarlo), el pliegue avanza con la distancia y deja ver un dorso de papel con sombra. Si lo sueltas pronto, se vuelve a pegar en 380 ms. Pasado el 30 % del área, o tras arrastrar la mitad de su lado largo (80 px como mínimo), se suelta: sigue al puntero (lerp .22), crece un 8 % y se inclina con la velocidad (±16°). Al soltarlo cae con gravedad (1600 px/s²) y giro, y a los 2.5 s vuelve a su sitio con la entrada.
+
+El pliegue es propio: el frente se recorta con `clip-path` a un lado de la línea de pliegue y el dorso es una copia reflejada sobre ella. No usa Peel.js ni dependencias. Respecto a la referencia, el kit añade cuatro cosas: congela la pose al presionar, despega también al jalar hacia fuera, limita el estiramiento (la esquina no se aleja de la arista opuesta más que su distancia original) y sombrea el dorso. Así no levanta de golpe toda una píldora larga.
+
+## Vanilla / Astro
+
+```html
+<div class="hero" style="position: relative">
+  <div class="mk-sticker" data-mk="sticker" aria-hidden="true"
+       style="position: absolute; left: -4%; top: -12%; --mk-sticker-rot: -9deg; --mk-sticker-delay: .9s">
+    <span class="mk-sticker__pill">Framer expert</span>
+  </div>
+  <div class="mk-sticker mk-sticker--lime" data-mk="sticker" aria-hidden="true" style="position: absolute; right: 0; bottom: 0; --mk-sticker-rot: 7deg">
+    <span class="mk-sticker__badge">4.9 ★</span>
+  </div>
+</div>
+```
+
+El arte puede ser `.mk-sticker__pill` (cápsula), `.mk-sticker__badge` (círculo, `--mk-sticker-size`) o cualquier elemento con `.mk-sticker__art` (`--mk-sticker-radius`). Paletas: por defecto naranja, `--pink`, `--blue`, `--lime` y `--gold`. Para una propia, define `--mk-sticker-foil` (un gradiente) y `--mk-sticker-ink`.
+
+Sin `autoInit`: `createSticker(el, opciones)`. Devuelve `state` (`idle | peeling | carried | falling | away`) y `destroy()`.
+
+## React
+
+```tsx
+const ref = useRef<HTMLDivElement>(null);
+useSticker(ref, { returnDelay: 2500 });
+return <div ref={ref} className="mk-sticker mk-sticker--blue" aria-hidden="true"><span className="mk-sticker__pill">hey!</span></div>;
+```
+
+Mientras está despegado, el elemento se mueve a `document.body` con `position: fixed` (así no lo recortan los contenedores) y después vuelve a su padre. No desmontes el sticker en ese intervalo; si lo haces, `destroy()` lo devuelve a su sitio.
+
+## Opciones
+
+| Opción | Por defecto | Qué hace |
+|---|---|---|
+| `peel` | `true` | Permite despegarlo arrastrando |
+| `holo` | `true` | Foil y brillo que siguen al puntero |
+| `detachAt` | `0.3` | Fracción del área levantada a partir de la cual se suelta |
+| `detachDistance` | mitad del lado largo, mín. 80 | px de arrastre (sin escala) a partir de los cuales se suelta |
+| `returnDelay` | `2500` | ms oculto después de caer |
+| `onPeel`, `onReturn` | — | Al soltarse y al volver |
+
+## Variables CSS
+
+`--mk-sticker-rot`, `--mk-sticker-delay`, `--mk-sticker-scale` (la referencia usa .8 bajo 1200 px y .6 bajo 810 px), `--mk-sticker-foil`, `--mk-sticker-ink`, `--mk-sticker-size` y `--mk-sticker-radius`.
+
+El dorso de papel cubre `.mk-sticker__pill`, `__badge` y `__art`. Si el arte es una forma libre (un `<img>` o `<svg>` con transparencia), añade `data-mk-sticker-back="silhouette"` al sticker y el dorso será su silueta blanca.
+
+## Accesibilidad
+
+Es decoración: márcalo con `aria-hidden="true"` y deja el texto importante en el contenido. Si el sticker transmite información, usa `peel: false`. Con movimiento reducido no hay entrada, hover ni holograma animado; despegar sigue funcionando porque lo hace el usuario, pero sin caída: se oculta y vuelve.