Morph Surface

pointer · keyboard · touch

A contextual create menu that changes geometry with state.

Livelight
Behavior

A create menu that morphs its geometry between a compact pill and an expanded grid of actions. The header stays shared across states so the surface reads as one control changing shape, not two unrelated panels swapping.

Interaction

Pointer click toggles the menu. Keyboard focus + Enter/Space matches. Touch uses the same hit target; close via the X without collapsing the whole layout unexpectedly.

Controls

Toggle expand/collapse on the surface. Individual action tiles log a selection when pressed. No external knobs — state is the affordance.

Motion & sound

Spring layout animation; prefers-reduced-motion falls back to a simplified expand. No sound cues.

Learnings

Geometry change reads clearer when the header stays as a shared layout id and the grid only appears after expansion.

Source

Reuse `MorphSurface` from `@dammydev/lab`. CSS Modules keep shadows and radii local to the specimen. The export is currently prop-less — expand/collapse and the six actions are internal.