Fundamental · Use Cases
These are not demos. Each is a real UI problem — the kind you've already hand-coded with scroll spies, IntersectionObservers, animation timers, and custom state machines. The field collapses that work to a data attribute and a CSS variable.
These apply to any product in any stack — the "oh, I get it" tier.
Scroll spy: observe every section, update active class on entry, handle edge cases for fast scrolls.
Nav anchors are data-body="attract" with editorial priority as data-strength. The active section amplifies its pull. --field-density drives the highlight.
z-index and size express visual hierarchy but not spatial pressure — your CTA competes on decoration alone.
The CTA is data-body="gravity" data-strength="1.5". Particles drift toward it. Users notice their eye goes where it should — without consciously seeing the field.
Validation highlights a field, adds an error message — but doesn't move attention spatially in a long form.
On failure, field.setBodyStrength(el, 1.8). The error body competes for density and wins. The coherent condition fires when all required fields resolve.
Scroll animations highlight content as it enters, then stop. No memory of where the reader lingers.
Pull quotes are data-body="attract". The dwell condition accumulates mass at passages the reader revisits. The field stays live — it responds to where the reader is.
Progress bars tell you where you are. Nothing tells you where to go next.
Each completed step drops to data-strength="0.1". The active step is 1.0. The next step has latent strength 0.4. The field topography tilts toward what is coming.
This is the architectural shift most people miss.
Since the signals-first change, the field's default render mode is 'none'.
No canvas. No particles. The full simulation runs and writes its results
as CSS variables — --d (with --field-density as its
field-namespaced form), --load — to every [data-feedback] element.
Your existing CSS consumes them.
The field is not a particle effect.
It is a pressure system that drives your design system.
Font weight driven by --field-density. Near a high-mass heading, body text gets fractionally heavier. No canvas. No JavaScript in the style path.
font-weight: calc(400 + var(--d) * 200); The focused element is the engaged body. Tab traversal creates a moving gravity well. CSS on [data-feedback] drives color, shadow, or scale from proximity — no motion needed for reduced-motion users.
border-color: color-mix(in srgb, var(--accent) calc(var(--d) * 80%), transparent); A toggle's state is a field charge flip. Checked: positive charge, surrounding elements respond. No keyframes, no class toggling, no transition timings to coordinate.
/* the field carries state into style */ <h1> carries more mass than <h2> than <p>. Screen readers consume the markup; the field renders the same hierarchy as a physical pressure map. Both come from the same HTML.
The field as a live metric layer — a spatial representation of data beneath the visual one.
A status dashboard where each service's body strength is proportional to error rate. A healthy service is a low-mass body. A spiking service becomes a gravity well — you see the incident before you read the number.
Task queues where priority maps to body strength. A P0 ticket buried in a long list pulls harder than the P2 at the top — without reordering the DOM.
Real-time feeds where incoming events create field disturbances. Busy channels hum differently from quiet ones. Notification badges count — the field shows cadence.
Graph nodes whose edge weights become data-field-relation values. Hover a node and the field reveals strongly connected neighbors — second-degree connections respond too, weighted by path strength.
Rating × review_count → body strength. Promoted items carry data-truth="designed", organically popular ones "physical". The distinction is structurally honest and spatially visible.
Cart item count → data-strength. On add, dispatchBodyThreshold fires at strength > 1.0 — the confirmation is driven by the field event, not a timeout. The cart's field state IS the cart state.
"Only 3 left" — low stock makes a body's charge spike. Urgency is structural, not cosmetic. Zero stock drops the charge. The thresholded condition handles the boundary.
Side-by-side comparison where the winning option has higher aggregate mass. The field tips the decision spatially before the user consciously compares.
The currently playing track is a dominant gravity well. Play count = accumulated mass — accretion in the Body Matter Interaction model. --load represents play history.
Hover triggers data-active, amplifying pull. Other gallery items dim because field density genuinely dropped — not because of :not(:hover) tricks.
Article archive where view count → data-strength. The field's density distribution over the grid is a spatial map of readership.
Data stories where scrolling changes which body is dominant. No scroll-jacking, no IntersectionObserver farm. The ScrollAgent feeds input; the field re-orients continuously.
Branching narratives where choices carry accumulated attention weight. The field is a memory of the user's attention during the choice — hovered longest has more mass.
Digital archives where cultural significance, date range, acquisition cost → body strength. Moving through the collection, the field creates a topography of importance.
Blocked or overdue cards accumulate urgency mass. The board's field density distribution shows bottlenecks without a filter or sort. The pressure formation biases the whole field.
Each active cursor is a charged body. Dense regions are where people are working. An idle cursor loses charge over time. Presence as field — not a list of avatars.
Diff view where modified files have mass proportional to change size. The file tree's density shows where the review bulk is — before opening anything.
Capabilities with no clean analogy in CSS, JavaScript event systems, or existing animation libraries.
The DOM affects the field AND the field affects the DOM. The loop is closed. Most "physics" UI is one-way. Fundamental's two-way binding means a button hovered many times has accumulated interaction history as field density.
A pricing page where the recommended tier's mass is designed (editorially elevated, bounded) while user review scores drive physical mass (true physics, potentially unbounded). Both in the same field. The tension is physically visible.
data-preset="blackhole" combines attract + sink. data-body="attract charge warp" pulls, has polarity, bends space. These combinations produce emergent field shapes impossible to replicate with CSS alone.
Three independent container fields on one page — one per section, no shared particles. bounds: el scopes a field to a DOM subtree. Zero interference between sections.
The field currently exists in the present frame. Extending it backward (memory) and forward (prediction) opens a distinct class of use cases.
A page that is warmer in the places a user has been. High-traffic corridors develop lower resistance. Not analytics — semantic sediment: local, continuous, immediately legible.
Documentation where sections gain mass through repeated attention. A concept revisited five times is heavier than one skimmed. The field shows which ideas have been internalized.
The user left mid-flow. When they return, the uncompleted step is already the dominant body — attention is pulled there before they consciously re-orient. No session storage logic needed.
Recently updated items are bright bodies; older items cool and lose charge. Staleness is visible as field entropy — not a timestamp, but a spatial warmth gradient across the surface.
AI outputs contain claims, sources, confidence, uncertainty, contradiction, revision, memory, and provenance. Field recipes make these structural properties visible — without badges or tooltips.
Claims become bodies. Sources bind to them — strong sources pull closer, weak sources orbit at distance. Contradictory sources repel. Verified claims gain coherence and mass. Unverified claims remain visibly unsettled.
Why it matters: AI interfaces show confidence as a percentage or color label. The field makes confidence spatial and relational — you see which claims are well-supported before reading a number.
A research or fact-check surface where field density reflects source quality. High-authority sources are strong bodies. Sources with corroborating claims form clusters — the field shows where consensus is dense and where it's sparse.
A generated document where each passage carries the origin of its content. Cited passages have one quality of presence; inferred passages have another. Expressed through data-truth modes and CSS --d — not labels.
Contested information — two sources that contradict each other. The field holds the contradiction in visible tension rather than collapsing it into a resolved state. Conflicting bodies carry opposing charge; the contested zone is measurable.
Collaboration beyond cursors and avatars — multiple participants' attention becomes field contributions that sum.
Each active collaborator's focus is a charged body. A paragraph where three people are reading is demonstrably denser than one where nobody is. Departure leaves a cooling Memory Trace.
Items with growing consensus pull toward a stable gravity well. Items with persistent disagreement show charge separation — two camps of opposing charge, visible as a split field topology.
Ownership changes create directional field flow. The handoff is visible as current — not just a status update in a list.
Use case × engine capability — which forces, feedback, and truth modes apply.
| Use Case | Forces | Feedback | Relations | Signals-only | Truth Mode |
|---|---|---|---|---|---|
| Weighted navigation | attract | ✓ | — | ✓ | designed |
| Error gravity | attract, charge | ✓ | — | ✓ | designed |
| Reading weight | attract | ✓ | — | ✓ | semantic |
| Completion momentum | gravity, attract | ✓ | — | ✓ | designed |
| Anomaly field | gravity | ✓ | — | ✓ | physical |
| Urgency sorting | attract, charge | ✓ | — | ✓ | physical |
| Relationship graphs | attract | ✓ | ✓ | — | physical |
| Product gravity | gravity | ✓ | — | ✓ | hybrid |
| Cart magnetism | attract | ✓ | — | — | designed |
| Ambient typography | — | ✓ | — | ✓ | semantic |
| Focus a11y | — | ✓ | — | ✓ | designed |
| Evidence field | attract, charge | ✓ | ✓ | ✓ | physical |
| Trust gradient | gravity | ✓ | ✓ | ✓ | hybrid |
| Conflict field | charge | ✓ | ✓ | ✓ | physical |
| Presence field | attract | ✓ | — | ✓ | hybrid |
| Reading history | — | ✓ | — | ✓ | physical |
| Staleness gradient | — | ✓ | — | ✓ | physical |
| Reciprocal UI | any | ✓ | — | ✓ | hybrid |