LIGHT. MATH. YOUR NEXT BUILD.

Interactive shader backgrounds for React

Download a kit, then place ShaderBackground.jsx and shader-background.js next to each other in your React project. The kit also provides a configured Hero.jsx; using that component preserves any shader-specific stage CSS in the exported example.

Use the included component

import ShaderBackground from './ShaderBackground.jsx';

// Use the exported config.json for your chosen shader.
const config = {
  effect: 'prism',
  colors: ['#1b0b3b', '#ed72d6', '#628fff'],
  maxPixels: 700000,
  maxFPS: 30,
};

export default function LandingHero() {
  return (
    <ShaderBackground
      config={config}
      style={{ minHeight: '70svh', display: 'grid', placeItems: 'center' }}
    >
      <h1 style={{ position: 'relative', zIndex: 3 }}>
        A different feeling.
      </h1>
    </ShaderBackground>
  );
}

ShaderBackground accepts config, children, style, and className. It creates the renderer in an effect, updates it when configuration changes, forwards supported pointer interactions, and calls destroy() on unmount. React 18 or later is a peer requirement.

Change settings with state

import { useState } from 'react';
import ShaderBackground from './ShaderBackground.jsx';

const initial = { effect: 'prism', maxPixels: 700000, maxFPS: 30 };

export function AdjustableBackground() {
  const [config, setConfig] = useState(initial);
  return (
    <ShaderBackground config={config} style={{ minHeight: 420 }}>
      <button onClick={() => setConfig(current => ({ ...current, paused: !current.paused }))}>
        Pause / resume background
      </button>
    </ShaderBackground>
  );
}

Use a stable component key while adjusting one shader. To replace it with a different exported shader module, mount the corresponding component rather than changing only the effect ID.

Server-rendered applications

WebGL needs a browser. For Next.js, use a client boundary and the Next.js guide. Keep a CSS background or poster as a useful fallback while the canvas initializes.