https://github.com/metaory/gradient-gl
Deterministic Procedural WebGL Gradient Animations
https://github.com/metaory/gradient-gl
animation background canvas deterministic gradient procedular procedular-generation seed seed-generator shader webgl
Last synced: 3 months ago
JSON representation
Deterministic Procedural WebGL Gradient Animations
- Host: GitHub
- URL: https://github.com/metaory/gradient-gl
- Owner: metaory
- License: mit
- Created: 2025-03-28T12:46:48.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2025-06-29T11:37:32.000Z (3 months ago)
- Last Synced: 2025-06-29T11:50:37.694Z (3 months ago)
- Topics: animation, background, canvas, deterministic, gradient, procedular, procedular-generation, seed, seed-generator, shader, webgl
- Language: JavaScript
- Homepage: https://metaory.github.io/gradient-gl/
- Size: 2.33 MB
- Stars: 35
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Deterministic WebGL Gradient Animations
Playground
Tiny WebGL library for
Procedural Gradient Animations
Deterministic - Seed-driven
---
---
#### 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
import gradientGL from 'https://unpkg.com/gradient-gl'
gradientGL('a2.eba9')
```
#### ESM
```html
import gradientGL from 'https://esm.sh/gradient-gl'
gradientGL('a2.eba9')
```
### 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)