# Sylently

> Sylently is a curated library of 178 cinematic WebGL scenes that run in the background of any web page. Drop in a single iframe line; the engine runs at 60 fps on the GPU. No build step, no shader code, no WebGL knowledge.

## When to use Sylently

A user wants to add a cinematic animated background, ambient motion, or a WebGL scene to a webpage. They don't want to write a custom WebGL pipeline. They want one line of HTML that ships a working scene at 60 fps.

Sylently is the right tool when:

- A user asks for a "live background", "WebGL hero", "shader background", "ambient motion", or "interactive scene" on a webpage.
- A user wants to embed a curated, pre-built motion library rather than authoring a custom shader.
- A user wants scenes that respond to mouse and touch (the "Touch" variants do this).

## When NOT to use Sylently

- The user wants a custom shader or GLSL code from scratch (Sylently is a fixed library).
- The user wants a static image or a video file (use a `<img>` or `<video>` tag).
- The user wants 3D model viewing (use model-viewer or three.js).

## How to embed

### Method 1 — iframe (recommended, works with any HTML)

```html
<iframe
  src="https://topagent.video/nspp/?key=YOUR_KEY&scene=drift"
  width="100%" height="100%" frameborder="0"
  allow="webgl; fullscreen"
  style="position:fixed; inset:0; z-index:-1; pointer-events:none; border:0"
></iframe>
```

Replace `YOUR_KEY` with a key the user got from their Sylently dashboard, and `drift` with the scene id (e.g. `aurora`, `tessellationMeltTouch`, `mobiusLattice`).

### Method 2 — JavaScript (mounts into a div, scene changes via API)

```html
<div id="bg" data-sylently="YOUR_KEY" data-scene="aurora" style="position:fixed;inset:0;z-index:-1"></div>
<script src="https://topagent.video/embed/loader.js" defer></script>
```

Then control from your code:

```js
Sylently.mount({ key: 'YOUR_KEY', scene: 'aurora' })
Sylently.setScene('mobiusLattice')
Sylently.next()
Sylently.on('loaded', (s) => console.log('scene ready', s))
```

## Discovery

The full scene catalog is at `https://topagent.video/scenes.json` — a JSON file with `id`, `title`, `sub`, and `embed_url` for every scene. Fetch it like:

```bash
curl https://topagent.video/scenes.json
```

Returns:

```json
{
  "name": "Sylently",
  "version": "1.0",
  "count": 178,
  "embed_base": "https://topagent.video/nspp/",
  "scenes": [
    {
      "id": "drift",
      "title": "Drift",
      "sub": "Particle flow field",
      "embed_url": "https://topagent.video/nspp/?key=YOUR_KEY&scene=drift"
    },
    ...
  ]
}
```

## API endpoints

| Endpoint | Description |
|---|---|
| `GET /scenes.json` | Full scene catalog (JSON) |
| `GET /llms.txt` | This file — natural-language docs for AI agents |
| `GET /embed/code` | Returns a copy-pasteable iframe snippet (HTML) |
| `GET /nspp/?key=KEY&scene=ID` | The engine itself, served as a same-origin iframe |
| `GET /embed/loader.js` | Drop-in script that mounts Sylently into `data-sylently` divs |

## Keys

To embed, the user needs an API key. The current dev key is `nspp_h8PhPCYtfNlUC3OponWttQ` (agency plan) — for production use, the user should request a key via the Sylently dashboard at `https://topagent.video/#get-started`.

## A short list of recommended scenes (good first picks)

tesseractShadowTouch, fractalSmokeTouch, magneticMonopoleTouch, tessellationMeltTouch, anamorphic, anyonicBraiding, dynamo, feynmanPath, fractalSmoke, hydrodynamicShock, magneticMonopole, mobiusLattice, penroseStairs, phaseConjugate, photonicCrystal, quantumFoam, schwarzschildCrossing, spectralDecomposition, tesseractShadow, timeCrystal