Back to The ~WellbeingIdentity Rendering Architecture

Chapter 7 of 11 · 2 min read

The Renderer as an Interaction Contract

Preview versus selection, deterministic annular targets, accessible controls, and bounded motion.

The ~WellbeingIdentity Rendering Architecture · v0.2 · edition history · Moses Sam Paul Johnraj

Quick Answer

Hover or keyboard focus previews a ring only in the portrait. Click, tap, Enter, or Space commits selection and updates the associated panel. Arrow keys move between rings. The renderer uses non-overlapping annular hit areas so every ring—including the innermost Given Identity ring—is deterministically selectable.

The interaction model is intentionally quiet. A reader can explore the scene without causing the information panel to churn. When they commit, the active ring’s colour coordinates the scene aura, body axis, and exactly one matching bulb. In reduced-motion mode the settled state is shown without travel.

01 · OrientQuiet eight rings

One selected ring is saturated; the rest remain structural traces.

02 · PreviewHover or focus

Portrait colour and caption change. The panel stays put.

03 · CommitTap, click, Enter, Space

Selection locks; the matching panel updates once.

Replay restoration. Timeline, scrubber, event list, swipe, and keyboard navigation restore purple Identity State focus.

Motion boundary. Ember appears only for a settled W arrival; Performance remains a separate copper outward route.

Figure 5. Interaction state model. Preview changes the portrait only; committed selection changes the consumer panel.

The innermost target defect

The Given Identity ring was briefly difficult to select. The cause was not a semantic ambiguity; it was geometry. A body illustration sitting above the hit area could intercept a pointer event. The patch made the body illustration and its decorative overlays non-interactive, preserving the eight non-overlapping annular targets beneath the interaction contract.

Accessibility is part of the contract

Selection is not hover-dependent. Touch commits directly. Keyboard users receive visible focus, Arrow-key movement, and Enter or Space selection. Focus is treated as a preview state so it offers the same orientation as hover without forcing a detail-panel change. The renderer also honours reduced-motion preference, avoiding a separate “accessible mode” that subtly changes the underlying state.

Evidence from the product surfaces

Illustrative Value Log interface capture showing a single active ring in the private portrait. — **Illustrative interface example.** Owner-authorised public changelog capture; it demonstrates interaction treatment, not a private record or representative outcome.

Illustrative Value Log interface capture showing a bounded replay reading and an outward route distinct from identity state. — **Illustrative interface example.** Owner-authorised public changelog capture; it demonstrates visual separation, not independent validation or an individual history.

References

The implementation is grounded in the published package releases @theinternetofvalue/wellbeing-identity-contracts@0.1.4 and @theinternetofvalue/wellbeing-identity-renderer@0.2.2, together with the Foundation public-profile boundary and the Value Log method documentation.