NovaScape产品系统Vibe Coding

消费电子（智能手机）新品发布与线上营销场景。品牌官网产品页同时承担卖点教育、参数查询与购买转化三类任务，且需兼顾桌面横屏与移动竖屏两种浏览环境，因此对响应式排版和动效性能要求较高。

项目包含六个功能模块：①顶部导航——阅读进度条、滚动后毛玻璃收起、机型下拉切换、窄屏汉堡菜单与产品二级导航「概览」下拉；②首屏 KV——图片缩放入场、文字逐层浮现与滚动视差；③产品亮点轮播——支持前后切换、视频卡片播放、文案随轨道逐帧位移淡入淡出；④全屏视频区块——滚动进入视口后触发播放；⑤规格参数区——按影像、性能、AI、续航、屏幕、通信、设计、体验分区展示，并附完整参数表；⑥购买与页脚区——价格、版本信息与免责声明。单文件版额外提供卖点分区锚点跳转与响应式排版。核心功能是让用户在一条连续滚动路径上完成产品认知、参数核对与购买决策。

技术选型：原生 HTML5 + CSS3 + JavaScript（ES Modules）+ GSAP/ScrollTrigger + Vite，不使用前端框架。
架构设计：按交互职责拆分 JS 模块（scroll / models / nav-menu / gallery / scroll-motion），每个模块只导出`initXxx()` ，由`main.js` 统一初始化；样式按页面区块拆分为 base、nav、kv、gallery、video-feature、headline，由`main.css` 顺序引入。
关键实现：①用 GSAP ScrollTrigger 驱动首屏缩放、轮播入场与视频区块入场，并监听`prefers-reduced-motion` ，在用户要求减弱动效时直接落到终态；②轮播文案用`requestAnimationFrame` 按轨道实时位移逐帧计算透明度，不叠加 CSS transition，避免二次缓动造成卡顿；③响应式图片使用`` +`(max-aspect-ratio: 11/10)` 由浏览器原生选择横竖屏素材，导航按 1365 / 1079 / 767.98 / 680px 四级断点逐级收起；④Vite 配置相对 base 路径与多页面入口，`scripts/package-local.mjs` 将 CSS、JS、字体内联进单个`index.html` ，产出可双击打开的离线包。
成果：构建产物既可直接部署到静态托管平台，也可离线双击运行，覆盖桌面、平板、手机三档宽度。