Membrane
A foam wall that dents where you press it and comes back slowly, like memory foam. Letters cut into the rim glow brighter the harder you push near them.
What it is for
Give a hero, a contact section, a launch or a quiet page something soft to press before anything is read: a panel of acoustic foam in a machined frame, lit by one raking lamp, that gives under a finger and holds the dent a moment after it lets go.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 3 days. Want one email that morning?
Datasheet
- Mechanism
- Pressure field, Memory foam recovery, Pressure or hold depth, Multi touch, Procedural foam relief, Open cell shading, Soft shadow march, Letter lamps, Token driven materials, Sleeping loop
- Stack
- Vanilla ES modules, CSS, WebGL, Canvas 2D
- Needs
- Nothing, no dependencies
- States
- 10 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- At restThe foam stands under the lamp, every dome casting its shadow; the letters are dark in their cuts. The loop is asleep and costs nothing.
- PressedA round bowl sinks under the finger and pulls the foam round it down a little; the cells in it squash and bunch in toward the finger, the ones just outside stand a touch taller, and the inner wall on the lamp side falls into shadow while the far wall catches the light. A tap makes a shallow dent; held, it goes deeper (63% of the way in 0.85 s), or as deep as the pen or screen says it is pressed.
- Several fingersEvery pointer dents it at once, and two presses side by side add up softly, as foam between two fingers is pulled down by both.
- Letters glowingEach letter glows as brightly as the deepest press near it, in proportion, nearer the rim counting more; the light spills onto the foam just above it. One lamp hue, never a second colour.
- Let goThe foam waits a moment, rises and settles without overshoot, about 90% back in the time Comes back in sets (1.6 s by default); the letters fade with it. Then the loop sleeps.
- KeyboardThe panel takes focus. The arrow keys move a ring that shows where the press will land (Shift for bigger steps); hold Space or Enter to press there, longer for deeper, and let go to release. Esc lets go too.
- Off screen or hiddenThe loop pauses; a returning tab cannot launch the spring with a long frame.
- PhonePress and hold with a finger, or with two; a vertical swipe still scrolls the page. A long press opens no menu and selects nothing.
- Reduced motionNothing animates: a press is drawn at its depth at once, the letters light at once, and the foam is back the moment it is let go.
- Without WebGLThe foam is a flat panel of its own colour; the frame, the letters and their glow still answer every press.
Notes
A word is cut through the rim below it with a lamp behind every letter, so the name lights up where and as hard as the visitor presses.
Original. Built on the Pin Screen's engine: the falloff, the material tokens, the colour probe and the machined frame are copied from originals/components/pin-screen (a piece ships as one flat folder, so it cannot import another's), the rest is the foam's own. WebGL 1 for the foam, Canvas 2D for the frame and the letters; no image or font ships.
Anatomy
Pressure field, Memory foam recovery, Pressure or hold depth, Multi touch, Procedural foam relief, Open cell shading, Soft shadow march, Letter lamps, Token driven materials, Sleeping loop
Usage notes
Give a hero, a contact section, a launch or a quiet page something soft to press before anything is read: a panel of acoustic foam in a machined frame, lit by one raking lamp, that gives under a finger and holds the dent a moment after it lets go. A word is cut through the rim below it with a lamp behind every letter, so the name lights up where and as hard as the visitor presses.
Options
| Option | Type | Description |
|---|---|---|
| text | text | Cut through the rim below the foam, each with a lamp behind it. Empty leaves the rim plain. |
| relief | enum | Egg crate (rounded domes in offset rows) or acoustic pyramids. |
| finish | enum | Auto follows the page: pale grey foam in an aluminium frame on a light finish, charcoal foam in graphite on a dark one. |
| lamp | enum | One hue, and only as light: a warm filament, a cold white, amber or green. |
| radius | number | The radius of the bowl a press makes. Small panels use less. |
| depth | number | The deepest a press goes, held long or pressed hard. |
| recovery | number | About how long a dent takes to come back once it is let go. Memory foam is slow. |
| light | number | 0 is from above, clockwise. |
Methods
- update
- pressAt
- depthAt
- state
- stats
- destroy
How it works
Original. Built on the Pin Screen's engine: the falloff, the material tokens, the colour probe and the machined frame are copied from originals/components/pin-screen (a piece ships as one flat folder, so it cannot import another's), the rest is the foam's own. WebGL 1 for the foam, Canvas 2D for the frame and the letters; no image or font ships.