Canopy Light Free WebGPU shader

A little afternoon, anywhere.

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

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.

Brush a leaf. Gently pull its branch.

A surface, not a screenshot.

FreeReact exportRaw WGSL

THE SYSTEM BEHIND THE SURFACE

Inside Canopy Light.

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.

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.

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.

Canopy coverage

Strength of the overlapping projected foliage shadows.

Leaf scale

Size of the leaves and branches casting the shadows.

Shadow softness

Penumbra width; distant layers remain more defocused.

Layer depth

Distance between the three foliage layers; more depth separates and offsets their shadows.

Color Looks preserve these settings. Open the editor for all 13 controls.

THE SURFACE IN CONTEXT

Made for a real interface.

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.

Canopy Light used behind an example interface — Illustrative layout, not a customer project. The image is a still preview of the selected Look.

An illustrative layout. Your content stays in HTML; the shader sets the atmosphere.

Try this surface in the editor

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 CanopyLight.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

CanopyLight usage

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

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.

A FEW USEFUL DETAILS