fix: lock classic logo mode and remove world-logo edge artifacts

Author: HOYALIM

site/index.html

@@ -29,7 +29,7 @@
     </header>
 
     <main>
-      <section class="hero hero-grid">
+      <section class="hero">
         <div class="hero-copy">
           <p class="kicker">Chrome Extension</p>
           <h1>Tap once.<br />Group smart.<br />Move fast.</h1>
@@ -49,17 +49,6 @@ <h1>Tap once.<br />Group smart.<br />Move fast.</h1>
             >
           </div>
         </div>
-
-        <div class="hero-visual">
-          <div class="logo-stage" id="logoStage" aria-hidden="true">
-            <div class="halo"></div>
-            <div class="logo-orb">
-              <img src="assets/logo-primary.png" alt="" />
-            </div>
-            <div class="scanline"></div>
-            <div class="logo-label">TapOG.ai</div>
-          </div>
-        </div>
       </section>
 
       <section class="cards">

site/main.js

@@ -1,42 +1,26 @@
 (() => {
-  const logoStage = document.getElementById("logoStage");
   const worldLogo = document.getElementById("worldLogo");
+  if (!worldLogo) {
+    return;
+  }
 
-  const setWorldLogoTransform = () => {
-    if (!worldLogo) {
-      return;
-    }
+  let rafId = 0;
 
+  const setWorldLogoTransform = () => {
+    rafId = 0;
     const scrollY = window.scrollY || window.pageYOffset || 0;
     const driftY = scrollY * 0.12;
     const rotate = scrollY * 0.01;
     worldLogo.style.transform = `translate3d(-50%, calc(-50% + ${driftY.toFixed(2)}px), 0) rotate(${rotate.toFixed(2)}deg)`;
   };
 
-  setWorldLogoTransform();
-  window.addEventListener("scroll", setWorldLogoTransform, { passive: true });
-
-  if (!logoStage) {
-    return;
-  }
-
-  const maxTilt = 12;
-
-  const reset = () => {
-    logoStage.style.transform = "rotateX(0deg) rotateY(0deg)";
+  const onScroll = () => {
+    if (rafId) {
+      return;
+    }
+    rafId = window.requestAnimationFrame(setWorldLogoTransform);
   };
 
-  logoStage.addEventListener("pointermove", (event) => {
-    const rect = logoStage.getBoundingClientRect();
-    const x = (event.clientX - rect.left) / rect.width;
-    const y = (event.clientY - rect.top) / rect.height;
-
-    const rotateY = (x - 0.5) * (maxTilt * 2);
-    const rotateX = (0.5 - y) * (maxTilt * 2);
-
-    logoStage.style.transform = `rotateX(${rotateX.toFixed(2)}deg) rotateY(${rotateY.toFixed(2)}deg)`;
-  });
-
-  logoStage.addEventListener("pointerleave", reset);
-  logoStage.addEventListener("pointercancel", reset);
+  setWorldLogoTransform();
+  window.addEventListener("scroll", onScroll, { passive: true });
 })();

site/styles.css

@@ -17,6 +17,8 @@ body {
   margin: 0;
   padding: 0;
   min-height: 100%;
+  background: #05070d;
+  overscroll-behavior: none;
 }
 
 body {
@@ -38,16 +40,17 @@ body {
   transform-origin: center;
   z-index: -4;
   pointer-events: none;
-  opacity: 0.26;
-  filter: drop-shadow(0 28px 70px rgba(0, 0, 0, 0.55));
+  opacity: 0.42;
+  mix-blend-mode: screen;
   will-change: transform;
 }
 
 .world-logo img {
   width: 100%;
   height: 100%;
   display: block;
-  object-fit: contain;
+  object-fit: cover;
+  border-radius: 50%;
 }
 
 .noise {
@@ -124,13 +127,6 @@ main {
   padding-top: 40px;
 }
 
-.hero-grid {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(280px, 460px);
-  gap: 28px;
-  align-items: center;
-}
-
 .kicker {
   margin: 0 0 12px;
   font-family: "IBM Plex Mono", monospace;
@@ -156,74 +152,6 @@ h1 {
   line-height: 1.55;
 }
 
-.hero-visual {
-  display: grid;
-  place-items: center;
-}
-
-.logo-stage {
-  position: relative;
-  width: min(80vw, 440px);
-  aspect-ratio: 1;
-  display: grid;
-  place-items: center;
-  transform-style: preserve-3d;
-  transition: transform 150ms ease-out;
-}
-
-.halo {
-  position: absolute;
-  inset: 14%;
-  border-radius: 999px;
-  background: radial-gradient(circle, rgba(255, 168, 0, 0.55) 0%, rgba(255, 138, 0, 0.02) 70%);
-  filter: blur(28px);
-  animation: pulseHalo 2.8s ease-in-out infinite;
-}
-
-.logo-orb {
-  position: relative;
-  width: 76%;
-  aspect-ratio: 1;
-  border-radius: 999px;
-  overflow: hidden;
-  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.15);
-  transform: translateZ(42px);
-}
-
-.logo-orb img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.scanline {
-  position: absolute;
-  inset: 8% 6%;
-  border-radius: 999px;
-  background: linear-gradient(
-    to bottom,
-    transparent 0%,
-    rgba(255, 255, 255, 0.18) 48%,
-    rgba(255, 255, 255, 0.02) 55%,
-    transparent 100%
-  );
-  mix-blend-mode: screen;
-  transform: translateY(-38%);
-  animation: sweep 3.4s ease-in-out infinite;
-  pointer-events: none;
-}
-
-.logo-label {
-  position: absolute;
-  bottom: 4%;
-  font-family: "IBM Plex Mono", monospace;
-  font-size: 12px;
-  letter-spacing: 0.2em;
-  color: rgba(255, 255, 255, 0.85);
-  text-transform: uppercase;
-  transform: translateZ(34px);
-}
 
 .cta-row {
   margin-top: 28px;
@@ -320,49 +248,12 @@ footer a {
   text-decoration: none;
 }
 
-@keyframes pulseHalo {
-  0%,
-  100% {
-    transform: scale(0.96);
-    opacity: 0.44;
-  }
-  50% {
-    transform: scale(1.04);
-    opacity: 0.68;
-  }
-}
-
-@keyframes sweep {
-  0%,
-  100% {
-    transform: translateY(-34%);
-    opacity: 0.52;
-  }
-  50% {
-    transform: translateY(34%);
-    opacity: 0.26;
-  }
-}
-
 @media (max-width: 840px) {
   .world-logo {
     width: min(132vmin, 900px);
     opacity: 0.2;
   }
 
-  .hero-grid {
-    grid-template-columns: 1fr;
-    gap: 18px;
-  }
-
-  .hero-visual {
-    order: -1;
-  }
-
-  .logo-stage {
-    width: min(88vw, 360px);
-  }
-
   .cards {
     grid-template-columns: 1fr;
   }