平台工程

网页主图 logo 流动动效迭代 · 液态变形与碎裂问题

入档:2026-06-26 来源:taowhale-site(鲸海拾贝)首页主图改版——参考「刺猬星球 super-i」做巨型流体主视觉,再参考一段紫色发光缎带视频给 logo 加「不断流动」动效 状态:🚧 未完成,周一(2026-06-29)续修。动效方向已定(整张 logo 液态变形),但当前实现「画面太碎」需调参/换法

一句话总结

把品牌 logo(鲸环水流缎带)做成「整张图不断液态流动」的正确技术路线是 SVG feTurbulence(分形噪声)+ feDisplacementMap(按噪声位移像素)+ 动画噪声场;但位移噪声粒度太细(baseFrequency 偏高 / numOctaves 偏多)会把缎带边缘打成碎渣——“画面太碎”。要的是「大波缓流」,不是「细沙沸腾」,所以下一步是降频率、减octave、可能加方向性位移。

背景与目标

• 公司站首页主图:用自家鲸环 logo 复刻 super-i 那种「巨型流体主视觉 + 居中黑色品牌字」。
• 视觉落地后,用户要动效:整张 logo 像参考视频那样不断流动(视频是一条紫色发光缎带,形态持续波动起伏、像液态光在缎带里流淌)。

迭代过程(复盘 · 事实先行)

视觉搭建阶段(已上线,稳定):

1. 用自家鲸环 mark 复刻 super-i 结构:浅色背景 + 巨型缎带 + 居中黑色品牌字(鲸海拾贝 Taowhale)。
2. 同事给了一张蓝色水流质感渲染图(鲸环形,1672×941,白底 RGB),决定直接用作主视觉。

动效阶段(反复试错,关键复盘): 3. ❌ 第一版「闪光划过」(一束光 sweep 一次)→ 用户:太淡 + 看不到。根因有二:① 太微弱;② 用户 Windows 关了「动画效果」→ prefers-reduced-motion: reduce → 全局无障碍规则把动画禁掉了。 4. 修:把氛围光效从 reduced-motion 豁免(更高优先级 !important 覆盖),并加大可见度。→ 能看到了,但仍是「划过」。 5. ❌ 误解方向:做成「多束柔光团在 logo 上漂移涌动」(masked blobs)→ 用户:不是这个意思,是整张 logo 像视频那样不断流动。 6. ✅ 正解:给 logo 图本体加 filter:url(#liquidFlow)(feTurbulence + feDisplacementMap),baseFrequency 用 SMIL 22s 周期演化 → 整张缎带持续变形流动。 7. ❌ 当前问题:画面太碎。位移噪声粒度过细,缎带的细水丝被打散成颗粒/锯齿,不是「整体大波缓流」。

当前问题与周一修正方向

问题:feTurbulence baseFrequency="0.008 0.013" numOctaves="2" scale="20" → 高频细噪声把缎带边缘和内部水丝撕碎(碎裂感)。

周一优先试(按性价比排序):

1. 大幅降 baseFrequency(如 0.004 0.006 甚至 0.002):频率越低 = 波长越长 = 大波缓流,不碎。这是最可能见效的一招。
2. numOctaves 降到 1:去掉细节叠加层,只留主波。
3. scale 适当(12~24):位移幅度;先压低看是否够「流动」。
4. 方向性流动:若要「沿缎带流」而非「原地沸」,给噪声接 <feOffset> 让噪声场缓慢平移(注意 fractalNoise 非周期,平移到头回跳会有 snap;可用很长周期或 type="turbulence" + stitchTiles 试缝合)。
5. 兜底备选:若位移法始终碎,改回**「沿缎带形状遮罩的柔光流动」**做主效(光在流而非形在变),牺牲一点「整体变形感」换干净。

可复用要点(迁移到任何网页主视觉)

• 抠图保色:白底渲染图抠透明,保留原始 RGB + 仅按「到白的距离」生成 alpha;别做 unpremultiply 反预乘——它对 alpha 估计极敏感,会把蓝色洗成绿色(本次实测踩过)。
• 任意显示器完整无遮挡:主视觉用 object-fit:contain 放在「页眉下方→主图底部」的盒子里;并把素材裁成接近屏幕比例(本次裁掉底部倒影,1.53→1.93)→ 宽屏几乎满宽、又不裁切。靠宽度铺满(vw)会在高宽比不同的屏上顶/底被切。
• 首屏铺满:min-height:100svh(不是 vh):跨设备铺满可视高度且不溢出。
• SPA 后端要真服务静态资源:catch-all 路由若对任意路径都返回 index.html,新加的图片资源会 404(返回 HTML)。改为「先查 STATIC_DIR 下真实文件(带路径穿越防护)再回退 SPA」。
• 动效与无障碍:全局 prefers-reduced-motion 一刀切会禁掉氛围动效;轻微、无大幅位移的氛围光效可用更高特异性 !important 定向豁免,其余仍遵守。⚠️ 2026-07-24 同根因二次现形(首页滚动渐现)后升律:内容渐现类动效在 reduce 下应降级纯淡入而非跳过,见 reduced-motion本机陷阱_动效降级纯淡入而非跳过_v1。
• 预览环境验证:预览冻结动画时钟,动效无法肉眼/截图/computed 验证——靠手动推进 Animation.currentTime / SVG setCurrentTime 逐帧采样证明「会动」,观感留真机。详见 Claude预览环境不派发滚动事件_滚动类功能无法行为验证_v1。

续修定位(库外裸路径)

• 代码:E:\AIGC工作站\taowhale-site\static\index.html —— HeroRibbon 组件 + .ribbon-* 样式 + #liquidFlow 滤镜(搜 liquidFlow / ribbon-img / ribbon-cursor)
• 素材:E:\AIGC工作站\taowhale-site\static\assets\hero-ribbon.png(透明抠图 1182×613);带倒影原版备份在本会话 scratchpad
• 相关提交:1b5cefe(当前液态滤镜,碎)、3b426fc(光团涌动,被否)、e1c69f7(流动循环+鼠标互动)、e00a6c6(contain 自适应)、633ed62(主视觉+静态资源服务)

关联文档

• Claude预览环境不派发滚动事件_滚动类功能无法行为验证_v1 —— 预览冻结动画时钟,动效如何「逐帧采样」验证(本案是其「动画时钟冻结」补充的来源)
• reduced-motion本机陷阱_动效降级纯淡入而非跳过_v1 —— 本案「Windows 关动画效果→reduce→看不到」根因的二次现形与升律:降级阶梯 + headless 验证参数
• 09_平台工程索引 —— 平台工程区入口