# Canopy Light

Aperveil / Light, shaped for the web.

Shape soft, moving leaf shadows for websites. Explore Canopy Light, tune the light and breeze, and build a calmer interface with WebGPU.

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

## What it does

Canopy Light projects twelve branches across three depth layers onto a softly lit surface. Pointed leaf silhouettes, depth-dependent penumbra and coherent wind create a dappled-light background. Sweep across a leaf or stem to brush its branch immediately, or stay nearby and pull it gently in your direction. Its root stays pinned; other branches continue their normal breeze.

## Choose it for

Bring a sense of place to a retreat, an architecture journal or a considered product launch. Place readable HTML in the quiet left-hand area and let the leaf shadows move through the open space. Keep ordinary links and buttons outside the canvas.

## Limits

This is an art-directed screen-space shadow model, not a 3D tree, a ray-traced lighting simulation or a shadow cast by your page content. It does not sample the DOM, need a foliage image or respond to live weather. This remains a local development preview, outside the published catalog.

## Current look

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

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

## Landing scene

This preview uses `windStrength`: 0.4. 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 CanopyLight from "./CanopyLight";

export default function Hero() {
  return (
    <CanopyLight
      className="hero-shader"
      canopyCoverage={0.55} background="#0c1511"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

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

Component props: `canopyCoverage`, `leafScale`, `shadowSoftness`, `layerDepth`, `lightAngle`, `windStrength`, `windSpeed`, `pointerBreeze`, `opacity`, `background`, `surfaceLight`, `leafShadow`, `warmth`, `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

- Canopy coverage (`canopyCoverage`, slider): Strength of the overlapping projected foliage shadows.
- Leaf scale (`leafScale`, slider): Size of the leaves and branches casting the shadows.
- Shadow softness (`shadowSoftness`, slider): Penumbra width; distant layers remain more defocused.
- Layer depth (`layerDepth`, slider): Distance between the three foliage layers; more depth separates and offsets their shadows.
- Light angle (`lightAngle`, slider): Direction the sunlight falls from, which offsets the deeper shadow layers.
- Wind strength (`windStrength`, slider): How far the leaves sway and flutter in the breeze.
- Wind speed (`windSpeed`, slider): How fast the breeze moves; 0 holds the foliage still.
- Branch touch (`pointerBreeze`, slider): Catch a nearby leaf or stem and bend only its branch in your movement direction. Zero disables contact.
- Opacity (`opacity`, slider): default 1
- Background (`background`, color): Ground colour, blended into the shaded areas.
- Surface light (`surfaceLight`, color): Colour of the sunlit surface.
- Leaf shadow (`leafShadow`, color): Colour of the leaf shadows.
- Sunlight warmth (`warmth`, color): Warm tint mixed into the brightest patches of sunlight.

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

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

## Questions

### How are these animated leaf shadows made?

A single WGSL fragment evaluates procedural leaves and tapered stems in three depth layers. Each layer has a different penumbra width. Continuous wind bends the stems and gently changes the leaf direction; it does not replace the pattern each frame.

### Is this a CSS dappled-light effect or a video overlay?

Neither. Canopy Light uses WebGPU to render its shadow pattern in real time. No video or foliage texture is needed. HTML above the canvas remains ordinary, selectable page content.

### Does the mouse move the whole background?

No. Touching a visible leaf or stem catches one branch without clicking. Moving bends that branch in the movement direction, with its root fixed. Moving too far or leaving releases it, and a damped spring restores its wind-driven shape. Empty space does not grab a branch. Set Branch touch to zero to disable contact without changing the wind.

### Can I use a still version for a calm website background?

Yes. Set Wind strength and Branch touch to zero. Reduced-motion preferences produce a static frame. The landing uses Wind strength 0.40; a direct editor visit starts at 0.18. Open editor from the landing carries its scene settings. Without WebGPU, the selected Color Look uses a real rendered poster.

### Can I download Canopy Light now?

Canopy Light belongs to the Free collection. Its local editor offers the standard React/WGSL Export Kit without an account. It remains a development preview and is not yet listed in the published catalog.

### 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)
- [Grain Gradient](https://www.aperveil.com/shaders/grain-gradient)
- [Glazed Porcelain](https://www.aperveil.com/shaders/glazed-porcelain)