God Rays

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

export default function MyComponent() {
  return (
    <GodRays
      colorBack="#000000"
      colorBloom="#0000ff"
      colors={['#a600ff6e', '#6200fff0', '#ffffff', '#33fff5']}
      density={0.3}
      spotty={0.3}
      midIntensity={0.4}
      midSize={0.2}
      intensity={0.8}
      bloom={0.4}
      speed={0.75}
      style={{ width: '100%', height: '400px' }}
    />
  );
}

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

const canvas = document.getElementById('myCanvas');
const cleanup = mountGodRays(canvas, {
  colorBack: '#000000',
  colorBloom: '#0000ff',
  colors: ['#a600ff6e', '#6200fff0', '#ffffff', '#33fff5'],
  density: 0.3,
  spotty: 0.3,
  midIntensity: 0.4,
  midSize: 0.2,
  intensity: 0.8,
  bloom: 0.4,
  speed: 0.75,
});

// Call cleanup() when done

import { GodRays, warpPreset } from '@paper-design/shaders-react';

<GodRays {...warpPreset.params} />