Fundamental v0.11.1

Getting started

Five minutes: install → canvas → field → particles → read the signals. No framework, no build step beyond what you already have.

Fastest: scaffold a starter

Terminal 
npm create @fundamental-engine my-app
cd my-app && npm install && npm run dev

Generates a vanilla, React, or web-component project (pass -- --template react) wired to the current engine. Requires 0.11.1 or later — in 0.9.3–0.11.0 the command exited without creating anything. Or set it up by hand:

1. Install

Terminal 
npm install @fundamental-engine/vanilla

2. Add a canvas to your HTML

HTML 
<canvas id="field"></canvas>

<style>
  #field { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
</style>

3. Start the field

TypeScript 
import { createField, browserHost } from '@fundamental-engine/vanilla';

const canvas = document.getElementById('field');

const field = createField(canvas, {
  host: browserHost(document.body),
  render: 'dots',   // draw particles — the default is 'none' (signals only)
  density: 0.8,
});

That's it. Particles begin flowing immediately. Any element with data-body="attract" pulls matter toward it; the page's content becomes part of the field.

4. Make an element a body

HTML 
<h1 data-body="attract" data-strength="0.8" data-range="280">
  Hello world
</h1>

Bodies bend the field. attract gathers matter; repel pushes it away. Strength (0–1) scales the pull; range (px) sets how far it reaches. See the data-* attribute reference for all tokens.

5. Read the signals (no drawing required)

HTML 
<!-- Add data-feedback to receive live CSS vars -->
<div data-body="attract" data-feedback id="hero">Watch me</div>
CSS 
/* Use them in CSS — no JavaScript polling needed */
#hero {
  opacity: calc(0.4 + var(--d, 0) * 0.6);   /* --d (alias --field-density): local density, 0–1 */
  scale: calc(1 + var(--d, 0) * 0.08);
}

The field writes --d (also as --field-density), --load, --lit, and the body's --entropy, --coherence and --temperature directly onto elements with data-feedback. CSS reads them — zero JS event listeners required for basic reactivity. Other channels, such as --field-attention, appear only when a Field Pattern or a platform.feedback.bind call maps them.

Next steps