四个项目 scrub 全部重做:一屏一个「过程电影」+ 按源码核实纠错
2026-07-08约 4 小时前端动效scrub发布会首页复核记录准确性
目标
站主反馈:ChatGPT 上一版把四个项目的 scrub 改「乱的不成样子」,要求整体像苹果、每个项目 scrub 丰富精致美观,整体背景协调丝滑。
上一版乱在哪(诊断)
- 舞台太挤:Auria / ContractLens / Sprout 都把十几个绝对定位面板塞进
lg:h-[388px]的短舞台,top值互相打架、越界裁切。 - 三套断点魔法数:base / sm / lg 各自一套
top硬编码,脆弱且不一致。 - 同屏太多微动效:轨道点、火花、信号点一起闪,读起来「假、闹」,与苹果「一次只动一个主体」相反。
- 白段夹在深段中间:OpenClaw 是唯一白底项目段,夹在四个深段里造成突兀闪断。
做法
先核实,再重画(子 agent 跑腿)
主模型不亲自读四个源仓库——用一个 Workflow 分四个 Sonnet 子 agent 并行读 自迭代框架(Sprout)/au_law(ContractLens)/AI_CV(Auria)/openclaw(OpenClaw),各自产出「真实管线脊柱 + 可上屏的真名/真数字 + 文案过度声明处」。据此每一帧都对应真实 pipeline。
统一脚手架(替掉三套断点)
每段一个 1000×560 设计坐标系 + 百分比定位的画布,随容器等比缩放,不再有断点魔法数、永不裁切。叙事统一为「左侧输入常驻 → 中间过程逐级点亮 → 右侧细节视口随焦点交叉淡入到终态英雄」,一次只推进一个 beat。初始隐藏态一律 knl:lg: 作用域,移动端/无 JS/减动效保留「已完成」静态定妆帧。
- Sprout:
Root.analyze()→ 分裂 3 子 → Child B 递归 → straggler(慢 2.5×)取消重拆 → 全部 COMPLETED,结果沿边向上汇聚(脉冲沿 SVG 路径反向跑,getPointAtLength驱动)→ rubric 打满 100。 - ContractLens:真实 10 段管线脊柱逐级点亮(extract_pdf/OCR → segment → GC/S32 规则引擎 → 7 分析师并行 → cross_validate → compliance gate),右侧视口从「7 分析师」→「rapidfuzz 引用相似度表」→「一页报告落章」。
- Auria:简历 intake → 8 个真实分工 Agent 工坊 → 「逼出 8 个方向 → Max-Min 挑最不撞衫的 5 个」(Verbalized Sampling 招牌招式)→ 前端工匠手写整站 + 评审团截图打分。
- OpenClaw:一次记忆检索沿四级降级阶梯下坠,被 BM25 接住 → 干净上下文包 → 会遗忘的情景记忆(间隔重复巩固)。改为深色舞台,让五个项目段统一 riding 同一张连续光场(同时修掉白段闪断,背景更协调)。
踩坑与纠正
- Tailwind v4 双重 transform:居中卡片用
-translate-y-1/2(写的是独立translate属性)又被引擎写style.transform,两者叠加导致偏移翻倍——所有会被引擎接管的居中元素改用[transform:translate(...)]形式(同属性、inline 整体覆盖)。(旧坑,这次又踩,已彻底扫一遍。) - 中间过程卡在静态帧重叠:右侧视口三张卡若都
knl:lg:opacity-0,静态时会叠在一起——中间过程卡改hidden knl:lg:block(仅桌面 scrub 存在),静态只留终态英雄。 - 按真实代码纠错(站主拍板):核实发现 OpenClaw 旧文案有代码里查不到的说法——第 4 级「SQL LIKE 打分」实为 BM25/FTS5 + episodic 词重叠;「四层上下文管理 / 中文 token 低估 40% 修正」
grep不到;「整个重写记忆系统」实为「在既有 hybrid 检索上加 episodic 层」。据实改正,并把一个真实亮点补上屏:间隔重复式记忆(衰减 ~10%/天,7 天内召回 ≥3 次才升级进 MEMORY.md)。 - 另记两处待站主定夺:ContractLens「348 页」与「91 条发现」来自两份不同合同的跑测(91 条那次是 132 页、且 7 分析师里只 6 个出结果);Auria「352 个测试断言」实测已是 405。均未在本轮改动,留给站主决定。
背景协调 / 丝滑
- 五个项目段统一深色舞台 + 同一套画布语言(不同 accent 灯光),共享同一张连续光场。
- 收窄背景随滚动的横向漂移与色相偏移(54°→28°),让背景色缓慢流过「橙→红→蓝→绿」的项目序列,而非大幅旋转与各段 accent 打架。
- scrub 仍走引擎的时间归一指数平滑(滚轮阶梯输入被抹成连续运动,收敛后停 rAF)。
验证
- 逐场景用 DOM 断言核对每个 beat(元素透明度/位置/状态色/汇聚脉冲/分数条/字幕切换),七个采样进度点全部符合设计。
- 静态帧降级:无
knl:opacity-0(都knl:lg:作用域),移动端/无 JS 完整可见;中间过程卡静态display:none不重叠。 npm run typecheck、npm run lint、`npm run check:content -- 全绿。- 截图工具在本机自动化环境对滚动内容失灵(backdrop-filter 合成为白),故视觉以 DOM 断言 + 站主实机复核为准。