open-index/open-npm huggingface dataset:
npm package: @opk/gradient-embed
Description: Embed animated gradients in your app easily.
Author: a35hie
Latest version: 1.0.0

# GradientEmbed

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

## Installation

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

## Quick start (Vite / ESM)

```ts
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 })
```

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

## Plain HTML (no bundler)

```html
<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

```ts
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()`