@kawarp/core

@kawarp/core

Fluid animated background renderer using WebGL, Kawase blur, and domain warping. Creates effects similar to Apple Music's album art visualization.

Installation

npm install @kawarp/core

Usage

import { Kawarp } from '@kawarp/core';

const canvas = document.querySelector('canvas');
const kawarp = new Kawarp(canvas);

await kawarp.loadImage('path/to/image.jpg');
kawarp.start();

Options

Option	Type	Default	Description
warpIntensity	number	1.0	Warp effect strength (0-1)
blurPasses	number	8	Kawase blur passes (1-40)
animationSpeed	number	1.0	Animation speed multiplier
transitionDuration	number	1000	Crossfade duration in ms
saturation	number	1.5	Color saturation multiplier
tintColor	[r, g, b]	[0.16, 0.16, 0.24]	Tint color for dark areas (0-1)
tintIntensity	number	0.15	Tint effect strength (0-1)
dithering	number	0.008	Dithering strength (0-0.1)
scale	number	1.0	Overall zoom level of the effect (0.01-4)

Methods

• loadImage(url) - Load image from URL
• loadBlob(blob) - Load from Blob or File
• loadGradient(colors, angle?) - Load gradient as source
• start() - Start animation
• stop() - Stop animation
• resize() - Update canvas dimensions
• dispose() - Clean up WebGL resources

License

AGPL-3.0

Built by Better Lyrics