Create Amazing Gradients Using WebGL

High-performance React component for animated WebGL gradient backgrounds with real-time customization.

WebGL-Powered Gradient Backgrounds

High-performance, fully customizable animated gradients for modern web applications

High Performance

Hardware-accelerated WebGL rendering with optimized shaders for smooth 60fps animations

Fully Customizable

7 gradient types with real-time color, speed, scale, and noise controls

Easy Integration

Drop-in React component with TypeScript support and zero configuration

Installation

Get started in seconds. Install the package via npm.

Install Package

npm install gradflow

Import & Use

Import the component and start using it right away

import { GradFlow } from 'gradflow'

function App() {
  return (
    <div className="relative h-screen">
      <GradFlow />
      {/* Your content here */}
    </div>
  )
}

Usage Examples

Customize colors, animation speed, scale, and noise settings to create unique gradient backgrounds.

With Custom Colors

Use RGB objects or hex strings

import { GradFlow } from 'gradflow'

<GradFlow
  config={{
    color1: '#e2624b',
    color2: '#ffffff',
    color3: '#1e229f',
    speed: 0.4,
    scale: 1,
    type: 'stripe',
  }}
/>

Using Presets

Choose from 8 built-in gradient presets

import { GradFlow, PRESETS } from 'gradflow'

<GradFlow config={PRESETS.cosmic} />

// Available presets:
// cosmic, matrix, electric, inferno, mystic, cyber, neon, plasma

Random Gradients

Generate random colors for unique gradients

import { GradFlow, generateRandomColors } from 'gradflow'

const [colors, setColors] = useState(generateRandomColors())

<GradFlow config={colors} />
<button onClick={() => setColors(generateRandomColors())}>
  Randomize
</button>

Configuration

All available configuration options for the GradFlow component

Property	Type	Default	Description
`color1`	`string \| RGB`	`{r:226,g:98,b:75}`	First gradient color (hex or RGB)
`color2`	`string \| RGB`	`{r:255,g:255,b:255}`	Second gradient color (hex or RGB)
`color3`	`string \| RGB`	`{r:30,g:34,b:159}`	Third gradient color (hex or RGB)
`speed`	`number`	`0.4`	Animation speed (0.1 - 3.0)
`scale`	`number`	`1`	Pattern scale (0.5 - 3.0)
`type`	`string`	`'stripe'`	Gradient pattern type linearanimatedconicwavesilksmokestripe
`noise`	`number`	`0.08`	Noise intensity (0 - 0.5)