Stunning Landing Page — 惊艳动画落地页
目标：给定一个主题，产出一个像 Apple、Duolingo、Canva 官网那样有"哇"效果的 landing page。默认产出为单个 HTML 文件（CSS/JS 内联，动画库走 CDN），零构建、双击即看、方便移植到任何框架。
普通网页和惊艳网页的差距不在技术，而在三件事：叙事（页面是一个有起承转合的故事，或一个可探索的交互舞台）、编排（动画有节奏、有呼应、克制而精准）、细节（缓动曲线、噪点质感、悬停反馈这些 1% 的打磨）。本 skill 的流程就是围绕这三件事展开的。
参考文档索引
| 文件 | 内容 | 何时读 |
|---|---|---|
| references/animation-patterns.md | 顶级网站动画交互模式拆解（按网站和按模式两套索引） | 第 2 步选择签名动画时必读 |
| references/tech-toolkit.md | GSAP/Lenis/SplitType 等库的 CDN 与可直接复用的代码片段、性能陷阱 | 第 4 步编码时必读 |
| references/theme-to-style.md | 主题 → 情绪基调 → 配色/字体/动画风格的映射决策表 | 第 1 步定调时必读 |
| references/quality-checklist.md | 交付前自检清单（动画质感、性能、响应式、可访问性） | 第 5 步交付前必读 |
工作流程
第 1 步：定调 — 从主题推导情绪基调
读 references/theme-to-style.md，回答三个问题：
- 这个产品想让访客产生什么情绪？（敬畏 / 愉悦 / 信任 / 渴望 / 好奇 / 记忆感）
- 对应哪种基调原型？ 例如：科技旗舰感（Apple/Linear）、活泼游戏感（Duolingo）、创意工具感（Canva/Figma）、专业信赖感（Stripe）、OS-HUD 实验作品集感
- 一句话定位：用 "这是一个 ___ 风格的页面，访客滚动或切换状态时会感受到 ___" 来描述。写不出这句话就不要开始写代码。
如果主题较新颖或用户点名要参考某些网站，可联网补充灵感（非必须）：
- 搜索
site:awwwards.com/godly.website/codrops+ 主题关键词，看同类获奖作品用了什么手法 - 搜索 GitHub 上相关效果的开源实现（如
gsap scroll animation、three.js hero） - 只取模式和手法，不要照抄配色与文案
第 2 步：编排 — 设计滚动叙事剧本
惊艳页面默认是一场滚动驱动的演出；当主题是个人作品集、设计师主页、实验工作室时，也可以改成一个单屏交互舞台。在写任何代码前，先写出剧本（直接写在思考或回复里即可）：
Section 1 (Hero)：开场冲击 —— 访客 0.5 秒内被什么抓住？ Section 2-N (叙事)：每屏讲一个卖点，配一个与卖点呼应的动画 Final Section (CTA)：情绪收束，行动召唤
如果采用 OS-HUD 单屏舞台，剧本改写成：
Default State：首页舞台 —— 3D/图像签名物 + 一句话身份声明 Work State：作品档案 —— 通过导航或滚动进入错位作品索引 Contact State：收束场景 —— 视觉元素聚拢，联系人和社媒成为主角 System Layer：固定 HUD —— 时间、坐标、主题、状态开关持续反馈
然后读 references/animation-patterns.md，为整页挑选 1 个签名动画 + 3~5 个支撑模式：
- 签名动画（signature moment）：全页最贵的一个效果，放在 Hero 或核心卖点处，访客会因为它截图发朋友圈。如 Apple 式滚动序列帧、WebGL 渐变流体、巨字逐字浮现。
- 支撑模式：scroll reveal、视差、磁性按钮、数字滚动等"氛围组"，让全页处处有呼吸感但不抢戏。
克制是高级感的来源：每屏最多一个主角动画；所有动画共用一套缓动曲线和时长体系（如统一 cubic-bezier(0.22, 1, 0.36, 1)、0.6~1.2s）；宁可少一个效果，不要让两个效果打架。
第 3 步：视觉系统 — 三分钟定好再动手
不需要完整设计稿，但必须先定死以下变量（写成 CSS 自定义属性）：
- 配色：1 个主色 + 1 个强调色 + 背景/文字色阶（深色底易出高级感，亮色底易出愉悦感，查 theme-to-style.md 的映射表）
- 字体：标题用有性格的展示字体，正文用高可读性字体；中文场景标题可用思源黑体加粗/抖音美好体等，英文标题可用 CDN 的 Google Fonts（如 Inter、Space Grotesk、Fraunces）
- 排版尺度：Hero 标题要敢大（
clamp(3rem, 8vw, 7rem)起步），留白要敢空 - 质感层：噪点 overlay、辉光、玻璃拟态——挑一种贯穿全页
第 4 步：实现 — 单文件，库走 CDN
读 references/tech-toolkit.md 后开始编码。硬性约定：
- 产出
index.html单文件；如用户在已有项目里提需求，则遵循该项目结构 - 动画首选 GSAP + ScrollTrigger（CDN），平滑滚动用 Lenis，文字拆字用 SplitType；简单效果优先纯 CSS，不要为一个 fade-in 引库
- 只动画
transform和opacity，避免 layout 抖动 - 图片用 CSS 渐变、SVG 插画或
picsum.photos占位，不要引用不存在的本地图片路径 - 禁止用 emoji 充当图标或装饰图形：图标一律使用在线图标库（Remix Icon / Iconify CDN，见 tech-toolkit.md）或内联 SVG。emoji 在不同系统渲染不一致，且会瞬间拉低页面质感
- 必须实现
prefers-reduced-motion降级和移动端适配 - 代码注释用中文，文件头部含
@Date / @Author: xisy / @Discription
第 5 步：自检与交付
读 references/quality-checklist.md 逐项过一遍。有浏览器工具时，打开页面截图检查首屏与滚动后的实际效果；发现"动画存在但不惊艳"时，回到清单里的"质感修复表"对症下药（通常是缓动太线性、节奏太均匀、或缺少质感层）。
交付时向用户说明：页面的叙事结构、签名动画是什么、如何替换占位文案和图片。
示例
输入：「给我的手冲咖啡品牌做个官网」
定调：温暖渴望系（理由：咖啡卖的是感官与仪式感）→ 奶油底色 + 深咖啡文字 + 琥珀强调色，衬线展示字体，缓动舒缓。
剧本：Hero 巨字 "晨光，注入" 逐字浮起 + 一缕 SVG 蒸汽路径动画（签名动画）→ 滚动进入"豆子的旅程"横向滚动章节 → 冲煮参数区数字滚动 + 卡片 stagger 浮现 → 用户证言 marquee → 暗色收束 CTA "预订你的第一袋"。
实现：GSAP ScrollTrigger 驱动横向滚动与逐字动画，Lenis 平滑滚动，全页统一 power3.out 缓动，噪点 overlay 营造纸张质感。
