@uigrids/shaders

Animated WebGL shader backgrounds for React. Zero dependencies, one tiny runtime (~3 KB), no build step. Live gallery + editor: https://www.uigrids.com/tools/shaders

npm install @uigrids/shaders

import { MeshGradient } from '@uigrids/shaders'

export default function Hero() {
  return (
    <div style={{ position: 'relative', height: 480 }}>
      <MeshGradient
        colors={['#5b3df5', '#e94ca0', '#1e2a78', '#ff8a4c']}
        speed={1}
        style={{ position: 'absolute', inset: 0 }}
      />
      {/* your content */}
    </div>
  )
}

Components

MeshGradient · Waves · Aurora · GrainGradient · DitherGradient · Orbs

Every component fills its parent - give the container a size and (usually) position: relative.

Props

| Prop | Type | Default | Description | |---|---|---|---| | colors | string[] | per shader | Up to 4 hex colors | | speed | number | 1 | Animation speed multiplier | | scale | number | 1 | Pattern scale | | seed | number | 0 | Variation seed | | intensity | number | 1 | Effect strength (glow/grain/bands) | | paused | boolean | false | Render a single static frame | | className / style | | | Passed to the canvas |

Behavior

• WebGL1, single fullscreen triangle, DPR capped at 2.
• Pauses automatically when scrolled offscreen.
• prefers-reduced-motion: reduce renders one static frame (no loop).
• Cleans up its GL context on unmount.

License

MIT