# Light Seam

Aperveil / Light, shaped for the web.

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.

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

## What it does

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.

## Choose it for

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.

## Limits

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.

## Current look

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

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

## Landing scene

This preview uses `position`: [0.5,0.5], `tilt`: 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 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; }
```

Component props: `position`, `tilt`, `scale`, `gap`, `deckDepth`, `balance`, `density`, `turbulence`, `detail`, `streak`, `thickness`, `coreGlow`, `deckGlow`, `reddening`, `lightning`, `driftSpeed`, `interaction`, `coreColor`, `upperColor`, `lowerColor`, `background`, `opacity`, `backgroundOpacity`, `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

- Horizon point (`position`, xy): Where the seam meets the horizon on screen — the point the flight heads for and the clouds stream out of.
- Horizon tilt (`tilt`, slider): Rolls the horizon, in degrees.
- Cloud scale (`scale`, slider): Size of the cloud features. Larger values make fewer, bigger masses.
- Deck gap (`gap`, slider): 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.
- Deck depth (`deckDepth`, slider): How deep each deck of cloud is. Light from the gap is lost with depth into it, so a deep deck has a dark body behind its lit face.
- Deck balance (`balance`, slider): Which deck carries more cloud. 0.5 is even; higher loads the ceiling.
- Cloud density (`density`, slider): Extinction of the cloud. Thin cloud lets the seam's glow through; dense cloud stands in front of it.
- Turbulence (`turbulence`, slider): How far the cloud field is warped before it is sampled — the curl and tear in the masses.
- Filaments (`detail`, slider): Strength of the ridged octave that draws thin bright strands on the masses.
- Streak (`streak`, slider): How far the cloud is stretched along the flight, so it streams past rather than tumbling.
- Seam width (`thickness`, slider): Width of the bright seam of light on the horizon.
- Seam light (`coreGlow`, slider): Brightness of the seam and the haze it lights.
- Deck light (`deckGlow`, slider): How brightly the cloud decks themselves glow.
- Haze reddening (`reddening`, slider): How much the far haze is reddened: short wavelengths are scattered out of the seam's light first, so the distance goes warm.
- Lightning (`lightning`, slider): How often a flash lights a deck from deep inside, and how bright. The glow comes through the cloud in front of it; each flash is a train of return strokes, which is why it flickers.
- Flight speed (`driftSpeed`, slider): How fast you fly between the clouds; 0 holds still.
- Pointer steer (`interaction`, slider): How far the pointer steers the camera, turning the view a few degrees toward it.
- Seam (`coreColor`, color): Colour of the seam of light on the horizon.
- Ceiling (`upperColor`, color): Colour of the upper cloud deck.
- Floor (`lowerColor`, color): Colour of the lower cloud deck.
- Background (`background`, color): Colour of the sky where no cloud or light reaches.
- Opacity (`opacity`, slider): default 1
- Background opacity (`backgroundOpacity`, slider): default 1

## 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

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.

## Questions

### Is this a CSS gradient or a real shader?

It is a WGSL fragment shader running on WebGPU through vgpu. Each pixel marches its ray through the deck of cloud it looks into, eighteen steps packed toward the face where the cloud is sharp, which is where the depth and the streaming come from.

### Why is the cloud warm near the horizon and cool overhead?

Because it is lit from the horizon and cloud scatters forward. The Henyey–Greenstein phase with g = 0.8 sends most of the seam's light on toward you only where you look almost straight at it, so the near-horizon faces take the seam's colour and the decks overhead keep their own.

### What are the flashes?

Lightning, deep inside the decks. A strike is a train of return strokes some tens of milliseconds apart, each fading in a few, so it flickers rather than blinks. The discharge sits behind the cloud's lit face and lights only its own deck, so what you see is the cloud glowing from within — never a bolt in the open gap. Lightning sets how often and how bright.

### Why do the thin edges glow brighter than the thick parts?

Silver lining. A thin edge seen against the light lets much of it through and scatters it toward you, while a thick core stops it, so the wisps glow and the bodies stay dark. It is also where the cloud gets its contrast.

### What does the cursor do?

It steers the camera a few degrees toward it, the way a hand on the stick would — point above the horizon to look up into the ceiling. Set Pointer steer to zero for a straight flight.

### Does it work with reduced motion?

Yes. Under a reduced-motion preference the flight holds a fixed frame and the pointer response is switched off, so the composition stays readable without animation.

### 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

- [Aurora Drift](https://www.aperveil.com/shaders/aurora-drift)
- [Ether Flow](https://www.aperveil.com/shaders/ether-veil)
- [Fractal Glass](https://www.aperveil.com/shaders/fractal-glass)