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

• @kawarp/core - Pure TypeScript WebGL renderer
• @kawarp/react - React component wrapper

npm install @kawarp/core
# or
npm install @kawarp/react

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

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

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

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

function App() {
  return (
    <Kawarp
      src="/image.jpg"
      warpIntensity={0.8}
      style={{ width: '100%', height: '100vh' }}
    />
  );
}

• 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

pnpm install
pnpm dev

The technique of combining Kawase blur on downscaled textures with domain warping for fluid distortion is based on this article on Diffuse by Justin Zhang.

AGPL-3.0