Skip to content

Shader Gradient

Source (landing): apps/landing/src/app/components/shader-gradient-background.tsx Source (admin): apps/admin/src/app/components/ShaderGradientBackground.tsx Primitives: shadergradient (Three.js-based)

Overview

ShaderGradientBackground renders an animated 3D water-plane gradient using Three.js via the shadergradient library. It includes an error boundary that falls back to a static CSS gradient if WebGL fails.

Configuration

Parameter	Value	Description
`type`	`"waterPlane"`	Shader type
`color1`	`#0d00ff`	Primary blue
`color2`	`#000000`	Black
`color3`	`#3d7ce1`	Accent blue
`uSpeed`	`0.2`	Animation speed
`uFrequency`	`5.5`	Wave frequency
`uDensity`	`1.3`	Wave density
`uAmplitude`	`1`	Wave amplitude
`frameRate`	`10`	Low frame rate for performance
`pixelDensity`	`1`	Standard resolution

Error Boundary

The component wraps the shader in a ShaderErrorBoundary (class component). If the WebGL shader crashes, it renders a static CSS fallback:

background: linear-gradient(135deg, #0d00ff 0%, #3d7ce1 50%, #000000 100%);

Positioning

Both instances use the same CSS:

position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100%;
pointer-events: none;
margin-left: calc(-50vw + 50%);

This makes the gradient bleed to the full viewport width regardless of the parent container’s constraints.

Usage

Landing — Hero Section

<div className="relative overflow-hidden">
  <ShaderGradientBackground />
  <div className="relative z-10">
    <h1>Welcome to Prosper</h1>
  </div>
</div>

<div className="absolute inset-0 overflow-hidden opacity-50">
  <ShaderGradientBackground />
</div>