I want this magic on my website!

And you can have it! The shader-web-background open source project is here for you to provide an immersive experience on the web.

Buy me a tea or sponsor xemantic on GitHub, If you enjoy interacting with this creature behind.

If you are familiar with web development, then you can just use shader-web-background as a library. Otherwise don't worry — xemantic can make this magic happen for you with custom shaders and generative artwork tailored to your needs.

It's not just an effect, but rather a generative creature which emerged out of my Kabbalistic meditation with numbers, coefficients of life and beauty, the phenomenon of autopoiesis — the capacity of a system to reproduce and maintain itself. Therefore it's highly conceptual experience prepared to be displayed on the web, but far away from typical net art aesthetics. Interactive feedback loop of video synthesis merged with generative design bring synaesthetic pixel–perfect experience and naturally perceived fluidity of mesmerizing motion. Evolution of negentropic homeostasis emerges new artificial life forms of light. I believe that mapping natural light dispersion spectrum to RGB values can evoke special emotions. Check out my article — Not so discreet charm of machine colors.

What makes this magic?

If you are here, probably you have already learned about shaders. This is the technology rendering in real time the background behind this text. The shader-web-background makes it easy to include complex, interactive and portable shaders as a part of your web design.

The documentation on project's GitHub repository will guide you. Take a look at Demo section to see what's possible.


Why is it fast?

This website starts in milliseconds because there are no additional resources to be loaded — no extra code, no images. All the artwork and style is provided in the source code of this HTML page.

The shader will run on the GPU, not CPU, and modern devices, including our mobiles, already have one. Surprisingly rich visual effects can be achieved with very efficient code.

Real time interactive shader offers a different perspective on compression — pure mathematics has orders of magnitude higher compression rate comparing to MPEG video. In contrary to video–loops, generatively synthesized video signal can be also interactive and it has no artifacts rather letting one perceive the maximal quality of the display device.


Examples and use cases, including custom shaders prepared for those of you who Buy me a tea :

Missing your favorite shader? - create pull request and add it to this list. The best way to learn how shader-web-background works.

Projects using shader-web-background

If you want to add your project to the list, then create a pull request, or send a message to xemantic.


This project is not focused on providing complete abstraction over WebGL, but rather on providing the experience — high quality visuals as a part of web design, which will work wherever it is technically possible.

I designed and coded shader-web-background because all the other projects doing similar things have slightly different focus, therefore it was neither possible to achieve the aesthetics I desire, nor to make it work consistently on platforms like iOS. It is worth mentioning these projects here because, they brought the inspiration and they might be still more useful for your purposes:


The shader-web-background is released under GNU General Public License version 3 which makes it suitable for Open Source and personal projects. I would like to provide separate commercial license similar to the one offered by Flickity project.

This software is open and free. Buy me a tea (I don't like coffee) or sponsor xemantic on GitHub, if you want to express your support.