5.3 KiB
影策品牌首页
定位与入口
新增公开首页 /welcome，产品名为「影策」，核心文案是「让一个故事，从文字走向银幕」。首页讲述一个创作过程，并提供进入实际工作台的入口。
现有 /、/create 创作页与 /home 项目概览仍按原路由运行。工作台左上品牌菜单新增「品牌首页」链接。新首页通过独立 React 入口加载，以普通链接进入工作台，避免等待登录恢复或加载模型目录。账户认证与业务权限继续由工作台负责。
内容与视觉
| 幕 | 主标题 | 素材与镜头 |
|---|---|---|
| 序幕 | 影策 | 同一故事的影像组成旋转卷轴，首屏保留全屏影像背景 |
| 故事 | 一念，成故事。 | 九张电影画面与三张叠字剧本镜头交错，摄影机升高 |
| 角色 | 让想象，有了面孔。 | 当前故事中的人物与环境参考 |
| 分镜 | 字里行间，皆是镜头。 | 黑白影像卡，标记 SHOT、景别与运镜 |
| 生成 | 这一刻，动起来。 | 摄影机靠近；Charge 版本的部分画面播放对应影片片段 |
| 画布 | 一个世界，一张画布。 | 同一批画面展开成节点矩阵与连线 |
六幕后进入真实工作台截图，提供自由画布、即时创作、项目工作台三个可切换视图与对应业务入口。页尾收束为「你的故事，现在开始」，提供开始创作、GitHub 和 MIT License 链接。
第二版以中性近黑与白为底，图片承担主要色彩。摄影机拉近，卷轴略微倾斜并占满主画面；首屏品牌移到左下，保留一句主张，主入口集中于顶部。每幕后只保留一句标题，去掉英文眉题、解释段落和影片角标；底部导航改为可点击刻度，悬停显示章节名称。下方删除三栏功能说明，保留工作台实景。全屏场景无装饰性容器，中文字号按断点设置，不随视口线性缩放。文字为真实 DOM，场景为 Three.js；动画可暂停。手机缩短滚动距离并调整摄影机，减少动态效果和 WebGL 不可用时使用静态画面。标题与 CTA 在资源加载前即可显示。
素材
提供 Spring（默认）、Charge、Wing It! 三个素材版本，使用 ?look=spring|charge|wing-it 直接打开，菜单切换保留滚动位置并支持浏览器前进、后退。首屏背景随向下滚动渐隐为黑底，返回顶部时恢复，而不是在 WebGL 加载后立即消失。
素材保存在 web/public/welcome/：Spring 官方五张剧照、Charge 五张预览与截帧、Wing It! 六张绘画与裁图分别循环编排为十二个卷轴位置。Charge 有对应的静音预告片节选；其他版本不混用视频，也不显示无内容的播放入口。Wing It! 部分彩稿分辨率较低，适合方向预览，最终上线可继续补充高清成片镜头。
这些素材来自 Blender 开放电影，资源页采用 CC BY 4.0；完整作者、来源、许可和裁剪处理说明在 /welcome/credits.html，入口同时出现在版本菜单下方与页尾。应用代码的 MIT 许可不覆盖这些第三方素材。剧本为本页原创演示文字，黑白分镜为图片处理，不宣称是影策生成的作品，也不宣称是原片剧本。
自由画布、项目工作台截图来自仓库 assets/；即时创作使用用户提供并确认的工作台截图，保留完整比例。
实现
web/src/main.tsx：精确匹配公开入口，仍保留启动 URL 清理流程。web/src/welcome-application.tsx：独立 React 挂载。web/src/pages/welcome/index.tsx：内容、滚动进度、章节导航、视频弹窗与实景切换。web/src/pages/welcome/story.ts：文案与素材清单。web/src/pages/welcome/story-reel.tsx：Three.js 影像卷轴、阶段材质、视频、轨迹与节点展开。web/src/pages/welcome/welcome.css：仅作用于本页的视觉 token 和响应式布局。
设计参考 Codrops Demo 1 与 源码。原 Demo 使用 OGL + GSAP；本实现使用已有 Three.js 与原生滚动进度，无新增依赖，不复制其图片、字体、全局 CSS 或广告脚本。
验收
需覆盖：无后端访问、三版本切换、六幕跳转、影片弹窗、工作台标签切换、业务跳转、桌面与移动端、低动态偏好、纹理加载失败、WebGL 丢失、卸载后的资源释放。用户已确认保留三组素材并使用影策品牌；真机性能仍需确认。
第二版已通过 TypeScript 检查、Vite 打包，以及 Chromium 375、390、1440、1920 宽度下的浏览器检查：六幕切换、非空画面与动画像素变化、影片播放和关闭、工作台标签切换、无横向溢出、无后端 API 请求，以及减少动态效果、图片失败和 WebGL 创建失败的降级。真机性能与最终视觉接受度仍待确认。
最终三版本在上游主线的独立 PR 分支再次通过完整前端构建（GOTOOLCHAIN=go1.25.0 bun run build）、素材与启动清理专项测试（bun test test/welcome-story.test.ts test/local-runtime-bootstrap.test.ts）。生产预览验证了 1440px、390px 的三版本切换、六幕滚动、画布像素与运动、Charge 视频、刷新与历史返回、减少动态效果及署名页，未出现页面异常或后端 API 请求。