deity6 / softlab

# SOFT LAB
**An index of digital matter**
**English** · 简体中文
*New things get collected the moment they turn up: ones that flow, ones that
tear, ones that spring back, ones that come apart and get put back together.
Each one is taken apart until we can see how it actually works, then rebuilt as
a page you can play with.*
**Live site →**
---
## What this is
SOFT LAB is a personal collection of front-end visual interaction work. Its
purpose is to study visual effects and to share them — something to look at,
something to play with, and code that can be read. It is not a product, and
nothing here is intended to be released as one.
Three rules define it:
- **No images, and no AI-generated content, standing in for the motion.**
 Every effect on the page — the hero field, the jelly, the cloud sea, the
 sixteen button states — is rendered live in WebGL, canvas or CSS. Nothing is
 a pre-rendered still or a generated video pretending to be an effect.
- **Collected slowly, shown gradually.** Each experiment carries a
 `live` / `wip` status. Version 04 is marked `wip` in the source and displayed
 as such on the site, rather than quietly hidden.
- **These rules will keep evolving.**
The site is currently fully static. There is no plan and no content that would
call for a backend, a database, an external API or analytics.
## What's on the site
| # | Section | What it is |
|---|---|---|
| 01 | **Experiments** | A few hands-on pieces: a draggable soft-body lab, a typographic effect lab, the cloud-sea train — more being added |
| 02 | **Buttons** | Button micro-interactions in four groups (paint / motion / click / state) |
| 03 | **Destroy** | An entry point to an external game: it turns any URL into a destructible map |
| — | **Growth** | Collect → take apart → rebuild |
| — | **Dev log** | The full version history, newest first |
> Three projects so far; the last two carry no catalogue number. `growth` and
> `log` are columns about the site itself, not works in it, so they take no
> number. That rule lives in `src/lib/sections.ts`.
## The experiments
### 01 · Soft Matter — `live`
A jelly you can grab, stretch and let go of. Press the surface and it dents;
take hold of an edge and the whole thing lifts. Six shapes, a draggable colour
wheel, real HDRI refraction.
### 02 · Canvas Lab — `live`
Four effects applied to real, selectable HTML rather than to a picture of it:
the text is rasterised into a luminance grid and redrawn as ASCII, as a
decryption scramble, as a ripple, or as torn frames. The paragraph underneath
stays clickable the whole time.
### 03 · Cloud Train — `live`
Fourteen layers of cloud drifting past at their own parallax speeds while a
train crosses a suspension bridge. Speed, framing, swell and noise are all
adjustable, and there are twenty-three graded palettes — switching one is like
watching the same day happen at a different hour.
The newest palette family is *sea*: three sets that circle **one hue** and
separate the layers by brightness alone