Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/paper-design/shaders/llms.txt

Use this file to discover all available pages before exploring further.

Animated rays of light radiate outward from a central point, with each color layer independently rotated to build depth. A central glow shape adds a focal bloom, and a bloom/overlay color composites additively over the rays. Great for dramatic backgrounds, logo reveals, and VFX like energy bursts or sun shafts.

​
Usage

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

export default function Example() {
  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}
      offsetY={-0.55}
      style={{ width: '100%', height: '100%' }}
    />
  );
}

​
Props

​
colorBack
string
default:"#000000"
Background color behind the rays.
​
colorBloom
string
default:"#0000ff"
Overlay color blended additively with the rays when bloom is greater than 0.
​
colors
string[]
Array of up to 5 ray colors. Each color is applied to an independent ray layer.
​
density
number
default:"0.3"
Number/density of rays. Range: 0 to 1.
​
spotty
number
default:"0.3"
Length of the rays. Higher values produce shorter, more spot-like rays. Range: 0 to 1.
​
intensity
number
default:"0.8"
Visibility/brightness of the rays. Range: 0 to 1.
​
midSize
number
default:"0.2"
Size of the circular glow at the center. Range: 0 to 1.
​
midIntensity
number
default:"0.4"
Brightness of the central glow. Range: 0 to 1.
​
bloom
number
default:"0.4"
Blend between alpha compositing (0) and additive blending (1) for the ray colors. Range: 0 to 1.
​
speed
number
default:"0.75"
Animation speed multiplier. Set to 0 to pause.
​
frame
number
default:"0"
Static frame position when speed is 0.

​
Presets

NameDescription
DefaultPurple and cyan rays from below center
WarpPink and orange rays with blue bloom
LinearSubtle white rays from upper right
EtherSparse, spotty blue rays on dark background

​
Sizing

This shader uses ShaderSizingParams. See Sizing and fit for fit, scale, rotation, offsetX, offsetY, originX, originY, worldWidth, and worldHeight props.