Dot Orbit

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

export default function MyComponent() {
  return (
    <DotOrbit
      colorBack="#000000"
      colors={['#ffc96b', '#ff6200', '#ff2f00', '#421100', '#1a0000']}
      size={1}
      sizeRange={0}
      spreading={1}
      stepsPerColor={4}
      speed={1.5}
      style={{ width: '100%', height: '400px' }}
    />
  );
}

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

const canvas = document.getElementById('myCanvas');
const cleanup = mountDotOrbit(canvas, {
  colorBack: '#000000',
  colors: ['#ffc96b', '#ff6200', '#ff2f00', '#421100', '#1a0000'],
  size: 1,
  sizeRange: 0,
  spreading: 1,
  stepsPerColor: 4,
  speed: 1.5,
});

// Call cleanup() when done

import { DotOrbit, bubblesPreset } from '@paper-design/shaders-react';

<DotOrbit {...bubblesPreset.params} />