Healing Visual Lab

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.

Three.jsWebGLCanvas 2DGLSLWeb AudioCreative CodingDigital Healing
01

Cloud Laundry Pool · 晾云池

把潮湿和心事挂起来，让它们慢慢落成一池雨。
p5.js · Canvas 2D
02

Ink In Forms · 墨中有相

长按，把浮水中的彩墨交给一枚心印——太极、鹤影、山水、牡丹，成形后仍会呼吸，也仍会被指尖拨散。
Three.js · Canvas 2D · WebGL
03

Golden Ripples · 潮汐拾光 · 梯级金浪

浮光跃金，潮落潮生——梯级金浪与行人剪影，一场慢节奏的海滩冥想
Three.js · Canvas 2D · WebGL
04

Glow Boat Bottle · 夜航瓶

玻璃瓶封着一小片夜海，发光的小船载着少年——拧开瓶塞，让它漂向真正的海。
p5.js · Canvas 2D · Web Audio API
05

Magpie Bridge Heist · 鹊桥搞事现场

七夕夜路过鹊桥，撞上牛郎织女约会——其实，我当时有三个选择。
Three.js · Canvas 2D · WebGL · Web Audio API
06

Paper Boat Release · 纸船放行

点开瓶塞，让一只纸船替你把难以言说的心事带向海面。
p5.js · Canvas 2D · Web Audio API
07

Eternal Bloom · 永生花工坊

调好一朵花的每个参数，封进玻璃钟罩，它就替你一直开着。
p5.js · Canvas 2D · Web Audio API
08

BOTTLED COSMOS · 瓶装宇宙

把整个宇宙装进一只玻璃瓶——每颗恒星的一生，只有三十秒。
p5.js · Three.js · Canvas 2D
09

Sealed Summer Jar · 封存的四点钟

一只玻璃罐，把一个不会结束的夏日下午四点钟封存了起来。
p5.js · Canvas 2D · Web Audio API
10

Waiting for the Moon · 等月亮

A quiet moonlit window where a cat slowly falls asleep.
p5.js · Canvas 2D · Web Audio API · localStorage
11

The Old Signal · 旧信号

一台信号不好的旧电视，红青两个色版错开着呼吸；你每碰它一次，它就调准一点——直到屏幕里那个旧日的自己，回头看你一眼。
p5.js · Canvas 2D · Web Audio API · localStorage
12

Tide Keeping Station · 潮汐保管处

把缠成一团的事交给潮汐，它会替你拆开、带走，并留下回应。
Three.js · Canvas 2D · WebGL · Web Audio API
13

Aquarium 2003 · 2003 水族馆

你小时候盯过的那个屏保活了——缸里的鱼记得你
p5.js · Canvas 2D · Web Audio API · localStorage
14

First Light · 第一束光

一颗黑色像素种子，在你的温度里长出第一束光。
p5.js · Canvas 2D · Web Audio API · localStorage
15

The Tree That Remembers Wind · 记得风的树

释放与辽阔 —— 一座悬浮小岛上，像素树把每一次拂过树冠的手势变成一阵沿枝传播的风。
p5.js · Canvas 2D · Web Audio API · Pointer Events
16

Migratory Bird Lighthouse · 雾中候鸟灯塔

光落处，漂泊暂歇
Canvas 2D · Web Audio API · Pointer Events
17

Overwork · 下班回家了，脑子却还在加班

把下班后仍在脑内重播的短语交出去，让语言松解成微光并自然沉底。
p5.js · Canvas 2D · Canvas Glass Pipeline · Bezier Collision Detection
18

Transparent Dream Stratigraph · 透明梦境地层仪

转动冠轮，地层仪将未说出口的梦压入一层发光的地质年轮。
p5.js · Canvas 2D · Canvas Glass Pipeline · Web Audio API
19

Firefly Seed Jar · 密封瓶里的萤火种子

你碰到哪颗琥珀晶种，它就短暂相信春天来了，探出一根被拴住的萤光触角。
p5.js · Canvas 2D · Canvas Glass Pipeline · Web Audio API
20

Clockwork Tidal Gauge · 发条潮汐仪

触碰玻璃舱体，月相齿轮转动一格，潮汐随之涨落——一台封存在像素胶囊里的发条潮汐仪。
p5.js · Canvas 2D · Canvas Glass Pipeline · Web Audio API
21

Tidal Moon Moss · 玻璃钟罩里的潮汐月苔

你碰了一下玻璃，罩里的月苔轻轻醒来，像一小片夜晚被照料。
p5.js · Canvas 2D · Canvas Glass Pipeline · Web Audio API
22

Pocket Forest Radio · 露光口袋森林电台

轻拨调谐环，把一片像素森林调到你的频率上。
p5.js · Canvas 2D · Web Audio API · FFT Audio Reactive
23

Inner Weather Diary · 60s Oxygen Chamber · 内心气象日记 · 60s 氧气舱

60秒情绪氧气舱——选一种天气，让内心在玻璃小屋里安静呼吸
p5.js Canvas 2D · Web Audio API OscillatorNode · BiquadFilterNode ambient synthesis · Bayer ordered dithering
24

Luminous Sea Bottle · 玻璃瓶里的夜光海

一个封存在像素玻璃瓶里的发光海洋——触碰唤醒生物荧光，然后慢慢暗回宁静
p5.js Canvas 2D · Bayer ordered dithering · canvas glass container pipeline · touch-to-glow bioluminescence
25

Crystal Turntable · 雪夜晶莹唱片机

屋外雪花纷飞，这里的旋律永远为你温暖。
p5.js · Canvas 2D · Web Audio API · Lo-fi Processing (LPF + Tape Wow + Reverb)
26

Sunken Treasure · Sunken Treasure

像素鱼游进掌机传送门，逃逸到 3D 水晶水体中，蜕变为优雅的矢量鱼
p5.js · Canvas 2D · Frutiger Aero · Procedural Ecosystem
27

Drift Bottle · 平行世界 · 漂流瓶生态系统

轻触漂流瓶，唤醒瓶中平行世界
p5.js · Canvas 2D Wave Physics · Clip Pipeline · BlendMode Screen
28

Sunken iPod · 沉水 MP3

深海之底，一首七里香。触碰水面，音符如气泡升起。
p5.js · Canvas 2D · Frutiger Aero Glassmorphism · BlendMode Screen/Overlay
29

Dreamcore Summer Night · 七里香

极致冷暖光碰撞 — 深黑蓝天 vs 售货机刺眼白光 vs 铁路脉冲红灯
p5.js · Canvas2D · Web Audio API
30

Windmill Valley · 山谷里的风

风车在听，风铃在回答。一个你可以走进去的Frutiger Aero山谷
p5.js · Canvas2D · CSS Glassmorphism · Web Audio API
31

Rice Fragrance · 稻香

稻香里的童年记忆
p5.js · Canvas 2D · Web Audio API
32

Aero Slime · 电子情绪宠物

点击色块投喂情绪，双击玻璃释放惊吓——一只住在亚克力盒子里的电子史莱姆，用颜文字回应你的每一种心情
p5.js · Web Audio API · FSM Center-of-Mass Pathfinding · Line-Art Expressions
33

Falling Verse · 宇宙时钟

时间的字符拓扑。数字从行星环上剥落，金→珊瑚粉→星空蓝，沉入幽蓝水面。
Three.js WebGL · Web Audio API · Planetary Orbital Mechanics · Particle Typography
34

Pixel Aquarium · 像素水族箱

晶莹剔透的 Frutiger Aero 水族箱，像素小鱼在毛玻璃内游动。单击投食，双击敲玻璃。
p5.js · CSS Glassmorphism · Procedural Pixel Flora · AI FSM
35

Unbound Mind · 释·茧

这团乱麻，是你此刻的思绪吗？试着长按屏幕，慢慢抚平它们...
Three.js WebGL · Custom GLSL Shaders · 150K particle system · Web Audio API
36

Grand Jiangshan · 万里江山图 - 宏大视界

我见青山多妩媚，料青山见我应如是
Three.js WebGL · custom GLSL shader · 4D Simplex noise terrain · 470K particle system
37

Time Particle Clock · 时间流转 - 粒子时钟

时间是流动的粒子——拖拽加速，松开即止，每一秒都有声音
Three.js WebGL · custom ShaderMaterial · 200K particle system · analog clock algorithm
38

Breathing Boundary · 呼吸边界

看似隔绝，实则翻译——这是一层活着的、会呼吸的边界
Three.js WebGL · Custom GLSL Shader (Simplex Noise/FBM) · Web Audio API · Canvas 2D
39

Silent Translator · 无声的翻译官

身体替你说了说不出的话
Canvas 2D · frame-by-frame sketch animation · Web Audio healing engine · CSS 3D transforms
40

Breath Mirror · 息流 · 幻镜

这里没有深渊，也没有波澜
Three.js WebGL · GLSL fragment shader · GPU fluid simulation · Web Audio API
41

Sumi-e Taichi · 水墨太极

一滴墨落入宣纸——既是破坏，也是开始
Three.js WebGL · particle physics · taichi gravity field · ink ripple simulation
42

Inkmeditation · 墨池心境

算法物理学 × 视觉设计 × 心理疗愈
Three.js WebGL · 100K+ particles · real-time fluid dynamics · breath-cycle sync
43

Cosmic Recollection · 宇宙回响 V78

万物皆有裂痕——那是光照进来的地方
Three.js WebGL · Canvas 2D texture generation · CSS 3D transforms · GSAP animation
44

Layered Mountains · 青绿·层峦

触之即散，聚散随缘
Three.js WebGL · 250K particles · layered landscape rendering · raycaster interaction