Fundamental v0.9.2

Getting started

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

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(--field-density, 0) * 0.6);
  scale: calc(1 + var(--field-attention, 0) * 0.08);
}

The field writes --field-density, --field-attention, and --field-temperature directly onto elements with data-feedback. CSS reads them — zero JS event listeners required for basic reactivity.

Next steps