Flow Field

`<pura-flow-field>` is a generative Canvas 2D backdrop in the Vanta TOPOLOGY family: particles drift along a seeded noise vector field behind the slotted content, drawing organic topographic lines that accumulate and slowly dissolve via a translucent trail fade. `preset="vortex"` swaps the noise field for a perturbed inward spiral around the center (the Aceternity Vortex effect on the same engine). The field is fully deterministic: `seed` picks the noise table and the particle spawn points, so the same seed always reproduces the same drawing. `scale` sets the field frequency (smaller is broader and smoother), `speed` the particle velocity, `fade` how fast old trails dissolve, and `line-width` the stroke width. One requestAnimationFrame loop integrates the particles and pauses while the element is offscreen; the simulation is pre-rolled so the canvas is already covered in trails on first reveal. The server renders static deterministic streamlines traced through the exact same field, so the backdrop is presentable before any JS runs; reduced motion freezes the canvas on a single fully accumulated frame. Theme it with `--pura-flow-field-color`, `--pura-flow-field-opacity` and `--pura-flow-field-bg`. Each instance registers in `window.__puraFlowFields` by `data-pura-id` with `{ preset, count, seed, pause, resume }`.

Preview

<!-- hero backdrop: organic topographic streams behind the headline -->
<pura-flow-field count="600" seed="3" style="height: 100vh; --pura-flow-field-bg: #09090b; --pura-flow-field-color: #38bdf8; --pura-flow-field-opacity: 0.4;">
  <header style="position: relative; z-index: 1; display: grid; place-items: center; height: 100%;">
    <h1>Build with pura</h1>
  </header>
</pura-flow-field>

<!-- vortex preset: a perturbed spiral pulling trails into the center -->
<pura-flow-field preset="vortex" count="700" speed="90" fade="0.06" style="height: 360px; --pura-flow-field-bg: #000; --pura-flow-field-color: var(--pura-accent, #6366f1); --pura-flow-field-opacity: 0.55;">
  <div style="position: relative; z-index: 1; display: grid; place-items: center; height: 100%; color: #fafafa;">The calm before the storm.</div>
</pura-flow-field>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/flow-field.js"></script>

import "./pura/lib/flow-field.js";