Stunning landing page

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，回答三个问题：

1. 这个产品想让访客产生什么情绪？（敬畏 / 愉悦 / 信任 / 渴望 / 好奇 / 记忆感）
2. 对应哪种基调原型？ 例如：科技旗舰感（Apple/Linear）、活泼游戏感（Duolingo）、创意工具感（Canva/Figma）、专业信赖感（Stripe）、OS-HUD 实验作品集感
3. 一句话定位：用 "这是一个 ___ 风格的页面，访客滚动或切换状态时会感受到 ___" 来描述。写不出这句话就不要开始写代码。

如果主题较新颖或用户点名要参考某些网站，可联网补充灵感（非必须）：

• 搜索 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 营造纸张质感。