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

Leaf Corner Summer · 掀开落叶的一角

叶子掀开一角，夏天还留在下面。
Canvas 2D · Web Audio API
02

Yarn Knot Tonight · 你今天是哪种结 · 线团团

一天下来，它把自己缠成了这样。
Canvas 2D · Web Audio API · localStorage
03

Butterflies Back To Wind · 回到风里

Pull the cork free, and let what was held return to the wind.
p5.js · Canvas 2D · Web Audio API · localStorage
04

Parting The Rain · 把雨拉开一道缝

雨是一道幕。捏住它的边往左拉，缝后面是晚霞、电车和十只麻雀。
Canvas 2D · Web Audio API
05

Dusk Projector · 把黄昏倒回去

手摇的放映机对准地平线，顺时针转动摇柄，那一小片天空就一格一格退回黄昏；松开手，它会自己慢慢走回夜里。
Canvas 2D · Web Audio API
06

Weather On The Line · 天气晾在房间里

把天气一件件晾上去，再一件件摘下来。
p5.js · WebGL · Canvas 2D · Web Audio API
07

Egret Sunrise · 今天，由你升起

拖一条晨光鱼喂给白鹭，它咬住滑轮上的绳，把太阳从海里一寸寸吊起来。
p5.js · Canvas 2D · Web Audio API
08

Duskfirefly Bottle · 把未熄的交给夜

海退回时，把一只漂流瓶留在湿沙上——瓶里还有没熄的萤火，交给夜来认领。
p5.js · Canvas 2D · Web Audio API
09

Streetlamp Slow Rain · 路灯周围，雨会慢一点

末班车走远后，最后一盏旧路灯还亮着。按住光，让灯下的雨慢一点。
p5.js · Canvas 2D · Web Audio API
10

Hammer Off · 今天先砸到这儿

在一条虚构的下班城市街道上游走，把还没放下的噪声交给一把会回应的锤子。
Three.js · WebGL · Web Audio API · CSS
11

Tang Sancai Fire · 三彩釉火 · 洛阳窑记

从白胎到窑火：在一匹唐三彩马身上，留下你的釉色与一则窑记。
Three.js · Canvas 2D · WebGL · Web Audio API
12

Cloud Laundry Pool · 晾云池

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

Ink In Forms · 墨中有相

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

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

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

Glow Boat Bottle · 夜航瓶

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

Magpie Bridge Heist · 鹊桥搞事现场

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

Paper Boat Release · 纸船放行

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

Eternal Bloom · 永生花工坊

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

BOTTLED COSMOS · 瓶装宇宙

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

Sealed Summer Jar · 封存的四点钟

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

Waiting for the Moon · 等月亮

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

The Old Signal · 旧信号

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

Tide Keeping Station · 潮汐保管处

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

Aquarium 2003 · 2003 水族馆

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

First Light · 第一束光

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

The Tree That Remembers Wind · 记得风的树

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

Migratory Bird Lighthouse · 雾中候鸟灯塔

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

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

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

Transparent Dream Stratigraph · 透明梦境地层仪

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

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

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

Clockwork Tidal Gauge · 发条潮汐仪

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

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

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

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

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

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

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

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

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

Crystal Turntable · 雪夜晶莹唱片机

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

Sunken Treasure · Sunken Treasure

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

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

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

Sunken iPod · 沉水 MP3

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

Dreamcore Summer Night · 七里香

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

Windmill Valley · 山谷里的风

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

Rice Fragrance · 稻香

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

Aero Slime · 电子情绪宠物

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

Falling Verse · 宇宙时钟

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

Pixel Aquarium · 像素水族箱

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

Unbound Mind · 释·茧

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

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

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

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

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

Breathing Boundary · 呼吸边界

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

Silent Translator · 无声的翻译官

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

Breath Mirror · 息流 · 幻镜

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

Sumi-e Taichi · 水墨太极

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

Inkmeditation · 墨池心境

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

Cosmic Recollection · 宇宙回响 V78

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

Layered Mountains · 青绿·层峦

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