首页动效系统

今天做了什么

• $grill-me 四问定稿：范围只做首页；整体设计用「加一层设计语言」而非改版；签名交互 = 运转流水线；行为 = 首次进入点亮一次 + hover 重放。
• $frontend-design 定方向：保留现有深色科技感 + 荧光绿 + 杂志拼贴，把流水线做成首页唯一记忆点，其余区块克制入场。
• 安装 gsap@3.15.0，在 site/src/pages/index.astro 用 GSAP Timeline 编排流水线点亮顺序，ScrollTrigger 做首屏以下分区入场。
• site/src/layouts/Base.astro 加一行 JS 标记；site/src/styles/global.css 加动效隐藏态、流水线 is-on 点亮态与 prefers-reduced-motion 兜底。
• 构建通过：50 页全部生成。

过程与坑

• Astro 组件里的 <script> 是模块作用域，顶层 return 会被编译器报错，改成 if/else 包裹即可。
• 本机 pnpm store 不在默认位置：安装依赖要带 --store-dir F:\.pnpm-store\v11，第一次失败还在仓库根误建 .pnpm-store，已删除。
• 动效设计刻意只动 transform 和 opacity；节点点亮用 CSS class + transition，GSAP 只负责时间轴编排，避免布局动画。

下一步

• 本地浏览器双端截图验证动效手感与移动端布局。
• 决定是否把同一套动效语言扩散到 /todo、/stars、/skills 等页面。