手机壁纸生成器

一个单文件、纯前端的手机壁纸生成工具。

🎯 在线使用

GitHub Pages：

https://walnut-a.github.io/wallpaper-maker/

✨ 它能做什么

• 🎨 六种推荐组合 - 极简秩序感、大色块构成、科技纹理感、有机生成感、长虹玻璃感、深空光膜感
• 🧩 背景 / 主体 / 纹理可自由组合 - 可以拆开混搭，不必被整包预设锁住，主体里还有流体光团、拱门柱影、镜面切片、深空光膜这些额外选项
• 🪄 打开就有成品 - 不会先给你一块空白画布
• 🖼️ 精选候选 - 当前方向会给出几张小预览，点一下就能套用
• 🎚️ 参数够玩，但不吓人 - 常用参数在外面，细调项收进高级参数
• 📐 尺寸可选也可自定义 - 默认就是 9:16，也能自己填宽高
• 🎲 随机种子可复现 - 同样的参数加同样的种子，会回到同一张图
• 🎲 随机参数和随机混搭分开 - 可以围绕当前方向继续试，也可以直接重新抽组合
• 👀 实时预览 - 改参数就重绘，不需要额外点“应用”
• 💾 一键导出 PNG - 直接把当前壁纸存下来
• 🚀 单文件部署 - 只有一个 index.html，扔到 GitHub Pages 就能跑

🎨 风格说明

• 极简秩序感 - 更安静，像大形体和轻底纹慢慢浮出来
• 大色块构成 - 不是硬拼贴，更像几团有重量的颜色压在一起
• 科技纹理感 - 深色场、模糊光团、轻蜂窝，偏冷一点，也更有秩序
• 有机生成感 - 颜色像被拖开，画面更软，更松一点
• 长虹玻璃感 - 用有序竖向棱镜、轻微色散和幕后色场模拟折射，像隔着厚玻璃看柔和颜色
• 深空光膜感 - 深色渐变、弯曲光膜和微光颗粒叠出纵深，保留速度感但不画具象物体

🌈 调色板

• 暮光陶土
• 港口薄雾
• 亚麻石灰
• 暮海灰蓝
• 矿物砂红
• 橘雾冷杉
• 跃迁霓夜

🧰 适合什么时候打开它

• 想给自己换一张新壁纸，但不想打开大型设计软件
• 想快速试几套冷暖关系、密度和气氛差异
• 想固定一个种子，继续微调同一张图
• 想批量做几张同系列壁纸
• 想先从几张候选里挑一个，再继续细调

🎛️ 页面里可以调什么

常用区：

• 组合预设
• 背景气氛
• 主体图形（极简大形体、色块软构成、流体光团、流动带状、长虹玻璃柱面、拱门柱影、镜面切片、深空光膜）
• 纹理覆盖
• 精选候选
• 尺寸预设
• 自定义宽高
• 调色板
• 密度
• 复杂度
• 随机种子
• 重新生成
• 随机参数
• 随机混搭
• 恢复当前组合
• 导出 PNG

高级区：

• 主形体数量
• 边缘软化
• 光晕半径
• 底纹强度
• 冷暖偏移
• 颗粒细度
• 块面偏移
• 明暗反差
• 雾化程度
• 蜂窝尺度
• 暗角强度
• 漂移幅度
• 流向拉伸
• 纱幕透明度
• 流体起伏
• 铺展范围
• 棱线密度
• 棱线呼吸
• 全局折射
• 局部增强
• 雾场融合
• 玻璃厚度
• 宽窄比例
• 拱顶抬升
• 切面数量
• 倾角族谱
• 面宽级差
• 边界融化
• 高光显影
• 玻璃肌理
• 速度角度
• 光带密度
• 光晕强度
• 光膜尺度
• 曲率张力
• 远景漂移
• 颗粒密度
• 颗粒锐度

📦 本地使用

直接打开

双击 index.html 就能用。

🔧 技术实现

• 纯 HTML + CSS + JavaScript
• 使用 Canvas 负责预览和导出
• 长虹玻璃 会额外走一个全屏 shader 风格 pass，拿不到 WebGL 时会自动回退到 Canvas 2D
• 预览和导出走同一套绘制逻辑
• 支持 file:// 和普通静态站点环境

📁 项目结构

• index.html：主应用，包含结构、样式、状态和绘制逻辑
• PRINCIPLES.md：项目原则文档
• docs/superpowers/specs/：设计文档
• docs/superpowers/plans/：实现计划

📄 License

MIT

---

Made with care by walnut-a