# 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.

Object · With a Pass · https://tactileui.dev/objects/membrane

> The code and styling for this object come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Use it

With a Pass, install it with npx shadcn add @tactile/membrane (https://tactileui.dev/docs/registry-and-mcp). It lands in tactile/membrane/.

Load the stylesheet as well as the module, or it renders unstyled: tactile/membrane/membrane.css. In a bundler such as Vite, import each CSS file next to the module import; in plain HTML, link it.

Then new Membrane(element, options) from tactile/membrane/membrane.mjs. Every option has a default; tactile/membrane-example.html shows it running. The sample copy (headings, labels, figures) is placeholder: replace it with the page's own.

## 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

## States

1. **At rest**: The foam stands under the lamp, every dome casting its shadow; the letters are dark in their cuts. The loop is asleep and costs nothing.
2. **Pressed**: A 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.
3. **Several fingers**: Every pointer dents it at once, and two presses side by side add up softly, as foam between two fingers is pulled down by both.
4. **Letters glowing**: Each 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.
5. **Let go**: Then the loop sleeps.
6. **Keyboard**: The 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.
7. **Off screen or hidden**: The loop pauses; a returning tab cannot launch the spring with a long frame.
8. **Phone**: Press and hold with a finger, or with two; a vertical swipe still scrolls the page. A long press opens no menu and selects nothing.
9. **Reduced motion**: Nothing 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.
10. **Without WebGL**: The foam is a flat panel of its own colour; the frame, the letters and their glow still answer every press.

## 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.