# Glass Morph

Aperveil / Light, shaped for the web.

Eight rounded WebGPU glass sculptures flow between distinct silhouettes. Tune edge roundness, traced refraction, rotation and independent Color Looks.

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

## What it does

Sphere, rounded cube, curved capsule, thick ring, twisted bar, rounded cross, cylinder and triangular prism share one continuous morphing loop. Edge roundness changes the actual geometry; linked rings remain a separate option. Refraction, internal reflection and path-length absorption describe the glass. Color Looks change only its palette.

## Choose it for

Open a hardware, audio or luxury goods page with an object that only gives itself up to light. Keep the page dark, keep the copy off the body, and let the visitor swing the key light around it.

## Limits

Morphing fields approximate distance between endpoints; this is bounded real-time glass rendering, not path tracing or an imported 3D mesh.

## Current look

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

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

## Landing scene

This preview uses `position`: [0.7,0.5], `size`: 0.42. 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 GlassMorph from "./GlassMorph";

export default function Hero() {
  return (
    <GlassMorph
      className="hero-shader"
      size={0.5} colorKey="#e6d4ff"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

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

Component props: `shape`, `position`, `size`, `majorRadius`, `minorRadius`, `separation`, `tilt`, `liquid`, `ior`, `dispersion`, `absorption`, `roughness`, `keyWidth`, `keyHeight`, `keyAngle`, `keyDistance`, `keyPower`, `fillAngle`, `fillPower`, `spin`, `drift`, `interaction`, `colorKey`, `colorFill`, `colorBody`, `background`, `opacity`, `backgroundOpacity`, `morphSpeed`, `hold`, `roundness`, `twist`, `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

- Variant (`shape`, select): Which sculpture to show; Auto morphs through all of them in turn.
- Position (`position`, xy): default [0.5,0.5]
- Object size (`size`, slider): Size of the sculpture.
- Ring radius (`majorRadius`, slider): Overall radius of the ring-based shapes.
- Tube radius (`minorRadius`, slider): Thickness of the tubes and bars.
- Link separation (`separation`, slider): How far the two rings are pulled apart. At about one they pass through each other's holes; wider and the link opens.
- Tilt (`tilt`, slider): Tilts the sculpture toward or away from you, in degrees.
- Liquid (`liquid`, slider): How far the surface breathes in slow standing waves, the way a drawn tube of molten glass does before it sets.
- Index of refraction (`ior`, slider): How hard the glass bends light: 1.5 is window glass, 2.4 is diamond. It also sets how much the surface reflects face on, ((n-1)/(n+1))^2, and where total internal reflection starts.
- Dispersion (`dispersion`, slider): How far apart red and blue refract on the way out. Real crown glass is about 0.01; more fringes the edges in colour.
- Tint depth (`absorption`, slider): How strongly the body absorbs what is not its own colour per unit of path. Thick crossings go deep, thin ones stay clear.
- Roughness (`roughness`, slider): Polish of the surface. Low values keep the softbox reflections crisp.
- Key width (`keyWidth`, slider): Width of the main softbox; the highlight takes its shape.
- Key height (`keyHeight`, slider): Height of the main softbox.
- Key angle (`keyAngle`, slider): Direction the main light comes from, in degrees.
- Light distance (`keyDistance`, slider): How far both lights sit from the sculpture; closer lights give larger, brighter highlights.
- Key power (`keyPower`, slider): Brightness of the main light.
- Fill angle (`fillAngle`, slider): Direction of the second, coloured fill light, in degrees.
- Fill power (`fillPower`, slider): Brightness of the fill light.
- Turn (`spin`, slider): How fast the sculpture turns.
- Light drift (`drift`, slider): How fast the lights circle on their own.
- Pointer key swing (`interaction`, slider): How far the pointer swings the lights.
- Key light (`colorKey`, color): Colour of the main light.
- Fill light (`colorFill`, color): Colour of the fill light.
- Glass tint (`colorBody`, color): Colour the glass absorbs into, deeper where light crosses more of it.
- Background (`background`, color): default "#000000"
- Opacity (`opacity`, slider): default 1
- Background opacity (`backgroundOpacity`, slider): default 1
- Morph speed (`morphSpeed`, slider): How fast the sculptures morph from one to the next.
- Shape hold (`hold`, slider): How long each sculpture holds its shape before morphing on.
- Edge roundness (`roundness`, slider): How rounded the edges and corners are.
- Twist (`twist`, slider): Twist of the twisted bar.

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

### Can I choose a shape and soften its edges?

Yes. Choose Automatic to cycle through eight forms, or keep one sculpture selected. Edge roundness softens the cube, cylinder, prism, twisted bar and cross without simply enlarging them. Sphere, capsule and ring already have curved profiles. Color Looks leave these shape controls unchanged.

### What are its limits?

Morphing fields approximate distance between endpoints; this is bounded real-time glass rendering, not path tracing or an imported 3D mesh.

### How do I integrate it?

Open the editor, tune the parameters and download the Export Kit. Use the installation command included in that kit and give its container an explicit size.

### 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)
- [Liquid Orb](https://www.aperveil.com/shaders/liquid-orb)
- [Spectral Ribbons](https://www.aperveil.com/shaders/spectral-ribbons)