@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/dist/css/effects.css

@@ -0,0 +1,587 @@
+/* css/effects/anim.css */
+/* Stepbro's utility animations (shared stylesheet) and Dousan's strong shake. Replay them with animate(el, name). */
+.mk-anim-out {
+  animation: mk-out 0.5s ease forwards;
+}
+
+.mk-anim-out-left {
+  animation: mk-out-left 0.5s ease forwards;
+}
+
+.mk-anim-out-bottom {
+  animation: mk-out-bottom 0.5s ease forwards;
+}
+
+.mk-anim-collapse {
+  overflow: hidden;
+  animation: mk-collapse 0.25s forwards;
+}
+
+.mk-anim-highlight {
+  animation: mk-highlight 1s;
+}
+
+.mk-anim-shake {
+  animation: mk-shake 0.5s cubic-bezier(0.6, 0.6, 0.12, 1.26) forwards;
+}
+
+.mk-anim-shake-strong {
+  animation: mk-shake-strong 0.4s ease-in-out;
+}
+
+.mk-anim-fade {
+  animation: mk-fade 0.3s ease both;
+}
+
+.mk-anim-wipe {
+  position: relative;
+  overflow: hidden;
+}
+
+.mk-anim-wipe::before {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: linear-gradient(to right, transparent, var(--mk-wipe-color, var(--md-sys-color-surface-container)) 30%);
+  content: '';
+  pointer-events: none;
+  transform: scaleX(1.4) translate(100%);
+  transform-origin: right;
+  animation: mk-wipe 0.7s cubic-bezier(0.38, 0.49, 0, 1);
+}
+
+.mk-anim-progress-in {
+  animation: mk-progress-in 1s cubic-bezier(0.75, 0, 0.41, -0.06);
+}
+
+@keyframes mk-out {
+  from {
+    opacity: 1;
+    filter: blur(0);
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: 0;
+    filter: blur(16px);
+    transform: translateY(-20px);
+  }
+}
+
+@keyframes mk-out-left {
+  from {
+    opacity: 1;
+    filter: blur(0);
+    transform: translate(0);
+  }
+
+  to {
+    opacity: 0;
+    filter: blur(16px);
+    transform: translate(-64px);
+  }
+}
+
+@keyframes mk-out-bottom {
+  from {
+    opacity: 1;
+    filter: blur(0);
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: 0;
+    filter: blur(16px);
+    transform: translateY(24px);
+  }
+}
+
+@keyframes mk-collapse {
+  from {
+    max-height: var(--mk-collapse-from, 94px);
+  }
+
+  to {
+    max-height: 0;
+    margin-bottom: -8px;
+    padding-top: 0;
+    padding-bottom: 0;
+    opacity: 0;
+    filter: blur(16px);
+  }
+}
+
+@keyframes mk-highlight {
+  0% {
+    box-shadow: 0 0 0 0 var(--md-sys-color-primary-container) inset;
+    transform: scale(1);
+  }
+
+  50% {
+    box-shadow: 0 0 0 4px var(--md-sys-color-primary-container) inset;
+  }
+
+  to {
+    box-shadow: 0 0 0 0 var(--md-sys-color-primary-container) inset;
+    transform: scale(1);
+  }
+}
+
+@keyframes mk-shake {
+  0% {
+    transform: translate(0);
+  }
+
+  25% {
+    transform: translate(-4px);
+  }
+
+  50% {
+    transform: translate(4px);
+  }
+
+  75% {
+    transform: translate(-4px);
+  }
+
+  to {
+    transform: translate(0);
+  }
+}
+
+@keyframes mk-shake-strong {
+  0% {
+    transform: translate(0);
+  }
+
+  20% {
+    transform: translate(-10px);
+  }
+
+  40% {
+    transform: translate(10px);
+  }
+
+  60% {
+    transform: translate(-10px);
+  }
+
+  80% {
+    transform: translate(10px);
+  }
+
+  to {
+    transform: translate(0);
+  }
+}
+
+@keyframes mk-fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes mk-wipe {
+  from {
+    transform: scaleX(1.4) translate(0);
+  }
+
+  to {
+    transform: scaleX(1.4) translate(100%);
+  }
+}
+
+@keyframes mk-progress-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+/* Reduced motion: exits jump to their end; the rest do not play. */
+@media (prefers-reduced-motion: reduce) {
+  .mk-anim-out,
+  .mk-anim-out-left,
+  .mk-anim-out-bottom,
+  .mk-anim-collapse {
+    animation-duration: 1ms;
+  }
+
+  .mk-anim-highlight,
+  .mk-anim-shake,
+  .mk-anim-shake-strong,
+  .mk-anim-fade,
+  .mk-anim-wipe::before,
+  .mk-anim-progress-in {
+    animation: none;
+  }
+}
+
+/* css/effects/loading.css */
+/* Stepbro's loading sweeps (animation-loading-1 / -2) and hover shimmer (hover-magic-1). */
+.mk-loading {
+  position: relative;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.mk-loading::before {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  border-radius: inherit;
+  background: linear-gradient(to right, transparent, light-dark(rgb(0 0 0 / 10%), rgb(255 255 255 / 5%)), transparent);
+  box-shadow: none;
+  content: '';
+  opacity: 1;
+  transform: translate(-100%);
+  animation: mk-sweep 1s infinite;
+}
+
+.mk-loading--soft::before {
+  z-index: 20;
+  background: linear-gradient(
+    to right,
+    transparent,
+    color-mix(in srgb, var(--mk-loading-color, var(--md-sys-color-background)), transparent 20%),
+    transparent
+  );
+}
+
+.mk-shimmer {
+  position: relative;
+  overflow: hidden;
+  transition:
+    transform 0.25s cubic-bezier(0, 0, 0.5, 1),
+    box-shadow 0.25s cubic-bezier(0, 0, 0.5, 1);
+}
+
+.mk-shimmer::before {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to right, transparent, rgb(255 255 255 / 10%), transparent);
+  content: '';
+  pointer-events: none;
+  transform: translate(-100%);
+  animation: mk-sweep 2s infinite;
+}
+
+@keyframes mk-sweep {
+  to {
+    transform: translate(100%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-loading::before,
+  .mk-shimmer::before {
+    animation: none;
+  }
+}
+
+/* css/effects/text.css */
+/* Stepbro's animated gradient text: a rainbow (6 s) and one in the theme's colours (8 s). */
+.mk-text-rainbow,
+.mk-text-gradient {
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.mk-text-rainbow {
+  background-image: linear-gradient(
+    90deg,
+    light-dark(#b00020, #ff6b8a),
+    light-dark(#b54700, #ffb15a),
+    light-dark(#8a6a00, #ffe27a),
+    light-dark(#0a7a2f, #7bff9b),
+    light-dark(#006c84, #7fe8ff),
+    light-dark(#0050c7, #89a8ff) 80%,
+    light-dark(#6f2dbd, #d2a6ff)
+  );
+  background-size: 300% 100%;
+  animation: mk-rainbow 6s linear infinite;
+}
+
+.mk-text-gradient {
+  background-image: linear-gradient(
+    120deg,
+    var(--md-sys-color-primary) 0%,
+    var(--md-sys-color-primary-container) 20%,
+    var(--md-sys-color-secondary) 40%,
+    var(--md-sys-color-secondary-container) 60%,
+    var(--md-sys-color-tertiary) 80%,
+    var(--md-sys-color-tertiary-container) 100%
+  );
+  background-size: 240% 240%;
+  animation: mk-gradient-flow 8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
+}
+
+@keyframes mk-rainbow {
+  from {
+    background-position: 0% 50%;
+  }
+
+  to {
+    background-position: 300% 50%;
+  }
+}
+
+@keyframes mk-gradient-flow {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+
+  to {
+    background-position: 0% 50%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-text-rainbow,
+  .mk-text-gradient {
+    animation: none;
+  }
+}
+
+/* css/effects/frost.css */
+/* .mk-frost — Dousan's progressive blur: five backdrop-blur layers with staggered masks, so the blur grows toward the edge. */
+.mk-frost {
+  --mk-frost-strength: 1;
+  position: absolute;
+  inset: auto 0 0;
+  z-index: 2;
+  height: var(--mk-frost-height, 60px);
+  pointer-events: none;
+}
+
+.mk-frost--top {
+  inset: 0 0 auto;
+}
+
+.mk-frost--fixed {
+  position: fixed;
+  z-index: 40;
+}
+
+.mk-frost > i {
+  position: absolute;
+  inset: 0;
+}
+
+.mk-frost--top > i {
+  transform: scaleY(-1);
+}
+
+.mk-frost > i:nth-child(1) {
+  -webkit-backdrop-filter: blur(calc(1px * var(--mk-frost-strength)));
+  backdrop-filter: blur(calc(1px * var(--mk-frost-strength)));
+  -webkit-mask-image: linear-gradient(transparent 0%, #000 100%);
+  mask-image: linear-gradient(transparent 0%, #000 100%);
+}
+
+.mk-frost > i:nth-child(2) {
+  -webkit-backdrop-filter: blur(calc(1px * var(--mk-frost-strength)));
+  backdrop-filter: blur(calc(1px * var(--mk-frost-strength)));
+  -webkit-mask-image: linear-gradient(transparent 25%, rgb(0 0 0 / 70%) 80%, #000 100%);
+  mask-image: linear-gradient(transparent 25%, rgb(0 0 0 / 70%) 80%, #000 100%);
+}
+
+.mk-frost > i:nth-child(3) {
+  -webkit-backdrop-filter: blur(calc(1.5px * var(--mk-frost-strength)));
+  backdrop-filter: blur(calc(1.5px * var(--mk-frost-strength)));
+  -webkit-mask-image: linear-gradient(transparent 45%, rgb(0 0 0 / 50%) 80%, #000 100%);
+  mask-image: linear-gradient(transparent 45%, rgb(0 0 0 / 50%) 80%, #000 100%);
+}
+
+.mk-frost > i:nth-child(4) {
+  -webkit-backdrop-filter: blur(calc(2px * var(--mk-frost-strength)));
+  backdrop-filter: blur(calc(2px * var(--mk-frost-strength)));
+  -webkit-mask-image: linear-gradient(transparent 65%, rgb(0 0 0 / 30%) 85%, #000 100%);
+  mask-image: linear-gradient(transparent 65%, rgb(0 0 0 / 30%) 85%, #000 100%);
+}
+
+.mk-frost > i:nth-child(5) {
+  -webkit-backdrop-filter: blur(calc(2.5px * var(--mk-frost-strength)));
+  backdrop-filter: blur(calc(2.5px * var(--mk-frost-strength)));
+  -webkit-mask-image: linear-gradient(transparent 80%, rgb(0 0 0 / 20%) 90%, #000 100%);
+  mask-image: linear-gradient(transparent 80%, rgb(0 0 0 / 20%) 90%, #000 100%);
+}
+
+/* css/effects/float.css */
+/* .mk-float — Dousan's floating tags: a slow bob (ease-in-out, infinite); children of .mk-float-group alternate Dousan's five paths. */
+.mk-float,
+.mk-float-group > * {
+  --mk-float-y: 4px;
+  --mk-float-duration: 6s;
+  animation: mk-float var(--mk-float-duration) ease-in-out infinite;
+  transition: scale var(--mk-dur-press) var(--mk-ease-press);
+}
+
+.mk-float-group > :nth-child(5n + 1) {
+  --mk-float-y: 4px;
+  --mk-float-duration: 5.5s;
+}
+
+.mk-float-group > :nth-child(5n + 2) {
+  --mk-float-y: -4px;
+  --mk-float-duration: 6.2s;
+}
+
+.mk-float-group > :nth-child(5n + 3) {
+  --mk-float-y: 5px;
+  --mk-float-duration: 5.8s;
+}
+
+.mk-float-group > :nth-child(5n + 4) {
+  --mk-float-y: -5px;
+  --mk-float-duration: 5s;
+}
+
+.mk-float-group > :nth-child(5n + 5) {
+  --mk-float-y: 3.5px;
+  --mk-float-duration: 6s;
+}
+
+@media (hover: hover) {
+  .mk-float:hover,
+  .mk-float-group > :hover {
+    scale: 1.05;
+  }
+}
+
+.mk-float:active,
+.mk-float-group > :active {
+  scale: 0.98;
+}
+
+@keyframes mk-float {
+  0%,
+  100% {
+    transform: translateY(calc(var(--mk-float-y) * -1));
+  }
+
+  50% {
+    transform: translateY(var(--mk-float-y));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-float,
+  .mk-float-group > * {
+    animation: none;
+    transition: none;
+  }
+}
+
+/* css/effects/grain.css */
+/* .mk-grain — film grain (Siena's noise, .07) in CSS: an SVG turbulence tile that jumps between 8 places, like film. */
+:where(.mk-grain) {
+  position: relative;
+  isolation: isolate;
+}
+
+.mk-grain::after {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
+  background-size: 180px 180px;
+  content: '';
+  mix-blend-mode: overlay;
+  opacity: var(--mk-grain, 0.07);
+  pointer-events: none;
+  animation: mk-grain 0.8s steps(1) infinite;
+}
+
+@keyframes mk-grain {
+  0% {
+    background-position: 0 0;
+  }
+
+  12.5% {
+    background-position: -40px 25px;
+  }
+
+  25% {
+    background-position: 30px -50px;
+  }
+
+  37.5% {
+    background-position: -10px 70px;
+  }
+
+  50% {
+    background-position: 60px 10px;
+  }
+
+  62.5% {
+    background-position: -50px -30px;
+  }
+
+  75% {
+    background-position: 20px 60px;
+  }
+
+  87.5% {
+    background-position: -60px -10px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-grain::after {
+    animation: none;
+  }
+}
+
+/* css/effects/success.css */
+/* .mk-success — Dousan's success mark: grows and untwists on a 260/18 spring after 0.15 s. Pair it with confetti(). */
+.mk-success {
+  display: inline-grid;
+  place-items: center;
+  animation: mk-success-in var(--mk-dur-success) var(--mk-ease-success) 0.15s both;
+}
+
+@keyframes mk-success-in {
+  from {
+    transform: scale(0) rotate(-45deg);
+  }
+
+  to {
+    transform: scale(1) rotate(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-success {
+    animation: none;
+  }
+}
+
+/* css/effects/fade.css */
+/* Siena's edge masks: content fades out at the edges of a strip or a column. */
+.mk-fade-x {
+  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);
+  mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);
+}
+
+.mk-fade-x-soft {
+  -webkit-mask-image: linear-gradient(to right, transparent 15%, #000 30%, #000 70%, transparent 85%);
+  mask-image: linear-gradient(to right, transparent 15%, #000 30%, #000 70%, transparent 85%);
+}
+
+.mk-fade-y {
+  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
+  mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
+}

package/dist/css/fonts.css

@@ -0,0 +1,3 @@
+/* Stepbro's fonts from Google Fonts: DM Sans (variable), Geist Mono, Material Symbols Rounded (FILL/wght axes).
+   Optional: without it the tokens fall back to system fonts. */
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Geist+Mono:wght@100..900&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

package/dist/css/themes/black-green.css

@@ -0,0 +1,126 @@
+/* Stepbro theme "black-green" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+   Generated by scripts/import-themes.mjs; do not edit. */
+[data-mk-theme="black-green"] {
+  color-scheme: light;
+  --md-sys-color-background: #f9faf3;
+  --md-sys-color-on-background: #191c18;
+  --md-sys-color-surface: #f9faf3;
+  --md-sys-color-surface-dim: #d9dbd4;
+  --md-sys-color-surface-bright: #f9faf3;
+  --md-sys-color-surface-container-lowest: #ffffff;
+  --md-sys-color-surface-container-low: #f3f4ed;
+  --md-sys-color-surface-container: #edefe8;
+  --md-sys-color-surface-container-high: #e7e9e2;
+  --md-sys-color-surface-container-highest: #e2e3dc;
+  --md-sys-color-on-surface: #191c18;
+  --md-sys-color-surface-variant: #dee5d8;
+  --md-sys-color-on-surface-variant: #42493f;
+  --md-sys-color-inverse-surface: #2e312d;
+  --md-sys-color-inverse-on-surface: #f0f1ea;
+  --md-sys-color-outline: #72796e;
+  --md-sys-color-outline-variant: #c1c9bc;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #3b6939;
+  --md-sys-color-primary: #001c03;
+  --md-sys-color-on-primary: #ffffff;
+  --md-sys-color-primary-container: #113f14;
+  --md-sys-color-on-primary-container: #a1d499;
+  --md-sys-color-inverse-primary: #a0d499;
+  --md-sys-color-secondary: #50634d;
+  --md-sys-color-on-secondary: #ffffff;
+  --md-sys-color-secondary-container: #d7edd0;
+  --md-sys-color-on-secondary-container: #3d4f3a;
+  --md-sys-color-tertiary: #001734;
+  --md-sys-color-on-tertiary: #ffffff;
+  --md-sys-color-tertiary-container: #153663;
+  --md-sys-color-on-tertiary-container: #aac7fc;
+  --md-sys-color-error: #ba1a1a;
+  --md-sys-color-on-error: #ffffff;
+  --md-sys-color-error-container: #ffdad6;
+  --md-sys-color-on-error-container: #410002;
+}
+[data-mk-theme="black-green"][data-mk-mode="dark"],
+[data-mk-mode="dark"] [data-mk-theme="black-green"] {
+  color-scheme: dark;
+  --md-sys-color-background: #111410;
+  --md-sys-color-on-background: #e2e3dc;
+  --md-sys-color-surface: #111410;
+  --md-sys-color-surface-dim: #111410;
+  --md-sys-color-surface-bright: #373a35;
+  --md-sys-color-surface-container-lowest: #0c0f0b;
+  --md-sys-color-surface-container-low: #191c18;
+  --md-sys-color-surface-container: #1e201c;
+  --md-sys-color-surface-container-high: #282b26;
+  --md-sys-color-surface-container-highest: #333631;
+  --md-sys-color-on-surface: #e2e3dc;
+  --md-sys-color-surface-variant: #42493f;
+  --md-sys-color-on-surface-variant: #c1c9bc;
+  --md-sys-color-inverse-surface: #e2e3dc;
+  --md-sys-color-inverse-on-surface: #2e312d;
+  --md-sys-color-outline: #8c9387;
+  --md-sys-color-outline-variant: #42493f;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #a0d499;
+  --md-sys-color-primary: #a0d499;
+  --md-sys-color-on-primary: #09390f;
+  --md-sys-color-primary-container: #002605;
+  --md-sys-color-on-primary-container: #85b77f;
+  --md-sys-color-inverse-primary: #3b6939;
+  --md-sys-color-secondary: #b7cdb1;
+  --md-sys-color-on-secondary: #233521;
+  --md-sys-color-secondary-container: #344631;
+  --md-sys-color-on-secondary-container: #c8ddc1;
+  --md-sys-color-tertiary: #aac7fd;
+  --md-sys-color-on-tertiary: #0c305c;
+  --md-sys-color-tertiary-container: #002045;
+  --md-sys-color-on-tertiary-container: #8face0;
+  --md-sys-color-error: #ffb4ab;
+  --md-sys-color-on-error: #690005;
+  --md-sys-color-error-container: #93000a;
+  --md-sys-color-on-error-container: #ffdad6;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mk-mode="light"])[data-mk-theme="black-green"],
+  :root:not([data-mk-mode="light"]) [data-mk-theme="black-green"] {
+    color-scheme: dark;
+    --md-sys-color-background: #111410;
+    --md-sys-color-on-background: #e2e3dc;
+    --md-sys-color-surface: #111410;
+    --md-sys-color-surface-dim: #111410;
+    --md-sys-color-surface-bright: #373a35;
+    --md-sys-color-surface-container-lowest: #0c0f0b;
+    --md-sys-color-surface-container-low: #191c18;
+    --md-sys-color-surface-container: #1e201c;
+    --md-sys-color-surface-container-high: #282b26;
+    --md-sys-color-surface-container-highest: #333631;
+    --md-sys-color-on-surface: #e2e3dc;
+    --md-sys-color-surface-variant: #42493f;
+    --md-sys-color-on-surface-variant: #c1c9bc;
+    --md-sys-color-inverse-surface: #e2e3dc;
+    --md-sys-color-inverse-on-surface: #2e312d;
+    --md-sys-color-outline: #8c9387;
+    --md-sys-color-outline-variant: #42493f;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-surface-tint: #a0d499;
+    --md-sys-color-primary: #a0d499;
+    --md-sys-color-on-primary: #09390f;
+    --md-sys-color-primary-container: #002605;
+    --md-sys-color-on-primary-container: #85b77f;
+    --md-sys-color-inverse-primary: #3b6939;
+    --md-sys-color-secondary: #b7cdb1;
+    --md-sys-color-on-secondary: #233521;
+    --md-sys-color-secondary-container: #344631;
+    --md-sys-color-on-secondary-container: #c8ddc1;
+    --md-sys-color-tertiary: #aac7fd;
+    --md-sys-color-on-tertiary: #0c305c;
+    --md-sys-color-tertiary-container: #002045;
+    --md-sys-color-on-tertiary-container: #8face0;
+    --md-sys-color-error: #ffb4ab;
+    --md-sys-color-on-error: #690005;
+    --md-sys-color-error-container: #93000a;
+    --md-sys-color-on-error-container: #ffdad6;
+  }
+}