Warp

import { Warp } from '@paper-design/shaders-react';

export default function MyComponent() {
  return (
    <Warp
      colors={['#121212', '#9470ff', '#121212', '#8838ff']}
      proportion={0.45}
      softness={1}
      distortion={0.25}
      swirl={0.8}
      swirlIterations={10}
      shapeScale={0.1}
      shape="checks"
      speed={1}
      style={{ width: '100%', height: '400px' }}
    />
  );
}

import { mountWarp } from '@paper-design/shaders';

const canvas = document.getElementById('myCanvas');
const cleanup = mountWarp(canvas, {
  colors: ['#121212', '#9470ff', '#121212', '#8838ff'],
  proportion: 0.45,
  softness: 1,
  distortion: 0.25,
  swirl: 0.8,
  swirlIterations: 10,
  shapeScale: 0.1,
  shape: 'checks',
  speed: 1,
});

// Call cleanup() when done

import { Warp, presetInk } from '@paper-design/shaders-react';

<Warp {...presetInk.params} />