Shaders

God Rays

Installation

npm i @paper-design/shaders-react

Code

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

<GodRays
  style={{ height: 500 }}
  colorBack="hsl(0, 0%, 0%)"
  colorBloom="hsl(240, 100%, 50%)"
  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={[
    "hsla(279, 100%, 50%, 0.431)",
    "hsla(263, 100%, 50%, 0.941)",
    "hsl(0, 0%, 100%)",
    "hsl(177, 100%, 60%)"
  ]}
/>

Props

colors

Up to 5 ray colors.

colorBack

Background color.

colorBloom

Color overlay blended with the rays.

bloom

Strength of the bloom/overlay effect.

density

Frequency of rays around the circle.

intensity

Visibility/strength of the rays.

spotty

Density of spot patterns along the rays.

midSize

Size of the circular glow in the center.

midIntensity

Brightness of the central glow.

offsetX, offsetY

Position of the center.

scale

Overall pattern zoom.

rotation

Overall pattern rotation angle.

speed

Animation speed.

Description

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