Resources

Live showcase

Every demo here is real. The field behind this page reacts to the elements below and writes density back into them — move your cursor near one and watch it answer. Each comes with its source.

A glowing hero word

The canonical reciprocity effect. The word is an attract body with data-feedback; its --d drives weight and glow, so it grows where matter gathers. Sweep your cursor across it.

gravity

HTML + CSS

<span
  class="hero"
  data-body="attract"
  data-strength="1"
  data-range="340"
  data-feedback
>gravity</span>

<style>
  .hero {
    --d: 0;  /* the field eases this in ∈ [0,1] */
    font-weight: 700;
    font-variation-settings: 'wght' calc(380 + var(--d) * 420);
    color: color-mix(in srgb, #4da3ff calc(40% + var(--d) * 55%), #fff);
    text-shadow: 0 0 calc(var(--d) * 44px) rgba(77, 163, 255, var(--d));
  }
</style>

A reacting card grid

Each card is a gentle attractor. Its --d drives a subtle lift, edge glow, and shadow — the grid breathes as the field moves through it.

Reciprocal the field bends to elements; elements bend back

Conserved nothing is created from nothing — matter is moved

Physical one field, not a pool of decorative particles

HTML + CSS

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

<style>
  .card {
    --d: 0;
    transform: scale(calc(1 + var(--d) * 0.03));
    border-color: color-mix(in srgb, #4da3ff calc(var(--d) * 75%), rgba(255,255,255,0.1));
    box-shadow: 0 0 calc(var(--d) * 30px) rgba(77, 163, 255, calc(var(--d) * 0.5));
    transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  }
</style>

Click to burst

Drive the field from your own events. The FieldHandle's burst takes viewport coordinates — click anywhere in the stage to shove and heat the matter there.

click anywhere in here

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

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

import { FieldField } from '@fundamental-engine/react';

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

Want the recipes as a reference? The copy-paste-first versions live on the Recipes page; this showcase is the same patterns, running.