Shader Wallpapers · Challen 王

5 个交互式 Shader 壁纸

给未来操作系统设计的全屏壁纸原型：每个都是 GPU 实时渲染的 fragment shader，跟随鼠标位置变形，点击产生扩散特效。从 Claude Design 导出设计稿，用 React + TypeScript + WebGL 实现。

发布时间：2026-05-05

五个壁纸

极光飘带：teal/blue/violet 色的北极光在暗夜中流动，鼠标弯曲飘带，点击发出扩散光环。使用 FBM 噪声叠加 3 层飘带。

霓虹等离子膜：经典 plasma 公式生成 magenta/cyan/yellow 干涉纹路，鼠标拖拽节点位置，点击白色冲击波。

暗黑 Voronoi 晶格：虹彩蓝/琥珀色边缘，鼠标触发近距辉光并偏移网格，点击产生碎裂涟漪。

反射金属流体：银/金色调的液态金属，鼠标用 curl noise 搅动流体，点击飞溅亮光。双重 warp 产生深度感。

时空扭曲：鼠标作为引力井，扭曲琥珀色网格线。模拟引力透镜效应，点击释放能量爆发，远处红移近处蓝移。

实现笔记

这个项目验证了一个完整的 Claude Design → 编码落地工作流：在 claude.ai/design 中用自然语言描述需求，AI 生成 HTML/CSS/JS 原型，导出 handoff bundle 交给编码 Agent 实现成生产代码。

技术上的核心决策：GLSL shader 代码原样保留（它们是 GPU 端程序，直接决定像素输出），JS 侧用 React hooks 重构 WebGL 生命周期管理。每帧通过 uniform 变量将鼠标位置、时间、点击状态传入 GPU，实现 60fps 的实时交互。

缩略图选择器为每个 shader 维护独立的 72x72 mini WebGL context，低频率渲染，作为实时预览。切换时通过 opacity fade 过渡，避免视觉跳跃。