God Rays
Installation
npm i @paper-design/shaders-react
Code
import { GodRays } from '@paper-design/shaders-react';
<GodRays
height={500}
colors={["#cc3333", "#cc9933", "#99cc33", "#33cc33"]}
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}
/>
Props
| Name | Description | Type | Values |
|---|---|---|---|
| colors | Up to 5 ray colors | string[] | Hex, RGB, or HSL color |
| colorBack | Background color | string | Hex, RGB, or HSL color |
| colorBloom | Color overlay blended with the rays | string | Hex, RGB, or HSL color |
| bloom | Strength of the bloom/overlay effect | number | 0 to 1 |
| intensity | Visibility/strength of the rays | number | 0 to 1 |
| density | The number of rays | number | 0 to 1 |
| spotty | The length of the rays | number | 0 to 1 |
| midSize | Size of the circular glow shape in the center | number | 0 to 1 |
| midIntensity | Brightness/intensity of the central glow | number | 0 to 1 |
| offsetX | Horizontal offset of the graphics center | number | -1 to 1 |
| offsetY | Vertical offset of the graphics center | number | -1 to 1 |
| width | CSS width style of the shader element | number | string | — |
| height | CSS height style of the shader element | number | string | — |
| scale | Overall zoom level of the graphics | number | 0.01 to 4 |
| rotation | Overall rotation angle of the graphics | number | 0 to 360 |
| speed | Animation speed | number | 0 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.