Theme

God Rays

Free

Animated rays of light that radiate from a glowing core, with controls for ray colors, density, length, bloom, and core glow. Adapted from God Rays by Paper Shaders (shaders.paper.design) under the Apache 2.0 license.

Loading code...

Starwind Dependencies

This component requires Starwind Pro.

Get lifetime access to all premium components, updates, and priority support.

Upgrade to Pro

Failed to load code. Please try again.

Customize

Controls

Ray 1

Ray 2

Ray 3

Ray 4

Ray 5

Background

Bloom tint

Ray colors4

Ray 1 opacity0.43

Ray 2 opacity0.94

Ray 3 opacity1

Ray 4 opacity1

Ray 5 opacity0.43

Bloom0.4

Core glow0.4

Core size0.2

Ray breakup0.3

Ray density0.3

Ray strength0.8

Speed0.75

Scale1

Rotation0

Offset X0

Offset Y-0.55

Code

Usage

<ShaderGodRays
  rayColor1="#a600ff"
  rayColor2="#6200ff"
  rayColor3="#ffffff"
  rayColor4="#33fff5"
  rayColor5="#a600ff"
  backgroundColor="#000000"
  bloomColor="#0000ff"
  rayColorCount={4}
  rayOpacity1={0.43}
  rayOpacity2={0.94}
  rayOpacity3={1}
  rayOpacity4={1}
  rayOpacity5={0.43}
  bloomStrength={0.4}
  coreGlow={0.4}
  coreSize={0.2}
  rayBreakup={0.3}
  rayDensity={0.3}
  rayStrength={0.8}
  raySpeed={0.75}
  graphicScale={1}
  graphicRotation={0}
  graphicOffsetX={0}
  graphicOffsetY={-0.55}
/>

Props

prop	type	default	description
`rayColorCount`	`number`	`4`	Number of active ray colors, from 1 to 5.
`rayColor1`	`string`	`#a600ff`	Ray color 1 as a CSS color.
`rayOpacity1`	`number`	`0.43`	Opacity of ray color 1, from 0 to 1.
`rayColor2`	`string`	`#6200ff`	Ray color 2 as a CSS color.
`rayOpacity2`	`number`	`0.94`	Opacity of ray color 2, from 0 to 1.
`rayColor3`	`string`	`#ffffff`	Ray color 3 as a CSS color.
`rayOpacity3`	`number`	`1`	Opacity of ray color 3, from 0 to 1.
`rayColor4`	`string`	`#33fff5`	Ray color 4 as a CSS color.
`rayOpacity4`	`number`	`1`	Opacity of ray color 4, from 0 to 1.
`rayColor5`	`string`	`#a600ff`	Ray color 5 as a CSS color.
`rayOpacity5`	`number`	`0.43`	Opacity of ray color 5, from 0 to 1.
`backgroundColor`	`string`	`#000000`	Background color behind the rays. Accepts any CSS color.
`bloomColor`	`string`	`#0000ff`	Tint blended into the rays when bloom is above 0. Accepts any CSS color.
`bloomStrength`	`number`	`0.4`	Blend between alpha and additive ray mixing. Range 0 to 1.
`rayStrength`	`number`	`0.8`	Visibility of the rays. Range 0 to 1.
`rayDensity`	`number`	`0.3`	Number of rays. Range 0 to 1.
`rayBreakup`	`number`	`0.3`	Higher values break the rays into shorter spots. Range 0 to 1.
`coreSize`	`number`	`0.2`	Size of the glowing core. Range 0 to 1.
`coreGlow`	`number`	`0.4`	Brightness of the glowing core. Range 0 to 1.
`raySpeed`	`number`	`0.75`	Animation speed. 0 stops the animation. Range 0 to 2.
`graphicScale`	`number`	`1`	Overall zoom level of the graphic.
`graphicRotation`	`number`	`0`	Rotation of the graphic in degrees.
`graphicOffsetX`	`number`	`0`	Horizontal offset of the graphic center.
`graphicOffsetY`	`number`	`-0.55`	Vertical offset of the graphic center.
`graphicFit`	`"none" \| "contain" \| "cover"`	`contain`	How the graphic fits the canvas.
`opacity`	`number`	`1`	Sets the overall opacity of the shader background wrapper.
`maxDpr`	`number`	`1.5`	Caps device pixel ratio for sharper output without runaway GPU cost.
`maxFps`	`30 \| 45 \| 60`	`60`	Caps the animation frame rate for performance-sensitive pages.