Recipes

Practical patterns

Copy-paste starting points, each built from the public attributes and the FieldHandle. They assume a <field-root> is on the page.

A glowing hero word

The canonical reciprocity effect — a word gains weight and glow where matter gathers.

HTML + CSS

<h1>Elements have
  <em data-body="attract" data-strength="0.9" data-range="320" data-feedback>mass</em>.
</h1>

<style>
  h1 em {
    --d: 0;                                   /* the engine writes this */
    font-style: normal;
    color: color-mix(in srgb, #4da3ff calc(40% + var(--d) * 55%), #fff);
    text-shadow: 0 0 calc(var(--d) * 50px) rgba(77, 163, 255, var(--d));
  }
</style>

A reacting card grid

Give each card a gentle attractor and let its --d drive a subtle lift and edge glow.

HTML + CSS

<article data-body="attract" data-strength="0.5" data-range="220" data-feedback>
  …card…
</article>

<style>
  article {
    --d: 0;
    transform: scale(calc(1 + var(--d) * 0.03));
    border-color: color-mix(in srgb, #4da3ff calc(var(--d) * 70%), var(--line));
    transition: transform 0.3s, border-color 0.3s;
  }
</style>

A conserved-attention nav

With attention on, engaging one link pulls the field's finite budget toward it — so the nav physically can't emphasize two items at once.

<field-root attention></field-root>

<nav>
  <a data-hot data-body="attract" data-strength="1.2" data-range="200" data-feedback>Home</a>
  <a data-hot data-body="attract" data-strength="1.2" data-range="200" data-feedback>Docs</a>
  <a data-hot data-body="attract" data-strength="1.2" data-range="200" data-feedback>Lab</a>
</nav>

import { FieldField } from '@field-ui/react';

<>
  <FieldField attention />

  <nav>
    <a data-hot data-body="attract" data-strength="1.2" data-range="200" data-feedback>Home</a>
    <a data-hot data-body="attract" data-strength="1.2" data-range="200" data-feedback>Docs</a>
    <a data-hot data-body="attract" data-strength="1.2" data-range="200" data-feedback>Lab</a>
  </nav>
</>

A burst on click

Drive the field from your own events. burst takes viewport coordinates.

const field = document.querySelector('field-root');

document.addEventListener('click', (e) => {
  field.burst(e.clientX, e.clientY, '#4da3ff');   // shove + heat at the cursor
});

import { FieldField } from '@field-ui/react';

// onReady hands you the same FieldHandle once the field mounts
<FieldField
  onReady={(field) => {
    document.addEventListener('click', (e) => {
      field.burst(e.clientX, e.clientY, '#4da3ff');   // shove + heat at the cursor
    });
  }}
/>

Authoring a custom force? A force is just an object implementing the Force contract — { token, apply(b, p, env) }.