Personal Website, vers. 1 (pushed far to late)

client/css/motion.css

@@ -0,0 +1,134 @@
+@layer motion {
+  /* Content only starts hidden when JS runs and nobody asked for less motion */
+  @media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
+    [data-reveal] {
+      opacity: 0;
+      translate: 0 1.75rem;
+      transition:
+        opacity 0.9s var(--ease-out) var(--delay, 0s),
+        translate 0.9s var(--ease-out) var(--delay, 0s);
+    }
+
+    [data-reveal="mask"] {
+      opacity: 1;
+      translate: none;
+      clip-path: inset(0 -0.2em 100% -0.2em);
+      transform: translateY(0.35em);
+      transition:
+        clip-path 1.1s var(--ease-out) var(--delay, 0s),
+        transform 1.1s var(--ease-out) var(--delay, 0s);
+    }
+
+    [data-reveal].is-visible {
+      opacity: 1;
+      translate: none;
+    }
+
+    [data-reveal="mask"].is-visible {
+      clip-path: inset(-0.2em -0.2em -0.3em -0.2em);
+      transform: none;
+    }
+  }
+
+  @supports (animation-timeline: view()) {
+    @media (prefers-reduced-motion: no-preference) {
+      .timeline::after {
+        animation: grow linear both;
+        animation-timeline: view();
+        animation-range: entry 20% cover 70%;
+      }
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0s !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0s !important;
+      scroll-behavior: auto !important;
+    }
+  }
+
+  @keyframes drift {
+    from { translate: 0 0; scale: 1; }
+    to { translate: -6% 4%; scale: 1.08; }
+  }
+
+  @keyframes ping {
+    0% { scale: 1; opacity: 0.7; }
+    80%, 100% { scale: 3; opacity: 0; }
+  }
+
+  @keyframes blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.25; }
+  }
+
+  @keyframes load {
+    from { translate: -30% 0; }
+    to { translate: 60% 0; }
+  }
+
+  @keyframes flow {
+    from { stroke-dashoffset: 106; }
+    to { stroke-dashoffset: 0; }
+  }
+
+  @keyframes sort {
+    0%, 12% { height: var(--from); }
+    40%, 75% { height: var(--to); }
+    100% { height: var(--from); }
+  }
+
+  @keyframes playhead {
+    from { left: calc(0.9rem + var(--label)); }
+    to { left: calc(100% - 0.9rem); }
+  }
+
+  @keyframes marquee {
+    to { translate: -100% 0; }
+  }
+
+  @keyframes grow {
+    from { scale: 1 0; }
+    to { scale: 1 1; }
+  }
+
+  @keyframes fade-in {
+    from { opacity: 0; }
+  }
+
+  @keyframes vt-out {
+    to { opacity: 0; translate: 0 -0.75rem; }
+  }
+
+  @keyframes vt-in {
+    from { opacity: 0; translate: 0 1.25rem; }
+  }
+}
+
+/* Cross-document page transitions, outside of the layers on purpose */
+@view-transition {
+  navigation: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  @view-transition {
+    navigation: none;
+  }
+}
+
+::view-transition-old(root) {
+  animation: 0.3s var(--ease-in-out) both vt-out;
+}
+
+::view-transition-new(root) {
+  animation: 0.55s var(--ease-out) both vt-in;
+}
+
+::view-transition-group(project-cover) {
+  animation-duration: 0.6s;
+  animation-timing-function: var(--ease-out);
+}