Clean hero: solid white title, subtle bg glow, nav hidden until scroll

Author: prasad-kumkar

src/pages/index.module.css

@@ -20,8 +20,23 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 1.2rem 2.5rem;
-  background: transparent;
+  padding: 1rem 2.5rem;
+  background: rgba(5, 5, 16, 0.9);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.navHidden {
+  transform: translateY(-100%);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.navVisible {
+  transform: translateY(0);
+  opacity: 1;
 }
 
 .navLogo {
@@ -79,60 +94,25 @@
   justify-content: center;
   padding: 4rem 2rem;
   position: relative;
-  background: #040410;
+  background: #050510;
   overflow: hidden;
 }
 
-/* Full-screen gradient mesh - 5 layers */
-.blob1, .blob2, .blob3 {
+/* Single subtle ambient glow - no blobs, no boundaries */
+.blob1 { display: none; }
+.blob2 { display: none; }
+.blob3 {
   position: absolute;
-  inset: 0;
+  inset: -20%;
   pointer-events: none;
   z-index: 0;
+  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(25, 50, 140, 0.25) 0%, transparent 70%);
+  animation: breathe 10s ease-in-out infinite;
 }
 
-/* Layer 1: deep base wash */
-.blob1 {
-  background:
-    radial-gradient(ellipse 120% 80% at 20% 80%, #0a1628 0%, transparent 60%),
-    radial-gradient(ellipse 100% 100% at 80% 20%, #0c1a3d 0%, transparent 55%);
-  animation: field1 20s ease-in-out infinite;
-}
-
-/* Layer 2: primary color fields */
-.blob2 {
-  background:
-    radial-gradient(ellipse 70% 60% at 15% 50%, rgba(20, 60, 180, 0.6) 0%, transparent 65%),
-    radial-gradient(ellipse 50% 70% at 85% 60%, rgba(60, 120, 255, 0.35) 0%, transparent 60%),
-    radial-gradient(ellipse 40% 50% at 50% 10%, rgba(30, 50, 120, 0.4) 0%, transparent 55%);
-  animation: field2 16s ease-in-out infinite;
-}
-
-/* Layer 3: highlights + accent */
-.blob3 {
-  background:
-    radial-gradient(ellipse 35% 40% at 30% 35%, rgba(80, 140, 255, 0.3) 0%, transparent 60%),
-    radial-gradient(ellipse 25% 35% at 75% 70%, rgba(100, 160, 255, 0.2) 0%, transparent 55%),
-    radial-gradient(ellipse 30% 25% at 55% 55%, rgba(60, 40, 150, 0.15) 0%, transparent 50%);
-  animation: field3 12s ease-in-out infinite;
-}
-
-@keyframes field1 {
-  0%, 100% { opacity: 1; transform: scale(1) translate(0, 0); }
-  50% { opacity: 0.85; transform: scale(1.05) translate(2%, -3%); }
-}
-
-@keyframes field2 {
-  0%, 100% { transform: translate(0, 0) scale(1); }
-  25% { transform: translate(3%, 4%) scale(1.02); }
-  50% { transform: translate(-2%, 2%) scale(0.98); }
-  75% { transform: translate(1%, -3%) scale(1.03); }
-}
-
-@keyframes field3 {
-  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
-  33% { transform: translate(-4%, 3%) scale(1.08) rotate(1deg); }
-  66% { transform: translate(3%, -4%) scale(0.95) rotate(-1deg); }
+@keyframes breathe {
+  0%, 100% { opacity: 0.8; transform: scale(1); }
+  50% { opacity: 1; transform: scale(1.05); }
 }
 
 /* Film grain overlay */
@@ -168,28 +148,7 @@
   letter-spacing: -0.05em;
   line-height: 1;
   margin: 0 0 2rem;
-  background: linear-gradient(
-    120deg,
-    #fff 0%,
-    #a8c8ff 15%,
-    #4d8bff 30%,
-    #1a3a8a 45%,
-    #4d8bff 60%,
-    #a8c8ff 75%,
-    #fff 90%,
-    #4d8bff 100%
-  );
-  background-size: 300% 100%;
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  animation: shimmer 8s ease-in-out infinite;
-}
-
-@keyframes shimmer {
-  0% { background-position: 100% 50%; }
-  50% { background-position: 0% 50%; }
-  100% { background-position: 100% 50%; }
+  color: #fff;
 }
 
 .sub {

src/pages/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState, useEffect} from 'react';
 import Link from '@docusaurus/Link';
 import Head from '@docusaurus/Head';
 import useBaseUrl from '@docusaurus/useBaseUrl';
@@ -19,8 +19,14 @@ import styles from './index.module.css';
 /* ── NAV ──────────────────────────────────────────────────────── */
 
 function Nav() {
+  const [show, setShow] = useState(false);
+  useEffect(() => {
+    const onScroll = () => setShow(window.scrollY > window.innerHeight * 0.6);
+    window.addEventListener('scroll', onScroll, {passive: true});
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
   return (
-    <nav className={styles.nav}>
+    <nav className={`${styles.nav} ${show ? styles.navVisible : styles.navHidden}`}>
       <Link to={useBaseUrl('/')} className={styles.navLogo}>
         BlueMatter
       </Link>