Light Seam Free WebGPU shader

Where two skies meet.

A cinematic WebGPU background that flies between a ceiling and a floor of cloud toward the seam of light on the horizon: ray-marched decks lit by forward scattering, sunk into haze with distance, and now and then lit from behind by lightning deep in the cloud.

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 Light Seam.

The camera flies forward through the gap between two decks of cloud, toward the seam where they meet at the horizon and the light comes through. Every pixel is a ray marched through the deck it looks into, so the clouds stream out of the vanishing point as the flight advances. The decks are lit by the seam, not from the camera. Cloud scatters light mostly forward, so a Henyey–Greenstein phase with g = 0.8 makes the faces turned toward the horizon glow warm while those overhead keep the deck's own colour; light entering from the gap is lost with depth, exp(−kd), so the ragged faces are bright and the bodies behind them dark, and thin wisps seen against the light glow where thick cores stop it. Aerial perspective sinks each sample into the seam's haze by 1 − exp(−t/L). Now and then lightning flashes deep inside a deck, as a train of return strokes tens of milliseconds apart, which is why it flickers; the discharge sits behind the cloud's lit face, so the deck glows from within and behind and the stroke itself is never seen in the open.

Not a cloud renderer. It is single scattering toward one light at the horizon, with no self-shadowing along the light path beyond the depth term and no multiple scattering except as each deck's ambient colour. The density is two stretched noise fields per deck, not a simulated atmosphere, and the lightning is placed and timed, not a discharge model. The pointer steers the camera a few degrees; it moves nothing in the scene.

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

Horizon point

Where the seam meets the horizon on screen — the point the flight heads for and the clouds stream out of.

Horizon tilt

Rolls the horizon, in degrees.

Cloud scale

Size of the cloud features. Larger values make fewer, bigger masses.

Deck gap

Half the height of the clear air between the ceiling and the floor of cloud. A narrow gap closes the seam to a line; a wide one opens a corridor.

Color Looks preserve these settings. Open the editor for all 23 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 LightSeam.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

LightSeam usage

"use client";

import LightSeam from "./LightSeam";

export default function Hero() {
  return (
    <LightSeam
      className="hero-shader"
      tilt={0} coreColor="#dacaad"
      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.

Give a launch page, a film or audio product, or a long-form editorial opening a sense of travel: a horizon of light the page is heading into. Keep the headline above or below the seam and let the decks frame it. Ordinary HTML carries the words.