god rays
Animated rays of light radiating from a centre point — sun beams, cathedral light, nebula glow. Up to five ray colours plus a bloom overlay.
Preview
live Install
npm npm i @devmischief/shaders-svelte Code
import { GodRays } from '@devmischief/shaders-svelte';
<GodRays
width={1280}
height={720}
colors={['#ffffff', '#ffe066', '#ffba47']}
colorBack="#000000"
colorBloom="#0000ff"
bloom={0.4}
intensity={0.8}
density={0.3}
spotty={0.3}
midSize={0.2}
midIntensity={0.4}
scale={1}
rotation={0}
offsetX={0}
offsetY={-0.55}
speed={0.75}
fit="contain"
/>
Shader Props
11 | name | description | type | values |
|---|
| colors | Ray colors (up to 5). | string[] | hex / rgb |
| colorBack | Background color shown behind the rays. | string | hex / rgba |
| colorBloom | Color overlay blended with the rays. | string | hex / rgb |
| bloom | Bloom blend mode. 0 = alpha blending, 1 = additive blending. | number | 0 → 1 |
| intensity | Visibility / strength of the rays. | number | 0 → 1 |
| density | Number of rays radiating from the center. | number | 0 → 1 |
| spotty | Length of the rays. Higher = shorter, more spotty rays. | number | 0 → 1 |
| midSize | Size of the circular glow at the center. | number | 0 → 1 |
| midIntensity | Brightness of the central glow. | number | 0 → 1 |
| speed | Animation speed of the rays. | number | 0 → 3 |
| fit | How the rays world is fit into the canvas. | string | none · cover · contain |
Common Props
6 | name | description | type | values |
|---|
| originX | Reference point for positioning width in the canvas. | number | 0 → 1 |
| originY | Reference point for positioning height in the canvas. | number | 0 → 1 |
| worldWidth | Virtual width of the graphic before it's scaled to fit the canvas. | number | — |
| worldHeight | Virtual height of the graphic before it's scaled to fit the canvas. | number | — |
| minPixelRatio | Minimum pixel ratio used when rendering the shader (default 2). | number | — |
| maxPixelCount | Maximum pixel count the shader may process. | number | — |