God Rays Free WebGPU shader

Give light a new direction.

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

Open editor Meet the surface

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.

A surface, not a screenshot.

FreeReact exportRaw WGSL

THE SYSTEM BEHIND THE SURFACE

Inside God Rays.

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.

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.

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.

Sun position

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

Glass lens strength. Zero removes the lens; rays transmit and reflect at its surfaces.

Lens radius

Size of the glass lens the pointer holds in the beams.

Ray count

How many shafts of light there are; higher values give more, thinner rays.

Color Looks preserve these settings. Open the editor for all 14 controls.

KEEP THE SOURCE. KEEP THE CONTROL.

From preview to your project.

Choose a Look, tune it in the editor, then download the Export Kit. Install the runtime and copy the generated component into your project.

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.

In Next.js, use a client component and give its container an explicit size. Keep headings, links and accessible content in HTML above the decorative canvas.

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.

Open editor & export

Markdown guide

Usage example — download GodRays.tsx from the editor first. This example imports that local file; it is not the shader component itself.

Terminal

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

GodRays usage

"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; }

Download and extract the complete Export Kit first. Run its local package command from the ZIP root, then copy the component into your project. Public npm and CLI distribution is coming soon.

THE SURFACE IN CONTEXT

Made for a real interface.

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.