Generate looping abstract background art for a website or video project.
Explore nine built-in shader styles or synthesize new looks by combining field types and color mappings.
Export a generated design as a PNG, WebM video, or GIF for use elsewhere.
Share a design with others using a compact code or link that recreates it exactly.
| leonxlnx/lumenshaders | vercel/git-hooks | atom/snippets | |
|---|---|---|---|
| Stars | 203 | 202 | 207 |
| Language | JavaScript | JavaScript | JavaScript |
| Last pushed | — | 2021-04-10 | 2023-03-15 |
| Maintenance | — | Dormant | Dormant |
| Setup difficulty | easy | easy | easy |
| Complexity | 1/5 | 2/5 | 1/5 |
| Audience | designer | developer | developer |
Figures from each repo's GitHub metadata at analysis time.
Just open the HTML file in a WebGL2-capable browser, nothing to install.
LUMEN is a browser-based tool for generating looping abstract artwork, entirely in real time. You open it in a web browser (Chrome, Edge, or Firefox), and it immediately starts producing animated visuals: liquid chrome, silk ribbons, soft glowing blooms, aura rings, light rays, halftone dot fields, data glyphs, reeded glass, and pixel mosaics. There is nothing to install and no external software required, because the whole tool is a single HTML file with JavaScript. The art is produced by programs called shaders, which run directly on your graphics card using a web technology called WebGL2. Every animation loops perfectly, meaning the end of one cycle connects seamlessly to the start of the next. The project includes nine distinct visual styles, each with its own rendering approach. On top of those nine, a built-in style synthesizer can generate entirely new looks by combining different field types, color mappings, and shading models, producing styles that do not exist in the base set. Controls let you adjust color palettes (16 curated sets plus a harmonic generator), shape parameters like zoom and detail level, lighting settings like gloss and iridescence, texture options like film grain and chromatic aberration, and motion settings like loop length. Pressing R randomizes everything. You can lock a style while randomizing, or save favorite styles as quick-access buttons in your browser. Every design can be shared as a compact code starting with "LMN1." that encodes all parameters. Pasting the code into the Share box on any device recreates the exact design. A "Copy link" button produces a URL that loads the design directly. Export options cover PNG images up to 3840x2160, WebM video at up to 1440p with configurable frame rate and length, and GIF files with customizable loop behavior. All encoding happens inside the browser with no third-party libraries.
A single-file browser tool that generates real-time looping abstract art using WebGL2 shaders, with export to PNG, video, and GIF.
Mainly JavaScript. The stack also includes JavaScript, WebGL2, HTML.
Setup difficulty is rated easy, with roughly 5min to a first successful run.
Mainly designer.
This repo across BitVibe Labs
Verify against the repo before relying on details.