Import source: web/src/components/Boot

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
2026-09-18 23:19:59 +03:30
parent f4f43b100b
commit 07f8e82242
1 changed files with 76 additions and 0 deletions
@@ -0,0 +1,76 @@
+import { motion } from "motion/react";
+import { useUI } from "../lib/ui";
+
+/**
+ * The loading sequence: a single instrument ring draws itself around the
+ * wordmark, then the whole veil lifts and hands off to the staggered
+ * ring grid behind it.
+ */
+export function Boot() {
+  const { t, reduced } = useUI();
+
+  return (
+    <motion.div
+      className="fixed inset-0 z-40 flex flex-col items-center justify-center bg-ink-950"
+      exit={
+        reduced
+          ? { opacity: 0, transition: { duration: 0.1 } }
+          : { opacity: 0, scale: 1.04, transition: { duration: 0.7, ease: [0.22, 1, 0.36, 1] } }
+      }
+    >
+      <div className="relative flex items-center justify-center">
+        <svg viewBox="0 0 200 200" width={220} height={220} aria-hidden>
+          <motion.circle
+            cx={100}
+            cy={100}
+            r={88}
+            fill="none"
+            stroke="var(--color-brass)"
+            strokeWidth={1}
+            initial={{ pathLength: 0, rotate: -90, opacity: 0.4 }}
+            animate={{ pathLength: 1, rotate: 0, opacity: 1 }}
+            transition={
+              reduced
+                ? { duration: 0 }
+                : { duration: 1.5, ease: [0.65, 0, 0.35, 1] }
+            }
+            style={{ transformOrigin: "100px 100px" }}
+          />
+          <motion.circle
+            cx={100}
+            cy={100}
+            r={78}
+            fill="none"
+            stroke="var(--color-ink-700)"
+            strokeWidth={0.5}
+            initial={{ pathLength: 0, rotate: 90 }}
+            animate={{ pathLength: 1, rotate: 0 }}
+            transition={
+              reduced
+                ? { duration: 0 }
+                : { duration: 1.5, delay: 0.15, ease: [0.65, 0, 0.35, 1] }
+            }
+            style={{ transformOrigin: "100px 100px" }}
+          />
+        </svg>
+        <motion.span
+          className="absolute text-[44px] text-paper"
+          style={{ fontFamily: "var(--font-display)" }}
+          initial={reduced ? false : { opacity: 0, y: 6 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={reduced ? { duration: 0 } : { duration: 0.8, delay: 0.5 }}
+        >
+          Dash
+        </motion.span>
+      </div>
+      <motion.span
+        className="microlabel mt-2"
+        initial={reduced ? false : { opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={reduced ? { duration: 0 } : { duration: 0.8, delay: 0.9 }}
+      >
+        {t.tagline}
+      </motion.span>
+    </motion.div>
+  );
+}