LIGHT. MATH. YOUR NEXT BUILD.
Add an interactive WebGL background to your website
1. Find a starting point
Open the shader library, choose a shader, and adjust its palette, motion, and camera. The website's public editor controls are available before sign-in; additional controls follow the current account access rules. Preview the configured shader in the inline showcase to see examples of real components.
2. Download a kit
Choose Take the code, sign in or create your free launch account, and download the complete kit. Verify your email if prompted. No payment is required for launch membership. Use the configuration included in the kit as your starting point.
3. Run the HTML example
Open the exported index.html. It contains a self-contained configured example. This is the quickest way to check the appearance before integrating it with your application.
4. Integrate with your stack
For a JavaScript app, copy shader-background.js and use createBackground. For React, copy the included ShaderBackground.jsx and Hero.jsx alongside that runtime. The React wrapper expects React 18 or later; React is not bundled into the downloaded shader.
import { createBackground } from './shader-background.js';
const host = document.querySelector('#background');
const background = createBackground(host, {
// Replace this object with the settings from your kit's config.json.
effect: 'prism',
colors: ['#1b0b3b', '#ed72d6', '#628fff'],
maxPixels: 700000,
maxFPS: 30,
});
// Release GPU and event resources when this view is removed.
// background.destroy();The host needs dimensions. A zero-height container will not produce a useful preview. Preserve the kit's stage CSS when the exported example includes it.