← all recipes

"Presence Field" — show collaborators as live influence, not static avatars. It has a charge layer (attract/repel charged matter), a propagate layer (travelling waves through the medium), a fieldflow layer (solar prominences, aurora, plasma streams, guided matter), a memory layer (a decaying trail / hysteresis), and a link layer (ropes / cloth between neighbours). Matter follows the field geometry because of fieldflow, not the field-owning force itself. The active render stack is field-lines, links, heatmap, particles.

Each focused collaborator is a charge emitting signal; propagate carries it, fieldflow draws presence toward shared objects, and recent edits cool into memory. Electric pushes, magnetic bends, fieldflow carries.

Runtime tokens

charge propagate fieldflow memory link

Concepts

presence

Metrics

presence recency signal attention presence, signal are host-supplied lanes — drive them with data-field-<metric> (or a domain model); without that, their --field-* stays inert.

Diagnostics

topology causality heatmap

Render

field-lines · links · heatmap · particles

Reduced motion

a collaborator rail with recent-edit marks and static presence badges

Without motion

each collaborator is a labelled badge with a recency timestamp and the object they are near

<field-root></field-root>
  <div data-body="charge" data-strength="0.9" data-range="360" data-spin="1" data-feedback></div>
  <div data-body="propagate" data-strength="0.6" data-range="320"></div>
  <div data-body="fieldflow" data-strength="0.7" data-range="0"></div>
  <div data-body="memory" data-strength="0.5" data-range="260"></div>
  <div data-body="link" data-strength="0.6" data-range="300"></div>