Beams

3D animated light beams with noise distortion and customizable properties.

Configuring your account...

Please wait while we prepare everything for you

Usage

import Beams from './Beams';

<div style={{ width: '100%', height: '600px', position: 'relative' }}>
  <Beams
    beamWidth={2}
    beamHeight={15}
    beamNumber={12}
    lightColor="#ffffff"
    speed={2}
    noiseIntensity={1.75}
    scale={0.2}
    rotation={0}
  />
</div>

Props

PropTypeDefaultDescription
beamWidthnumber2Width of beams
beamHeightnumber15Height of beams
beamNumbernumber12Number of beams
lightColorstring"#ffffff"Light color
speednumber2Animation speed
noiseIntensitynumber1.75Noise intensity
scalenumber0.2Noise scale
rotationnumber0Rotation angle