meshglow

Live demo → · npm

| | | |---|---|

Animated mesh-gradient backgrounds — the "Stripe gradient" — as a five-line npm library. Zero dependencies, WebGL2, ~6 kB gzip, TypeScript.

npm install meshglow

import { createGradient } from 'meshglow'

const g = createGradient(canvas, {
  colors: ['#5b2a86', '#ff5e8a', '#ffc55c', '#2ec4b6'],
})

That's the whole integration: give the canvas a CSS size, pass your brand colors, done.

API

createGradient(canvas, {
  colors,            // 2–8 hex colors or [r,g,b] tuples
  speed: 1,          // animation speed
  scale: 1.4,        // noise scale — higher = busier
  warp: 1.2,         // domain-warp intensity — higher = more marbled
  grain: 0.05,       // film grain (hides banding)
  contrast: 1,       // band contrast
  pointer: true,     // soft field bulge follows the cursor
  pointerStrength: 0.35,
})

g.params.speed = 0.4          // everything live-tunable
g.setColors(['#111', '#0ff']) // swap palettes at runtime
g.screenshot()                // PNG data URL
g.pause(); g.resume(); g.destroy()

Free behavior: pauses when hidden/off-viewport, respects prefers-reduced-motion (renders one static frame), handles DPR + resize + context loss, SSR-safe imports, multiple instances per page.

Framework adapters & CDN

import { GradientCanvas } from 'meshglow/react'   // React
import { GradientCanvas } from 'meshglow/vue'     // Vue 3 (:options + @ready)
import { gradient } from 'meshglow/svelte'        // Svelte: <canvas use:gradient={{ colors, onReady }} />

<script src="https://unpkg.com/meshglow/dist/meshglow.iife.js"></script>
<script> meshglow.createGradient(canvas, { colors: ['#5b2a86', '#ff5e8a'] }) </script>

Develop

npm install && npm run dev   # demo with palette switcher
npm test                     # host-side unit tests

MIT · by Diluk Angelo · sibling of fluidkit