# Chromatic Eclipse

Aperveil / Light, shaped for the web.

A WebGPU eclipse with a dark silhouette, a luminous limb and softly structured chromatic coronal streamers. Adjust coverage, halo and light in real time.

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

## What it does

Chromatic Eclipse places an offset dark occluder in front of a coloured disc. A narrow luminous limb, softly structured coronal streamers and a faint scattering halo separate the light into layers. Circular noise coordinates keep the corona seamless as it drifts, while a small local pointer offset changes the occlusion.

## Choose it for

Introduce an evening exhibition, an independent film or a limited-edition release. Give the event details a calm reading area beside the corona; let a single visual moment carry the page.

## Limits

This is an art-directed screen-space eclipse, not an astronomical model, solar atmosphere simulation or physically calibrated diffraction calculation.

## Current look

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

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

## Landing scene

This preview uses `position`: [0.67,0.55], `radius`: 0.28. 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 ChromaticEclipse from "./ChromaticEclipse";

export default function Hero() {
  return (
    <ChromaticEclipse
      className="hero-shader"
      radius={0.29} colorA="#ffb382"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

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

Component props: `radius`, `position`, `rotation`, `coverage`, `softness`, `halo`, `intensity`, `motion`, `interaction`, `colorA`, `colorB`, `colorC`, `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

- Eclipse size (`radius`, slider): Size of the dark disc and of the corona around it.
- Position (`position`, xy): default [0.5,0.5]
- Corona angle (`rotation`, slider): Which side of the disc the bright crescent faces, in degrees.
- Occlusion (`coverage`, slider): How much of the disc the occluding body covers; below 1 lets a thin crescent of light through.
- Edge softness (`softness`, slider): Softness of the occluding body's edge.
- Halo spread (`halo`, slider): How far the corona spreads out from the disc.
- Light intensity (`intensity`, slider): Brightness of the corona, crescent and haze.
- Orbital drift (`motion`, slider): Speed of the slow drift of the occluding body and the corona; 0 holds them still.
- Pointer parallax (`interaction`, slider): How far the occluding body shifts toward the pointer.
- Primary (`colorA`, color): Corona colour on the side the crescent faces.
- Secondary (`colorB`, color): Corona colour on the far side of the disc.
- Accent (`colorC`, color): Accent colour that drifts around the corona.
- Background (`background`, color): default "#080a12"
- 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

No published timing sample. Profile this effect on your target devices.

## Questions

### Is this a scientifically accurate solar eclipse?

No. The silhouette, coverage and corona are designed as an interface background. They are adjustable visual controls, not measurements of celestial bodies.

### Can I change how much of the corona is visible?

Yes. Occlusion changes the coverage; Edge softness, Halo spread and Light intensity control how gently the light emerges. Color Looks do not alter these settings.

### Does the eclipse need mouse movement to animate?

No. Slow autonomous motion keeps the composition alive. The pointer adds a restrained offset; Pointer parallax can be reduced to zero, and reduced-motion mode keeps the effect still.

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

- [God Rays](https://www.aperveil.com/shaders/god-rays)
- [Smoke Ring](https://www.aperveil.com/shaders/smoke-ring)
- [Starfield](https://www.aperveil.com/shaders/starfield)