Search for a command to run...
The persistent identity stack — a squircle avatar above a morphing glass pill. The avatar is the user's face, the pill names them and surfaces score events, greetings, and incoming knocks.
The island is the cohesive identity surface in every product header. The
avatar carries the elevated glass-rim treatment; the pill sits flush beneath
it with a 2px overlap and a z-index swap so the avatar's bottom edge
slightly clips the pill. The pill morphs (via DynamicIslandContent) from a
narrow capsule into a wider rounded rectangle when it needs to surface a
greeting or notification — the avatar above stays put.
| Piece | Source | Role |
|---|---|---|
MyMind.Image | @delphi/features/my-mind | Squircle avatar, size-12 rounded-2xl shadow. |
MyMind.Pill | @delphi/features/my-mind | Morphing glass capsule. Reads state from context. |
MyMind.Name | @delphi/features/my-mind | Profile-name span — text-sm font-medium text-fg-high. |
DynamicIslandContent | @delphi/ui/components/dynamic-island | The morph primitive under the pill. |
glass.overlay | @delphi/ui/tokens | Translucent surface treatment. See Glass. |
Wrap the stack in a MyMind.Root provider to supply profileName,
profileImageUrl, and the current statusEvent. Each child reads from
context — no prop drilling.
The -mt-[2px] overlap is the load-bearing detail — without it the two
pieces read as separate elements. The z-10/z-0 swap makes the avatar
visually clip the pill's top edge so they feel like one object.
| State | Shape | Content |
|---|---|---|
idle | rounded-full | Profile name only. |
greeting | rounded-full | "Hi, {name}" intro. |
mindscore-increase | rounded-xl | Score + delta. |
knock-notification | rounded-xl | Actor avatar + title + status label. |
idle and greeting keep the capsule pill shape; the expanded states
(mindscore-increase, knock-notification) morph the envelope to
rounded-xl so the wider content has room to breathe.
Mount one island per surface, inside MyMind.Root. It owns the identity slot — there's never
more than one on screen.
Drive the pill through statusEvent on MyMind.Root. The pill picks up its view from context;
don't pass status as a prop.
Keep the -mt-[2px] overlap and the z-10/z-0 layering — it's what makes the avatar and pill
read as one cohesive object.
Reach for DynamicIslandContent directly when you want a generic morphing pill. It's the
primitive behind the island and isn't the surface to build new floating UI on.
Stack other glass surfaces on top of the island. The pill already uses glass.overlay; layering
glass on glass turns to mud (see Glass).