From 2d87b7bdfd8f8e010c8f9914d843c554b32d9cec Mon Sep 17 00:00:00 2001
From: kang <wankang2050@gmail.com>
Date: Fri, 24 Apr 2026 01:18:57 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20hero=20=E5=AD=97=E6=AF=8D=E4=B8=8D?=
 =?UTF-8?q?=E5=8F=AF=E8=A7=81=20(=E6=B8=90=E5=8F=98=E4=B8=8D=E7=BB=A7?=
 =?UTF-8?q?=E6=89=BF)=20+=20=E5=8D=87=E7=BA=A7=20text.splitText=20API?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- .hero-letter 加自己的渐变 + -webkit-background-clip:text
  原因: 父 h1 的 -webkit-text-fill-color:transparent 继承到 span 但
  background 不继承，span 变成 box 就切断 background-clip:text 的连贯，
  span 里文字就全透明看不见

- text.split(...) → text.splitText(...)
  修掉 v4.3 的 deprecation warning

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 index.html | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index f561094..d073bb6 100644
--- a/index.html
+++ b/index.html
@@ -266,8 +266,13 @@
     will-change:transform;
   }
 
-  /* hero animated logo */
-  h1 .hero-letter{display:inline-block;will-change:transform,opacity,color}
+  /* hero animated logo —— 每个字母自带渐变剪影（父级 -webkit-text-fill-color:transparent 不继承背景，这里补回） */
+  h1 .hero-letter{
+    display:inline-block;will-change:transform,opacity,color;
+    background:linear-gradient(135deg,var(--accent) 0%,var(--accent3) 55%,var(--accent2) 100%);
+    -webkit-background-clip:text;background-clip:text;
+    -webkit-text-fill-color:transparent;
+  }
 
   /* online badge */
   .live-badge{
@@ -1591,8 +1596,8 @@ stickys.<span class="fn">forEach</span>(s =&gt; s.<span class="fn">revert</span>
   let splitInstance = null;
   function ensureSplit() {
     if (splitInstance) splitInstance.revert && splitInstance.revert();
-    if (text && text.split) {
-      splitInstance = text.split(textTarget, { chars: { class: 'letter' } });
+    if (text && text.splitText) {
+      splitInstance = text.splitText(textTarget, { chars: { class: 'letter' } });
     }
   }
   function textDemo(kind) {