用代码翻译情绪——当语言不够用时，让画面和声音替你说话。一个持续生长的交互式数字疗愈作品集。
Healing Visual Lab 是一个持续生长的交互式数字疗愈作品集——22 件独立的 H5 页面，每件都是一个完整的创意编程实验。
现代人的情绪太拥挤了——焦虑、失眠、躯体化、过度自我审视。传统的表达出口有门槛（写日记、做咨询、搞艺术），但交互式视觉没有。你不需要任何技能——打开页面，看、听、触碰，让算法陪你待一会儿。
| 特点 | 说明 |
|---|---|
| 🚪 零摩擦 | 每个 .html 文件独立运行，无框架、无构建步骤、无需注册——只有浏览器 |
| 🎨 粒子系统 | 10K–500K 实时粒子，GPU 实例化渲染 |
| 🌊 流体模拟 | Navier-Stokes 简化模型、FBO ping-pong、速度场、旋度噪声 |
| ✨ 自定义着色器 | GLSL 片元着色器、Simplex/FBM 噪声、菲涅尔效果、顶点位移 |
| 🔊 音频合成 | Web Audio API 振荡器、双耳节拍（Delta/Theta）、环境 drone、Fmaj7 和弦 |
| 🖐️ 触觉交互 | 点击/拖拽物理、长按检测、涟漪/粒子碰撞响应、呼吸节拍同步 |
一个哲学内核贯穿所有作品： 身体记得的，代码可以翻译。代码翻译不了的，时间可以消融。What the body remembers, code can translate. What code cannot translate, time dissolves.
不知道该看哪个作品？按你正在找的技术方向快速定位。
| 你在找…… | 推荐作品 |
|---|---|
| Three.js 粒子漩涡 / WebGL 粒子系统 | unbound-mind/（150K 乱麻粒子抚平）、grand-jiangshan/（470K 地形粒子）、time-particle-clock/（200K 时钟粒子） |
| GPU 流体模拟 / FBO / Navier-Stokes | breath-mirror/（GPU 流体 + Brown 噪声）、inkmeditation/（100K 粒子流体）、breathing-boundary/（冷暖双粒子 + GLSL） |
| Web Audio ASMR / 双耳节拍 / 音频合成 | breath-mirror/（Brown 噪声引擎）、silent-translator/（音频疗愈引擎）、crystal-turntable/（Lo-fi 黑胶 + ASMR 钟声） |
| p5.js / Canvas 2D / 混合模式 | crystal-turntable/、pixel-aquarium/、drift-bottle/、rice-fragrance/ |
| Frutiger Aero / 毛玻璃 CSS / 亚克力质感 | pixel-aquarium/、windmill-valley/、aero-slime/、crystal-turntable/ |
| 纯单文件 H5 / 零依赖网页 | silent-translator/（0 外部依赖），所有 *.html 文件均为单文件、最多 1-2 CDN |
| GLSL 着色器 / ShaderMaterial / Simplex 噪声 | breath-mirror/、breathing-boundary/、grand-jiangshan/（4D Simplex）、time-particle-clock/ |
| 创意编程 / 数字疗愈 / 情绪设计 | 全仓库 — 22 件作品覆盖冥想、情绪释放、躯体感知、认知重构、存在反思 |
每个作品都是一个独立的 H5 页面，点击即开：
https://shasha1108.github.io/healing-visual-lab/inkmeditation/inkmeditation.html
git clone https://github.com/shasha1108/healing-visual-lab.git
cd healing-visual-lab
# 用浏览器打开任意作品的 .html 文件
open inkmeditation/inkmeditation.html每个情绪都有对应的作品。点击 slug 直接打开。
| 你感觉…… | 推荐作品 | 为什么 |
|---|---|---|
| 🌀 焦虑、思绪停不下来 | inkmeditation 墨池心境 · unbound-mind 释·茧 · breathing-boundary 呼吸边界 |
100K 粒子流体随呼吸沉浮 / 长按抚平 150K 乱麻思绪 / 冷暖双粒子系统共呼吸 |
| 😮💨 疲惫、身体沉重 | breath-mirror 息流幻镜 · silent-translator 无声翻译官 · sumi-e-taichi 水墨太极 |
GPU 流体镜面 + Brown 噪声 / 身体替你说出说不出口的话 / 墨滴太极引力场 |
| 🌧️ 难过、说不清的沉重 | cosmic-recollection 宇宙回响 · rice-fragrance 稻香 · drift-bottle 漂流瓶 |
60K 宇宙粒子 / 稻香里的童年记忆 / 瓶中平行世界 |
| 🌌 孤独、与世界的疏离 | cosmic-recollection 宇宙回响 · grand-jiangshan 万里江山图 · layered-mountains 青绿层峦 |
60K 宇宙粒子 / 470K 粒子江山 / 250K 粒子层峦触之即散 |
| 🧘 想安静一会儿 | sumi-e-taichi 水墨太极 · pixel-aquarium 像素水族箱 · time-particle-clock 时间流转 |
墨滴太极引力场 / 像素鱼毛玻璃水族箱 / 200K 粒子时钟拖拽加速 |
点击作品名直接体验 · Click to open live demo
📦 All Works 22 works · newest first
- 🎨 内心气象日记 · 60s 氧气舱 / Inner Weather Diary · 60s Oxygen Chamber — 60秒情绪氧气舱——选一种天气，让内心在玻璃小屋里安静呼吸
- 🎨 玻璃瓶里的夜光海 / Luminous Sea Bottle — 一个封存在像素玻璃瓶里的发光海洋——触碰唤醒生物荧光，然后慢慢暗回宁静
- 🎨 雪夜晶莹唱片机 / Crystal Turntable — 屋外雪花纷飞，这里的旋律永远为你温暖。
- 🎨 Sunken Treasure / Sunken Treasure — 像素鱼游进掌机传送门，逃逸到 3D 水晶水体中，蜕变为优雅的矢量鱼
- 🎨 平行世界 · 漂流瓶生态系统 / Drift Bottle — 轻触漂流瓶，唤醒瓶中平行世界
- 🎨 沉水 MP3 / Sunken iPod — 深海之底，一首七里香。触碰水面，音符如气泡升起。
- 🎨 七里香 / Dreamcore Summer Night — 极致冷暖光碰撞 — 深黑蓝天 vs 售货机刺眼白光 vs 铁路脉冲红灯
- 🎨 山谷里的风 / Windmill Valley — 风车在听，风铃在回答。一个你可以走进去的Frutiger Aero山谷
- 🎨 稻香 / Rice Fragrance — 稻香里的童年记忆
- 🎨 电子情绪宠物 / Aero Slime — 点击色块投喂情绪，双击玻璃释放惊吓——一只住在亚克力盒子里的电子史莱姆，用颜文字回应你的每一种心情
- 🌀 宇宙时钟 / Falling Verse — 时间的字符拓扑。数字从行星环上剥落，金→珊瑚粉→星空蓝，沉入幽蓝水面。
- 🎨 像素水族箱 / Pixel Aquarium — 晶莹剔透的 Frutiger Aero 水族箱，像素小鱼在毛玻璃内游动。单击投食，双击敲玻璃。
- 🌀 释·茧 / Unbound Mind — 这团乱麻，是你此刻的思绪吗？试着长按屏幕，慢慢抚平它们...
- 🌀 万里江山图 - 宏大视界 / Grand Jiangshan — 我见青山多妩媚，料青山见我应如是
- 🌀 时间流转 - 粒子时钟 / Time Particle Clock — 时间是流动的粒子——拖拽加速，松开即止，每一秒都有声音
- 🌀 呼吸边界 / Breathing Boundary — 看似隔绝，实则翻译——这是一层活着的、会呼吸的边界
- 🎨 无声的翻译官 / Silent Translator — 身体替你说了说不出的话
- 🌀 息流 · 幻镜 / Breath Mirror — 这里没有深渊，也没有波澜
- 🌀 水墨太极 / Sumi-e Taichi — 一滴墨落入宣纸——既是破坏，也是开始
- 🌀 墨池心境 / Inkmeditation — 算法物理学 × 视觉设计 × 心理疗愈
- 🌀 宇宙回响 V78 / Cosmic Recollection — 万物皆有裂痕——那是光照进来的地方
- 🌀 青绿·层峦 / Layered Mountains — 触之即散，聚散随缘
Last updated: 2026-07-08 | Works: 22 | Languages: 中文 · English | Tech: Three.js · WebGL · Canvas · Web Audio · GSAP
| 领域 | 技术 |
|---|---|
| 🎨 粒子系统 | Three.js WebGL point sprites、GPU 实例化渲染、10K–500K 实时粒子 |
| 🖼️ Canvas 2D / p5.js | p5.js 1.9 创意编程、Canvas 2D API、BlendMode 合成（Screen/Overlay/Multiply）、FBO 遮罩、逐帧手绘动画 |
| 🌊 流体模拟 | Navier-Stokes 简化模型、FBO Ping-Pong、速度场、旋度噪声、半拉格朗日平流 |
| ✨ 自定义着色器 | GLSL 片元着色器、Simplex/FBM 噪声、Domain Warping、菲涅尔效果、顶点位移 |
| 🔊 音频合成 | Web Audio API 振荡器、双耳节拍（Delta/Theta）、BiquadFilter 低通滤波、ConvolverNode 混响、Fmaj7 和弦合成、五声音阶、174Hz/432Hz/528Hz 疗愈频率 |
| 🖐️ 交互设计 | 点击/拖拽物理、长按检测、涟漪/粒子碰撞响应、呼吸节拍同步 |
| 🎬 动画 | requestAnimationFrame、GSAP Timeline、CSS 3D Transform、多层视差 |
| 🌫️ 后处理 | ACES 电影色调映射、AdditiveBlending 叠加、FogExp2 大气雾、CRT 扫描线、VHS 噪点 |
| 能力 | 作品数 | 代表作品 |
|---|---|---|
| Three.js / WebGL | 10 | 宇宙时钟、释·茧、万里江山图 - 宏大视界 |
| Canvas 2D / p5.js | 14 | 内心气象日记 · 60s 氧气舱、玻璃瓶里的夜光海、雪夜晶莹唱片机 |
| WebGL / GLSL 着色器 | 10 | 宇宙时钟、释·茧、万里江山图 - 宏大视界 |
| Web Audio API | 13 | 内心气象日记 · 60s 氧气舱、雪夜晶莹唱片机、平行世界 · 漂流瓶生态系统 |
| CSS 3D / GSAP | 2 | 无声的翻译官、宇宙回响 V78 |
| 粒子系统（10K+） | 18 | 内心气象日记 · 60s 氧气舱、玻璃瓶里的夜光海、雪夜晶莹唱片机 |
| 流体模拟 | 2 | 息流 · 幻镜、墨池心境 |
| 触觉交互 | 14 | 内心气象日记 · 60s 氧气舱、玻璃瓶里的夜光海、雪夜晶莹唱片机 |
代码翻译语言说不清的东西。 每件作品始于一个难以命名的情绪——焦虑、疲惫、说不出口的重量——然后变成一个不需要解释的交互体验。
| 信条 | 含义 |
|---|---|
| 🚪 零摩擦 | 打开页面就行。没有框架、没有构建步骤、不需要注册。只有浏览器。 |
| 🪶 少即是多 | 尽可能纯 HTML/CSS/JS。依赖项只在值得时才引入。 |
| 🖐️ 交互胜过说明 | 最好的界面不告诉你怎么做——你触碰，它回应，你就懂了。 |
| ⚙️ 情绪值得被认真工程化 | 感情是复杂系统。承载它们的代码也是。 |
每个 .html 文件是一个独立的实验。打开、交互、让算法陪你待一会儿。
如果其中某件作品让你感到被看见——那就是这个仓库存在的全部意义。 If one of these pieces made you feel seen — that's the only reason this repo exists.
相关工具仓库已转为私有开发。
MIT © 2026 @shasha1108 —— 详见 LICENSE。
用代码翻译情绪，让算法陪你待一会儿。 Code that translates what words cannot — let the algorithm sit with you for a moment.