# God Rays

Aperveil / Light, shaped for the web.

A fixed light source with a pointer-controlled glass lens. Explore God Rays' refracted beam effect and export the WebGPU background for React.

[Aperveil integration guide](https://www.aperveil.com/docs)

## What it does

God Rays draws shafts from a fixed source. A cursor-centered lens refracts a limited fan of analytic rays through two interfaces, changing the light distribution beyond the lens.

## Choose it for

Make an opening statement for a cinematic portfolio. Leave the light source visible and place the heading toward the calmer edge; invite visitors to move through the beams.

## Limits

This is screen-space geometric optics, not a volumetric path tracer. It does not illuminate other page elements or move the light source with the pointer.

## Current look

Default. Color Looks change colors only; motion, geometry and typography remain unchanged.

[Open editor](https://www.aperveil.com/shaders/god-rays/edit?look=default&scene=landing)

## Landing scene

This preview uses `center`: [1,0]. The editor link carries these settings with your Look. Direct editor visits use the product defaults; Reset all restores those defaults.

## Install

Download the Export Kit from the editor. No shader-specific npm package or CLI is published yet.

```sh
npm install ./vendor/aperveil-runtime-0.1.0.tgz ./vendor/aperveil-react-0.1.0.tgz
```

Every control in the editor is a typed prop. Leave a prop out to keep the value you exported; change one and the running shader updates without restarting. Give the surface a size and pass fallback for browsers without WebGPU.

```tsx
"use client";

import GodRays from "./GodRays";

export default function Hero() {
  return (
    <GodRays
      className="hero-shader"
      refraction={0.55} airColor="#080d17ff"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

// .hero-shader { width: 100%; height: 560px; }
```

Component props: `airColor`, `warmColor`, `paleColor`, `center`, `refraction`, `lensRadius`, `rayCount`, `raySharpness`, `intensity`, `reach`, `coreSize`, `dust`, `flowSpeed`, `opacity`, `className`, `style`, `paused`, `fallback`, `onReady`, `onError`.

Raw WGSL is included for a custom WebGPU host; it is not CSS. Keep semantic headings and links in HTML.

## Controls

- Air (`airColor`, color): Colour of the dark air between the rays.
- Near sun (`warmColor`, color): Colour of the rays near the light source and of its bright core.
- Far light (`paleColor`, color): Colour the rays fade into farther from the source, and of the dust haze.
- Sun position (`center`, xy): Where the light sits: 0 is the left or top edge, 1 the right or bottom. It starts in the top-right corner. Fixed — the cursor refracts the shafts instead of carrying the sun.
- Refraction (`refraction`, slider): Glass lens strength. Zero removes the lens; rays transmit and reflect at its surfaces.
- Lens radius (`lensRadius`, slider): Size of the glass lens the pointer holds in the beams.
- Ray count (`rayCount`, slider): How many shafts of light there are; higher values give more, thinner rays.
- Ray sharpness (`raySharpness`, slider): How crisp the edges of each shaft are.
- Intensity (`intensity`, slider): Brightness of the light shafts.
- Reach (`reach`, slider): How far the shafts carry before falling off.
- Core size (`coreSize`, slider): Size of the bright glow at the light source.
- Dust haze (`dust`, slider): Soft haze of light hanging in the air.
- Drift speed (`flowSpeed`, slider): How fast the rays shift and flicker; 0 holds them still.
- Opacity (`opacity`, slider): Opacity of the complete effect, including its background.

## Compatibility

WebGPU rendering requires a supported browser and secure context. The landing shows a real poster for the selected Look when live rendering is unavailable. The standard exported component does not bundle a poster fallback. Supply your own fallback in the host layout. Text exports also retain readable HTML typography.

## Performance

1.114 ms GPU timestamp median; p95 1.901 ms. 1440x900 @ dpr 1.5; Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-09-05. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee.

## Questions

### Does the light source follow my cursor?

No. Center sets the source position. Your cursor controls a local glass lens that bends the passing beams; Refraction and Lens radius shape its response.

### What should I not use God Rays for?

This is screen-space geometric optics, not a volumetric path tracer. It does not illuminate other page elements or move the light source with the pointer.

### What happens without WebGPU?

This landing shows a still poster of your selected Color Look. The raw WGSL needs a WebGPU host. Landing posters are not bundled in the Export Kit: add your own fallback around the exported component.

### Can I use this shader commercially?

Part of the Free collection for Aperveil 1.0. Public live preview and Color Looks are open. Free Export Kits do not require an account. Purchasing is not available yet. Follow the license notices supplied with the source you download. The planned Free collection permits personal and commercial interface projects. An alpha access grant is not a purchase or a replacement for those license terms.

## License

Part of the Free collection for Aperveil 1.0. Public live preview and Color Looks are open. Free Export Kits do not require an account. Purchasing is not available yet. Follow the license notices supplied with the source you download. The planned Free collection permits personal and commercial interface projects. An alpha access grant is not a purchase or a replacement for those license terms.

## Related shaders

- [Caustics](https://www.aperveil.com/shaders/caustics)
- [Glass Facets](https://www.aperveil.com/shaders/glass-facets)
- [Aurora Drift](https://www.aperveil.com/shaders/aurora-drift)