A library for adding a shader wallpaper to the background of your website or any of your divs.
You can find a live example here and you can find the code in the example/ folder.
Include shadify in your project.
<script type="text/javascript" src="https://unpkg.com/[email protected]/lib/Shadify.js"></script>To add a shader to the background or any other div add data-shader with a link to a glslsandbox.com shader or to your own shader source file.
<body data-shader="https://glslsandbox.com/e#106611.0">
...
</body>Additionally you can set data-shader-speed (1.0 default) and data-shader-quality (2.0 default) settings. Here an example with the same shader
but at twice the speed and a quarter the quality.
<div data-shader="https://glslsandbox.com/e#106611.0" data-shader-speed="2.0" data-shader-quality="4.0">
....
</div>- Shaders can directly be loaded from glslsandbox.com
- Support for setting shader quality and speed
- Supports mouse input
- Attributes can be changed using JavaScript at runtime
- Access the shader uniforms using
myDiv.shadify.getUniform(name)
- Support links from
shadertoy.com - Improved README.md
- Documentation
- Reuse same shaders
Run following commands to build this library yourself. You will find the output at dist/.
git clone https://github.com/danielfvm/Shadify.git
cd Shadify
npm install
npm run build