<perlin-noise>

Drop the four scripts on any page and use the <perlin-noise> tag. No build step, no dependencies. The hero above is a single full-bleed element.

Built-in presets (work under file://)

<perlin-noise preset="lava" autoplay></perlin-noise>

Custom preset from JSON (serve over HTTP)

<perlin-noise src="./marble.json" autoplay max-resolution="640"></perlin-noise> — export a preset from the studio (Save preset) and point src at the JSON. Under file:// the fetch is CORS-blocked; use preset or the .params property there.

Markup to include

<script src="perlin.js"></script>
<script src="perlin-presets.js"></script>
<script src="perlin-engine.js"></script>
<script src="perlin-element.js"></script>
<perlin-noise preset="aurora" autoplay></perlin-noise>

Accessibility & performance: with “Reduce motion” enabled in your OS, every element renders a single still frame instead of animating. Off-screen elements auto-pause to save battery; the render resolution is capped at max-resolution (default 1280) so a full-bleed hero stays cheap.