Swirl

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

export default function MyComponent() {
  return (
    <Swirl
      colorBack="#330000"
      colors={['#ffd1d1', '#ff8a8a', '#660000']}
      bandCount={4}
      twist={0.1}
      center={0.2}
      proportion={0.5}
      softness={0}
      speed={0.32}
      style={{ width: '100%', height: '400px' }}
    />
  );
}

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

const canvas = document.getElementById('myCanvas');
const cleanup = mountSwirl(canvas, {
  colorBack: '#330000',
  colors: ['#ffd1d1', '#ff8a8a', '#660000'],
  bandCount: 4,
  twist: 0.1,
  center: 0.2,
  proportion: 0.5,
  softness: 0,
  speed: 0.32,
});

// Call cleanup() when done

import { Swirl, candyPreset } from '@paper-design/shaders-react';

<Swirl {...candyPreset.params} />