A self-contained JavaScript library that brings a generative flow-field animation to any element on a page. Two noise topologies negotiate dominion of the canvas; particles drift through the contested terrain; the seams between regimes glow as luminous filaments — the meridians.
Download the file, drop it next to your HTML, link to it. That's the whole install.
Download the minified file, place it next to your HTML, reference it with a normal <script> tag. Zero build, zero dependencies.
<!-- save liminal-meridians.min.js next to your page --> <script src="liminal-meridians.min.js"></script>
Once the package is published to npm, npm install liminal-meridians will work for bundler users and jsDelivr / unpkg will auto-mirror the file at a versioned CDN URL. Not published yet — this page will be updated when it is.
Once loaded, the library scans the page for elements with the liminal-meridians class and initializes each one. Configure with data-* attributes.
<div class="liminal-meridians" data-seed="42" data-threshold="1.5" data-color-a="#3d6a93" data-color-b="#e8915a" style="width:100%;height:400px;"> Your content here — sits on top of the animation. </div>
ResizeObserver rebuilds the simulation when the host element changes size, debounced at 120ms.
IntersectionObserver suspends rAF when the element scrolls off-screen. CPU stays quiet.
MutationObserver picks up elements added to the DOM after load. Just add the class — works everywhere.
Same data-seed = same artwork. Pin a seed you love and it renders identically forever.
Detects prefers-reduced-motion automatically. Renders a warmup frame, then idles.
LiminalMeridians.create(el, opts) and .update() for live parameter binding.