你相信光吗

一个跑在浏览器里的氛围灯。打开就是一团缓慢呼吸的光，不用注册、不用装任何东西，手机和电脑都能开。

外滩大会黑客松 2026 · AI Coding 大赛参赛作品。

五种玩法

• 氛围 —— 什么权限都不要，打开就有一团慢慢呼吸的光。
• 呼吸 —— 4-7-8 与 4-4-4-4 两套节奏，跟着光吸气、屏息、呼气。
• 剧本 —— 一句话生成一段有情节的灯光演出。没有配 LLM Key 时自动退回内置的六套剧本，功能不缺。
• 手势 —— 摄像头识别双手：张合控制扩散，手掌高低控制亮度与色相。
• 派对 —— 麦克风三频段加自适应节拍，驱动整场光。

关键在于这五种玩法不是五套独立实现。声音、手势、呼吸、剧本都只往同一组目标值里写数，平滑与渲染统一在光场引擎里做。所以加一种新玩法通常只是加一条数据，不是加一整套渲染管线。

调光台

• 呈现（5 档）：粒子 / 交融 / 光幕 / 纯光 / 实色。其中「实色」是一套完全不同的视觉语言——关掉粒子、关掉泛光，把大气层的底色和暗角一起收掉，剩下真黑背景上的清晰实色图形。
• 形态（4 种）：光球 / 极光 / 烛火 / 水波。形态之间是插值出来的，不是切换：着色器同时持有两组参数按比例混合。
• 光幕（16 种）：流水、四象限、脉冲、频谱柱、跑马灯、光束、激光、追光、光河、隧道、表盘、爆闪……
• 睡眠渐暗：后 45% 才开始暗，同时收拢、转暖、褪色，而不是单纯把亮度调低。
• 超暗模式：整体亮度可以压到 8%，低于 30% 时叠一层遮罩，比系统最低亮度还暗；长按 1.5 秒才解锁，防止夜里误触。

两件比功能更重要的事

隐私。 麦克风和摄像头只在点「派对」「手势」时才申请，全部在本机处理，不录制、不上传。拒绝授权不影响其余三种模式。MediaPipe 的 wasm 与模型都本地化在仓库里，运行时不连任何第三方。

光敏性安全。 参考 WCAG 2.3.1 的闪光判据（相对亮度变化 ≥10% 且每秒超过 3 次）。两条会改变整体亮度的音频通路各用一种方式守：离散的节拍触发有强制最小间隔，把闪光频率压在 3 Hz 以下；连续的低频推亮度没有天然间隔，改为限制幅度。位移、色相、抖动、结构不受这条限制——它们不改变整体亮度，可以跟得很快。首屏对光敏性癫痫患者有明确提示。

技术

纯静态前端单页，零后端，无构建步骤。three.js 通过 importmap 映射到本地 vendor，连 MediaPipe 的模型都一起本地化了。

渲染链是「粒子 → 光幕 → 拖尾 → Bloom → 大气层」。粒子一次 draw call 画完，按画质档 5000 / 10000 / 18000 个点，位置、颜色、大小全在顶点着色器里算；光幕是一个全屏隐式场，16 种图案的分支由 uniform 决定，整个 draw call 走同一条路径，不会线程发散；拖尾用两张半分辨率 HalfFloat 缓冲乒乓，叠加走 max 而不是加法，反馈回路不会累积爆掉。

手势那条链上 MediaPipe 以 30Hz 推理，输出过一层 1€ 滤波：固定低通在这里是死结——调低跟手变肉，调高把识别噪声一起放大；1€ 按信号自身速度调截止频率，慢时滤干净、快时几乎不滤。跑不动的机器会按实测推理耗时自动退到 15Hz。

部署在 Cloudflare Pages，纯静态加一个可选的 Function 做剧本 LLM 代理。选它是因为 pages.dev 在中国大陆可直接访问，这是本项目的硬要求。