Background

A visually stunning, pure WebGL background component using 3D Simplex noise to blend four elegant colors seamlessly over time. The shader evaluates coordinates against time completely on the GPU, avoiding calculation overhead between frames in JavaScript.

Zoom0.25

Speed0.50

Installation

pnpm dlx shadcn@latest add https://ui.synergyshock.com/r/synergy/background.json

Usage

import { Background } from "@/components/ui/synergy/background"

export default function App() {
  return (
    <div style={{ width: '100vw', height: '100vh', position: 'relative' }}>
      <Background zoom={0.8} speed={0.5} className="absolute inset-0 z-0" />
      <div style={{ position: 'relative', zIndex: 10, color: 'white' }}>
        Your content goes here!
      </div>
    </div>
  )
}

Examples

Zoom Configuration

Adjust the zoom prop to scale the noise pattern. Values closer to 0 stretch the gradient gracefully (larger features), while values closer to 1 create tighter, more intricate flow patterns.

<Background zoom={0.1} />

Speed Configuration

Modify the speed prop to control how fast the flow shifts over time. A smaller number creates a subtle ambiance.

<Background speed={0.8} zoom={0.5} />

API Reference

Props

Prop	Type	Default	Description
`zoom`	`number`	`0.25`	Controls the scale of the noise pattern.
`speed`	`number`	`0.5`	Multiplier for the animation speed.
`className`	`string`	—	Custom CSS class for the canvas container.
`...props`	`CanvasHTMLAttributes`	—	Any standard HTML canvas attributes like `style`, `id`, `onClick`, etc.

Notes

The component uses raw WebGL shaders — no external dependencies or large libraries (like Three.js) are needed.

Time management, scaling, and resolution checks occur quickly in JavaScript, while math-heavy noise generation is entirely isolated on the GPU hardware.

A basic ResizeObserver pattern is utilized to re-adjust coordinates if the canvas dimensions change, maintaining a crisp aspect ratio.

The canvas automatically handles device pixel ratio for sharp rendering on high-DPI displays.

The component properly cleans up WebGL resources on unmount.