GradientEmbed

Embeddable WebGL gradient renderer with a typed configuration and JSON schema.

Installation

bun add @opk/gradient-embed
# or
opk add @opk/gradient-embed

Quick start (Vite / ESM)

import {
  createGradientEmbed,
  defaultGradientEmbedConfig,
} from '@opk/gradient-embed'

const embed = createGradientEmbed({
  canvas: 'gradient-canvas',
  dpr: 1,
  config: {
    ...defaultGradientEmbedConfig,
    movementMode: 2,
    gradientColors: ['#ff0080', '#00d4ff'],
  },
})

// Optional updates
embed.updateConfig({ hue: 120, contrast: 1.1 })

<canvas id="gradient-canvas" style="width: 800px; height: 450px;"></canvas>

Plain HTML (no bundler)

<canvas id="gradient"></canvas>
<script type="module">
  import { createGradientEmbed } from 'https://unpkg.com/@opk/gradient-embed@1/dist/index.js'

  createGradientEmbed({
    canvas: 'gradient',
    config: { gradientColors: ['#0ff', '#f0f'] },
  })
</script>

Configuration schema

import { gradientEmbedConfigSchema } from '@opk/gradient-embed'

gradientColors expects #RRGGBB strings. Set loopDuration (seconds) to loop the animation; use 0 for no loop.

Performance tip: if the canvas is large, set dpr: 1 (or lower) to avoid per-frame readback overhead.

API

createGradientEmbed(options) returns a GradientEmbed instance with:

• start() / stop()
• setPaused(boolean)
• updateConfig(partialConfig)
• resize(width?, height?)
• destroy()