God Rays

Installation

npm i @paper-design/shaders-react

Code

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

<GodRays
  style={{ height: 500 }}
  colorBack="#000000"
  colorBloom="#0000ff"
  bloom={0.4}
  intensity={0.8}
  density={0.3}
  spotty={0.3}
  midSize={0.2}
  midIntensity={0.4}
  offsetX={0}
  offsetY={-0.55}
  scale={1}
  rotation={0}
  speed={0.75}
  colors={["#cc3333","#cc9933","#99cc33","#33cc33"]}
/>

Props

NameDescriptionTypeValues
colorsUp to 5 ray colorsstring[]Hex, RGB, or HSL color
colorBackBackground colorstringHex, RGB, or HSL color
colorBloomColor overlay blended with the raysstringHex, RGB, or HSL color
bloomStrength of the bloom/overlay effectnumber0 to 1
intensityVisibility/strength of the raysnumber0 to 1
densityThe number of raysnumber0 to 1
spottyThe length of the raysnumber0 to 1
midSizeSize of the circular glow shape in the centernumber0 to 1
midIntensityBrightness/intensity of the central glownumber0 to 1
offsetXHorizontal offset of the graphics centernumber-1 to 1
offsetYVertical offset of the graphics centernumber-1 to 1
scaleOverall zoom level of the graphicsnumber0.01 to 4
rotationOverall rotation angle of the graphicsnumber0 to 360
speedAnimation speednumber0 to 2

Description

Animated rays of light radiating from the center, blended with up to 5 colors. The rays are adjustable by size, density, brightness and center glow. Great for dramatic backgrounds, logo reveals, and VFX like energy bursts or sun shafts