gradient-gl

Deterministic WebGL Gradient Animations

Playground

Tiny WebGL library for
Procedural Gradient Animations
Deterministic - Seed-driven

Usage Examples

Vanilla • React • Vue
check ./examples

Usage

npm install gradient-gl

import gradientGL from 'gradient-gl'

// Required seed argument
gradientGL('a2.eba9')

// Optional canvas target (default: 'body')
//  uses existing canvas if found,
//   otherwise creates new one in target
gradientGL('a2.eba9', '#app')

// Optionally to use the shader program
const program = await gradientGL('a2.eba9')

Vite Configuration

export default {
  build: {
    target: 'esnext',
  },
}

CDN

Unpkg

<script type="module">
    import gradientGL from 'https://unpkg.com/gradient-gl'
    gradientGL('a2.eba9')
</script>

ESM

<script type="module">
    import gradientGL from 'https://esm.sh/gradient-gl'
    gradientGL('a2.eba9')
</script>

 <!-- 🚧 not implemented -->
 <script src=xxx@latest/seed/a2.eba9"></script>

Seed Format

{shader}.{speed}{hue}{sat}{light}

• Shader: [a-z][0-9] (e.g., a2)
• Options: [0-9a-f] (hex values)

Explore and generate seeds in the playground

Performance

Animated Gradient Background Techniques

(Slowest → Fastest)

• SVG – CPU-only, DOM-heavy, poor scaling, high memory usage
• Canvas 2D – CPU-only, main-thread load, imperative updates
• CSS – GPU-composited, limited complexity, best for static
• WebGL – GPU-accelerated, shader-driven, optimal balance
• WebGPU – GPU-native, most powerful, limited browser support

[!NOTE] While WebGPU is technically the fastest, WebGL remains the best choice for animated gradients due to its maturity, broad support, and optimal performance/complexity ratio.

TODO: Interactive benchmark app

License

MIT