{
  "schemaVersion": 1,
  "id": "voronoi-cells",
  "version": "1.0.0",
  "status": "published",
  "kind": "background",
  "title": "Voronoi Cells",
  "summary": "A field of glowing cells with bright veins between them and a nucleus in each, drifting on closed orbits like cells under a microscope. Loops perfectly.",
  "description": "A field of glowing cells, like cells under a microscope or the cracks in dried mud lit from beneath. Seed points drift on small closed orbits; every pixel finds its nearest and second-nearest point, so each cell is filled with a soft gradient, the borders between cells glow as thin bright veins, and every point has a bright nucleus. Each point makes whole orbits per loop, so it repeats seamlessly. Choose how many cells fit across the picture, the colours (ember, ocean, moss or mono), how far the points travel, how bright and thin the veins are and the seed.",
  "role": "Shader background (three.js): a living, organic backdrop for science, wellness and tech content.",
  "collections": [
    "backgrounds",
    "hypnotic-loops"
  ],
  "tags": [
    "voronoi",
    "cells",
    "microscope",
    "organic",
    "cellular",
    "veins",
    "glow",
    "pattern",
    "biology",
    "loop"
  ],
  "synonyms": [
    "cell pattern",
    "cellular noise",
    "worley noise",
    "mud cracks",
    "biology background",
    "stained glass cells"
  ],
  "useCases": [
    "A biotech, health or science title backdrop",
    "An organic abstract loop behind text",
    "A glowing cellular texture for music visuals"
  ],
  "featured": null,
  "publishedAt": "2026-10-08",
  "implementation": {
    "target": "three",
    "runtime": "browser",
    "language": "javascript",
    "module": "esm",
    "entry": "src/voronoi-cells.js",
    "exports": [
      {
        "name": "createVoronoiCells",
        "signature": "createVoronoiCells({ scale?, palette?, orbit?, veins?, seed? }) => { scene, camera, setSize(width, height), update(time, loopSeconds), dispose() }",
        "description": "The cells as one full-screen shader; render its scene with its camera, ideally through createBloomPass."
      },
      {
        "name": "createBloomPass",
        "signature": "createBloomPass(renderer, { width, height, glow?, exposure?, grain? }) => { render(scene, camera, output?), dispose() }",
        "description": "A small bloom with tone mapping and a fixed grain."
      },
      {
        "name": "PALETTES",
        "signature": "PALETTES: { ember, ocean, moss, mono }",
        "description": "Cell, vein and nucleus colours."
      }
    ],
    "reusable": [
      "src/voronoi-cells.js"
    ],
    "demo": "demo.js",
    "harness": "index.html"
  },
  "dependencies": [
    {
      "id": "three",
      "version": "0.185.1",
      "reason": "Renderer and a full-screen shader material."
    },
    {
      "id": "apw-runtime",
      "version": "1.0.0",
      "scope": "demo",
      "reason": "Demo harness."
    }
  ],
  "params": [
    {
      "key": "scale",
      "label": "Cells across",
      "type": "number",
      "min": 3,
      "max": 14,
      "step": 0.5,
      "default": 6
    },
    {
      "key": "palette",
      "label": "Colours",
      "type": "select",
      "default": "ember",
      "options": [
        {
          "value": "ember",
          "label": "Ember"
        },
        {
          "value": "ocean",
          "label": "Ocean"
        },
        {
          "value": "moss",
          "label": "Moss"
        },
        {
          "value": "mono",
          "label": "Mono"
        }
      ]
    },
    {
      "key": "orbit",
      "label": "Drift",
      "type": "number",
      "min": 0,
      "max": 1.5,
      "step": 0.1,
      "default": 1
    },
    {
      "key": "veins",
      "label": "Veins",
      "type": "number",
      "min": 0.4,
      "max": 2,
      "step": 0.1,
      "default": 1
    },
    {
      "key": "seed",
      "label": "Seed",
      "type": "integer",
      "min": 1,
      "max": 999,
      "step": 1,
      "default": 3
    }
  ],
  "presets": [
    {
      "id": "default",
      "label": "Ember cells",
      "params": {}
    },
    {
      "id": "ocean",
      "label": "Ocean, fine",
      "params": {
        "palette": "ocean",
        "scale": 11,
        "veins": 1.4,
        "seed": 9
      }
    },
    {
      "id": "moss",
      "label": "Moss, big and slow",
      "params": {
        "palette": "moss",
        "scale": 4,
        "orbit": 0.6,
        "seed": 21
      }
    },
    {
      "id": "mono",
      "label": "Mono, sharp veins",
      "params": {
        "palette": "mono",
        "veins": 2,
        "scale": 8,
        "seed": 5
      }
    }
  ],
  "output": {
    "width": 1080,
    "height": 1080,
    "fps": 30,
    "durationSeconds": 10,
    "posterSeconds": 2.5,
    "alpha": false,
    "motion": "procedural",
    "loop": {
      "seamless": true,
      "cycleSeconds": 10,
      "method": "Every point makes a whole number of laps of its orbit per loop, so the last frame meets the first."
    },
    "seed": {
      "param": "seed",
      "behavior": "Seed positions the points and their orbits: same seed, same cells."
    }
  },
  "composition": {
    "inputs": "Time within the loop; the cell count, colours, drift, veins and seed.",
    "outputs": "A full-frame shader image through a bloom pass.",
    "coordinates": "Screen-centred, ±1 vertically, scaled by the cell count; one seed point per grid cell.",
    "lighting": "Self-lit; the bloom gives the glow.",
    "timing": "update(time, loopSeconds) sets the loop phase; frames render in any order.",
    "compatibleWith": [
      "kinetic-title",
      "number-reveal"
    ],
    "notes": [
      "Each pixel looks at the nine nearest grid cells; points stay inside their cell's neighbourhood, so there are no seams."
    ]
  },
  "reuse": [
    "Biotech title: Ember cells.",
    "Calm science: Ocean, fine.",
    "Organic: Moss, big and slow."
  ],
  "integration": {
    "newProject": "Create a WebGLRenderer, createVoronoiCells() and createBloomPass(renderer, { width, height }); call cells.setSize(w, h) and each frame cells.update(time, loopSeconds) then bloom.render(cells.scene, cells.camera).",
    "existingProject": "Copy src/voronoi-cells.js and render cells.scene with cells.camera into your own target."
  },
  "performance": {
    "notes": "One full-screen fragment shader with nine point lookups per pixel, plus the bloom: about 2 ms a frame at 1080² on an integrated Intel GPU.",
    "limits": "Software WebGL renders in about two seconds a frame."
  },
  "limitations": [
    "Fine, bright veins on moving cells can shimmer when compressed to small video sizes.",
    "Cells are 2D and flat; there is no depth."
  ],
  "license": {
    "spdx": "MIT",
    "notice": "Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder.",
    "thirdParty": []
  },
  "provenance": "Original code written for AI Pixel Wizard in October 2026, to the catalog quality bar (docs/QUALITY.md).",
  "changelog": [
    {
      "version": "1.0.0",
      "date": "2026-10-08",
      "notes": "Initial release."
    }
  ]
}