healing-visual-lab/index.html at main · shasha1108/healing-visual-lab · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="24 standalone interactive healing H5 experiments — Three.js WebGL particles, GPU fluid simulation, GLSL shaders, Web Audio synthesis, Canvas 2D p5.js, digital therapeutic art collection by shasha1108">
<meta name="keywords" content="Three.js, WebGL, GLSL, p5.js, Canvas, creative coding, particle system, fluid simulation, Web Audio, binaural beats, healing, interactive art, H5, single file, digital therapeutic">
<meta property="og:title" content="Healing Visual Lab · 24 Interactive Digital Healing H5 Experiments">
<meta property="og:description" content="24 standalone interactive healing H5 experiments — Three.js WebGL particles (up to 470K), GPU fluid simulation (FBO ping-pong), GLSL shaders, Web Audio API synthesis, Canvas 2D p5.js, GSAP, CSS 3D.">
<meta property="og:image" content="https://shasha1108.github.io/healing-visual-lab/breath-mirror/breath-mirror_1.png">
<meta property="og:url" content="https://shasha1108.github.io/healing-visual-lab/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Healing Visual Lab">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Healing Visual Lab · 24 Interactive Digital Healing H5">
<meta name="twitter:description" content="24 standalone interactive healing experiments — Three.js WebGL particles, GPU fluid simulation, GLSL shaders, Web Audio synthesis, Canvas 2D, GSAP, CSS 3D. Zero-dependency single-file H5.">
<meta name="twitter:image" content="https://shasha1108.github.io/healing-visual-lab/breath-mirror/breath-mirror_1.png">
<link rel="canonical" href="https://shasha1108.github.io/healing-visual-lab/">

<title>Healing Visual Lab · 视觉疗愈实验室</title>

<!-- JSON_LD_START -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "CollectionPage",
  "name": "Healing Visual Lab · 视觉疗愈实验室",
  "description": "24 standalone interactive H5 healing experiments using Three.js WebGL, GPU particles, GLSL shaders, fluid simulation & Web Audio synthesis",
  "url": "https://shasha1108.github.io/healing-visual-lab/",
  "creator": { "@type": "Person", "name": "shasha1108" },
  "keywords": "Three.js, WebGL, GLSL shader, p5.js, Canvas, creative coding, particle system, fluid simulation, Web Audio API, binaural beats, healing, interactive art, H5, digital therapeutic, single file",
  "dateModified": "2026-07-09",
  "hasPart": [
    {"@type": "CreativeWork", "name": "Unbound Mind · 释·茧", "description": "这团乱麻，是你此刻的思绪吗？试着长按屏幕，慢慢抚平它们...", "url": "https://shasha1108.github.io/healing-visual-lab/unbound-mind/unbound-mind.html", "keywords": "Three.js WebGL, Custom GLSL Shaders, 150K particle system, Web Audio API, spring-damper physics"},    {"@type": "CreativeWork", "name": "Grand Jiangshan · 万里江山图 - 宏大视界", "description": "我见青山多妩媚，料青山见我应如是", "url": "https://shasha1108.github.io/healing-visual-lab/grand-jiangshan/grand-jiangshan.html", "keywords": "Three.js WebGL, custom GLSL shader, 4D Simplex noise terrain, 470K particle system, OrbitControls"},    {"@type": "CreativeWork", "name": "Time Particle Clock · 时间流转 - 粒子时钟", "description": "时间是流动的粒子——拖拽加速，松开即止，每一秒都有声音", "url": "https://shasha1108.github.io/healing-visual-lab/time-particle-clock/time-particle-clock.html", "keywords": "Three.js WebGL, custom ShaderMaterial, 200K particle system, analog clock algorithm, Web Audio tick synthesis"},    {"@type": "CreativeWork", "name": "Breath Mirror · 息流 · 幻镜", "description": "这里没有深渊，也没有波澜", "url": "https://shasha1108.github.io/healing-visual-lab/breath-mirror/breath-mirror.html", "keywords": "Three.js WebGL, GLSL fragment shader, GPU fluid simulation, Web Audio API, Brown noise engine"},    {"@type": "CreativeWork", "name": "Inkmeditation · 墨池心境", "description": "算法物理学 × 视觉设计 × 心理疗愈", "url": "https://shasha1108.github.io/healing-visual-lab/inkmeditation/inkmeditation.html", "keywords": "Three.js WebGL, 100K+ particles, real-time fluid dynamics, breath-cycle sync"},    {"@type": "CreativeWork", "name": "Cosmic Recollection · 宇宙回响 V78", "description": "万物皆有裂痕——那是光照进来的地方", "url": "https://shasha1108.github.io/healing-visual-lab/cosmic-recollection/cosmic-recollection.html", "keywords": "Three.js WebGL, Canvas 2D texture generation, CSS 3D transforms, GSAP animation, 60K particle system"}
  ]
}
</script>
<!-- JSON_LD_END -->
<style>
  :root { --bg: #0d1117; --card: #161b22; --text: #c9d1d9; --muted: #8b949e; --accent: #e8a850; --border: #30363d; }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { background:var(--bg); color:var(--text); font-family: "Noto Serif SC", "STSong", Georgia, serif; min-height:100dvh; padding: clamp(24px,5vw,60px) clamp(16px,4vw,40px); }
  header { text-align:center; margin-bottom:clamp(40px,8vh,80px); }
  h1 { font-size:clamp(22px,4vw,32px); font-weight:400; letter-spacing:6px; color:#fff; margin-bottom:8px; }
  header p { font-size:13px; color:var(--muted); letter-spacing:2px; max-width:520px; margin:0 auto; line-height:1.7; }
  header .tags { margin-top:16px; display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
  header .tags span { font-size:10px; letter-spacing:1px; color:var(--muted); padding:3px 10px; border:0.5px solid var(--border); border-radius:12px; }
  .grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,280px),1fr)); gap:16px; max-width:960px; margin:0 auto; }
  .card { background:var(--card); border:0.5px solid var(--border); border-radius:10px; padding:clamp(18px,3vw,24px); transition:border-color 0.2s; display:flex; flex-direction:column; gap:8px; }
  .card:hover { border-color:var(--accent); }
  .card .num { font-size:11px; color:var(--muted); letter-spacing:2px; }
  .card h2 { font-size:16px; font-weight:400; color:#fff; letter-spacing:2px; }
  .card .tagline { font-size:12px; color:var(--muted); line-height:1.6; flex:1; }
  .card .tech { font-size:10px; color:var(--accent); letter-spacing:1px; opacity:0.7; }
  .card a { color:inherit; text-decoration:none; display:contents; }
  footer { text-align:center; margin-top:clamp(40px,8vh,80px); padding-top:24px; border-top:0.5px solid var(--border); }
  footer p { font-size:11px; color:var(--muted); letter-spacing:2px; }
  footer a { color:var(--accent); text-decoration:none; }
</style>
</head>

<body>

<header>
  <h1>Healing Visual Lab</h1>
  <p>Interactive healing H5 experiments — particle systems, fluid simulation, Web Audio synthesis, and custom GLSL shaders for emotional design. Zero frameworks, zero dependencies. Open a page, touch, breathe.</p>
  <div class="tags">
    <span>Three.js</span><span>WebGL</span><span>Canvas 2D</span><span>GLSL</span><span>Web Audio</span><span>Creative Coding</span><span>Digital Healing</span>
  </div>
</header>

<div class="grid">

  <!-- WORKS_START -->
  <div class="card">
    <a href="tidal-moon-moss/tidal-moon-moss.html">
      <div class="num">01</div>
      <h2>Tidal Moon Moss · 玻璃钟罩里的潮汐月苔</h2>
      <div class="tagline">你碰了一下玻璃，罩里的月苔轻轻醒来，像一小片夜晚被照料。</div>
      <div class="tech">p5.js 1.9.0 Canvas 2D noSmooth pixel rendering · Canvas bezierCurveTo clip glass pipeline · Web Audio OscillatorNode pentatonic synthesis (432Hz root) · BiquadFilterNode lowpass drone with LFO modulation</div>
    </a>
  </div>

  <div class="card">
    <a href="pocket-forest-radio/pocket-forest-radio.html">
      <div class="num">02</div>
      <h2>Pocket Forest Radio · 露光口袋森林电台</h2>
      <div class="tagline">轻拨调谐环，把一片像素森林调到你的频率上。</div>
      <div class="tech">p5.js 1.9.0 Canvas 2D dual-canvas (180×126 pixel sub-canvas + smooth main canvas) · Web Audio oscillator synthesis (86Hz sine drone + noise buffer + triangle-wave glass ping) · AnalyserNode FFT 256-bin audio reactive (bass/mid/high band splitting, beat detection) · Bayer 4x4 ordered dithering on sky gradient</div>
    </a>
  </div>

  <div class="card">
    <a href="oxygen-chamber/oxygen-chamber.html">
      <div class="num">03</div>
      <h2>Inner Weather Diary · 60s Oxygen Chamber · 内心气象日记 · 60s 氧气舱</h2>
      <div class="tagline">60秒情绪氧气舱——选一种天气，让内心在玻璃小屋里安静呼吸</div>
      <div class="tech">p5.js Canvas 2D · Web Audio API OscillatorNode · BiquadFilterNode ambient synthesis · Bayer ordered dithering</div>
    </a>
  </div>

  <div class="card">
    <a href="luminous-sea-bottle/luminous-sea-bottle.html">
      <div class="num">04</div>
      <h2>Luminous Sea Bottle · 玻璃瓶里的夜光海</h2>
      <div class="tagline">一个封存在像素玻璃瓶里的发光海洋——触碰唤醒生物荧光，然后慢慢暗回宁静</div>
      <div class="tech">p5.js Canvas 2D · Bayer ordered dithering · canvas glass container pipeline · touch-to-glow bioluminescence</div>
    </a>
  </div>

  <div class="card">
    <a href="crystal-turntable/crystal-turntable.html">
      <div class="num">05</div>
      <h2>Crystal Turntable · 雪夜晶莹唱片机</h2>
      <div class="tagline">屋外雪花纷飞，这里的旋律永远为你温暖。</div>
      <div class="tech">p5.js · Canvas 2D · Web Audio API · Lo-fi Processing (LPF + Tape Wow + Reverb)</div>
    </a>
  </div>

  <div class="card">
    <a href="sunken-treasure/sunken-treasure.html">
      <div class="num">06</div>
      <h2>Sunken Treasure · Sunken Treasure</h2>
      <div class="tagline">像素鱼游进掌机传送门，逃逸到 3D 水晶水体中，蜕变为优雅的矢量鱼</div>
      <div class="tech">p5.js · Canvas 2D · Frutiger Aero · Procedural Ecosystem</div>
    </a>
  </div>

  <div class="card">
    <a href="drift-bottle/drift-bottle.html">
      <div class="num">07</div>
      <h2>Drift Bottle · 平行世界 · 漂流瓶生态系统</h2>
      <div class="tagline">轻触漂流瓶，唤醒瓶中平行世界</div>
      <div class="tech">p5.js · Canvas 2D Wave Physics · Clip Pipeline · BlendMode Screen</div>
    </a>
  </div>

  <div class="card">
    <a href="sunken-ipod/sunken-ipod.html">
      <div class="num">08</div>
      <h2>Sunken iPod · 沉水 MP3</h2>
      <div class="tagline">深海之底，一首七里香。触碰水面，音符如气泡升起。</div>
      <div class="tech">p5.js · Canvas 2D · Frutiger Aero Glassmorphism · BlendMode Screen/Overlay</div>
    </a>
  </div>

  <div class="card">
    <a href="dreamcore-summer-rain/dreamcore-summer-rain.html">
      <div class="num">09</div>
      <h2>Dreamcore Summer Night · 七里香</h2>
      <div class="tagline">极致冷暖光碰撞 — 深黑蓝天 vs 售货机刺眼白光 vs 铁路脉冲红灯</div>
      <div class="tech">p5.js · Canvas2D · Web Audio API</div>
    </a>
  </div>

  <div class="card">
    <a href="windmill-valley/windmill-valley.html">
      <div class="num">10</div>
      <h2>Windmill Valley · 山谷里的风</h2>
      <div class="tagline">风车在听，风铃在回答。一个你可以走进去的Frutiger Aero山谷</div>
      <div class="tech">p5.js · Canvas2D · CSS Glassmorphism · Web Audio API</div>
    </a>
  </div>

  <div class="card">
    <a href="rice-fragrance/rice-fragrance.html">
      <div class="num">11</div>
      <h2>Rice Fragrance · 稻香</h2>
      <div class="tagline">稻香里的童年记忆</div>
      <div class="tech">p5.js · Canvas 2D · Web Audio API</div>
    </a>
  </div>

  <div class="card">
    <a href="aero-slime/aero-slime.html">
      <div class="num">12</div>
      <h2>Aero Slime · 电子情绪宠物</h2>
      <div class="tagline">点击色块投喂情绪，双击玻璃释放惊吓——一只住在亚克力盒子里的电子史莱姆，用颜文字回应你的每一种心情</div>
      <div class="tech">p5.js · Web Audio API · FSM Center-of-Mass Pathfinding · Line-Art Expressions</div>
    </a>
  </div>

  <div class="card">
    <a href="falling-verse/falling-verse.html">
      <div class="num">13</div>
      <h2>Falling Verse · 宇宙时钟</h2>
      <div class="tagline">时间的字符拓扑。数字从行星环上剥落，金→珊瑚粉→星空蓝，沉入幽蓝水面。</div>
      <div class="tech">Three.js WebGL · Web Audio API · Planetary Orbital Mechanics · Particle Typography</div>
    </a>
  </div>

  <div class="card">
    <a href="pixel-aquarium/pixel-aquarium.html">
      <div class="num">14</div>
      <h2>Pixel Aquarium · 像素水族箱</h2>
      <div class="tagline">晶莹剔透的 Frutiger Aero 水族箱，像素小鱼在毛玻璃内游动。单击投食，双击敲玻璃。</div>
      <div class="tech">p5.js · CSS Glassmorphism · Procedural Pixel Flora · AI FSM</div>
    </a>
  </div>

  <div class="card">
    <a href="unbound-mind/unbound-mind.html">
      <div class="num">15</div>
      <h2>Unbound Mind · 释·茧</h2>
      <div class="tagline">这团乱麻，是你此刻的思绪吗？试着长按屏幕，慢慢抚平它们...</div>
      <div class="tech">Three.js WebGL · Custom GLSL Shaders · 150K particle system · Web Audio API</div>
    </a>
  </div>

  <div class="card">
    <a href="grand-jiangshan/grand-jiangshan.html">
      <div class="num">16</div>
      <h2>Grand Jiangshan · 万里江山图 - 宏大视界</h2>
      <div class="tagline">我见青山多妩媚，料青山见我应如是</div>
      <div class="tech">Three.js WebGL · custom GLSL shader · 4D Simplex noise terrain · 470K particle system</div>
    </a>
  </div>

  <div class="card">
    <a href="time-particle-clock/time-particle-clock.html">
      <div class="num">17</div>
      <h2>Time Particle Clock · 时间流转 - 粒子时钟</h2>
      <div class="tagline">时间是流动的粒子——拖拽加速，松开即止，每一秒都有声音</div>
      <div class="tech">Three.js WebGL · custom ShaderMaterial · 200K particle system · analog clock algorithm</div>
    </a>
  </div>

  <div class="card">
    <a href="breathing-boundary/breathing-boundary.html">
      <div class="num">18</div>
      <h2>Breathing Boundary · 呼吸边界</h2>
      <div class="tagline">看似隔绝，实则翻译——这是一层活着的、会呼吸的边界</div>
      <div class="tech">Three.js WebGL · Custom GLSL Shader (Simplex Noise/FBM) · Web Audio API · Canvas 2D</div>
    </a>
  </div>

  <div class="card">
    <a href="silent-translator/silent-translator.html">
      <div class="num">19</div>
      <h2>Silent Translator · 无声的翻译官</h2>
      <div class="tagline">身体替你说了说不出的话</div>
      <div class="tech">Canvas 2D · frame-by-frame sketch animation · Web Audio healing engine · CSS 3D transforms</div>
    </a>
  </div>

  <div class="card">
    <a href="breath-mirror/breath-mirror.html">
      <div class="num">20</div>
      <h2>Breath Mirror · 息流 · 幻镜</h2>
      <div class="tagline">这里没有深渊，也没有波澜</div>
      <div class="tech">Three.js WebGL · GLSL fragment shader · GPU fluid simulation · Web Audio API</div>
    </a>
  </div>

  <div class="card">
    <a href="sumi-e-taichi/sumi-e-taichi.html">
      <div class="num">21</div>
      <h2>Sumi-e Taichi · 水墨太极</h2>
      <div class="tagline">一滴墨落入宣纸——既是破坏，也是开始</div>
      <div class="tech">Three.js WebGL · particle physics · taichi gravity field · ink ripple simulation</div>
    </a>
  </div>

  <div class="card">
    <a href="inkmeditation/inkmeditation.html">
      <div class="num">22</div>
      <h2>Inkmeditation · 墨池心境</h2>
      <div class="tagline">算法物理学 × 视觉设计 × 心理疗愈</div>
      <div class="tech">Three.js WebGL · 100K+ particles · real-time fluid dynamics · breath-cycle sync</div>
    </a>
  </div>

  <div class="card">
    <a href="cosmic-recollection/cosmic-recollection.html">
      <div class="num">23</div>
      <h2>Cosmic Recollection · 宇宙回响 V78</h2>
      <div class="tagline">万物皆有裂痕——那是光照进来的地方</div>
      <div class="tech">Three.js WebGL · Canvas 2D texture generation · CSS 3D transforms · GSAP animation</div>
    </a>
  </div>

  <div class="card">
    <a href="layered-mountains/layered-mountains.html">
      <div class="num">24</div>
      <h2>Layered Mountains · 青绿·层峦</h2>
      <div class="tagline">触之即散，聚散随缘</div>
      <div class="tech">Three.js WebGL · 250K particles · layered landscape rendering · raycaster interaction</div>
    </a>
  </div>

  <!-- WORKS_END -->
</div>

<footer>
  <p><a href="https://github.com/shasha1108/healing-visual-lab">GitHub</a> · 24 works · Updated 2026-07-09 · Zero-dependency interactive healing art</p>
</footer>

</body>
</html>