# Docs, LUMEN generative shader studio
How to use LUMEN: styles, synth styles, color, motion, share codes, gradient sets and exporting PNG, video or GIF.

# 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.

Synth styles go beyond the base set: `New synth style` blends two renderers with a random mix operation (organic mask, screen, multiply, radial or diagonal split) into a completely new look. The Synth blend slider controls how strongly the second layer shows. The big Randomize button also produces synth 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

- Presets: 16 curated palettes tuned for the renderers.
- Swatches A to D: the four palette colors every style draws from, plus BG for the background.
- Hue shift, saturation, exposure: grade the final image without touching the palette.
- The dice in the section header rolls a new harmonised palette that fits the current style.

## Form, lighting, texture, motion

Seed | Every design is deterministic. Same seed, same image. Type a number or roll a new one.
Zoom / Detail | Size of the forms and the number of noise octaves.
Warp / Turbulence | How much the field folds into itself and how much it churns while moving.
Stretch | Anisotropy. Positive stretches horizontally, negative vertically.
Lighting | Intensity, gloss tightness, light angle, iridescence and bloom glow.
Texture | Film grain, halftone and glyph density, ridge count, chromatic aberration, vignette, softness.
Loop length | Duration of one seamless cycle, 2 to 12 seconds.
Travel | How 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.

- Copy design code puts the code on your clipboard. Anyone can paste it into the Share box to get the exact same design.
- Copy link creates a URL with the code in the hash. Opening it loads the design directly.

## 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.

PNG | Stills up to 3840 x 2160, rendered offscreen at full quality.
WebM video | Encoded offline with WebCodecs, VP9 or VP8, muxed by a built-in WebM writer. 24, 30 or 60 fps, exact length in loops or seconds.
GIF | Frame-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

R | Randomize everything
Space | Play or pause
S | Save 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.