52 lines
5.3 KiB
Markdown
52 lines
5.3 KiB
Markdown
# 影策品牌首页
|
||
|
||
## 定位与入口
|
||
|
||
新增公开首页 `/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](https://tympanus.net/Tutorials/Cinematic3DScroll/) 与 [源码](https://github.com/JosephASG/codrops-cinematic-scroll-animations)。原 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 请求。
|