# Petal Glass

Aperveil / Light, shaped for the web.

A frosted, petal-shaped glass effect for React. Adjust its position, rim and iridescence, choose a color look, and export the WebGPU component.

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

## What it does

Petal Glass builds a procedural petal form with a frosted surface, a lit rim and iridescent color. Petal count, size and X/Y location control the mark's composition.

## Choose it for

Use the glass mark as an accent for a skincare or creative studio introduction. Place the heading beside the form and use a soft, matching page palette.

## Limits

The petal is generated by the shader. It is not an uploaded logo, an image mask or a botanically accurate flower model.

## Current look

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

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

## Landing scene

This preview uses `location`: [0.65,0.5]. 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 PetalGlass from "./PetalGlass";

export default function Hero() {
  return (
    <PetalGlass
      className="hero-shader"
      petals={8} background="#1a0f22ff"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

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

Component props: `background`, `glassColor`, `lightA`, `lightB`, `lightC`, `location`, `petals`, `size`, `frost`, `rimWidth`, `iridescence`, `innerLight`, `bloom`, `flowSpeed`, `tilt`, `opacity`, `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

- Background (`background`, color): Colour of the ground behind the petals.
- Glass (`glassColor`, color): Colour of the frosted glass and its soft outer glow.
- Light 1 (`lightA`, color): First colour of the iridescent rim.
- Light 2 (`lightB`, color): Second colour of the iridescent rim.
- Light 3 (`lightC`, color): Third colour of the iridescent rim.
- Location (`location`, xy): Move the petal mark across the canvas.
- Petals (`petals`, slider): Number of petals.
- Size (`size`, slider): Size of the mark.
- Frost (`frost`, slider): How strongly the glass is frosted.
- Rim width (`rimWidth`, slider): Width of the glowing rim along the petals' edge.
- Iridescence (`iridescence`, slider): Brightness of the shifting colours along the rim.
- Inner light (`innerLight`, slider): Brightness of the light glowing inside the glass.
- Bloom (`bloom`, slider): Soft glow spreading out from the mark.
- Drift speed (`flowSpeed`, slider): How fast the petals breathe and the colours shift; 0 holds them still.
- Cursor tilt (`tilt`, slider): How far the mark leans toward the cursor.
- Opacity (`opacity`, slider): Opacity of the complete effect, including its background.

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

1.483 ms legacy timing (method not recorded; not a pure GPU measurement). 1440x900 @ dpr 2; Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-09-03. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee.

## Questions

### Can I reposition the petal on the page?

Yes. Location X/Y moves the generated form within the canvas. Size and Petals remain separate controls; changing a Color Look preserves that composition.

### How do I change the frosted glass appearance?

Frost, Rim width, Iridescence and Inner light adjust the surface appearance. Petals and Size define the form; Location moves it. The palette changes its background, glass and three light colors without rearranging it.

### What should I not use Petal Glass for?

The petal is generated by the shader. It is not an uploaded logo, an image mask or a botanically accurate flower model.

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

- [Glass Facets](https://www.aperveil.com/shaders/glass-facets)
- [Glass Flutes](https://www.aperveil.com/shaders/glass-flutes)
- [Iridescent Foil](https://www.aperveil.com/shaders/iridescent-foil)