style: refine site motion and branding (#75)

Author: overtrue

app/blog/[slug]/page.tsx

@@ -66,7 +66,7 @@ export default async function BlogPostPage({ params }: BlogPostPageProps) {
 
   return (
     <main className="relative flex-1">
-      <article className="border-y border-border text-foreground">
+      <article className="border-b border-border text-foreground">
         <header className="mx-auto max-w-7xl px-4 py-12 sm:px-6 sm:py-16 lg:px-8">
           <div className="pt-8">
             <Link

app/globals.css

@@ -280,18 +280,41 @@
   .motion-reveal[data-motion-delay="3"] {
     animation-delay: 210ms;
   }
+
+  [data-scroll-reveal] {
+    transition-duration: 640ms;
+    transition-property: opacity, transform;
+    transition-timing-function: var(--motion-ease-emphasized);
+  }
+
+  [data-scroll-reveal="pending"] {
+    opacity: 0;
+    transform: translate3d(0, 18px, 0);
+    will-change: opacity, transform;
+  }
+
+  [data-scroll-reveal="visible"] {
+    opacity: 1;
+    transform: none;
+    will-change: auto;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
   .motion-button,
   .motion-card,
   .motion-icon-tile,
   .motion-arrow,
-  .motion-reveal {
+  .motion-reveal,
+  [data-scroll-reveal] {
     animation: none !important;
     transform: none !important;
     transition: none !important;
   }
+
+  [data-scroll-reveal="pending"] {
+    opacity: 1 !important;
+  }
 }
 
 @keyframes motion-reveal {

app/layout.tsx

@@ -8,6 +8,7 @@ import AppHeader from '@/components/business/app-header';
 import FixedContactButton from '@/components/business/buttons/fixed-contact-button';
 import { CookieConsentProvider } from '@/components/business/cookie-consent';
 import FixedLanguageBanner from '@/components/business/fixed-language-banner';
+import SiteScrollMotion from '@/components/business/site-scroll-motion';
 import SkipLink from '@/components/business/skip-link';
 import BackgroundGrid from '@/components/ui/background-grid';
 import "./globals.css";
@@ -88,6 +89,7 @@ export default async function RootLayout({
             <BackgroundGrid />
             <FixedLanguageBanner />
             <AppHeader />
+            <SiteScrollMotion />
             <div
               id="main-content"
               tabIndex={-1}

components/business/app-header.tsx

@@ -194,15 +194,15 @@ export default function AppHeader() {
                   >
                     <div className="px-2 pb-2 text-xs font-semibold uppercase text-muted-foreground">Product</div>
                     {productNavigation.map((item) => (
-                      <a key={item.title} className="block w-full p-2 text-sm hover:bg-muted/50" href={item.href}>{item.title}</a>
+                      <a key={item.title} className="block w-full p-2 text-base hover:bg-muted/50" href={item.href}>{item.title}</a>
                     ))}
                     <div className="mt-3 px-2 pb-2 text-xs font-semibold uppercase text-muted-foreground">Resources</div>
                     {resourceNavigation.map((item) => (
-                      <a key={item.title} className="block w-full p-2 text-sm hover:bg-muted/50" href={item.href}>{item.title}</a>
+                      <a key={item.title} className="block w-full p-2 text-base hover:bg-muted/50" href={item.href}>{item.title}</a>
                     ))}
                     <div className="mt-3 px-2 pb-2 text-xs font-semibold uppercase text-muted-foreground">Links</div>
                     {navs.map((item, index) => (
-                      <a key={index} className="block w-full p-2 text-sm hover:bg-muted/50" href={item.url}>{item.label}</a>
+                      <a key={index} className="block w-full p-2 text-base hover:bg-muted/50" href={item.url}>{item.label}</a>
                     ))}
                   </Popover.Panel>
                 </Transition>

components/business/home-multi-clouds.tsx

@@ -42,16 +42,16 @@ export default function HomeMultiClouds() {
             className="motion-card group flex min-h-[30rem] flex-col bg-card transition-colors hover:bg-muted/20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
             aria-label={stories[0].linkText}
           >
-            <div className="relative flex h-60 shrink-0 items-center overflow-hidden bg-background p-8 sm:p-10">
+            <div className="relative flex h-60 shrink-0 items-center justify-center overflow-hidden bg-background p-8 sm:p-10">
               <div
                 aria-hidden="true"
                 className="absolute inset-0 opacity-50 [background-image:linear-gradient(90deg,var(--border)_1px,transparent_1px),linear-gradient(0deg,var(--border)_1px,transparent_1px)] [background-size:34px_34px]"
               />
               <Image
-                src="/images/brands/nvidia-inception-badge.webp"
-                alt="NVIDIA Inception Program member"
-                width={494}
-                height={198}
+                src="/images/nvidia-inception-program-badge.png"
+                alt="NVIDIA Inception Program member badge"
+                width={501}
+                height={217}
                 unoptimized
                 className="relative h-auto w-full max-w-sm"
               />

components/business/site-scroll-motion.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { useEffect } from "react";
+
+const REVEAL_SELECTOR = [
+  "main section",
+  "main > article > header",
+  "main > article > div",
+  "footer",
+].join(",");
+
+export default function SiteScrollMotion() {
+  const pathname = usePathname();
+
+  useEffect(() => {
+    const elements = Array.from(
+      document.querySelectorAll<HTMLElement>(REVEAL_SELECTOR)
+    );
+    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+    if (reduceMotion || !("IntersectionObserver" in window)) {
+      elements.forEach((element) => {
+        element.dataset.scrollReveal = "visible";
+      });
+
+      return () => {
+        elements.forEach((element) => delete element.dataset.scrollReveal);
+      };
+    }
+
+    const viewportThreshold = window.innerHeight * 0.9;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (!entry.isIntersecting) {
+            return;
+          }
+
+          const element = entry.target as HTMLElement;
+          element.dataset.scrollReveal = "visible";
+          observer.unobserve(element);
+        });
+      },
+      {
+        threshold: 0.08,
+        rootMargin: "0px 0px -8% 0px",
+      }
+    );
+
+    elements.forEach((element) => {
+      const bounds = element.getBoundingClientRect();
+      const initiallyVisible = bounds.top < viewportThreshold && bounds.bottom > 0;
+
+      element.dataset.scrollReveal = initiallyVisible ? "visible" : "pending";
+
+      if (!initiallyVisible) {
+        observer.observe(element);
+      }
+    });
+
+    return () => {
+      observer.disconnect();
+      elements.forEach((element) => delete element.dataset.scrollReveal);
+    };
+  }, [pathname]);
+
+  return null;
+}

components/magicui/marquee.tsx

@@ -58,7 +58,7 @@ export function Marquee({
         .map((_, i) => (
           <div
             key={i}
-            className={cn("flex shrink-0 justify-around gap-(--gap)", {
+            className={cn("flex shrink-0 justify-around gap-(--gap) motion-reduce:animate-none", {
               "animate-marquee flex-row": !vertical,
               "animate-marquee-vertical flex-col": vertical,
               "group-hover:paused": pauseOnHover,