LIGHT. MATH. YOUR NEXT BUILD.

Interactive shader backgrounds with JavaScript

Use shader-background.js from a downloaded Striktly kit. These examples do not refer to a hosted SDK or an npm dependency.

Mount a background

<section class="hero">
  <div id="background" aria-hidden="true"></div>
  <h1>Make the web feel something.</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; padding: 3rem; }
</style>

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

// Copy this configuration from the config.json in your selected shader kit.
const config = {
  effect: 'prism',
  colors: ['#1b0b3b', '#ed72d6', '#628fff'],
  maxPixels: 700000,
  maxFPS: 30,
  globalPointer: false,
};
const hero = document.querySelector('.hero');
const background = createBackground(document.querySelector('#background'), config);

function move(event) { background.setPointer(event.clientX, event.clientY); }
function leave() { background.resetPointer(); }
hero.addEventListener('pointermove', move);
hero.addEventListener('pointerleave', leave);

function dispose() {
  hero.removeEventListener('pointermove', move);
  hero.removeEventListener('pointerleave', leave);
  background.destroy();
}
// Call dispose() when your router or component removes this view.

The exported index.html includes the selected shader's configured interaction wiring. Use that example when your shader needs specialized gestures, such as Logo Lab's drag-to-rotate interaction.

Update settings

background.update({ speed: 0.25, cameraZoom: 1.2 });
background.update({ paused: true });
background.update({ paused: false });

Use only settings supported by the selected shader. Read its reference page or the current MCP get_shader result before generating a configuration. The runtime is specialized to the exported shader; changing an effect ID is not a way to load the rest of the library.

Clicks and cleanup

Where supported, background.pulse(clientX, clientY) triggers the shader's click interaction. Avoid consuming clicks intended for links, buttons, or inputs. Always call destroy() after use; removing a canvas element alone is not a lifecycle cleanup.

For a first implementation, start with the exported example rather than recreating all interaction handlers. Keep its applicable license, notices, and attribution comment.