好的，遵照您的指示。这份README.md是为使用Vue 3开发的项目量身定制的，并完全采纳了您提出的"单一连续运镜"的先进设计理念。

"进化一号"火箭 - 滚动叙事官网

项目简介

本项目是一个基于 Vue 3 和 GSAP 构建的、极具电影感的滚动叙事（Scrollytelling）网站Demo，旨在为星火空间"进化一号"电循环液体运载火箭提供一次印象深刻的线上发布体验。

与传统的多页面或分块滚动网站不同，本项目的核心设计理念是**"单一连续运镜"**。用户的滚动操作将驱动一个无缝的、不间断的动画镜头：跟随着"进化一号"火箭，从地面发射台沿一条优美的弧线，一路飞向深邃的太空。在飞行过程中的关键节点，相关的技术亮点和叙事文本将优雅地浮现，将复杂的火箭技术转化为一场引人入胜的视觉之旅。

核心特色

• 电影级连续镜头: 整个网站体验是一个完整的长镜头，无任何生硬的场景切换，提供了极致的沉浸感。
• 滚动驱动的动画时间轴: 用户的滚动条精确控制着火箭的飞行进度，可以自由地"前进"或"倒带"整个发射过程。
• 节点化信息叙事: 在火箭飞行的关键轨迹点，动态展示核心信息，将产品故事与视觉动画完美融合。
• Vue 3 Composition API: 项目采用 Vue 3 组合式 API 进行开发，逻辑结构清晰，可维护性高，特别适合管理复杂的动画状态。
• 高性能动画: 依托业界顶级的 GSAP (GreenSock Animation Platform) 动画库，确保动画在各种设备上都如丝般顺滑。

技术栈

• 前端框架: Vue 3
• 构建工具: Vite
• 动画核心: GSAP (GreenSock Animation Platform)
  • 关键插件: ScrollTrigger - 用于将动画与滚动条精准绑定。
• 语言: JavaScript / TypeScript, HTML5, SCSS/CSS3
• 3D渲染 (可选): Three.js - 可通过集成 Three.js 来使用真实的3D火箭模型，以获得更强的视觉冲击力。

运行项目

安装依赖

npm install

启动开发服务器

npm run dev

项目将在 http://localhost:5173 (或下一个可用端口) 上运行。

构建生产版本

npm run build

预览生产构建

npm run preview

---

视觉设计与叙事流程 (The Cinematic Flow)

整个动画发生在一个固定的浏览器视口内。火箭作为绝对主角，始终贯穿画面，其运动轨迹、背景环境和叙事文本随着滚动进度而平滑演变。

初始状态 (滚动 0%)

• 火箭: 静止于屏幕左下角的发射台上，呈现蓄势待发的状态。
• 背景: 傍晚时分的发射场，天空是深蓝与橙色的渐变。
• 文本: 主标题在屏幕右侧浮现：

  电循环，新纪元

  星火空间"进化一号"

节点一：点火起飞 (滚动 ~15%)

• 火箭: 底部发动机点火，喷射火焰，沿预设轨迹开始缓慢加速上升。
• 背景: 地面烟雾升腾，天空色调变化不大。
• 文本: 初始标题淡出，第一组信息在屏幕右侧的干净位置出现：

  一颗强大的"电核"

  我们用高效的电动泵替代复杂的涡轮泵，大幅简化结构，将每一次发射成本降至新低。

节点二：突破大气 (滚动 ~45%)

• 火箭: 飞行至屏幕中央区域，速度感增强，箭身周围可加入轻微的音障云特效。
• 背景: 地面已在视野之外，天空由深蓝向藏青色过渡，星辰开始微弱显现。
• 文本: 上一段文本淡出，第二组信息出现：

  90吨，雷霆推力

  9台发动机并联，不仅提供强大的起飞推力，更通过冗余设计确保了任务的极致可靠性。

节点三：进入轨道 (滚动 ~75%)

• 火箭: 飞行至屏幕中上区域，飞行姿态逐渐平缓，与视口上边缘趋于平行。
• 背景: 完全进入纯黑的太空，繁星闪烁，巨大的地球弧线从右下角缓缓映入眼帘。
• 文本: 第三组信息浮现：

  精准入轨，部署未来

  服务于通信、遥感、科研等多元化的太空探索任务。

最终状态 (滚动 100%)

• 火箭: 到达屏幕右上角的最终位置，平稳飞行。整流罩平滑打开，一颗卫星被释放出来。
• 背景: 浩瀚的太空与美丽的蓝色地球构成最终画面。
• 文本: 最后的行动号召（Call to Action）与品牌Logo定格在画面中：

  星火，点亮无限可能

  [了解更多] [联系我们] [星火空间 LOGO]

Vue 3 组件化结构建议

/src
├── assets/         # 存放图片、字体、3D模型等静态资源
├── components/
│   ├── AnimationCanvas.vue  # 核心！负责所有GSAP动画和视觉元素的渲染
│   ├── ScrollContainer.vue  # 提供滚动高度以驱动动画的容器组件
│   └── InfoNode.vue         # 可复用的信息节点文本组件
└── App.vue           # 主应用组件，组合上述核心组件

逻辑拆分思路

• AnimationCanvas.vue:
  • 在 onMounted 生命周期钩子中初始化 GSAP 时间线 (Timeline)。
  • 将火箭位移、背景过渡、文本显隐等所有动画效果，按照滚动顺序编排进这个总的时间线。
  • 初始化 ScrollTrigger，将整个时间线与 ScrollContainer 的滚动进行绑定。
  • 使用 Vue 的 ref 来引用 DOM 元素，并传递给 GSAP。
• App.vue:
  • 作为舞台，将 AnimationCanvas.vue (固定定位) 和 ScrollContainer.vue (正常文档流) 组合在一起，构建出分层布局。