vividgl

Zero-dependency WebGL animated backgrounds for any framework.

Install

npm install vividgl

Usage

import { VividGL } from 'vividgl'

const canvas = document.getElementById('bg') as HTMLCanvasElement
const bg = new VividGL(canvas, 'contour', { scale: 3, colorActive: '#ed2ce6' })

bg.start()

// Update params at runtime
bg.setParam('scale', 5)
bg.setParams({ scale: 5, contour: 20 })

// Events
bg.on('frame', (time) => console.log(time))

// Cleanup
bg.destroy()

Built-in themes

| Name | Description | |---------------|------------------------------------| | contour | Animated noise contour lines | | flow | Fractal Brownian Motion fluid | | plasma | Classic plasma effect | | rings | Concentric animated rings | | rings3d | 3D Clifford torus (ray marching) | | sphere | Ray-marched sine-egg sphere | | planet | Ray-marched planet surface | | destruction | 4D rotating structure | | tenderness | Soft noise animation | | tunnel | Colorful fractal tunnel | | random | Random fractal kaleidoscope | | zappy | Electric zap effect |

Custom theme

VividGL.register('my-shader', {
  vertex: myVertGLSL,
  fragment: myFragGLSL,
  params: {
    speed:  { type: 'speed', default: 5, min: 0, max: 15 },
    color1: { type: 'color', default: '#ff0000' },
    invert: { type: 'bool',  default: false },
  }
})

const bg = new VividGL(canvas, 'my-shader', { color1: '#00ff00' })
bg.start()

API

new VividGL(canvas, theme, params?)

| Param | Type | Description | |----------|-----------------------|--------------------------| | canvas | HTMLCanvasElement | Target canvas element | | theme | string | Registered theme name | | params | Record<string, any> | Initial parameter values |

Instance methods

| Method | Description | |---------------------------------|--------------------------------| | start() | Start render loop | | stop() | Pause render loop | | setParam(key, value) | Update a single parameter | | setParams(values) | Update multiple parameters | | on(event, callback) | Subscribe to events | | destroy() | Stop and release GPU resources |

Static methods

| Method | Description | |---------------------------------|--------------------------| | VividGL.register(name, def) | Register a custom theme | | VividGL.themes() | List registered themes |

License

MIT