LUMEN: a dependency-free WebGL2 studio that makes mathematically perfect looping shader art

Looping shader art in the browser, no build required

LUMEN is a self-contained web tool that generates looping abstract shader art: liquid chrome, silk ribbons, gradient blooms, aura rings, light rays, halftone fields, data glyphs, reeded glass and pixel mosaics. The README's core promise is that everything renders in real time with WebGL2 and every animation is a mathematically perfect loop.

The user is a designer, developer or artist who wants generative background art or perfect loops without opening a shader IDE or standing up a toolchain. The README is blunt about the friction it removes: no build step, no dependencies. You either use the hosted demo or double-click `index.html` locally.

The perfect-loop guarantee is the technical heart. The README explains loops are closed by construction because the noise field is sampled along a closed circle, so a loop returns exactly to its start rather than being trimmed to look continuous. That is the difference between a loop that stutters at the seam and one that genuinely cycles, and it is a property you get for free rather than having to tune. It is MIT licensed.

Nine modes and a style synthesizer

LUMEN ships nine art modes, each with its own renderer, and a Randomize action that picks a new style, palette, form, lighting and seed tuned per style so results stay good. A Keep style lock holds the mode while randomizing everything else. That per-style tuning is why random results are usable rather than noise: the randomness is bounded to each renderer's good range.

The more ambitious feature is generated styles. The README describes a 12-gene style synthesizer, six field types by five domain geometries by four color mappings by four shading models by four overlays, that produces standalone styles outside the base set, with archetypes it names like FLUX, RIDGE, WAVE, RING, CELL and FLOW. Favorites can be saved as one-click chips in the browser. So the tool is not just nine presets; it is a generator of new renderers within a defined gene space.

Control is extensive: 16 curated palettes plus a harmonic palette generator, form parameters like seed, zoom, fbm detail, domain warp and turbulence, lighting parameters like gloss, iridescence and glow, and texture parameters like film grain, chromatic aberration and vignette. Motion is controlled by loop length and travel distance, and the closed-circle sampling keeps it unbroken regardless.

Running it and sharing a design

There is genuinely nothing to install. The README says you can double-click index.html to run it locally, or serve the folder:

npx http-server . -p 8080

It requires a browser with WebGL2, which the README lists as Chrome, Edge or Firefox, and points to a hosted demo for zero-setup use. The repository is just an app shell: index.html, styles.css, a js/ directory and docs, with no package to build.

The standout distribution feature is share codes. The README says every design serializes to a compact code beginning `LMN1.`, and pasting that code into the Share box recreates the exact design, style, colors, seed and all parameters. A Copy link produces a URL that loads the design directly. That makes a design fully portable as a short string, which is a clever alternative to shipping image files when you want someone to reproduce or tweak the exact art.

Keyboard shortcuts round it out: R randomizes, Space pauses, and S saves a PNG, so the common actions do not require the mouse.

In-page encoders that avoid the usual capture pitfalls

The export path is where LUMEN shows real engineering rather than convenience. The README says every export opens a dialog with a live preview and its settings before downloading, and the three formats are each encoded deliberately in-page.

PNG exports up to 3840x2160, rendered offscreen at full quality rather than screen-grabbed. Video is WebM VP9 or VP8 encoded offline with WebCodecs through the `VideoEncoder` API and muxed by a built-in dependency-free WebM writer, with configurable fps of 24, 30 or 60, resolutions from 720p to 1440p, and exact length of 1 to 8 loops or 5 to 60 seconds. The README explicitly notes this uses no `MediaRecorder`, no realtime capture and no tab crashes, which is the failure mode of naive browser video capture. GIF is rendered deterministically frame by frame with a dependency-free GIF89a encoder using median-cut palette and ordered dithering.

Offline, deterministic, frame-by-frame encoding is the right way to produce clean loops, because realtime capture drops frames and breaks the seam. That LUMEN wrote its own dependency-free WebM and GIF encoders to avoid those pitfalls, rather than leaning on `MediaRecorder`, is the detail that separates it from a typical shader toy. A Gradient sets feature also renders 4 to 12 seed variations of the current design and downloads them as a ZIP of PNGs for consistent art across a site.

The limitations: abstract art, and a browser dependency

The honest limitations follow from what LUMEN is. It generates abstract, procedural shader art, liquid chrome, ribbons, gradient blooms, and it is superb at that, but it is not a tool for figurative illustration, logos or anything representational. Its output is textures and loops, which is exactly right for backgrounds and motion accents and wrong for anything that needs specific shapes or content.

The second limitation is the hard WebGL2 requirement. The README lists Chrome, Edge and Firefox, so a browser or device without WebGL2 support cannot run it, and heavy shader work is GPU-dependent, so performance on a weak GPU may limit resolution and framerate. This is inherent to real-time shader rendering rather than a flaw.

Because everything, rendering and encoding, happens client-side with no dependencies, LUMEN is also bounded by the browser's capabilities: very high-resolution or very long exports are constrained by browser memory and WebCodecs support. That client-side, dependency-free design is the project's strength, but it means the browser is both the runtime and the ceiling.

Against a shader IDE or a video editor

The alternatives are a shader IDE like Shadertoy for authoring effects, or a video or motion tool for producing loops. A shader IDE gives total control over the GLSL but requires you to write and tune the shader yourself and offers no curated styles, palette system or clean loop-export pipeline. A video editor can make loops but not generate procedural shader art from a parameter space.

LUMEN's difference is that it is a curated generator plus a proper export pipeline: nine tuned modes, a style synthesizer within a defined gene space, a palette and parameter system, and in-page offline encoders that produce clean PNG, WebM and GIF loops, all with no build and a shareable code for exact reproduction. The trade is control: you work within LUMEN's modes and gene space rather than writing arbitrary shaders. Choose a shader IDE when you want to author custom GLSL from scratch. Choose a video editor when your source is footage, not procedural art. Choose LUMEN when you want high-quality, perfect-loop generative shader art quickly, with clean exports and shareable designs, and its modes cover the aesthetic you are after.

MIT, client-side, and where to start

LUMEN is MIT and entirely client-side with no dependencies, which makes it trivial to host, fork or embed: the whole app is `index.html`, `styles.css` and a `js/` directory. That also means it has no server, no telemetry and no account, and a design lives only in its share code or a saved file, which is a clean privacy posture for a creative tool.

There is essentially no upgrade or maintenance overhead for a user, since there is nothing to install and no runtime to keep alive; updating is loading a newer copy of the files. Saved styles persist in the browser as one-click chips, so they are local to that browser rather than synced.

The concrete first step is to open the hosted demo or double-click `index.html`, press R a few times to see the nine modes and the synthesized styles, and try an export to confirm the offline encoders work in your browser: render a short WebM and a GIF and check the loop is unbroken. If you want to reproduce a specific look later, copy its `LMN1.` share code, since that string, not an image file, is how LUMEN reproduces a design exactly.

Editorial conclusion

Use LUMEN when you want high-quality, perfect-loop generative shader loops fast, with no build and clean in-page exports: the perfect-loop-by-construction sampling, the nine tuned modes plus the style synthesizer, and the dependency-free WebM and GIF encoders that avoid realtime-capture artifacts are its real strengths. It is the wrong tool for figurative or representational work, since it makes abstract procedural art, or for devices without WebGL2, which it requires. Start by opening index.html or the hosted demo, press R to explore the modes and synthesized styles, and export a short WebM and GIF to confirm the offline encoders work in your browser; save a design as its LMN1. share code to reproduce it exactly later.

Frequently asked questions

Official sources

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