LumiCells

A live neon pixel-grid background for the web.

A grid of glowing cells forms rings, spheres, waves, spirals, rain or Conway's Life. The glow is soft and layered, single pixels pop out of the plane, and the background responds to the page around it: buttons tint the grid with their own color, clicks send ripples, hovering lifts pixels. Use it from React, as a <lumi-cells> Web Component, or with plain TypeScript.

This page is the LumiCells playground (the tuning stand). It starts here once JavaScript has loaded, and it needs WebGL2 (current Chrome, Edge, Firefox, and Safari 15 or newer).

In the playground

  • switch between the 9 presets and tweak every parameter with live tweening;
  • resize the stage (full screen, 360×360 card, 1200×320 banner, 390×844 phone, custom);
  • toggle the demo scene, pointer interaction and debug layers;
  • export your look as JSON, TypeScript, React or HTML, import a config back, or copy a share link.

Features

  • 8 animation modes (sphere, flow, pulse, wave, ripple, vortex, life, rain) that blend as weighted layers.
  • A 3-layer glow: a tight halo around each cell, a soft bloom and a wide haze.
  • Binds to the page: element influences, pulses, lifts and modulators driven by your own data.
  • Many backgrounds per page under one page-wide WebGL context budget.
  • React, Web Component and vanilla entry points over one core.
  • TypeScript first, a JSON config with a JSON Schema, zero runtime dependencies.

Links

MIT license.