LIGHT. MATH. YOUR NEXT BUILD.

Interactive shader backgrounds for websites

Striktly is a library of interactive WebGL shader backgrounds for websites. Use animated gradients, mouse-reactive particles, glass, liquid metal, ink, wireframes and organic motion in landing-page heroes, feature panels, cards, calls to action or full-page backgrounds. Customize a look in the browser, then export a shader-specific HTML, JavaScript or React kit.

This developer hub is public. You can read integration guides and shader references without an account. Sign in to a verified Striktly account to download code, export images, save configurations, or authorize the MCP connection. Complete membership access is free at launch; optional Yearly and Lifetime support plans do not unlock additional access during this offer.

Choose a background for your component

• Prism: a soft animated gradient and light sheet for a landing-page hero.
• Kinetic: a mouse-reactive dot grid for an interactive panel.
• Lava: luminous blobs that merge and separate across an organic background.
• Spectral Glass: colored glass panels and drifting highlights.
• Liquid Chrome: a flowing liquid-metal surface.
• Photon Fabric: a folded field of luminous particles.

Browse the full shader background library for presets, descriptions and supported controls. The live editor lets you preview a configuration before downloading. A static gradient or image is often sufficient when you do not need motion or interaction; WebGL is useful when those behaviors are part of the design.

Add an animated background with JavaScript

Download the Prism kit first. This example imports its local runtime and its stage CSS; it does not install a package or fetch a renderer from a CDN.

<section class="hero ambient-prism-stage">
  <div id="background" aria-hidden="true"></div>
  <h1>A different feeling.</h1>
</section>
<style>
  .hero { position: relative; isolation: isolate; min-height: 70svh; overflow: hidden; }
  #background { position: absolute; inset: 0; z-index: -1; }
  .hero h1 { position: relative; z-index: 3; padding: 3rem; }
</style>

import { createBackground, PRISM_STAGE_CSS } from './shader-background.js';

const stageStyle = document.createElement('style');
stageStyle.textContent = PRISM_STAGE_CSS;
document.head.append(stageStyle);

const background = createBackground(document.querySelector('#background'), {
  effect: 'prism',
  colors: ['#1b0b3b', '#ed72d6', '#628fff'],
  speed: 0.4,
  maxPixels: 700000,
  maxFPS: 30,
});

// When your router or component removes this view:
// background.destroy();
// stageStyle.remove();

For mouse input, configuration updates and teardown, use the JavaScript integration guide. For a component-based app, use the React background component or the Next.js client-component guide.

Integrate with your stack

• Quickstart: choose a shader and run your first export.
• JavaScript: mount, update, interact with, and destroy a background.
• React: use the component included in a downloaded kit.
• Next.js: keep WebGL rendering inside a client boundary.
• AI assistants and MCP: connect an assistant to shader search, configuration, previews and exports.
• Shader reference: browse the public catalog's descriptions, presets and controls.

What you receive

A complete shader kit contains a specialized shader-background.js, a self-contained index.html, ShaderBackground.jsx, a configured Hero.jsx, config.json, README.md, and LICENSE. A third-party notice is included only where applicable. Each runtime supports its selected shader; changing the effect ID does not load other shaders.

There is no public npm package to install for these examples. Import the files from your downloaded kit. Keep website and server credentials out of your frontend code.

Motion, performance and licensing

Give the canvas host an explicit size, keep meaningful content above the decorative background, and call destroy() when a component unmounts. Set a rendering budget, provide a pause control and respect reduced motion. See performance and accessibility and licensing before shipping an integration.

Documentation for coding assistants

The documentation index, full Markdown documentation, and public catalog are available without authentication. They describe the library and integration. Code downloads still use the normal member workflow; documentation access does not grant access to private exports or accounts.