Refine homepage typing hero

Author: DipakMandlik

app/globals.css

@@ -186,6 +186,19 @@
     transform: translateY(100%);
   }
 
+  .typewriter-char {
+    opacity: 0;
+    filter: blur(8px);
+    transform: translateY(0.16em);
+    animation: typewriter-char 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
+    will-change: opacity, transform, filter;
+  }
+
+  .typewriter-caret {
+    animation: typewriter-caret 900ms steps(2, end) infinite;
+    transform: translateY(0.08em);
+  }
+
   .brand-wordmark-text {
     background: linear-gradient(110deg, var(--foreground) 0%, var(--foreground) 30%, #06b6d4 42%, #f97316 50%, #67e8f9 58%, var(--foreground) 70%, var(--foreground) 100%);
     background-size: 240% 100%;
@@ -243,6 +256,24 @@
     }
   }
 
+  @keyframes typewriter-char {
+    0% {
+      opacity: 0;
+      filter: blur(8px);
+      transform: translateY(0.16em);
+    }
+    100% {
+      opacity: 1;
+      filter: blur(0);
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes typewriter-caret {
+    0%, 45% { opacity: 1; }
+    46%, 100% { opacity: 0; }
+  }
+
   .noise-overlay {
     position: relative;
   }

components/landing/hero-section.tsx

@@ -5,15 +5,39 @@ import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { ArrowRight } from "lucide-react";
 import { TubesBackground } from "./tubes-background";
-import { AnimatedSphere } from "./animated-sphere";
 import { useReducedMotion } from "@/hooks/use-reduced-motion";
 
 const words = ["learn", "build", "practice", "ship"];
 
+function TypedText({
+  text,
+  delayOffset = 0,
+  characterClassName = "",
+}: {
+  text: string;
+  delayOffset?: number;
+  characterClassName?: string;
+}) {
+  return (
+    <span aria-hidden="true">
+      {text.split("").map((char, index) => (
+        <span
+          key={`${text}-${index}`}
+          className={`typewriter-char inline-block ${characterClassName}`}
+          style={{ animationDelay: `${delayOffset + index * 50}ms` }}
+        >
+          {char === " " ? "\u00A0" : char}
+        </span>
+      ))}
+    </span>
+  );
+}
+
 export function HeroSection() {
   const isVisible = true;
   const [wordIndex, setWordIndex] = useState(0);
   const prefersReducedMotion = useReducedMotion();
+  const activeWord = words[wordIndex];
 
   useEffect(() => {
     if (prefersReducedMotion) return;
@@ -26,18 +50,14 @@ export function HeroSection() {
 
   return (
     <section className="relative flex min-h-screen flex-col justify-center overflow-hidden bg-background text-foreground">
-      <div className="absolute right-[-12%] top-1/2 hidden h-[620px] w-[620px] -translate-y-1/2 pointer-events-none md:block lg:h-[820px] lg:w-[820px]">
+      <div className="absolute right-[-6%] top-1/2 hidden h-[620px] w-[620px] -translate-y-1/2 opacity-50 pointer-events-none mix-blend-multiply md:block lg:h-[820px] lg:w-[820px]">
         <TubesBackground
           tone="light"
           enableClickInteraction={false}
-          className="h-full min-h-full rounded-full border border-cyan-500/10 shadow-[0_30px_120px_rgba(6,182,212,0.16)]"
+          className="h-full min-h-full"
         />
       </div>
 
-      <div className="absolute right-0 top-1/2 hidden h-[600px] w-[600px] -translate-y-1/2 opacity-25 pointer-events-none md:block lg:h-[800px] lg:w-[800px]">
-        <AnimatedSphere />
-      </div>
-
       <div className="absolute inset-0 overflow-hidden pointer-events-none opacity-30">
         {[...Array(8)].map((_, i) => (
           <div
@@ -69,27 +89,29 @@ export function HeroSection() {
 
         <div className="mb-12">
           <h1
-            className={`text-[clamp(3rem,12vw,10rem)] font-display leading-[0.9] tracking-tight transition-all duration-1000 ${
+            aria-label={`The place to ${activeWord} AI`}
+            className={`max-w-6xl text-[clamp(3rem,12vw,10rem)] font-display leading-[0.92] tracking-normal transition-all duration-1000 ${
               isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"
             }`}
           >
-            <span className="block">The place to</span>
-            <span className="block">
-              <span className="relative inline-block brand-wordmark-text">
-                <span key={wordIndex} className="inline-flex">
-                  {words[wordIndex].split("").map((char, i) => (
-                    <span
-                      key={`${wordIndex}-${i}`}
-                      className={prefersReducedMotion ? "inline-block" : "inline-block animate-char-in"}
-                      style={prefersReducedMotion ? undefined : { animationDelay: `${i * 50}ms` }}
-                    >
-                      {char}
-                    </span>
-                  ))}
+            <span className="block" aria-hidden="true">The place to</span>
+            <span className="mt-2 block md:mt-3" aria-hidden="true">
+              <span className="inline-flex items-baseline gap-[0.16em]">
+                <span className="relative inline-flex min-w-[7.1ch] items-baseline md:min-w-[7.6ch]">
+                  <span key={wordIndex} className="inline-flex">
+                    {prefersReducedMotion ? (
+                      <span className="brand-wordmark-text">{activeWord}</span>
+                    ) : (
+                      <TypedText text={activeWord} characterClassName="brand-wordmark-text" />
+                    )}
+                  </span>
+                  {prefersReducedMotion ? (
+                    null
+                  ) : <span className="typewriter-caret ml-2 h-[0.72em] w-[0.06em] bg-cyan-600" />}
+                  <span className="absolute -bottom-2 left-0 h-2 w-full origin-left rounded-full bg-cyan-400/15 shadow-[0_0_28px_rgba(6,182,212,0.22)]" />
                 </span>
-                <span className="absolute -bottom-2 left-0 right-0 h-3 bg-cyan-400/15 shadow-[0_0_28px_rgba(6,182,212,0.22)]" />
-              </span>{" "}
-              AI
+                <span>AI</span>
+              </span>
             </span>
           </h1>
         </div>

components/landing/tubes-background.tsx

@@ -107,15 +107,15 @@ export function TubesBackground({
           "absolute inset-0",
           tone === "dark"
             ? "bg-[radial-gradient(circle_at_25%_20%,rgba(6,182,212,0.28),transparent_32%),radial-gradient(circle_at_76%_12%,rgba(249,115,22,0.2),transparent_28%),linear-gradient(135deg,#050608_0%,#0b1517_54%,#11100a_100%)]"
-            : "bg-[radial-gradient(circle_at_28%_24%,rgba(6,182,212,0.22),transparent_34%),radial-gradient(circle_at_76%_18%,rgba(249,115,22,0.16),transparent_30%),linear-gradient(135deg,rgba(255,255,255,0.86),rgba(236,254,255,0.48),rgba(255,247,237,0.36))]",
+            : "bg-transparent",
         )}
       />
       <div
         className={cn(
           "absolute inset-0 [background-size:72px_72px]",
           tone === "dark"
             ? "opacity-45 [background-image:linear-gradient(rgba(255,255,255,0.08)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.08)_1px,transparent_1px)]"
-            : "opacity-55 [background-image:linear-gradient(rgba(15,23,42,0.06)_1px,transparent_1px),linear-gradient(90deg,rgba(15,23,42,0.06)_1px,transparent_1px)]",
+            : "opacity-0",
         )}
       />
       {!prefersReducedMotion ? (
@@ -125,7 +125,7 @@ export function TubesBackground({
           className={cn(
             "absolute inset-0 block h-full w-full transition-opacity duration-700",
             tone === "light" ? "mix-blend-multiply saturate-125" : "",
-            isLoaded ? (tone === "dark" ? "opacity-90" : "opacity-45") : "opacity-0",
+            isLoaded ? (tone === "dark" ? "opacity-90" : "opacity-40") : "opacity-0",
           )}
           style={{ touchAction: "none" }}
         />
@@ -135,7 +135,7 @@ export function TubesBackground({
           "absolute inset-0",
           tone === "dark"
             ? "bg-[radial-gradient(circle_at_center,transparent_0%,rgba(5,6,8,0.18)_42%,rgba(5,6,8,0.74)_100%)]"
-            : "bg-[radial-gradient(circle_at_center,transparent_0%,rgba(250,250,246,0.12)_44%,rgba(250,250,246,0.82)_100%)]",
+            : "bg-transparent",
         )}
       />
       <div className="relative z-10 h-full pointer-events-none">{children}</div>