feat: 添加首页入场动画并优化滚动交互

- 在 lenis.client.ts 中提供 lenis 实例供全局使用
- 添加首页入场动画，包含字母动画和过渡效果
- 优化滚动行为，入场期间锁定滚动
- 修复自定义光标初始位置问题
- 调整页面布局样式，隐藏滚动条
- 更新头部组件类名以匹配新设计

app/components/layouts/ArcticNewOneCursor.vue

@@ -31,6 +31,7 @@ let cursorX = 0
 let cursorY = 0
 let pillWidth = 100
 let isPillVisible = false
+let hasCursorPosition = false
 
 // 查找最近的 `data-cursor-label` 元素，用来判断是否需要显示胶囊态。
 const getCursorTarget = (target: EventTarget | null) => {
@@ -94,6 +95,10 @@ onMounted(() => {
   }
 
   const showCursor = () => {
+    if (!hasCursorPosition) {
+      return
+    }
+
     gsap.to([horizontalLineRef.value, verticalLineRef.value], {
       autoAlpha: 1,
       duration: 0.15,
@@ -112,6 +117,7 @@ onMounted(() => {
 
   const hideCursor = () => {
     isPillVisible = false
+    hasCursorPosition = false
 
     gsap.to(allTargets, {
       autoAlpha: 0,
@@ -187,6 +193,7 @@ onMounted(() => {
   const moveCursor = (event: MouseEvent) => {
     cursorX = event.clientX
     cursorY = event.clientY
+    hasCursorPosition = true
 
     showCursor()
     gsap.set(dotRef.value, {
@@ -205,6 +212,10 @@ onMounted(() => {
       return
     }
 
+    if (!hasCursorPosition) {
+      moveCursor(event)
+    }
+
     showPill(target.dataset.cursorLabel || 'Read more')
   }
 
@@ -221,14 +232,14 @@ onMounted(() => {
   }
 
   window.addEventListener('mousemove', moveCursor)
-  window.addEventListener('mouseenter', showCursor)
+  window.addEventListener('mouseenter', moveCursor)
   window.addEventListener('mouseleave', hideCursor)
   document.addEventListener('mouseover', handleMouseOver)
   document.addEventListener('mouseout', handleMouseOut)
 
   cleanupCursor = () => {
     window.removeEventListener('mousemove', moveCursor)
-    window.removeEventListener('mouseenter', showCursor)
+    window.removeEventListener('mouseenter', moveCursor)
     window.removeEventListener('mouseleave', hideCursor)
     document.removeEventListener('mouseover', handleMouseOver)
     document.removeEventListener('mouseout', handleMouseOut)
@@ -257,6 +268,14 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
+.custom-cursor-dot,
+.custom-cursor-line,
+.custom-cursor-pill,
+.custom-cursor-pill-text {
+  opacity: 0;
+  visibility: hidden;
+}
+
 .custom-cursor-dot,
 .custom-cursor-line {
   position: fixed;
@@ -280,7 +299,7 @@ onBeforeUnmount(() => {
 }
 
 .custom-cursor-line-x {
-  width: 100vw;
+  right: 0;
   height: 0.5px;
 }
 

app/components/layouts/ArcticNewOneHeader.vue

@@ -83,7 +83,7 @@ onBeforeUnmount(() => {
 <template>
   <header
     ref="topHeaderRef"
-    class="fixed left-0 right-0 top-0 z-50 mx-auto h-[70px] w-page-container max-w-[calc(100%-2rem)] bg-red-200 px-4 py-5"
+    class="site-header-top fixed left-0 right-0 top-0 z-50 mx-auto h-[70px] w-page-container max-w-[calc(100%-2rem)] bg-red-200 px-4 py-5"
   >
     <nav>Top Navigation</nav>
   </header>