demo

Deterministic WebGL Gradient Animations

Playground

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

---
Usage Examples
CDN • Vanilla • React • Vue
source in ./examples

🖼️ Showcase Gallery 🌀

Share your seeds & creations!
--- #### Easiest Usage: One-Liner Script Tag > `SeedScript` ```html ``` > [read more](#seedscript-usage) --- ## Usage ```sh npm install gradient-gl ``` ```javascript import gradientGL from 'gradient-gl' // Mounts to gradientGL('a2.eba9') // Mounts inside #app gradientGL('a2.eba9', '#app') // Access shader program if needed const program = await gradientGL('a2.eba9') ``` ### Mounting Behavior - **No selector**: creates and styles a `` in `` - **Selector to an element**: creates and styles a `` inside it - **Selector to a ``**: uses it directly, no styles or DOM changes > Styles are overridable. ### Vite Configuration ```js export default { build: { target: 'esnext', }, } ``` ### CDN #### UNPKG ```html ``` #### ESM ```html ``` ### SeedScript Usage ```html ``` ## 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) 1. `SVG` – CPU-only, DOM-heavy, poor scaling, high memory usage 2. `Canvas 2D` – CPU-only, main-thread load, imperative updates 3. `CSS` – GPU-composited, limited complexity, best for static 4. `WebGL` – GPU-accelerated, shader-driven, optimal balance 5. `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](LICENSE)