Documentation

Add Seer.js to your website

No login, no build step, no frameworks. Pick a background, drop in a few lines, done.

Four steps. No build tooling required.

Pick an effect

Browse the catalogue, open one in the editor, and copy the snippet it generates, it always matches exactly what you see.

Browse effects Open the editor

Load the library

Two ways to include it. Pick whichever fits your page.

Option A ‣ Full bundle

One self-contained file (~500 KB) with three.js bundled in. Works offline and needs no extra scripts.

HTML

<script src="seer.min.js"></script>

Scroll horizontally to view long lines.

Option B ‣ Effect only

Tiny file (~7 KB per effect) that pulls three.js from a CDN. The three.js tag must come first.

HTML

<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>
<script src="seer.horizon.min.js"></script>

Scroll horizontally to view long lines.

Download the file from the editor and place it next to your page, or upload it to your own host/CDN and point the src at it.

Create your background

Add a full-screen div and start the effect. That's it.

HTML

<style>
  #bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
  .seer-content { position: relative; z-index: 1; }
</style>

<div id="bg" aria-hidden="true"></div>

<script src="seer.min.js"></script>
<script>
  Seer.Horizon({
    el: document.getElementById('bg'),
    color: '#cabdff',
    backgroundColor: '#000000'
  })
</script>

Scroll horizontally to view long lines.

Paste the snippet anywhere in <body>. The background uses a negative layer (z-index: -1) so it renders behind your existing content with no wrapping required. For extra certainty you can wrap content in class="seer-content". If you want the background only in one section instead of the whole page, drop the div in that section and give it an explicit height.

Tweak it

Every effect accepts the same core options plus a few of its own.

elThe element (or CSS selector) the background renders into. Required.

colorAccent color, e.g. '#cabdff'.

backgroundColorCanvas background. Set to null for transparent.

mouseControlsReact to the mouse. Default true.

touchControlsReact to touch. Default true.

Each effect has extra options too (density, wave height, speed…). Open it in the editor to explore them and copy a snippet with your exact settings.