@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/src/css/controls/glass.css

@@ -0,0 +1,220 @@
+/*
+ * .mk-glass — Dousan Miao's glass in one element: a translucent surface with a
+ * 4 px backdrop blur, an optical ring (::before) whose conic highlight turns
+ * from −75° to −125° on hover, and a specular band (::after) that slides and
+ * tilts when pressed. <span class="mk-glass__shadow" aria-hidden="true"> inside
+ * adds Dousan's gradient shadow. Colours follow the theme's scheme (light-dark()).
+ */
+@property --mk-glass-angle-1 {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: -75deg;
+}
+
+@property --mk-glass-angle-2 {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: -45deg;
+}
+
+.mk-glass {
+  --mk-glass-blur: 4px;
+  --mk-glass-border: clamp(1px, 0.0625em, 4px);
+  --mk-glass-tint: rgb(255 255 255 / 55%);
+  --mk-glass-edge: light-dark(rgb(255 255 255 / 5%), rgb(255 255 255 / 2%));
+  --mk-glass-middle: light-dark(rgb(255 255 255 / 22%), rgb(255 255 255 / 8%));
+  --mk-glass-ring: light-dark(rgb(0 0 0 / 50%), rgb(255 255 255 / 70%));
+  --mk-glass-ring-top: light-dark(rgb(255 255 255 / 50%), rgb(255 255 255 / 20%));
+  --mk-glass-ring-bottom: light-dark(rgb(255 255 255 / 50%), rgb(255 255 255 / 10%));
+  --mk-glass-shadow:
+    inset 0 0.125em 0.125em light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 5%)),
+    inset 0 -0.125em 0.125em light-dark(rgb(255 255 255 / 50%), rgb(255 255 255 / 25%)),
+    0 0.25em 0.125em -0.125em light-dark(rgb(0 0 0 / 20%), rgb(0 0 0 / 70%)),
+    0 0 0.1em 0.25em inset light-dark(rgb(255 255 255 / 20%), rgb(255 255 255 / 15%)),
+    0 0 0 0 light-dark(rgb(255 255 255), rgb(255 255 255 / 10%));
+  --mk-glass-shadow-hover:
+    inset 0 0.125em 0.125em light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 8%)),
+    inset 0 -0.125em 0.125em light-dark(rgb(255 255 255 / 50%), rgb(255 255 255 / 35%)),
+    0 0.15em 0.05em -0.1em light-dark(rgb(0 0 0 / 25%), rgb(0 0 0 / 90%)),
+    0 0 0.05em 0.1em inset light-dark(rgb(255 255 255 / 50%), rgb(255 255 255 / 35%)),
+    0 0 0 0 light-dark(rgb(255 255 255), rgb(255 255 255 / 20%));
+  --mk-glass-shadow-active:
+    inset 0 0.125em 0.125em rgb(0 0 0 / 5%), inset 0 -0.125em 0.125em rgb(255 255 255 / 50%), 0 0.125em 0.125em -0.125em rgb(0 0 0 / 20%),
+    0 0 0.1em 0.25em inset rgb(255 255 255 / 20%), 0 0.225em 0.05em 0 rgb(0 0 0 / 5%), 0 0.25em 0 0 rgb(255 255 255 / 75%),
+    inset 0 0.25em 0.05em 0 rgb(0 0 0 / 15%);
+  position: relative;
+  isolation: isolate;
+  border: 0;
+  border-radius: 999vw;
+  /* Dousan: dark text on light, white on dark. */
+  color: var(--mk-glass-fg, light-dark(#121212, #fff));
+  background: linear-gradient(-75deg, var(--mk-glass-edge), var(--mk-glass-middle), var(--mk-glass-edge));
+  box-shadow: var(--mk-glass-shadow);
+  -webkit-backdrop-filter: blur(var(--mk-glass-blur));
+  backdrop-filter: blur(var(--mk-glass-blur));
+  transition:
+    transform var(--mk-dur-press) var(--mk-ease-press),
+    box-shadow 0.4s var(--mk-ease-glass),
+    -webkit-backdrop-filter 0.4s var(--mk-ease-glass),
+    backdrop-filter 0.4s var(--mk-ease-glass);
+}
+
+/* Optical ring: a conic highlight masked to the border. Also replaces .mk-button's state layer. */
+.mk-glass::before,
+.mk-glass:is(:hover, :focus-visible, :active)::before {
+  position: absolute;
+  inset: calc(var(--mk-glass-border) / -2);
+  z-index: 1;
+  box-sizing: border-box;
+  padding: var(--mk-glass-border);
+  border-radius: inherit;
+  background:
+    conic-gradient(
+      from var(--mk-glass-angle-1) at 50% 50%,
+      var(--mk-glass-ring),
+      transparent 5% 40%,
+      var(--mk-glass-ring) 50%,
+      transparent 60% 95%,
+      var(--mk-glass-ring)
+    ),
+    linear-gradient(180deg, var(--mk-glass-ring-top), var(--mk-glass-ring-bottom));
+  box-shadow: inset 0 0 0 calc(var(--mk-glass-border) / 2) rgb(255 255 255 / 50%);
+  content: '';
+  opacity: 1;
+  pointer-events: none;
+  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+  -webkit-mask-clip: content-box, border-box;
+  mask-clip: content-box, border-box;
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  transition: --mk-glass-angle-1 0.5s;
+}
+
+/* Specular band, screened over the content. */
+.mk-glass::after {
+  position: absolute;
+  inset: calc(var(--mk-glass-border) / 2);
+  z-index: 1;
+  border-radius: inherit;
+  background: linear-gradient(var(--mk-glass-angle-2), transparent 0%, var(--mk-glass-tint) 40% 50%, transparent 55%) 0% 50% / 200% 200%
+    no-repeat;
+  content: '';
+  mix-blend-mode: screen;
+  pointer-events: none;
+  transition:
+    background-position 0.5s var(--mk-ease-glass),
+    --mk-glass-angle-2 0.5s var(--mk-ease-glass);
+}
+
+/* Dousan's gradient shadow (optional child). Only its lower part shows: it sits under the button. */
+.mk-glass__shadow {
+  --mk-glass-cut: 2em;
+  position: absolute;
+  top: calc(var(--mk-glass-cut) / -2);
+  left: calc(var(--mk-glass-cut) / -2);
+  z-index: -1;
+  width: calc(100% + var(--mk-glass-cut));
+  height: calc(100% + var(--mk-glass-cut));
+  overflow: visible;
+  filter: blur(clamp(2px, 0.125em, 12px));
+  pointer-events: none;
+  -webkit-mask-image: linear-gradient(transparent 55%, #000);
+  mask-image: linear-gradient(transparent 55%, #000);
+  transition: filter 0.4s var(--mk-ease-glass);
+}
+
+.mk-glass__shadow::after {
+  position: absolute;
+  top: calc(var(--mk-glass-cut) - 0.5em);
+  left: calc(var(--mk-glass-cut) - 0.875em);
+  box-sizing: border-box;
+  width: calc(100% - var(--mk-glass-cut) - 0.25em);
+  height: calc(100% - var(--mk-glass-cut) - 0.25em);
+  padding: 0.125em;
+  border-radius: 999vw;
+  background: linear-gradient(180deg, light-dark(rgb(0 0 0 / 22%), rgb(0 0 0 / 85%)), light-dark(rgb(0 0 0 / 10%), rgb(0 0 0 / 55%)));
+  content: '';
+  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+  -webkit-mask-clip: content-box, border-box;
+  mask-clip: content-box, border-box;
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  transition:
+    top 0.4s var(--mk-ease-glass),
+    opacity 0.4s var(--mk-ease-glass);
+}
+
+@media (hover: hover) {
+  .mk-glass:hover {
+    box-shadow: var(--mk-glass-shadow-hover);
+    -webkit-backdrop-filter: blur(0.01em);
+    backdrop-filter: blur(0.01em);
+  }
+
+  .mk-glass:hover::before {
+    --mk-glass-angle-1: -125deg;
+  }
+
+  .mk-glass:hover::after {
+    background-position: 25% 50%;
+  }
+
+  .mk-glass:hover .mk-glass__shadow {
+    filter: blur(clamp(2px, 0.0625em, 6px));
+  }
+
+  .mk-glass:hover .mk-glass__shadow::after {
+    top: calc(var(--mk-glass-cut) - 0.875em);
+  }
+}
+
+.mk-glass:active {
+  box-shadow: var(--mk-glass-shadow-active);
+  transform: scale(0.95);
+}
+
+.mk-glass:active::after {
+  --mk-glass-angle-2: -15deg;
+  background-position: 50% 15%;
+}
+
+.mk-glass:active .mk-glass__shadow {
+  filter: blur(clamp(2px, 0.125em, 12px));
+}
+
+.mk-glass:active .mk-glass__shadow::after {
+  top: calc(var(--mk-glass-cut) - 0.5em);
+  opacity: 0.75;
+}
+
+/* The glass presses with its own spring: no squash. */
+.mk-button.mk-glass:focus {
+  animation: none;
+}
+
+.mk-glass:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 3px;
+}
+
+@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
+  .mk-glass {
+    background: color-mix(in srgb, var(--mk-bg) 80%, transparent);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-glass,
+  .mk-glass::before,
+  .mk-glass::after,
+  .mk-glass__shadow,
+  .mk-glass__shadow::after {
+    transition: none;
+  }
+
+  .mk-glass:active {
+    transform: none;
+  }
+}

package/src/css/controls/icon.css

@@ -0,0 +1,26 @@
+/* .mk-icon — Material Symbols Rounded by ligature (<span class="mk-icon">home</span>); css/fonts.css loads the font. */
+.mk-icon {
+  display: inline-block;
+  font-family: 'Material Symbols Rounded';
+  font-size: 24px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  white-space: nowrap;
+  overflow-wrap: normal;
+  direction: ltr;
+  font-feature-settings: 'liga';
+  font-variation-settings:
+    'FILL' var(--mk-icon-fill, 0),
+    'wght' var(--mk-icon-weight, 400),
+    'GRAD' 0,
+    'opsz' 24;
+  -webkit-font-smoothing: antialiased;
+  user-select: none;
+}
+
+.mk-icon--fill {
+  --mk-icon-fill: 1;
+}

package/src/css/controls/segmented.css

@@ -0,0 +1,60 @@
+/*
+ * .mk-segmented — a capsule group whose indicator slides (pair it with the `tabs` recipe:
+ * data-mk="tabs", [data-mk-tab] buttons and a [data-mk-indicator]).
+ */
+.mk-segmented {
+  position: relative;
+  display: inline-flex;
+  width: fit-content;
+  max-width: 100%;
+  padding: 4px;
+  overflow-x: auto;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-surface-3);
+  isolation: isolate;
+  scrollbar-width: none;
+}
+
+.mk-segmented > :is(button, a, [data-mk-tab]) {
+  position: relative;
+  z-index: 1;
+  flex: none;
+  height: 40px;
+  padding: 0 16px;
+  border: 0;
+  border-radius: var(--mk-radius-full);
+  background: transparent;
+  color: var(--mk-muted);
+  font-family: var(--md-sys-typescale-label-large-font);
+  font-size: var(--md-sys-typescale-label-large-size);
+  font-weight: var(--md-sys-typescale-label-large-weight);
+  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+  text-decoration: none;
+  cursor: pointer;
+  transition: color 0.25s ease;
+}
+
+.mk-segmented > [aria-selected='true'] {
+  color: var(--mk-on-accent-soft);
+}
+
+.mk-segmented > :is(button, a, [data-mk-tab]):focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: -2px;
+}
+
+.mk-segmented > [data-mk-indicator] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-accent-soft);
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-segmented > * {
+    transition: none;
+  }
+}

package/src/css/controls/switch.css

@@ -0,0 +1,72 @@
+/* .mk-switch — <input type="checkbox" role="switch" class="mk-switch">. The thumb grows from 16 to 24 px when on. */
+.mk-switch {
+  position: relative;
+  flex: none;
+  width: 52px;
+  height: 32px;
+  margin: 0;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-surface-5);
+  box-shadow: inset 0 0 0 2px var(--mk-outline);
+  cursor: pointer;
+  appearance: none;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    background-color 0.3s var(--mk-ease-signature),
+    box-shadow 0.3s ease;
+}
+
+.mk-switch::before {
+  position: absolute;
+  top: 50%;
+  left: 8px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--mk-outline);
+  content: '';
+  translate: 0 -50%;
+  transition:
+    left 0.3s var(--mk-ease-signature),
+    width 0.3s var(--mk-ease-signature),
+    height 0.3s var(--mk-ease-signature),
+    background-color 0.3s ease;
+}
+
+.mk-switch:checked {
+  background: var(--mk-accent);
+  box-shadow: none;
+}
+
+.mk-switch:checked::before {
+  left: 24px;
+  width: 24px;
+  height: 24px;
+  background: var(--mk-on-accent);
+}
+
+.mk-switch:active::before {
+  width: 28px;
+  height: 28px;
+}
+
+.mk-switch:checked:active::before {
+  left: 22px;
+}
+
+.mk-switch:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+.mk-switch:disabled {
+  opacity: 0.38;
+  cursor: default;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-switch,
+  .mk-switch::before {
+    transition: none;
+  }
+}

package/src/css/default-theme.css

@@ -0,0 +1,123 @@
+/* Default palette (Stepbro "neogreen") with zero specificity: any [data-mk-theme] wins.
+   Generated by scripts/import-themes.mjs; do not edit. */
+:where(:root) {
+  --md-sys-color-background: #f1fded;
+  --md-sys-color-on-background: #141e14;
+  --md-sys-color-surface: #f1fded;
+  --md-sys-color-surface-dim: #d2ddce;
+  --md-sys-color-surface-bright: #f1fded;
+  --md-sys-color-surface-container-lowest: #ffffff;
+  --md-sys-color-surface-container-low: #ebf7e7;
+  --md-sys-color-surface-container: #e6f1e1;
+  --md-sys-color-surface-container-high: #e0ecdc;
+  --md-sys-color-surface-container-highest: #dae6d6;
+  --md-sys-color-on-surface: #141e14;
+  --md-sys-color-surface-variant: #d5e8d2;
+  --md-sys-color-on-surface-variant: #3b4b3b;
+  --md-sys-color-inverse-surface: #293328;
+  --md-sys-color-inverse-on-surface: #e8f4e4;
+  --md-sys-color-outline: #6b7b69;
+  --md-sys-color-outline-variant: #b9cbb7;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #006e2c;
+  --md-sys-color-primary: #006e2c;
+  --md-sys-color-on-primary: #ffffff;
+  --md-sys-color-primary-container: #4dff7e;
+  --md-sys-color-on-primary-container: #00521f;
+  --md-sys-color-inverse-primary: #00e563;
+  --md-sys-color-secondary: #006e2c;
+  --md-sys-color-on-secondary: #ffffff;
+  --md-sys-color-secondary-container: #9afda6;
+  --md-sys-color-on-secondary-container: #005721;
+  --md-sys-color-tertiary: #006972;
+  --md-sys-color-on-tertiary: #ffffff;
+  --md-sys-color-tertiary-container: #7ef1ff;
+  --md-sys-color-on-tertiary-container: #004f56;
+  --md-sys-color-error: #ba1a1a;
+  --md-sys-color-on-error: #ffffff;
+  --md-sys-color-error-container: #ffdad6;
+  --md-sys-color-on-error-container: #410002;
+}
+
+@media (prefers-color-scheme: dark) {
+  :where(:root:not([data-mk-mode="light"])) {
+    --md-sys-color-background: #0c160d;
+    --md-sys-color-on-background: #dae6d6;
+    --md-sys-color-surface: #0c160d;
+    --md-sys-color-surface-dim: #0c160d;
+    --md-sys-color-surface-bright: #313c31;
+    --md-sys-color-surface-container-lowest: #071008;
+    --md-sys-color-surface-container-low: #141e14;
+    --md-sys-color-surface-container: #182218;
+    --md-sys-color-surface-container-high: #222c22;
+    --md-sys-color-surface-container-highest: #2d372d;
+    --md-sys-color-on-surface: #dae6d6;
+    --md-sys-color-surface-variant: #3b4b3b;
+    --md-sys-color-on-surface-variant: #b9cbb7;
+    --md-sys-color-inverse-surface: #dae6d6;
+    --md-sys-color-inverse-on-surface: #293328;
+    --md-sys-color-outline: #849582;
+    --md-sys-color-outline-variant: #3b4b3b;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-surface-tint: #00e563;
+    --md-sys-color-primary: #ffffff;
+    --md-sys-color-on-primary: #003913;
+    --md-sys-color-primary-container: #00f46b;
+    --md-sys-color-on-primary-container: #004a1b;
+    --md-sys-color-inverse-primary: #006e2c;
+    --md-sys-color-secondary: #7adb88;
+    --md-sys-color-on-secondary: #003913;
+    --md-sys-color-secondary-container: #006a2a;
+    --md-sys-color-on-secondary-container: #ffffff;
+    --md-sys-color-tertiary: #ffffff;
+    --md-sys-color-on-tertiary: #00363c;
+    --md-sys-color-tertiary-container: #4be8f9;
+    --md-sys-color-on-tertiary-container: #00474d;
+    --md-sys-color-error: #ffb4ab;
+    --md-sys-color-on-error: #690005;
+    --md-sys-color-error-container: #93000a;
+    --md-sys-color-on-error-container: #ffdad6;
+  }
+}
+
+:where(:root[data-mk-mode="dark"]) {
+  --md-sys-color-background: #0c160d;
+  --md-sys-color-on-background: #dae6d6;
+  --md-sys-color-surface: #0c160d;
+  --md-sys-color-surface-dim: #0c160d;
+  --md-sys-color-surface-bright: #313c31;
+  --md-sys-color-surface-container-lowest: #071008;
+  --md-sys-color-surface-container-low: #141e14;
+  --md-sys-color-surface-container: #182218;
+  --md-sys-color-surface-container-high: #222c22;
+  --md-sys-color-surface-container-highest: #2d372d;
+  --md-sys-color-on-surface: #dae6d6;
+  --md-sys-color-surface-variant: #3b4b3b;
+  --md-sys-color-on-surface-variant: #b9cbb7;
+  --md-sys-color-inverse-surface: #dae6d6;
+  --md-sys-color-inverse-on-surface: #293328;
+  --md-sys-color-outline: #849582;
+  --md-sys-color-outline-variant: #3b4b3b;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #00e563;
+  --md-sys-color-primary: #ffffff;
+  --md-sys-color-on-primary: #003913;
+  --md-sys-color-primary-container: #00f46b;
+  --md-sys-color-on-primary-container: #004a1b;
+  --md-sys-color-inverse-primary: #006e2c;
+  --md-sys-color-secondary: #7adb88;
+  --md-sys-color-on-secondary: #003913;
+  --md-sys-color-secondary-container: #006a2a;
+  --md-sys-color-on-secondary-container: #ffffff;
+  --md-sys-color-tertiary: #ffffff;
+  --md-sys-color-on-tertiary: #00363c;
+  --md-sys-color-tertiary-container: #4be8f9;
+  --md-sys-color-on-tertiary-container: #00474d;
+  --md-sys-color-error: #ffb4ab;
+  --md-sys-color-on-error: #690005;
+  --md-sys-color-error-container: #93000a;
+  --md-sys-color-on-error-container: #ffdad6;
+}

package/src/css/effects/README.md

@@ -0,0 +1,134 @@
+# effects
+
+Efectos sueltos para cualquier elemento: las utilidades de animación de la hoja común de Stepbro y, de Dousan Miao, el blur progresivo, la flotación y el confeti de éxito, más un grano de película en CSS. Se usan con clases; dos funciones (`animate`, `leave`) las reproducen desde código.
+
+| Pieza | Qué hace | Origen |
+|---|---|---|
+| `.mk-anim-*` | Salidas, colapso, resaltado, sacudidas, aparición, barrido, entrada de progreso | Stepbro (hoja común): `item-out*`, `today-appt-item-out`, `animation-highlight-2`, `shake`, `asyncstate-fade`, `entry-animation-1`, `progress-indicator-in`; Dousan: `shake` fuerte |
+| `.mk-loading`, `.mk-loading--soft`, `.mk-shimmer` | Barridos de carga y brillo al pasar | Stepbro `animation-loading-1/2`, `hover-magic-1` |
+| `.mk-text-gradient`, `.mk-text-rainbow` | Texto con degradado en movimiento | Stepbro `text-gradient-pretty-animated`, `text-gradient-rainbow-animated` |
+| `.mk-frost` | Blur que crece hacia un borde | Dousan `bottom-gradient-blur` |
+| `.mk-float`, `.mk-float-group` | Vaivén lento de etiquetas | Dousan, etiquetas de cristal flotantes |
+| `.mk-grain` | Grano de película | Aproximación en CSS del ruido de Siena (allí es un shader) |
+| `.mk-success` + `confetti()` | Marca de éxito y confeti | Dousan, éxito del formulario |
+| `.mk-fade-x`, `.mk-fade-x-soft`, `.mk-fade-y` | Bordes que se desvanecen con máscara | Siena |
+
+Stepbro declara también `card-enter`, `animation-general-in`, `animation-general-in-2` y `search-result-item-in`, pero ninguna regla ni script los usa y no tienen duración: no se portan.
+
+## Animaciones (`.mk-anim-*`)
+
+| Nombre | Movimiento | Tiempo |
+|---|---|---|
+| `out` | Sube 20 px, blur 16, se apaga | 0.5 s `ease` |
+| `out-left` | 64 px a la izquierda, blur 16, se apaga | 0.5 s `ease` |
+| `out-bottom` | Baja 24 px, blur 16, se apaga | 0.5 s `ease` |
+| `collapse` | Se pliega (altura, padding y margen) mientras se desenfoca | 0.25 s |
+| `highlight` | Anillo interior de 4 px en `primary-container` que aparece y se va | 1 s |
+| `shake` | ±4 px | 0.5 s `cubic-bezier(.6,.6,.12,1.26)` |
+| `shake-strong` | ±10 px (Dousan, proyecto no compartible) | 0.4 s `ease-in-out` |
+| `fade` | Aparece | 0.3 s `ease` |
+| `wipe` | Un velo del color de la superficie se retira hacia la derecha | 0.7 s `cubic-bezier(.38,.49,0,1)` |
+| `progress-in` | Aparece con una curva que espera y luego llega | 1 s `cubic-bezier(.75,0,.41,-.06)` |
+
+```html
+<li class="mk-anim-fade">Nueva tarea</li>
+```
+
+```js
+import { animate, leave } from '@yewdiel21/motion-kit';
+
+await animate(field, 'shake');            // se puede repetir: vuelve a empezar
+await animate(card, 'highlight');
+await leave(row, 'out-left');             // anima y quita la fila
+await leave(row, 'collapse');             // se pliega y la quita
+await leave(row, 'out', { remove: false }); // anima y la deja con hidden
+```
+
+- `animate(el, nombre, { signal })` → promesa que se cumple cuando termina la animación (o la corta `signal`). Quita la clase al terminar, salvo en las salidas, que dejan el estado final. Si el elemento no anima (por ejemplo, está oculto), se cumple de todos modos tras la duración.
+- `leave(el, salida, { remove })` → anima `out`, `out-left`, `out-bottom` o `collapse` y quita el elemento (o le pone `hidden`). Si el foco estaba dentro, lo suelta.
+- `collapse` parte de la altura actual (`animate` la escribe en `--mk-collapse-from`; en CSS puro vale 94 px).
+- En React, cuando la lista la pinta tu estado: `await leave(fila, 'out', { remove: false })` y después quítala del estado.
+
+## Carga y brillo
+
+```html
+<div class="mk-card mk-loading">…</div>
+<div class="mk-card mk-loading mk-loading--soft">…</div>
+<button class="mk-button mk-shimmer">Pro</button>
+```
+
+`.mk-loading` desactiva el puntero mientras barre (1 s); `--soft` barre con el color de fondo (`--mk-loading-color` para otras superficies). `.mk-shimmer` barre cada 2 s.
+
+## Texto con degradado
+
+```html
+<h1><span class="mk-text-gradient">Tu asistente</span></h1>
+<span class="mk-text-rainbow">Nuevo</span>
+```
+
+`mk-text-gradient` usa los colores del tema (primary, secondary, tertiary y sus contenedores) en 8 s; `mk-text-rainbow`, siete colores con variante clara y oscura, en 6 s.
+
+## Frost
+
+```html
+<div style="position: relative; overflow: auto">
+  …contenido que pasa por debajo…
+  <div class="mk-frost" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></div>
+</div>
+```
+
+Cinco capas con `backdrop-filter` de 1, 1, 1.5, 2 y 2.5 px, cada una con una máscara que empieza más abajo (0, 25, 45, 65 y 80 %): el desenfoque crece hacia el borde. `.mk-frost--top` lo pone arriba; `.mk-frost--fixed`, fijo a la ventana como en Dousan. Variables: `--mk-frost-height` (60px), `--mk-frost-strength` (multiplica los blurs).
+
+Dentro de un contenedor que hace scroll, para que se quede en el borde visible: `.mk-frost { position: sticky; bottom: 0; margin-top: calc(var(--mk-frost-height, 60px) * -1) }` como último hijo.
+
+React: `<Frost position="bottom" fixed={false} height={60} strength={1} />`.
+
+## Flotación
+
+```html
+<div class="mk-float-group">
+  <span class="mk-chip mk-glass">Shipped</span>
+  <span class="mk-chip mk-glass">Design</span>
+</div>
+<span class="mk-float" style="--mk-float-y: 6px">Suelto</span>
+```
+
+Cada hijo de `.mk-float-group` sigue uno de los cinco recorridos de Dousan (±3.5–5 px en 5–6.2 s). Al pasar crece a 1.05 y al presionar baja a .98 con el resorte de Dousan. Variables: `--mk-float-y`, `--mk-float-duration`.
+
+## Grano
+
+```html
+<section class="hero mk-grain">…</section>
+```
+
+Una capa de ruido en `overlay` con opacidad `--mk-grain` (.07) que salta entre 8 posiciones en 0.8 s. Si el elemento no está posicionado, pasa a `position: relative`.
+
+## Éxito y confeti
+
+```html
+<span class="mk-success" hidden><span class="mk-icon">check</span></span>
+```
+
+```js
+import { confetti } from '@yewdiel21/motion-kit';
+mark.hidden = false;
+const shot = confetti(button); // { stop(), finished }
+```
+
+`.mk-success` crece de 0 y se endereza (−45°) con el resorte 260/18 de Dousan tras 0.15 s. `confetti(origen, { count, colors, container })`: 45 papelitos salen del centro del origen (2–8 px por frame, un poco hacia arriba), caen con gravedad .15, frenan .98, giran y se apagan (.015–.03 por frame). Sin `colors`, usa los del tema. El canvas no recibe puntero, está oculto a lectores de pantalla y se retira solo.
+
+## Bordes que se desvanecen
+
+```html
+<div class="mk-fade-x">…una banda o un carrusel…</div>
+```
+
+`.mk-fade-x` (transparente → negro al 20 % y desde el 80 %), `.mk-fade-x-soft` (15 / 30 / 70 / 85 %), `.mk-fade-y` (vertical). Son máscaras: el contenido se desvanece sobre cualquier fondo.
+
+## Variables CSS
+
+`--mk-wipe-color`, `--mk-loading-color`, `--mk-collapse-from`, `--mk-frost-height`, `--mk-frost-strength`, `--mk-float-y`, `--mk-float-duration`, `--mk-grain`. Resortes: `--mk-ease-press` / `--mk-dur-press` (400/10), `--mk-ease-success` / `--mk-dur-success` (260/18).
+
+## Accesibilidad y movimiento reducido
+
+El frost, el grano y el canvas del confeti son decorativos (`aria-hidden`, sin puntero). Con `prefers-reduced-motion: reduce` se paran la flotación, el grano, los degradados y los barridos; las salidas saltan a su estado final; `animate` y `leave` terminan al instante y `confetti` no dibuja.