Chromatic Eclipse Free WebGPU shader

A little less light. A little more wonder.

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

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 Chromatic Eclipse.

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.

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

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

Eclipse size

Size of the dark disc and of the corona around it.

Position

Adjust position in the editor. The default is [0.5,0.5].

Corona angle

Which side of the disc the bright crescent faces, in degrees.

Occlusion

How much of the disc the occluding body covers; below 1 lets a thin crescent of light through.

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

ChromaticEclipse usage

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

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.

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.