Fundamental v0.11.1

Getting started

Shipped · install to a first field

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 } from '@fundamental-engine/vanilla';

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

// the vanilla door wires browserHost() for you — pass a host only when you
// call createField from @fundamental-engine/core directly.
const field = createField(canvas, {
  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.
   --d is the canonical raw channel; --field-density is its namespaced twin
   (same value). Both rest small, so scale before you drive anything. */
#hero {
  --d-amp: clamp(0, calc(var(--d, 0) * 12), 1); /* --d (alias --field-density): local density, 0–1 — amplified for a visible cue */
  opacity: calc(0.4 + var(--d-amp) * 0.6);
  scale: calc(1 + var(--d-amp) * 0.08);
}

A data-feedback body receives --d and --field-density (the same value), plus --load, --lit, --entropy, --coherence and --temperature. CSS reads them — zero JS event listeners required for basic reactivity. The longer --field-* metric lane (--field-attention, --field-memory, …) is a different family: those are written when a pattern declares the metric or a platform.feedback.bind call maps it, not automatically. Both families, and which is which, are on the feedback-channels reference.

Next steps