Glass Morph Free WebGPU shader

A new form, in the same light.

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

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 Glass Morph.

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.

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

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

Variant

Which sculpture to show; Auto morphs through all of them in turn.

Position

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

Object size

Size of the sculpture.

Ring radius

Overall radius of the ring-based shapes.

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

GlassMorph usage

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

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.

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.