whatisgithub

What is lumenshaders?

leonxlnx/lumenshaders — explained in plain English

Analysis updated 2026-05-18

203JavaScriptAudience · designerComplexity · 1/5Setup · easy

In one sentence

A single-file browser tool that generates real-time looping abstract art using WebGL2 shaders, with export to PNG, video, and GIF.

Mindmap

mindmap
  root((LUMEN))
    What it does
      Real-time shader art
      Perfect looping animation
      Nine visual styles
      Style synthesizer
    Tech stack
      JavaScript
      WebGL2
      Single HTML file
    Use cases
      Website background art
      Export design as video
      Share design via code
    Audience
      Designers
      Creative coders

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Generate looping abstract background art for a website or video project.

USE CASE 2

Explore nine built-in shader styles or synthesize new looks by combining field types and color mappings.

USE CASE 3

Export a generated design as a PNG, WebM video, or GIF for use elsewhere.

USE CASE 4

Share a design with others using a compact code or link that recreates it exactly.

What is it built with?

JavaScriptWebGL2HTML

How does it compare?

leonxlnx/lumenshadersvercel/git-hooksatom/snippets
Stars203202207
LanguageJavaScriptJavaScriptJavaScript
Last pushed2021-04-102023-03-15
MaintenanceDormantDormant
Setup difficultyeasyeasyeasy
Complexity1/52/51/5
Audiencedesignerdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

Just open the HTML file in a WebGL2-capable browser, nothing to install.

So what is it?

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.

Copy-paste prompts

Prompt 1
Open LUMEN in my browser and generate a looping liquid chrome animation.
Prompt 2
Show me how to export a LUMEN design as a 4K PNG image.
Prompt 3
Explain how LUMEN's share code format encodes a design's parameters.
Prompt 4
Use LUMEN's style synthesizer to create a new look I can lock and randomize around.

Frequently asked questions

What is lumenshaders?

A single-file browser tool that generates real-time looping abstract art using WebGL2 shaders, with export to PNG, video, and GIF.

What language is lumenshaders written in?

Mainly JavaScript. The stack also includes JavaScript, WebGL2, HTML.

How hard is lumenshaders to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is lumenshaders for?

Mainly designer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.