feat: polish BossAI website motion

website/app/BossAiMotion.tsx

@@ -3,9 +3,14 @@
 import { type ReactNode, useRef } from "react";
 import gsap from "gsap";
 import { useGSAP } from "@gsap/react";
+import { CustomEase } from "gsap/CustomEase";
+import { ScrollToPlugin } from "gsap/ScrollToPlugin";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { SplitText } from "gsap/SplitText";
 
-gsap.registerPlugin(useGSAP, ScrollTrigger);
+gsap.registerPlugin(useGSAP, ScrollTrigger, ScrollToPlugin, SplitText, CustomEase);
+
+const bossEase = CustomEase.create("boss-ease", "M0,0 C0.18,0.84 0.32,1 1,1");
 
 type BossAiMotionProps = {
   children: ReactNode;
@@ -16,77 +21,129 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
 
   useGSAP(
     () => {
-      const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      const root = scopeRef.current;
+      if (!root) {
+        return;
+      }
 
       gsap.set("[data-motion]", { autoAlpha: 1 });
       gsap.set("[data-motion-line]", { transformOrigin: "center" });
 
-      if (reduceMotion) {
+      const matchMedia = gsap.matchMedia();
-        return;
-      }
 
-      const intro = gsap.timeline({ defaults: { ease: "power3.out" } });
+      matchMedia.add("(prefers-reduced-motion: reduce)", () => {
-      intro
+        gsap.set("[data-motion], [data-motion-dot], [data-motion-orbit], [data-motion-line]", {
-        .from("[data-motion='nav']", { autoAlpha: 0, y: -18, duration: 0.7 })
+          autoAlpha: 1,
-        .from("[data-motion='hero-copy']", { autoAlpha: 0, y: 36, duration: 0.9 }, "-=0.35")
+          clearProps: "transform",
-        .from("[data-motion='hero-console']", { autoAlpha: 0, y: 34, rotateX: 5, duration: 0.9 }, "-=0.65")
-        .from("[data-motion='route-row']", { autoAlpha: 0, x: 24, duration: 0.55, stagger: 0.08 }, "-=0.45")
-        .from("[data-motion='node']", { autoAlpha: 0, scale: 0.94, duration: 0.45, stagger: 0.08 }, "-=0.3");
-
-      gsap.to("[data-motion-orbit]", {
-        rotate: 360,
-        duration: 28,
-        ease: "none",
-        repeat: -1,
-      });
-
-      gsap.to("[data-motion-dot]", {
-        scale: 1.18,
-        autoAlpha: 0.72,
-        duration: 1.4,
-        ease: "sine.inOut",
-        repeat: -1,
-        yoyo: true,
-        stagger: 0.24,
-      });
-
-      gsap.to("[data-motion-line]", {
-        strokeDashoffset: -160,
-        duration: 5.8,
-        ease: "none",
-        repeat: -1,
-        stagger: 0.28,
-      });
-
-      gsap.utils.toArray<HTMLElement>("[data-motion='section']").forEach((section) => {
-        gsap.from(section, {
-          autoAlpha: 0,
-          y: 42,
-          duration: 0.8,
-          ease: "power3.out",
-          scrollTrigger: {
-            trigger: section,
-            start: "top 82%",
-            once: true,
-          },
         });
       });
 
-      gsap.utils.toArray<HTMLElement>("[data-motion='card']").forEach((card, index) => {
+      matchMedia.add("(prefers-reduced-motion: no-preference)", () => {
-        gsap.from(card, {
+        const heroTitle = root.querySelector<HTMLElement>(".hero-copy h1");
-          autoAlpha: 0,
+        const splitTitle = heroTitle
-          y: 28,
+          ? SplitText.create(heroTitle, {
-          scale: 0.97,
+              type: "words",
-          duration: 0.62,
+              aria: "auto",
-          delay: index * 0.04,
+              wordsClass: "hero-word",
-          ease: "power3.out",
+            })
-          scrollTrigger: {
+          : null;
-            trigger: card,
+
-            start: "top 88%",
+        const intro = gsap.timeline({ defaults: { ease: bossEase } });
-            once: true,
+        intro
-          },
+          .from("[data-motion='nav']", { autoAlpha: 0, y: -18, duration: 0.7 })
+          .from(".section-kicker", { autoAlpha: 0, y: 18, duration: 0.56 }, "-=0.18")
+          .from(
+            splitTitle?.words ?? ".hero-copy h1",
+            {
+              autoAlpha: 0,
+              yPercent: 92,
+              rotateX: -18,
+              transformOrigin: "50% 100%",
+              duration: 0.82,
+              stagger: { each: 0.035, from: "start" },
+            },
+            "-=0.28",
+          )
+          .from(".hero-copy p", { autoAlpha: 0, y: 22, duration: 0.7 }, "-=0.5")
+          .from(".hero-actions > *", { autoAlpha: 0, y: 14, duration: 0.46, stagger: 0.08 }, "-=0.42")
+          .from(".hero-proof > div", { autoAlpha: 0, y: 16, duration: 0.5, stagger: 0.07 }, "-=0.28")
+          .from("[data-motion='hero-console']", { autoAlpha: 0, y: 34, rotateX: 5, duration: 0.9 }, "-=0.78")
+          .from("[data-motion='route-row']", { autoAlpha: 0, x: 24, duration: 0.55, stagger: 0.08 }, "-=0.48")
+          .from("[data-motion='node']", { autoAlpha: 0, scale: 0.94, duration: 0.45, stagger: 0.08 }, "-=0.3");
+
+        gsap.to("[data-motion-orbit]", {
+          rotate: 360,
+          duration: 28,
+          ease: "none",
+          repeat: -1,
         });
+
+        gsap.to("[data-motion-dot]", {
+          scale: 1.18,
+          autoAlpha: 0.72,
+          duration: 1.4,
+          ease: "sine.inOut",
+          repeat: -1,
+          yoyo: true,
+          stagger: 0.24,
+        });
+
+        gsap.to("[data-motion-line]", {
+          strokeDashoffset: -160,
+          duration: 5.8,
+          ease: "none",
+          repeat: -1,
+          stagger: 0.28,
+        });
+
+        gsap.utils.toArray<HTMLElement>("[data-motion='section']").forEach((section) => {
+          gsap.from(section, {
+            autoAlpha: 0,
+            y: 42,
+            duration: 0.82,
+            ease: bossEase,
+            scrollTrigger: {
+              trigger: section,
+              start: "top 82%",
+              once: true,
+            },
+          });
+        });
+
+        gsap.utils
+          .toArray<HTMLElement>("[data-motion='card']")
+          .filter((card) => !card.closest(".hero-section"))
+          .forEach((card, index) => {
+            gsap.from(card, {
+              autoAlpha: 0,
+              y: 28,
+              scale: 0.97,
+              duration: 0.62,
+              delay: (index % 4) * 0.04,
+              ease: bossEase,
+              scrollTrigger: {
+                trigger: card,
+                start: "top 88%",
+                once: true,
+              },
+            });
+          });
+
+        const cleanupAnchors = setupSmoothAnchors(root);
+        const cleanupActiveNav = setupActiveNavigation(root);
+        const cleanupMagneticCards = window.matchMedia("(hover: hover) and (pointer: fine)").matches
+          ? setupMagneticCards(root)
+          : () => undefined;
+
+        return () => {
+          cleanupMagneticCards();
+          cleanupActiveNav();
+          cleanupAnchors();
+          splitTitle?.revert();
+        };
       });
+
+      return () => matchMedia.revert();
     },
     { scope: scopeRef },
   );
@@ -97,3 +154,107 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
     </div>
   );
 }
+
+function setupSmoothAnchors(root: HTMLElement) {
+  const anchors = gsap.utils.toArray<HTMLAnchorElement>("a[href^='#']", root);
+
+  const cleanups = anchors.map((anchor) => {
+    const onClick = (event: MouseEvent) => {
+      const href = anchor.getAttribute("href");
+      const targetId = href?.slice(1);
+      const target = targetId ? document.getElementById(targetId) : null;
+      if (!href || !target) {
+        return;
+      }
+
+      event.preventDefault();
+      window.history.pushState(null, "", href);
+      gsap.to(window, {
+        duration: 0.92,
+        ease: bossEase,
+        overwrite: "auto",
+        scrollTo: { y: target, offsetY: 22 },
+      });
+    };
+
+    anchor.addEventListener("click", onClick);
+    return () => anchor.removeEventListener("click", onClick);
+  });
+
+  return () => cleanups.forEach((cleanup) => cleanup());
+}
+
+function setupActiveNavigation(root: HTMLElement) {
+  const links = gsap.utils.toArray<HTMLAnchorElement>(".nav-links a[href^='#']", root);
+  const linkById = new Map(
+    links
+      .map((link) => [link.getAttribute("href")?.slice(1), link] as const)
+      .filter((entry): entry is readonly [string, HTMLAnchorElement] => Boolean(entry[0])),
+  );
+
+  const setActive = (id: string) => {
+    links.forEach((link) => link.classList.toggle("is-active", linkById.get(id) === link));
+  };
+
+  const triggers = gsap.utils
+    .toArray<HTMLElement>("section[id]", root)
+    .filter((section) => linkById.has(section.id))
+    .map((section) =>
+      ScrollTrigger.create({
+        trigger: section,
+        start: "top 42%",
+        end: "bottom 42%",
+        onEnter: () => setActive(section.id),
+        onEnterBack: () => setActive(section.id),
+      }),
+    );
+
+  return () => {
+    triggers.forEach((trigger) => trigger.kill());
+    links.forEach((link) => link.classList.remove("is-active"));
+  };
+}
+
+function setupMagneticCards(root: HTMLElement) {
+  const cards = gsap.utils.toArray<HTMLElement>("[data-motion='card']", root);
+
+  const cleanups = cards.map((card) => {
+    const onPointerMove = (event: PointerEvent) => {
+      const rect = card.getBoundingClientRect();
+      const xRatio = (event.clientX - rect.left) / rect.width - 0.5;
+      const yRatio = (event.clientY - rect.top) / rect.height - 0.5;
+
+      gsap.to(card, {
+        x: xRatio * 10,
+        y: yRatio * 10,
+        rotateX: yRatio * -3,
+        rotateY: xRatio * 4,
+        duration: 0.38,
+        ease: "power3.out",
+        overwrite: "auto",
+      });
+    };
+
+    const onPointerLeave = () => {
+      gsap.to(card, {
+        x: 0,
+        y: 0,
+        rotateX: 0,
+        rotateY: 0,
+        duration: 0.58,
+        ease: bossEase,
+        overwrite: "auto",
+      });
+    };
+
+    card.addEventListener("pointermove", onPointerMove);
+    card.addEventListener("pointerleave", onPointerLeave);
+
+    return () => {
+      card.removeEventListener("pointermove", onPointerMove);
+      card.removeEventListener("pointerleave", onPointerLeave);
+    };
+  });
+
+  return () => cleanups.forEach((cleanup) => cleanup());
+}

website/app/globals.css

@@ -63,6 +63,7 @@ a {
 
 .motion-root {
   min-height: 100dvh;
+  perspective: 1400px;
 }
 
 [data-motion],
@@ -165,12 +166,14 @@ a {
 }
 
 .nav-links a:hover,
-.nav-links a:focus-visible {
+.nav-links a:focus-visible,
+.nav-links a.is-active {
   color: var(--text);
 }
 
 .nav-links a:hover::after,
-.nav-links a:focus-visible::after {
+.nav-links a:focus-visible::after,
+.nav-links a.is-active::after {
   opacity: 0.8;
   transform: scaleX(1);
 }
@@ -183,6 +186,8 @@ a {
 .solid-link,
 .primary-cta,
 .secondary-cta {
+  position: relative;
+  overflow: hidden;
   min-height: 42px;
   display: inline-flex;
   align-items: center;
@@ -196,6 +201,17 @@ a {
   transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease;
 }
 
+.solid-link::before,
+.primary-cta::before {
+  position: absolute;
+  inset: -1px auto -1px -42%;
+  width: 38%;
+  content: "";
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.46), transparent);
+  transform: skewX(-18deg);
+  transition: left 560ms ease;
+}
+
 .ghost-link,
 .secondary-cta {
   border-color: var(--line);
@@ -221,6 +237,13 @@ a {
   transform: translateY(-2px);
 }
 
+.solid-link:hover::before,
+.primary-cta:hover::before,
+.solid-link:focus-visible::before,
+.primary-cta:focus-visible::before {
+  left: 108%;
+}
+
 .ghost-link:hover,
 .secondary-cta:hover,
 .ghost-link:focus-visible,
@@ -274,6 +297,7 @@ a {
   line-height: 0.9;
   letter-spacing: -0.07em;
   text-wrap: balance;
+  transform-style: preserve-3d;
 }
 
 .hero-copy h1 span {
@@ -281,6 +305,11 @@ a {
   color: var(--acid);
 }
 
+.hero-word {
+  display: inline-block;
+  will-change: transform, opacity;
+}
+
 .hero-copy p {
   max-width: 60ch;
   margin: 0;
@@ -385,17 +414,32 @@ a {
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
 }
 
+.route-row::before,
+.console-bar::before {
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  content: "";
+  background: var(--acid);
+  box-shadow: 0 0 20px rgba(215, 255, 77, 0.55);
+}
+
 .console-bar {
   position: relative;
   z-index: 2;
   min-height: 54px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: 10px;
+  justify-content: flex-start;
   border-radius: 18px;
   padding: 0 16px;
 }
 
+.console-bar strong {
+  margin-left: auto;
+}
+
 .console-bar span,
 .route-row em,
 .console-metrics span,
@@ -418,13 +462,21 @@ a {
 }
 
 .route-row {
+  position: relative;
   min-height: 58px;
   display: grid;
   grid-template-columns: 78px 1fr auto;
   align-items: center;
   gap: 14px;
   border-radius: 18px;
-  padding: 0 14px;
+  padding: 0 14px 0 32px;
+}
+
+.route-row::before {
+  position: absolute;
+  top: 50%;
+  left: 14px;
+  transform: translateY(-50%);
 }
 
 .route-row span {
@@ -437,6 +489,11 @@ a {
   color: #ffec99;
 }
 
+.route-row[data-tone="hot"]::before {
+  background: #ffec99;
+  box-shadow: 0 0 20px rgba(255, 236, 153, 0.5);
+}
+
 .route-row[data-tone="lime"] span {
   color: var(--acid);
 }
@@ -445,6 +502,11 @@ a {
   color: var(--blue);
 }
 
+.route-row[data-tone="blue"]::before {
+  background: var(--blue);
+  box-shadow: 0 0 20px rgba(139, 246, 255, 0.5);
+}
+
 .route-row strong,
 .console-metrics strong,
 .mini-grid strong,
@@ -542,6 +604,7 @@ a {
 .deploy-section,
 .final-section {
   padding-block: 72px;
+  scroll-margin-top: 22px;
 }
 
 .section-heading {
@@ -644,7 +707,8 @@ a {
 .endpoint-card,
 .ops-card,
 .module-strip span {
-  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
+  transform-style: preserve-3d;
+  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
 }
 
 .capability-card:hover,
@@ -654,6 +718,9 @@ a {
   transform: translateY(-3px);
   border-color: var(--line-strong);
   background-color: rgba(255, 255, 255, 0.045);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    0 22px 54px rgba(0, 0, 0, 0.2);
 }
 
 .api-section {