黄一航
简历 ↓问 AI 分身EN
← 全部日志

发布会背景统一：连续彩色光场与项目动效二次强化

2026-07-07约 1.5 小时（估算）视觉设计动效发布会首页背景系统复核记录

目标

站主反馈：当前首页虽然恢复了 scrub，但仍像一段一段拼起来的页面。NoWorries 的人话说明独立挂在顶部，很突兀；Auria 和 ContractLens 的动画仍偏静态；Sprout 字太小、绿色背景糊；整体希望参考“先刷重点”的深蓝彩色背景，让整页背后是一张连续滚动的高级彩色光场，而不是每个项目一个割裂色调。

本阶段目标：先把整体背景设计成连续系统，再修局部舞台，让页面从“项目段落集合”更接近“发布会式连续叙事”。

关键 prompt（原文摘录）

这个文字装在电脑里的 AI 助手：一句话吩咐，它自己动手整理文件、处理 Excel 和 Word——不用你碰鼠标。放的很搞笑。。。。很突兀不好看。

auria的部分动画效果不够华丽，你可以做的更好看丝滑，丰富一点。

这个contraclens也是动画效果不够丰富.

sprout这里动画文字太小了，绿色背景很糊。

对于整体网页我要求所有网页的背后就是一个滚动的彩色。往下滑就是滚动那个高级的彩色。而不是一个页面一个背景色调。你要好好设计这个整体背景。要丝滑过度。从先刷重点的背景色开始。

OK，你来搞

结果

  • src/components/keynote/stage.tsx

    • 在 KeynoteStage 里新增 #keynoteBackdrop，作为首页所有 section 背后的固定光场。
    • 子内容放进 .keynote-content，背景与内容分层，避免每个 scene 自己抢背景。

  • src/app/globals.css

    • 新增 .keynote-shell、.keynote-backdrop、.keynote-backdrop-field、.keynote-backdrop-grain。
    • 背景由多层 radial-gradient + 暗色 wash + grain 构成，基准接近“先刷重点”的蓝黑质感。
    • 白/灰 section 不再实心盖住背景，而是半透明亮面；黑 section 是轻薄暗罩。
    • 下压局部 aurora-img / pearl-img，避免每段自己的背景图盖掉统一光场。

  • src/lib/keynote-engine.ts

    • 新增 updateBackdrop()：每帧按整页 scrollY / scrollHeight 写入 --kn-bg-scroll、--kn-bg-x、--kn-bg-y、--kn-bg-hue。
    • 背景变量在移动端也更新；桌面 scrub 的宽度守卫不影响背景。
    • Auria 增加 facts / orbit / build 元素的滚动驱动。
    • ContractLens 增加 scan / doc bars / report glow 的滚动驱动。
    • 提高 Auria / ContractLens 主体透明度 baseline，避免中段像“半加载”。

  • src/components/keynote/scene-noworries.tsx

    • 删除跑道外那句孤立导语。
    • 把产品说明收进 NoWorries 标题组下面，随标题一起进入 scrub 舞台。

  • content/keynote.ts / content/en/keynote.ts

    • 中文文案从“装在电脑里的 AI 助手……”改短为“一句话发令，它在本地替你操作文件、Excel 和 Word。”
    • 英文同步简化。

  • src/components/keynote/scene-auria.tsx

    • 从浅色白页改成深色彩光舞台，标题与说明改白字。
    • 新增 auriaEnergy、双环、orbit 光点、facts 逐条高亮、网站模块逐步生成。
    • 下方说明卡显式设 text-ink，避免深色舞台下白卡继承白字。

  • src/components/keynote/scene-contractlens.tsx

    • 从浅色白页改成深色彩光舞台。
    • 新增合同扫描光带、合同条目高亮、报告顶部光。
    • 报告卡/合同卡内部显式设 text-ink，避免白卡白字。

  • src/components/keynote/scene-sprout.tsx

    • 不再让绿色极光图占满整屏；只保留很淡的蓝绿色光。
    • 树图整体放大，节点和连线加粗，字幕字号从 17–23px 提到 22–30px。
    • 修掉 spStraggler / spDone 的 Tailwind 独立 translate 与 JS style.transform 叠加隐患，静态居中改用同一 transform 属性。

踩坑与纠正

  • 统一背景不能只是再加一张图：如果继续在每个 scene 里铺 aurora-img / pearl-img，还是会形成一屏一色。修法是把背景上提到 KeynoteStage，每个 section 只做透明罩。

  • 白色 pearl 图会把深色舞台洗成灰：Auria / ContractLens 改成深色舞台后，原来的珍珠白背景还在叠加，截图变成灰蒙蒙。修法是把这两页的 pearl 父层压到 opacity-20，只保留一点局部光。

  • 深色舞台会让白卡继承白字：ContractLens 报告卡一开始看起来仍像残缺，实际是白卡内部文字继承了 section 的白色。修法是合同卡和报告卡内部显式 text-ink；Auria / ContractLens 的说明卡也同样处理。

  • 背景更新不能只在桌面 scrub 里跑：全局彩色背景应该移动端也成立，所以 updateBackdrop() 放在 tick() 宽度守卫之前，移动端不写 scrub transform，但仍更新背景变量。

  • Sprout 不是只放大一行字：绿色背景糊的问题来自局部极光图过强；同时节点、线、字幕都偏小。最终一起改：弱化局部图、放大树图、加粗线条、提高字幕字号。

用时与备注

约 1.5 小时（估算）。本次继续保持零新增依赖、零新图片，使用 CSS 渐变与现有位图做连续背景。复核重点请看 localhost:3100 的 #highlights、#noworries、#auria、#contractlens、#sprout，并观察滚动时背景是否连续移动。