LUMEN Generative Shader Studio
Overview
LUMEN is a self-contained web tool that generates looping abstract shader art in real time using WebGL2. It ships with 9 art modes — liquid chrome, silk ribbons, soft gradient blooms, aura rings, light rays, halftone fields, data glyphs, reeded glass, and pixel mosaics — and every animation is a mathematically perfect loop. No build step, no dependencies, no npm install. Clone the repo and open index.html.
The project is built by a single developer (Leonxlnx) who clearly understands WebGL2 at a deep level. The entire application — shaders, UI, GIF encoder, WebM muxer, palette system, style synthesizer — lives in about a dozen vanilla JavaScript files. There’s no React, no Three.js, no bundler. Just raw browser APIs. That’s increasingly rare in 2026, and it’s part of what makes this project worth examining.
The core problem LUMEN solves is surprisingly common: designers and developers need abstract, looping visual assets for websites, presentations, social media, and product UIs. Stock shader art is expensive or generic. Generating it yourself requires GLSL knowledge most developers don’t have. LUMEN collapses that gap to zero — press R to randomize, tweak a few sliders, export a PNG or WebM. The style synthesizer alone can produce thousands of unique visual combinations from its 12-gene system (6 field types × 5 domain geometries × 4 color mappings × 4 shading models × 4 overlays).
Why it matters
The creative coding space has been dominated by heavyweight tools — Processing, p5.js, TouchDesigner, Shader Park — that all carry significant learning curves or dependency chains. LUMEN takes the opposite approach: maximum visual output with minimum technical barrier. You don’t need to write GLSL. You don’t need Node.js. You don’t even need to understand what a fragment shader is.
What makes this project technically interesting is the zero-dependency constraint. The GIF89a encoder uses median-cut palette quantization with ordered dithering, implemented from scratch. The WebM/Matroska muxer works with the WebCodecs VideoEncoder API — no MediaRecorder, no real-time capture, no tab crashes. The share system serializes every design parameter into a compact code (LMN1.…) that reconstructs the exact design on any device. These are non-trivial engineering problems solved with vanilla JavaScript.
For frontend developers, LUMEN is also a masterclass in WebGL2 patterns. The uber fragment shader implements all 9 art modes in a single shader program, switching between them with uniforms. The noise field is sampled along a closed circle to guarantee seamless loops. If you’ve been meaning to understand WebGL2 beyond basic Three.js tutorials, reading LUMEN’s source is a solid starting point.
Key Features
9 Art Modes with Distinct Renderers. Each mode — liquid chrome, silk ribbons, gradient blooms, aura rings, light rays, halftone fields, data glyphs, reeded glass, and pixel mosaics — has its own fragment shader logic. The modes aren’t just color variations; they use fundamentally different mathematical approaches to generate visual patterns. Liquid chrome uses ray-marched metaballs with environment mapping. Silk ribbons simulate flowing fabric with domain-warped noise. Data glyphs overlay procedural geometric patterns.
Built-In Style Synthesizer. The “New Style” button runs a 12-gene combinatorial system that generates standalone styles not present in the base set. It produces archetypes like FLUX, RIDGE, WAVE, RING, CELL, and FLOW by mixing field types, domain geometries, color mappings, shading models, and overlays. You can save favorites as browser-stored chips for one-click recall. This turns LUMEN from a preset viewer into a genuine generative system.
Dependency-Free Export Pipeline. PNG exports render offscreen at up to 3840×2160. Video exports use WebCodecs VideoEncoder with a custom WebM muxer — configurable fps (24/30/60), resolution (720p–1440p), and exact length (1–8 loops or 5–60 seconds). GIF export renders deterministically frame by frame with a built-in GIF89a encoder using median-cut palette quantization and ordered dithering. No external libraries, no server-side processing.
Shareable Design Codes. Every design serializes to a compact string (LMN1.…) that encodes style, colors, seed, and all parameters. Copy the code, send it to anyone, paste it into the Share box, and the exact design recreates on their machine. “Copy Link” generates a URL that loads the design directly. This makes LUMEN designs as shareable as Figma links.
16 Curated Palettes Plus Harmonic Generator. The palette system includes 16 hand-picked color schemes plus a harmonic palette generator that creates mathematically coherent color combinations. Each palette has 4 editable colors plus background, with hue, saturation, and exposure controls. The generator ensures that random palettes still look intentional.
Seamless Loop Guarantee. Every animation loops perfectly by construction. The noise field is sampled along a closed circle in parameter space, so the first frame and last frame are mathematically identical. No fade-outs, no crossfades, no “close enough” approximations. Set the loop length and travel distance, and you get a GIF or video that loops forever without a visible seam.
Full Keyboard and Slider Control System. Press R to randomize. Space to pause. S to save a PNG. The control panel covers form (seed, zoom, fbm detail, domain warp, turbulence, anisotropic stretch), lighting (intensity, gloss, light angle, iridescence, glow, contrast), texture (film grain, halftone density, ridge count, chromatic aberration, vignette), and motion (loop length, travel distance). Every parameter is tweakable in real time.
Use Cases
- Website hero backgrounds — Generate unique, looping abstract visuals that replace stock video backgrounds. Export as WebM for autoplay loops or optimized GIFs for email-compatible animations.
- Social media content — Create eye-catching profile banners, post backgrounds, or story visuals. The share code system means you can generate on desktop and recreate on mobile.
- Presentation slides — Export gradient sets (4–12 variations of the same style with different seeds) as ZIP files of PNGs for consistent visual themes across slide decks.
- Product UI decoration — Generate subtle background textures or animated accents for SaaS landing pages, dashboards, or app onboarding screens.
- Creative coding education — The vanilla JavaScript + WebGL2 codebase is readable enough to teach shader fundamentals without the abstraction layers of Three.js or p5.js.
- Design system assets — Use the style synthesizer to explore visual directions, then lock a style and generate variations for a cohesive brand palette.
Pros and Cons
Pros:
- Zero dependencies means zero supply chain risk, zero bundle size concerns, and zero version conflicts. Clone and run. This is the most dependency-free creative tool I’ve seen in years.
- The export pipeline is genuinely impressive — custom GIF encoder, custom WebM muxer, WebCodecs integration. These are features that paid tools charge for, implemented in vanilla JS.
- The share code system is clever engineering. A compact string encodes the entire design state, making LUMEN designs as portable as URLs.
Cons:
- 165 GitHub stars means the community is small. You won’t find Stack Overflow answers, tutorials, or plugins. If you hit a bug, you’re reading source code.
- WebGL2 browser support is universal in modern browsers, but the tool doesn’t gracefully degrade. Older devices or software renderers may struggle with the more complex art modes.
- No server-side rendering or API. You can’t programmatically generate images in a CI pipeline or backend service — it’s browser-only by design.
Getting Started
# Clone the repo
git clone https://github.com/Leonxlnx/lumenshaders.git
cd lumenshaders
# Open directly in browser (no build step)
open index.html
# Or serve locally
npx http-server . -p 8080Then visit http://localhost:8080 (or just open index.html directly). Press R to randomize a design. Tweak the sliders. Click Export to download PNG, WebM, or GIF.
To use the share system: click “Copy Link” to get a URL, or copy the share code (LMN1.…) and send it anywhere. Paste it into the Share box on any device to recreate the exact design.
Alternatives
Shader Park — A JavaScript framework for creative coding with shaders that uses a higher-level API (spheres, boxes, signed distance functions) instead of raw GLSL. More powerful for 3D work but requires npm, has a learning curve, and doesn’t include export or sharing features. Choose Shader Park if you want to write shader art programmatically.
p5.js — The Processing port for the web. Hugely popular, massive community, extensive tutorials. But p5.js is a general-purpose creative coding framework, not a shader art generator. You’d need to write significant code to replicate what LUMEN does out of the box. Choose p5.js if you want full control over every pixel and don’t mind writing the logic yourself.
Rotato / Motion Canvas — Desktop and web tools for creating animated visuals. Rotato focuses on 3D device mockups. Motion Canvas is a programmatic animation framework. Both are more opinionated and feature-rich but carry heavier dependency chains and steeper learning curves. Choose them if you need timeline-based animation control.
Verdict
LUMEN is a technically impressive project that punches well above its star count. The zero-dependency constraint forces elegant engineering — custom GIF encoder, custom WebM muxer, shareable design codes — that most developers would reach for npm packages to solve. For frontend developers who need abstract visual assets, it’s the fastest path from “I need a looping background” to a production-ready file. The 165-star community is small, but the codebase is clean enough to read and extend. If you’re building a portfolio site, a SaaS landing page, or a presentation and want something that looks expensive but costs nothing, LUMEN is worth bookmarking.