我操，这是 AI 一次性能搞定的东西啊？
Gemini 3 帮我生成了一个前段时间非常流行的滚动叙事网页，随着你的滚动会不断播放丰富的动画。
坚持到第 5 秒，你会看到很离谱的事情，他 tm 写了一个看起来像 3D 的一个复杂的卡片动画。
提示词👇
请你扮演一位擅长创意交互的前端开发专家。我要做一个类似 Apple 产品页风格的“Scrollytelling（滚动叙事）”网页 Demo。
技术栈要求：
使用 HTML、CSS 和 GSAP (GreenSock) 配合 ScrollTrigger 插件。
交互逻辑：
页面高度要设置得很长（如 5000px），建立一个全屏固定的视口（Pinned Container）。用户的滚动动作不移动页面，而是作为进度条（Scrub: 1）直接控制整个动画的时间轴播放。
视觉与动画流程（请按顺序实现以下 Timeline）：
开场： 屏幕中心只有简洁的文字 Slogan，随着滚动，文字放大并渐隐消失。
UI 演示： 随后，模拟“手机通知弹窗”和“邮件列表卡片”从不同方向平滑飞入屏幕中心。
堆叠特效： 继续滚动，这些分散的卡片要通过 3D 变换，自动吸附堆叠在一起（Stacking Effect）。
高潮： 出现一个“Unsubscribe All”的按钮，当滚动经过它时，堆叠的所有卡片瞬间向四周炸开/飞走（Explosion Effect）。
结尾： 露出最后的 Logo。
风格要求：
极简主义、圆角卡片设计、阴影柔和、动画曲线要非常有弹性（Elastic/Spring）。请直接给我可运行的完整代码文件
Gemini 3 帮我生成了一个前段时间非常流行的滚动叙事网页，随着你的滚动会不断播放丰富的动画。
坚持到第 5 秒，你会看到很离谱的事情，他 tm 写了一个看起来像 3D 的一个复杂的卡片动画。
提示词👇
请你扮演一位擅长创意交互的前端开发专家。我要做一个类似 Apple 产品页风格的“Scrollytelling（滚动叙事）”网页 Demo。
技术栈要求：
使用 HTML、CSS 和 GSAP (GreenSock) 配合 ScrollTrigger 插件。
交互逻辑：
页面高度要设置得很长（如 5000px），建立一个全屏固定的视口（Pinned Container）。用户的滚动动作不移动页面，而是作为进度条（Scrub: 1）直接控制整个动画的时间轴播放。
视觉与动画流程（请按顺序实现以下 Timeline）：
开场： 屏幕中心只有简洁的文字 Slogan，随着滚动，文字放大并渐隐消失。
UI 演示： 随后，模拟“手机通知弹窗”和“邮件列表卡片”从不同方向平滑飞入屏幕中心。
堆叠特效： 继续滚动，这些分散的卡片要通过 3D 变换，自动吸附堆叠在一起（Stacking Effect）。
高潮： 出现一个“Unsubscribe All”的按钮，当滚动经过它时，堆叠的所有卡片瞬间向四周炸开/飞走（Explosion Effect）。
结尾： 露出最后的 Logo。
风格要求：
极简主义、圆角卡片设计、阴影柔和、动画曲线要非常有弹性（Elastic/Spring）。请直接给我可运行的完整代码文件
