@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/src/css/effects/anim.css

@@ -0,0 +1,224 @@
+/* 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;
+  }
+}

package/src/css/effects/fade.css

@@ -0,0 +1,15 @@
+/* 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/src/css/effects/float.css

@@ -0,0 +1,64 @@
+/* .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;
+  }
+}

package/src/css/effects/frost.css

@@ -0,0 +1,62 @@
+/* .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%);
+}

package/src/css/effects/grain.css

@@ -0,0 +1,58 @@
+/* .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;
+  }
+}

package/src/css/effects/loading.css

@@ -0,0 +1,60 @@
+/* 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;
+  }
+}

package/src/css/effects/success.css

@@ -0,0 +1,22 @@
+/* .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;
+  }
+}

package/src/css/effects/text.css

@@ -0,0 +1,67 @@
+/* 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;
+  }
+}

package/src/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/src/css/states.css

@@ -0,0 +1,51 @@
+/*
+ * Initial (hidden) entrance states. They apply only when MK_HEAD_SCRIPT has added
+ * `.mk-js` to <html>, only with motion allowed, and they are dropped again if no
+ * recipe started in time (`.mk-failed`). Without JavaScript everything is visible.
+ */
+@media (prefers-reduced-motion: no-preference) {
+  .mk-js:not(.mk-failed) [data-mk~='words']:not([data-mk-ready]) {
+    visibility: hidden;
+  }
+
+  .mk-js:not(.mk-failed) [data-mk~='counter']:not([data-mk-ready]),
+  .mk-js:not(.mk-failed) [data-mk~='reveal'][data-mk-trigger='load']:not([data-mk-ready]) {
+    visibility: hidden;
+  }
+
+  /* iyo: the island drops in from above, the fill-text starts dimmed. */
+  .mk-js:not(.mk-failed) :is(.mk-island, mk-island):not([data-mk-ready]) .mk-island__shell {
+    visibility: hidden;
+  }
+
+  .mk-js:not(.mk-failed) [data-mk~='fill-text']:not([data-mk-ready]) {
+    opacity: 0.2;
+  }
+
+  .mk-js:not(.mk-failed) [data-mk~='mask-text']:not([data-mk-ready]),
+  .mk-js:not(.mk-failed) [data-mk~='cascade']:not([data-mk-ready]) [data-mk-cascade] {
+    visibility: hidden;
+  }
+
+  .mk-js:not(.mk-failed) [data-mk~='flow']:not([data-mk-ready]) > *,
+  .mk-js:not(.mk-failed) [data-mk~='pop']:not([data-mk-ready]) {
+    opacity: 0;
+  }
+
+  .mk-js:not(.mk-failed) [data-mk~='spring-cards']:not([data-mk-ready]) [data-mk-card] {
+    transform: scale(0);
+  }
+
+  .mk-js:not(.mk-failed) .mk-pile:not([data-mk-inview]) .mk-pile__media {
+    scale: 0.7;
+  }
+
+  .mk-js:not(.mk-failed) .mk-pile:not([data-mk-inview]) .mk-pile__shadow {
+    opacity: 0;
+  }
+
+  .mk-js:not(.mk-failed) [data-mk-carousel]:not([data-mk-inview]) .mk-carousel__media {
+    scale: 0.8;
+    translate: 0 20%;
+  }
+}