guizang-ppt-skill 的 WebGL 低功耗运行时：单个 HTML 如何实现流体背景与 B 键静态降级完整指南

guizang-ppt-skill 的 WebGL 低功耗运行时单个 HTML 如何实现流体背景与 B 键静态降级完整指南【免费下载链接】guizang-ppt-skillAI-agent Skill for generating polished HTML slide decks: editorial magazine and Swiss layouts, image prompts, social covers, and a WebGL/low-power presentation runtime.项目地址: https://gitcode.com/gh_mirrors/gu/guizang-ppt-skillguizang-ppt-skill 是一个 AI Agent 网页 PPT 技能能把演讲内容生成为单个 HTML 文件的横向翻页 PPT。它的亮点之一是内嵌的 WebGL 运行时不依赖任何服务器和构建工具就能让演示页面拥有流体、涡流、网格点阵等动态背景而按一下B 键所有动画瞬间降级为静态老设备也能流畅放映。这篇文章带你读懂这套低功耗运行时是怎么做到的 ️为什么单个 HTML 文件反而能做 WebGL 动画通常大家印象里动态背景要么靠图片视频要么得部署一堆 JS 包。guizang-ppt-skill 的做法是把 GLSL 着色器源码直接写进 HTML 的script里浏览器打开时现场编译配合requestAnimationFrame逐帧绘制。风格 A电子杂志风两块 canvas 同时工作——深色页渲染Holographic Dispersion 全息色散浅色页渲染Spiral Vortex 旋转涡流代码见 assets/template.html风格 B瑞士国际主义风一块 canvas 渲染缓慢漂移的细线网格 低频噪声调制的点阵代码见 assets/template-swiss.html鼠标位置通过u_mouseuniform 传给着色器所以背景会随光标产生径向涟漪、局部点阵增强渲染分辨率用Math.min(devicePixelRatio, 2)封顶避免 4K 屏上 GPU 负载失控结果就是没有服务器、没有打包双击文件就能放映同时保住杂志感的动态质感。流体背景长什么样着色器在逐像素算颜色风格 A 的浅色页背景不是贴图而是片元着色器里的经典技巧fbm 分形噪声 domain warp域扭曲。着色器先算一层噪声q再用q扭曲坐标算第二层r最后用r扭曲坐标算出主值f银色与纸张色按f混合再叠加两抹紫蓝正弦微光——于是纸面上就有了缓缓流动的云感还带极淡的彩虹色散见 assets/template.html 的FS_LIGHT。深色页则是另一个思路对坐标做 3 轮正弦迭代扰动再叠加距离鼠标的波纹项sin(md*15 - time*4) * exp(-md*3)形成钛金暗流 鼠标涟漪FS_DARK同文件 L566-L593。风格 B 则克制得多网格线用fract生成主网格间距 0.12、次级网格 0.024鼠标附近会偷渡一点主题强调色IKB 蓝/柠檬黄等信息感优先于氛围感。瑞士风还有第三层动态IKB 满屏封面上的ASCII 点阵呼吸场——纯 canvas 2D用四个正弦噪声场决定每个字符格···-*•▢▣的显隐营造工业仪表板式的涌动呼吸感代码在 assets/template-swiss.html。B 键静态降级一次按键四层兜底按B 键或点击右下角的B 静态按钮进入低功耗模式整个降级是分层完成的这也是它丝滑的原因一个全局开关页面顶部的 IIFE 在body上打low-power类并写入window.__lowPowerMode这是所有动画系统唯一认的状态源assets/template.htmlCSS 批量接管body.low-power * { animation:none!important; transition:none!important }一次性冻结全站动效同时body.low-power [data-anim]{opacity:1!important}保证所有待入场元素直接显示页面绝不黑屏JS 主动止损document.getAnimations().forEach(aa.cancel())取消正在跑的 Web AnimationsWebGL 循环、ASCII 循环在各自 RAF 里检查到开关后cancelAnimationFrame并清空画布重播当前页切换后立刻调用window.__playSlide(当前页)低功耗模式下走revealStatic()分支——直接把所有[data-anim]、柱状图、时间线节点设成最终静态态assets/template-swiss.html另外两个贴心细节系统级尊重首次打开时如果系统开启了减少动态效果prefers-reduced-motion: reduce会自动进入静态模式无需手动按 B记忆与恢复选择写入localStorage键名guizang-ppt-low-power下次打开同一页面自动沿用右下角提示的文案也会随状态在静态 / 动态之间翻转进入演讲者模式前代码会先记下lowPowerBeforePresenter退出时再恢复——放映中途的状态不会被悄悄改掉assets/template-swiss.html。什么时候该按 B实用场景速查场景建议会议室投影、老笔记本按 BGPU 占用趋近于零翻页依旧丝滑投屏时观众窗口发热、掉帧观众端按 B 或点按钮保留全部版式用户系统设置了减少动态无需操作默认就是静态模式正式开场演示保留动态鼠标划过 hero 页的涟漪本身就是彩蛋核心原则是 README.md 里那句低性能可退场——动态效果不能成为阅读负担。B 键的意义不是关掉背景而是让内容在任何机器上都保持可读、可读得舒服。想继续深入关键文件索引风格 A 模板含双 WebGL 背景 低功耗开关assets/template.html风格 B 模板含网格着色器 ASCII 呼吸场 演讲者模式assets/template-swiss.html演讲者视图与观众屏同步规范references/presenter-mode.md质量检查清单P0 级含保留 B 键低功耗快捷键references/checklist.md动效与组件说明references/components.md技能工作流总览SKILL.md小结guizang-ppt-skill 的低功耗运行时本质是一个开关 四层降级着色器内嵌实现单文件 WebGL 背景B 键用一个全局状态同时接管 CSS 动画、JS 动画、WebGL 循环和 canvas 2D 循环再用静态帧兜底最后把选择记进localStorage并尊重系统动效偏好。对普通用户它意味着按一次 B演示在任何机器上都不掉链子对开发者这套动效可退场的设计也是做动态网页 PPT 很值得借鉴的工程范式 ✨【免费下载链接】guizang-ppt-skillAI-agent Skill for generating polished HTML slide decks: editorial magazine and Swiss layouts, image prompts, social covers, and a WebGL/low-power presentation runtime.项目地址: https://gitcode.com/gh_mirrors/gu/guizang-ppt-skill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考