01 / THE SHADER LIBRARY
FIND YOUR
NEXT SIGNAL.
Quiet light. Beautiful chaos.
Interactive shader backgrounds. Unlimited directions.
New drops every month.
Interactive shader backgrounds for websites
Explore animated gradients, particles, glass, liquid metal, ink and wireframe effects. Preview a look, tune its colors and motion, and bring it into a hero, feature panel, card or full-page background.
Start with Prism for a soft gradient or Kinetic for a mouse-reactive dot grid. Use the JavaScript, React or Next.js integration guides to add the downloaded kit to your project.
THE SHADER LIBRARY
Find your next feeling.
No shaders found. Try another mood or collection.
Using shader backgrounds
How do I add a shader background to my website?
Choose a shader and customize it in the editor. Select Take the code and sign in to download the configured kit. It includes a self-contained HTML example, a JavaScript runtime and React components. Follow the quickstart to mount a background with an explicit size and clean it up when the page changes.
Can I use these backgrounds in React or Next.js?
Yes. Use the exported ShaderBackground component in React, or a client component in Next.js. The selected shader runs locally in the visitor's browser. Your project does not need Striktly account or billing code. See the React and Next.js examples.
How do I keep animation comfortable on mobile?
Set a pixel budget, measure the finished page on target devices, provide a pause control and respect reduced motion. Complex scenes and multiple simultaneous canvases cost more. Use a static color or image fallback where needed. The performance guide explains these choices.