Pulsing Border

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

export default function MyComponent() {
  return (
    <PulsingBorder
      colorBack="#000000"
      colors={['#0dc1fd', '#d915ef', '#ff3f2ecc']}
      roundness={0.25}
      thickness={0.1}
      margin={0}
      softness={0.75}
      intensity={0.2}
      bloom={0.25}
      spots={5}
      spotSize={0.5}
      pulse={0.25}
      smoke={0.3}
      smokeSize={0.6}
      speed={1}
      style={{ width: '100%', height: '400px' }}
    />
  );
}

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

const canvas = document.getElementById('myCanvas');
const cleanup = mountPulsingBorder(canvas, {
  colorBack: '#000000',
  colors: ['#0dc1fd', '#d915ef', '#ff3f2ecc'],
  roundness: 0.25,
  thickness: 0.1,
  margin: 0,
  softness: 0.75,
  intensity: 0.2,
  bloom: 0.25,
  spots: 5,
  spotSize: 0.5,
  pulse: 0.25,
  smoke: 0.3,
  smokeSize: 0.6,
  speed: 1,
});

// Call cleanup() when done

import { PulsingBorder, circlePreset } from '@paper-design/shaders-react';

<PulsingBorder {...circlePreset.params} />