# 登录页宣传炫技版·五个方向原型（2026-10-26）

> **10-26 白晨评：「这 5 个版本我都非常满意」，入库留作参考；「未来实现的时候我再跟你说怎么做」，还说「这里有一些设计元素，我觉得也非常有借鉴意义」。** 所以下文「待白晨定」各项留到实现时再定，没有排期；可借鉴的元素按版本列在「设计元素清单」一节。
>
> **性质：本文提案。** 白晨 10-26 看过[登录页颠覆改版](../2026-10-26-登录页颠覆改版/README.md)五版后说：「那些都不太行。原因是什么呢？是因为我还是想在首页上再保留一些宣传的元素。另外首页要炫技，就是要做的好看。」追问后确认：「首页」指**登录页**；宣传**两者兼顾**（首屏先用品牌气势抓住人，再讲具体场景让第一次来的人看懂）；视觉**每版放开做**；五版全做；**重首屏与进入**（宣传动画、登录待命、进入工作台的过渡做透，其余状态用共用登录卡带过）。不改 `apps/`。

## 上一轮错在哪

上一轮五版故意把宣传拿掉（「没有卡片、没有宣传语」「登录页讲的是今天，不是产品宣传」），并把「左宣传右卡片」列为不做。白晨要的正相反：宣传是页面的主角之一，而且要好看到「炫技」。这一轮每版都有品牌标语、四个场景（早上排好今天、会后纪要变待办、会前 15 分钟提醒、收工收成一摞）和一个签名视觉。

## 怎么看

- 入口 [`index.html`](index.html)：五版的想法、进入工作台怎么过渡、主推亮还是暗，带截图；顶上选亮暗与登录方式再点进去。
- 给手机或别的电脑看：在本目录跑 `python3 -m http.server <端口> --bind 0.0.0.0`，开 `http://<本机局域网 IP>:<端口>/index.html`。断网双击 `index.html` 也能开（主控用无头 Chrome 按本地文件打开过五版，都能加载到待登录）。
- 每版底部同一条**原型控制条**（不是设计的一部分）：回入口、上一版／下一版（带着当前状态与亮暗）、十个状态、登录方式、亮暗、收起。键盘 `[`／`]` 切状态，`\` 切亮暗。地址参数 `?phase=done&theme=dark&methods=uc`。
- 想看宣传动画：打开后等开场走完，再等场景轮播；想看进入过渡：点「使用 UC 统一账号登录」，原型约 2.6 秒后模拟从 UC 回跳并进入。

## 五个版本

| 版本 | 目录 | 一句话 | 进入工作台 | 主推 |
| --- | --- | --- | --- | --- |
| 一 丝带讲故事 | [`v1-ribbon/`](v1-ribbon/README.md) | 现行定稿科幻丝带（参数照搬）升级：WebGL 光丝在四个场景之间变形编织 | 光丝收成一束亮线，上下撕开 | 暗 |
| 二 悬浮的工作台 | [`v2-float/`](v2-float/README.md) | 工作台截图贴在有厚度的 3D 悬浮屏上，镜头推近各区域，场景卡浮出 | 屏幕转正、贴满，无缝变成工作台 | 暗 |
| 三 粒子成字 | [`v3-particles/`](v3-particles/README.md) | 五万多颗 WebGL 粒子汇成标语，再变形成各场景；鼠标拂过像沙面 | 粒子按截图颜色拼成马赛克，淡入截图 | 暗 |
| 四 一天的预告片 | [`v4-film/`](v4-film/README.md) | 20 秒「一天」预告片：着色器天色从晨到昏，大时钟，景深里的界面碎片 | 推轨镜头穿过碎片，大时钟缩进顶栏 | 亮 |
| 五 宣传墙 | [`v5-bento/`](v5-bento/README.md) | 拼块网格，每块一段实时小动画，登录卡在墙上；琥珀光随指针照亮缝与边框 | 拼块翻面、飞散，拼回工作台 | 暗 |

各版的设计说明、只有统一账号时长什么样、性能、自测、已知问题在各自目录的 `README.md`。

## 取舍（本文提案）

1. **宣传文案只用已有事实。** 主标语从《[工作台的价值](../../decisions/2026-10-09-工作台的价值.md)》出发（五版不约而同选了「很多事，在你开口之前已经在推进。」）；四个场景沿用现行登录页的原文与示例（`apps/web/src/features/login/LoginShowcase.tsx`）。不写节省多少时间、多少用户之类的统计数字，不写没有的能力。
2. **登录卡五版共用**（`shared/card.js`、`card.css`），十个状态它全包。这一轮比的是宣传与视觉，不是登录卡；各版只决定卡放哪、状态变化时宣传画面怎么回应、进入工作台怎么过渡。
3. **视觉放开，口味守住。** 各版可以离开极光柔彩·天光（白晨说选定后再对齐）；但单一强调色琥珀、不走红紫「AI 风」、不要七彩渐变与霓虹描边、系统字体、不引第三方库这几条仍守。
4. **每版都在「只有统一账号」时成立**（正式环境演示账号默认关，卡里只剩一个按钮）。

## 共用底座 `shared/`

| 文件 | 是什么 |
| --- | --- |
| `login.js` | 登录状态引擎与原型控制条，从上一轮原样拷来，只改了版本表与本机存储键 |
| `card.js`、`card.css` | 本轮新做的共用登录卡：十个状态、三种登录方式、品牌标志「星缝」（10-24 定稿图形） |
| `aurora.css`、`sky.js`、`icons.js`、`desk-*.jpg` | 从上一轮原样拷来：外观令牌、极光天空、手画图标、「进入后的工作台」示意图 |
| `设计总则.md` | 给五个设计子代理的派单底稿（白晨原话、宣传口径、五版各押什么、交付与自测） |
| `参考-现行丝带-ribbonGl.ts.txt` | 现行定稿丝带的源码（`apps/web/src/features/login/ribbonGl.ts` 的副本），给第一版参考；现行登录页截图见 `../2026-10-19-登录页动效改版/implemented/深色-1440.png` |

## 验收（主控）

2026-10-26 逐版验收（本机服务、无头 Chromium、1440×900）：
- 五版都真点了一遍「统一账号 → 模拟回跳 → 进入工作台」，过渡中途与终态截图主控都看过，最后都停在工作台截图上；`scrollWidth` 都等于 1440，控制台都是 0 报错 0 警告。
- 各版子代理自己跑过：十个状态 × 亮暗 × 三种登录方式、手机 390×844（登录卡都在首屏）。
- 按本地文件打开（`file://`）五版都能加载到待登录；这种方式拿不到页面控制台日志，有没有报错没核实。

验收中改的：第四版早上草案卡改成「今天 3 场会」并补上 16:30 那场（原来写 4 场只列 2 场，且与进入后的截图对不上），进入时大时钟改为往回拨到当天 09:05（原来快进到第二天，会闪过夜里的钟点）；第一版场景字后面垫一团底色光晕，待登录时丝带不再压字。

## 设计元素清单（备查，不是决定）

白晨说这些版本里的设计元素有借鉴意义。下面按版本列出各版的签名元素和代码位置，方便以后实现登录页或别的页面时直接取用；用哪个、怎么用，实现时由白晨定。

| 元素 | 出自 | 是什么 | 在哪 |
| --- | --- | --- | --- |
| 丝带变形编织 | 一 | 同一束 WebGL 光丝在几种图形（格线、横线、圆环、叠层）之间错开出发、边摆边变形；开场、扭转、脉冲沿用 10-20 定稿丝带的参数 | `v1-ribbon/app.js` |
| 亮线撕开转场 | 一 | 画面收成横贯中线的一束亮线，再上下撕开露出下一屏 | `v1-ribbon/app.js`、`style.css` |
| 3D 悬浮屏 | 二 | 截图贴在有厚度的 CSS 3D 平面上，随鼠标视差、斜向反光扫过 | `v2-float/app.js`、`style.css` |
| 镜头推近＋卡片浮出 | 二 | 推近截图里某一区域，周围压暗、描琥珀边，同时浮出一张讲解卡 | `v2-float/app.js` |
| 转正贴满 | 二 | 倾斜的屏幕转正、放大，严丝合缝落到铺满位置，换成真页面不跳 | `v2-float/app.js` |
| 粒子写字与变形 | 三 | 离屏写字取样得到目标点，五万多颗 WebGL 粒子汇成中文大字、再变成图形；鼠标推开再回位 | `v3-particles/app.js` |
| 粒子拼图 | 三 | 粒子按截图像素颜色拼成马赛克再淡入原图；`file://` 下读不到像素时退到预存色块 | `v3-particles/app.js`、`desk-grid.js` |
| 着色器天色 | 四 | WebGL 画的天空随一天的时间从晨光走到黄昏（亮暗两套，不走红紫） | `v4-film/app.js` |
| 景深碎片与推轨镜头 | 四 | 一台「镜头」统一算界面碎片的缩放、模糊、遮挡；进入时推轨穿过碎片 | `v4-film/app.js` |
| 大时钟飞进顶栏 | 四 | 页面上的大号时钟缩小飞进下一屏顶栏的同一个时间 | `v4-film/app.js` |
| 指针聚光 | 五 | 一团琥珀光随指针移动（没人动时沿慢轨迹漂），从拼块缝里透出、照亮附近边框 | `v5-bento/app.js`、`style.css` |
| 拼块轮流演示 | 五 | 多块小动画同一时刻只演一块，其余停在终帧；指针移进哪块就先演哪块 | `v5-bento/app.js` |
| 翻面飞散再拼回 | 五 | 拼块依次翻面、飞散，再飞到下一屏对应区域拼成完整画面 | `v5-bento/app.js` |
| 登录时画面「蓄势」 | 各版 | 点登录后宣传画面收紧、放慢或变亮，失败时平静回落 | 各版 `app.js` 里 `LG.on('change')` 一段 |
| 共用登录卡 | 共用 | 十个状态、三种登录方式、「星缝」标志，不透明面板＋上沿彩边 | `shared/card.js`、`card.css` |

## 已知问题与没验证的

- **性能只在无头浏览器里量过**：一、三、四、五版轮播平均帧间隔约 17 毫秒；二版（CSS 3D 大图层）在无头浏览器里只有约 20 帧，五版进入过渡有掉帧。M 系 Mac 有界面的 Chrome、Safari 都没测，二版可在控制台跑 `__v2fps(3000)` 量。
- 「减少动态效果」与「拿不到 WebGL」两条退路各版都写了代码，都没实际跑过。
- 三版粒子炸开到拼出截图之间约 1 秒满屏噪点，可能显得乱；粒子画的小数字略糊。
- 一版亮色下的场景图形比暗色淡；五版亮色的聚光边框偏弱。
- 一、二、三、五版场景里写「今天 4 场会」（沿用现行登录页示例），进入后的截图里是 3 场会。
- 演示账号用任何名字登进去，看到的都是周屿的工作台（示意图限制）。

## 待白晨定（实现时再定）

1. 选哪个方向，或组合（例如「悬浮的工作台」的进入方式＋「宣传墙」的场景讲法）。
2. 宣传的量：首屏一句标语加轮播够不够，还是要更多（比如往下滚有完整的产品介绍）。
3. 选定后再和定稿外观（极光柔彩·天光）、10-20 定稿的丝带对齐，出可开发的规格（文案、动效时长、减少动态与手机版式）。