How linefield fits into a project.

Using a piece in your own site

Three routes, in the order most people want them.

1. Bake it (recommended). Open a piece, tune it with the control panel, then click Baked HTML. You get one self-contained .html file: settings hardcoded, panel removed, every shared module inlined. No dependencies, no build step, nothing else to copy.
2. Embed an iframe. If the piece is hosted somewhere, point at it directly. The gallery's Copy embed button produces exactly this markup. The piece stays updatable and isolated from your page's CSS, but it's a frame, with a frame's layout and accessibility implications.
3. Copy the folder. Take pieces/<name>/ and shared/, keeping their relative positions, and host both. Most control, most files. Useful if you intend to modify the piece rather than just use it.

<iframe src="https://example.com/pieces/flow-field/"
        style="border:0;width:100%;height:100%"></iframe>

Configuring without the control panel

A piece checks for window.__LF_BAKED_VALUES__ before it builds its control panel. If that global is set, the piece renders with those values and no panel — exactly what a Baked HTML export produces, and something you can also do by hand. The script has to come first, above the piece's own <script type="module">, since the piece reads the global while its module script evaluates.

<script>
  window.__LF_BAKED_VALUES__ = {
    scale: 1, speed: 0.6, stroke: 1, opacity: 1,
    saturation: 0.5, colorMode: 'gradient', hue: 210, hueB: 260,
    colorA: '#3399ff', colorB: '#aa00ff',
    glow: 0, angle: 0, motion: 1, phase: 0,
    invert: false, density: 0.8,
  };
</script>

Presets

Every piece ships five curated starting points, shown as a chip row at the top of its control panel: whisper, ink, neon, drift, dense. The names mean the same intent on every piece; the values are tuned per piece, since a saturation that flatters grain-field is wrong for flow-field.

A preset is a partial set of controls composed over that piece's own defaults, not a full snapshot, so switching between two presets never leaves a control stranded at the previous one's value. Open a piece at a preset directly with ?preset=<name>, for example pieces/longwave/?preset=ink. The gallery itself doesn't surface presets — eighteen cards each carrying five swatches was more inventory than invitation.

The shared control contract

Every piece gets the same fourteen controls for free via the shared control panel:

• scale
• speed
• stroke
• opacity
• saturation
• colorMode
• colorA
• colorB
• glow
• angle
• motion
• phase
• invert
• density

colorMode (Solid/Gradient) and colorA/colorB are the authored palette shown in the panel; a piece never reads them directly, it reads hue/hueB through a shared helper instead. density multiplies the piece's base element count. Three pieces (wireframe-lattice, funnel, globe) also get Pitch and Yaw, since they're 3D; Angle is roll on those.

Full mechanics — the exact palette helper, defaults, presets, piece-specific controls, and the density convention for a piece's own element count — are on the Contributing page.

Adding a new piece

Short version: copy pieces/_template/ to pieces/<your-piece-name>/, update its <title> and PIECE_ID, replace drawFrame() with your own rendering logic, pick a distinct default hue so the library doesn't look uniform, then verify visually in a browser. Adding it to the gallery is a separate step: an entry in pieces.json, a matching entry in collections.json (the gallery groups pieces by collection, not by tag — an unclaimed slug fails the build loudly), a README bullet, and a rebuild.

The full steps, the build boundary between pieces and the microsite, and the CI gate order all live on the Contributing page — read the skill file it links first if you're building the actual rendering logic.