Giving every pixel on a web page mass.
When no-one looks at a web page. Is it still a page?
If you ever wanted pixels to have mass you may have come to the right place. If this is a place. I did a thing. For a friend. And then because how things are now and everything is so ephemeral I decided to kill the project and give it a tombstone. Hence this project. But then the other thing wanted to continue to live. At least for a while. So I just slapped it on my homepage at pekelman.com. Tokens were spent, carbon was emitted, and I probably won’t continue this much, so consider this to be a tombstone for a tombstone.
…or just stop moving for five seconds.
What it is
It renders the viewport to pixels in the browser, hands a million of them to a WebGL2 simulation, and gives the words to a rigid-body engine. Gravity can pull on dark pixels only, wind can blow away everything that is not text, letters can fall into a pile, and sand can pour over them for as long as you like.
It is meant to happen to an ordinary page: leave it idle and it comes apart; the first scroll or key press brings it back.
Use it
<script src="https://cdn.jsdelivr.net/npm/dereliction@0.5.0/dist/dereliction.bundle.min.js" defer
data-attach data-idle="8000" data-preset="Avalanche"></script>One file, one tag, no build step, no server. Or npm i dereliction and call Dereliction.attach({…}) yourself.
Tell it what should hold and what should go, in your own stylesheet:
.sticky { --physics: solid; } /* never moves; sand piles on it */
.card { --physics: rigid; } /* one body, falls as a block */
.block { --physics: frame; } /* falls as a box; words fall inside */
.fine { --physics: sand; } /* its text is loose grains */This italic line is marked sand. It will not survive the avalanche; it goes with the paper.
Presets
| words fall as rigid bodies while the paper pours over them as sand | |
| every glyph is its own body | |
| every line becomes a block and tumbles away in a light breeze | |
| an endless trickle of sand through a narrow spout, onto the text | |
| the paper is thrown up and pours down as sand onto text that holds | |
| the same, but the sand keeps coming back in across the top edge | |
| wind on everything that is not text; lightness becomes depth | |
| only the dark pixels get gravity; the light ones are viscous | |
| gravity on everything, drag by lightness | |
| a critically damped spring back to the page |