LUMEN documentation
Open the studio

How LUMEN works

LUMEN generates looping abstract shader art in your browser: liquid chrome, silk, soft gradients, halftone fields and more. Everything renders in real time with WebGL2, every animation is a perfect loop, and everything you make can be exported or shared as a code.

Styles

Pick one of the 9 base styles in the Style section: Chrome, Silk, Bloom, Aura, Rays, Halftone, Glyphs, Reeded and Mosaic. Each one is its own renderer with its own character.

Generated styles go far beyond the base set: New style runs a style synthesizer with 12 genes covering field type, domain geometry, color mapping, shading model and surface overlay. Every gene set is a standalone style that does not exist in the base nine, named by its field archetype: FLUX, RIDGE, WAVE, RING, CELL or FLOW. The big Randomize button also discovers new styles some of the time.

Found something you love? Save style stores it in your browser. Saved styles appear as chips you can reload with one click, and they survive page reloads.

Color

Form, lighting, texture, motion

SeedEvery design is deterministic. Same seed, same image. Type a number or roll a new one.
Zoom / DetailSize of the forms and the number of noise octaves.
Warp / TurbulenceHow much the field folds into itself and how much it churns while moving.
StretchAnisotropy. Positive stretches horizontally, negative vertically.
LightingIntensity, gloss tightness, light angle, iridescence and bloom glow.
TextureFilm grain, halftone and glyph density, ridge count, chromatic aberration, vignette, softness.
Loop lengthDuration of one seamless cycle, 2 to 12 seconds.
TravelHow far the field moves during one loop.

Share codes

Every design serializes to a compact code starting with LMN1. It contains the style, all five colors, the seed and every parameter.

Gradient sets

The Set button generates 4 to 12 variations of your current design that share the style, palette and all settings but use different seeds. They look like one family, which makes them perfect for a website: one for the hero, others for cards or section backgrounds.

Click a tile to apply that seed to the editor, or download the whole set as a ZIP of PNGs in one click.

Export

Each export button opens a dialog with a live preview and its settings, then downloads on confirm.

PNGStills up to 3840 x 2160, rendered offscreen at full quality.
WebM videoEncoded offline with WebCodecs, VP9 or VP8, muxed by a built-in WebM writer. 24, 30 or 60 fps, exact length in loops or seconds.
GIFFrame-exact seamless loop, encoded in-page with a dependency-free GIF89a encoder. Optional dithering, loop forever or play once.

Loops are seamless by construction: the noise field is sampled along a closed circle, so the last frame flows exactly into the first.

Shortcuts

RRandomize everything
SpacePlay or pause
SSave a PNG with current settings

Tech notes

LUMEN is a static page with zero dependencies: one WebGL2 uber-shader, a hand-written GIF encoder, a WebM muxer and a store-only ZIP writer. The source is on GitHub under the MIT license.