LUMEN: A Self-Contained Generative Shader Studio for the Browser

What LUMEN Generates and Who Uses It

LUMEN produces looping abstract visuals in nine distinct aesthetic categories: liquid chrome, silk ribbons, soft gradient blooms, aura rings, light rays, halftone fields, data glyphs, reeded glass, and pixel mosaics. All nine are rendered in real time using a single WebGL2 fragment shader with mode-specific branches, implemented in `js/shaders.js`.

The tool targets designers who need looping backgrounds for websites and presentations, generative artists exploring parametric visual output, and social media content creators who want high-quality abstract visuals without 3D software. The live demo at lumenshaders.vercel.app allows immediate exploration without any local installation.

The Randomize button and keyboard shortcut `R` generate a new combination of style, palette, form, lighting, and seed, tuned per art mode so that random outputs stay visually coherent. The README notes that randomization sometimes generates a brand-new synthesized style that does not exist in the base set of nine.

The Nine Art Modes and the Style Synthesizer

Each of the nine art modes has its own renderer within the fragment shader. Mode-specific parameters affect what the controls do: the Form section's `fbm detail`, `domain warp`, and `turbulence` sliders produce different visual results in liquid chrome versus halftone fields. The Lighting section's `iridescence` and `gloss` parameters are more visible in the chrome and glass modes.

Beyond the nine fixed modes, a twelve-gene synthesizer can generate standalone styles that are not present in the base set. The synthesizer combines six field types, five domain geometries, four color mappings, four shading models, and four overlays. Generated styles can be saved to browser storage as one-click chips and reloaded in future sessions. The README mentions archetype names that have emerged from the synthesizer, including FLUX, RIDGE, WAVE, RING, CELL, and FLOW.

The `Keep Style` toggle locks the current mode during randomization, so the `R` key only changes palette, seed, and parameters rather than switching modes. This is useful when exploring variations within one aesthetic direction.

Running LUMEN: Live Demo and Local Setup

There is no build step and no dependency installation required. Opening `index.html` directly in a browser starts the application immediately:

npx http-server . -p 8080

The README lists the alternative of double-clicking `index.html` directly, which works in most browsers. WebGL2 support is required. The README lists Chrome, Edge, and Firefox as working environments.

The application consists of seven JavaScript files under `js/`: `shaders.js` for the WebGL2 fragment shader, `engine.js` for the render loop, `gifenc.js` for the GIF encoder, `webmmux.js` for the WebM muxer, `exporter.js` for the export pipelines, `palettes.js` for color data, and `ui.js` and `main.js` for the interface. There are no external JavaScript dependencies and no npm package manifest. The total code surface is visible in eight files.

Export: PNG, WebM via WebCodecs, and GIF

Every export path opens a dialog with a live preview before downloading. PNG export renders offscreen at up to 3840 by 2160 pixels at full quality. The WebM export uses the browser's WebCodecs API with a `VideoEncoder`, muxed by a built-in WebM writer without using `MediaRecorder`. The README describes this approach as avoiding realtime capture and tab crashes. Configurable options include frame rate (24, 30, or 60 fps), resolution (720p to 1440p), and length (one to eight loops, or five to sixty seconds).

GIF export renders frames deterministically from the animation loop, encodes with a built-in GIF89a encoder using median-cut palette quantization and ordered dithering, and supports both looping-forever and play-once modes. All three export methods are fully self-contained; no external codec or server-side processing is involved.

The Gradient Set feature exports four to twelve variations of the current design as a ZIP of PNGs. All variations use the same style and palette with different seeds, producing a consistent set of visuals for use across one project or website.

Share Codes and Per-Design Persistence

Every design produces a compact share code that starts with `LMN1.`. The code captures the complete design state: art mode, palette, seed, and all parameter values from the Form, Lighting, and Texture sections. Pasting the code into the Share box recreates the exact design. The Copy Link button generates a URL that loads the design directly when opened.

Saved styles from the synthesizer are stored in browser local storage as one-click chips. These persist across sessions but are local to the browser and device. Clearing site data or switching to a private window removes them. The share code is the reliable way to preserve and transfer a specific design.

The `Space` key pauses the animation and `S` saves a PNG snapshot at the current frame. These keyboard shortcuts work without opening the export dialog.

Limitations and Maintenance

The fixed set of nine modes and the style synthesizer's parameter space cover a specific aesthetic territory: abstract organic and geometric loops. LUMEN does not support arbitrary GLSL shaders, custom geometry, or scene composition. Adding a new art mode requires editing `js/shaders.js` directly, which is the application's single fragment shader file.

WebCodecs video export requires a browser that supports the `VideoEncoder` API. The README does not document fallback behavior for browsers without WebCodecs support, which includes Safari as of the time the repository was last updated. The GIF and PNG export paths do not depend on WebCodecs and work in all three listed browsers.

The last push was on 2026-06-12. The project has no GitHub releases and no version number in the source. The README does not mention a roadmap or planned additions. LUMEN is MIT-licensed, which permits use, modification, and redistribution, including embedding the application in other projects.

Editorial conclusion

LUMEN is the right tool for designers, generative artists, and web developers who want looping abstract visuals for backgrounds, brand graphics, or social content without installing a runtime or managing dependencies. It is not a general-purpose shader editor: the modes and parameters are fixed, and adding a custom shader requires editing `js/shaders.js` directly. Developers who need a specific visual that none of the nine modes or generated styles can produce will find LUMEN's customization path limited. The last push was on 2026-06-12, and the project has no GitHub releases.

Frequently asked questions

Official sources

1. Issues
2. Leonxlnx/lumenshaders on GitHub
3. License: MIT
4. Project website
5. README