feat: add typewriter effect to hero title

Split hero title into two lines (brand "RushDB" + motto) with a
character-by-character typewriter animation. Brand types at 80ms/char,
motto at 100ms/char, with a blinking cursor via ::after pseudo-element
that fades out after one blink cycle.

- Use position:absolute overlay to avoid affecting parent grid layout
- Hidden placeholder reserves final text dimensions to prevent reflow
- Subtitle and actions fade in after typing completes via JS transitions
- Respect prefers-reduced-motion: show full text immediately
- Support all three languages (zh/en/ja) with auto-trimmed separators

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: Kosthi

src/components/astro/HeroSection.astro

@@ -8,6 +8,11 @@ interface Props {
 
 const { lang } = Astro.props;
 const { t } = getI18n(lang);
+
+const fullTitle = t('hero.title');
+const brand = 'RushDB';
+const rawMotto = fullTitle.startsWith(brand) ? fullTitle.slice(brand.length) : fullTitle;
+const mottoText = rawMotto.replace(/^[\s,、，]+/, '');
 ---
 
 <section class="hero">
@@ -19,8 +24,12 @@ const { t } = getI18n(lang);
             <Image src="/RushDB.png" alt="RushDB Logo" width={697} height={697} priority />
           </div>
         </div>
-        <h1 class="hero-title">
-          {t('hero.title')}
+        <h1 class="hero-title" data-brand={brand} data-motto={mottoText}>
+          <span class="hero-placeholder" aria-hidden="true">{brand}<br />{mottoText}</span>
+          <span class="hero-typed">
+            <span class="hero-line"><span class="hero-brand"></span></span>
+            <span class="hero-line"><span class="hero-motto"></span></span>
+          </span>
         </h1>
         <p class="hero-subtitle">
           {t('hero.subtitle')}
@@ -73,3 +82,75 @@ const { t } = getI18n(lang);
     </div>
   </div>
 </section>
+
+<script>
+  function initTypewriter() {
+    const title = document.querySelector<HTMLElement>('.hero-title');
+    if (!title) return;
+
+    const placeholder = title.querySelector<HTMLElement>('.hero-placeholder');
+    const brandEl = title.querySelector<HTMLElement>('.hero-brand');
+    const mottoEl = title.querySelector<HTMLElement>('.hero-motto');
+    if (!brandEl || !mottoEl) return;
+
+    const brand = title.dataset.brand ?? '';
+    const motto = title.dataset.motto ?? '';
+
+    // Respect prefers-reduced-motion: show full text immediately
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      brandEl.textContent = brand;
+      mottoEl.textContent = motto;
+      if (placeholder) placeholder.style.display = 'none';
+      revealFollowUp();
+      return;
+    }
+
+    let i = 0;
+    let phase: 'brand' | 'motto' = 'brand';
+    brandEl.classList.add('typing');
+
+    function type() {
+      if (phase === 'brand') {
+        if (i < brand.length) {
+          brandEl!.textContent += brand[i];
+          i++;
+          setTimeout(type, 80);
+        } else {
+          brandEl!.classList.remove('typing');
+          mottoEl!.classList.add('typing');
+          phase = 'motto';
+          i = 0;
+          setTimeout(type, 100);
+        }
+      } else {
+        if (i < motto.length) {
+          mottoEl!.textContent += motto[i];
+          i++;
+          setTimeout(type, 100);
+        } else {
+          // Typing done — blink cursor then fade out
+          mottoEl!.classList.remove('typing');
+          mottoEl!.classList.add('typing-done');
+          setTimeout(() => mottoEl!.classList.remove('typing-done'), 1500);
+          revealFollowUp();
+        }
+      }
+    }
+
+    // Start typing after a brief delay
+    setTimeout(type, 400);
+  }
+
+  function revealFollowUp() {
+    const subtitle = document.querySelector<HTMLElement>('.hero-subtitle');
+    const actions = document.querySelector<HTMLElement>('.hero-actions');
+    if (subtitle) subtitle.classList.add('hero-revealed');
+    if (actions) {
+      setTimeout(() => actions.classList.add('hero-revealed'), 150);
+    }
+  }
+
+  // Run on initial load and on Astro page transitions
+  initTypewriter();
+  document.addEventListener('astro:after-swap', initTypewriter);
+</script>

src/styles/global.css

@@ -381,9 +381,23 @@
       }
 
       .hero-title {
+        position: relative;
         font-size: clamp(3rem, 8vw, 6rem);
         font-weight: 700;
         margin-bottom: 1.5rem;
+        line-height: 1.3;
+      }
+
+      .hero-placeholder {
+        visibility: hidden;
+        display: block;
+      }
+
+      .hero-typed {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
         background: linear-gradient(
           135deg,
           var(--text-primary) 0%,
@@ -392,32 +406,40 @@
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
-        line-height: 1.3;
       }
 
-      .hero-title .lang-content.lang-en {
-        font-size: clamp(2.2rem, 6.5vw, 5rem);
-        overflow-wrap: anywhere;
-        word-break: normal;
-        hyphens: auto;
+      .hero-line {
+        display: block;
       }
 
-      @media (max-width: 1200px) {
-        .hero-title .lang-content.lang-en {
-          font-size: clamp(2rem, 6vw, 4.5rem);
-        }
+      .hero-brand.typing::after,
+      .hero-motto.typing::after {
+        content: '|';
+        display: inline-block;
+        width: 0;
+        overflow: visible;
+        -webkit-text-fill-color: var(--accent-secondary);
+        font-weight: 300;
+        animation: blink 1s step-end infinite;
       }
 
-      @media (max-width: 768px) {
-        .hero-title .lang-content.lang-en {
-          font-size: clamp(1.8rem, 5.5vw, 3.5rem);
-        }
+      .hero-motto.typing-done::after {
+        content: '|';
+        display: inline-block;
+        width: 0;
+        overflow: visible;
+        -webkit-text-fill-color: var(--accent-secondary);
+        font-weight: 300;
+        animation: blink 0.6s step-end 1, cursorFadeOut 0.3s ease 0.6s forwards;
       }
 
-      @media (max-width: 480px) {
-        .hero-title .lang-content.lang-en {
-          font-size: clamp(1.5rem, 5vw, 2.8rem);
-        }
+      @keyframes blink {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0; }
+      }
+
+      @keyframes cursorFadeOut {
+        to { opacity: 0; }
       }
 
       .hero-subtitle {
@@ -2717,34 +2739,12 @@
         letter-spacing: -0.045em;
         line-height: 1.06;
         margin: 0 auto 14px;
-        max-width: 18ch;
-        text-wrap: balance;
       }
 
       html[lang="en-US"] .hero-title {
         line-height: 1.16;
       }
 
-      .hero-title .lang-content {
-        background: linear-gradient(
-          180deg,
-          rgba(240, 246, 255, 0.98),
-          rgba(240, 246, 255, 0.72)
-        );
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-clip: text;
-        text-shadow: 0 0 28px rgba(34, 211, 238, 0.18);
-        font-size: inherit;
-        white-space: normal;
-      }
-
-      .hero-title .lang-content.lang-en {
-        overflow-wrap: anywhere;
-        word-break: normal;
-        hyphens: auto;
-      }
-
       .hero-subtitle {
         color: var(--text-2);
         max-width: 48ch;
@@ -3289,17 +3289,28 @@
 
       /* Staggered text reveal animation */
       .hero-title {
-        animation: textReveal 1s var(--ease-out-expo) forwards;
+        animation: none;
       }
 
       .hero-subtitle {
-        animation: textReveal 1s var(--ease-out-expo) 0.15s forwards;
         opacity: 0;
+        transform: translateY(20px);
+        filter: blur(8px);
+        transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo), filter 0.8s var(--ease-out-expo);
       }
 
       .hero-actions {
-        animation: textReveal 1s var(--ease-out-expo) 0.3s forwards;
         opacity: 0;
+        transform: translateY(20px);
+        filter: blur(8px);
+        transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo), filter 0.8s var(--ease-out-expo);
+      }
+
+      .hero-subtitle.hero-revealed,
+      .hero-actions.hero-revealed {
+        opacity: 1;
+        transform: translateY(0);
+        filter: blur(0);
       }
 
       @keyframes textReveal {
@@ -3668,6 +3679,12 @@
           opacity: 1 !important;
           transform: none !important;
           filter: none !important;
+          transition: none !important;
+        }
+
+        .hero-brand::after,
+        .hero-motto::after {
+          display: none !important;
         }
 
         .member-card,

src/styles/theme-tokens.css

@@ -530,18 +530,24 @@ html:not(.theme-preload) .timeline-event {
   border-color: rgba(14, 116, 144, 0.22);
 }
 
-/* Hero title text gradient */
-:root[data-theme="light"] .hero-title .lang-content {
+/* Hero title gradient - light mode */
+:root[data-theme="light"] .hero-typed {
   background: linear-gradient(
-    180deg,
-    rgba(41, 37, 28, 0.96),
-    rgba(41, 37, 28, 0.78)
+    135deg,
+    rgba(41, 37, 28, 0.96) 0%,
+    var(--theme-accent-2) 100%
   );
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
 
+:root[data-theme="light"] .hero-brand.typing::after,
+:root[data-theme="light"] .hero-motto.typing::after,
+:root[data-theme="light"] .hero-motto.typing-done::after {
+  -webkit-text-fill-color: var(--theme-accent-2);
+}
+
 /* Card hover states (desktop enhanced) */
 :root[data-theme="light"] .achievement-item:hover,
 :root[data-theme="light"] .project-item:hover,