defuss-shadcn / Shaders / shaders
Shaders
Forty-four animated surfaces and room for your own - click one to open it large with its controls. Each is one element - <div class="shader" data-effect="aurora"> - that the Shader component draws on the GPU: as a tile, behind a section, as a glow around a card or over a picture. The effects are grouped by what they do: gradients and noise, light and glow, liquid and glass, patterns and trails, nature and space, 3D scenes, the tiled infinite surfaces - and custom shaders in GLSL.
On this page (3)
§Every effect
44 shaders, four at a time (two on a phone) - the arrows (or the arrow keys) page through them; only the ones in view draw. Click one to open it large below with its controls.
§One context for the page
Chromium keeps sixteen WebGL contexts alive per page and drops the oldest beyond that - a gallery with one context per tile goes blank from the top. Here every shader on the page shares ONE WebGL2 context: it renders an instance's frame, copies it into that instance's own 2D canvas and moves on. A program compiles once per page, each shader stays an ordinary element in the layout, and an instance draws only while it is in the viewport and the tab shows. With nothing in view for a while the context is released; every canvas keeps its last frame.
flowchart LR
Loop["requestAnimationFrame<br/>one loop for the page"] --> Pick["instances in the viewport,<br/>clock running or redraw asked"]
Pick --> GL["shared WebGL2 context<br/>the effect's program, one pass"]
GL --> Copy["drawImage into the<br/>instance's 2D canvas"]
Copy --> Pick§Built in
The colors come from the theme unless you name them, so an effect changes with the theme and dark mode. Reduced motion shows one still frame; forced colors and prefers-contrast: more give way to the system colors and keep moving pictures from behind text; without WebGL2 or without script the element shows its CSS poster. The component ships in its own bundle, shaders.css and shaders.js, loaded after all.css and all.js (or the core files) - a page without a shader never loads its GLSL. Every effect is written for this system, with no third-party shader code.
Comments, ideas or improvements? Edit this page's source on GitHub