Tiny WebGL library for procedural gradient animations. Deterministic. Seed-driven.
npm install gradient-gl
Tiny WebGL library for
Procedural Gradient Animations
Deterministic - Seed-driven
---
---
#### Easiest Usage:
One-Liner Script Tag
> SeedScript
``html`
---
`sh`
npm install gradient-gl
`javascript
import gradientGL from 'gradient-gl'
// Mounts to
// Mounts inside #app
gradientGL('a2.eba9', '#app')
// Access shader program if needed
const program = await gradientGL('a2.eba9')
`
- No selector: creates and styles a
> Styles are overridable.
`js`
export default {
build: {
target: 'esnext',
},
}
#### UNPKG
`html`
#### ESM
`html`
`html
`
{shader}.{speed}{hue}{sat}{light}
- Shader: [a-z][0-9] (e.g., a2)[0-9a-f]
- Options: (hex values)
Explore and generate seeds in the playground
Animated Gradient Background Techniques
(Slowest → Fastest)
1. SVG – CPU-only, DOM-heavy, poor scaling, high memory usageCanvas 2D
2. – CPU-only, main-thread load, imperative updatesCSS
3. – GPU-composited, limited complexity, best for staticWebGL
4. – GPU-accelerated, shader-driven, optimal balanceWebGPU` – GPU-native, most powerful, limited browser support
5.
> [!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
---