# Liquid Glass — `liquid-glass@1.0.0`

A thick slab of clear glass glides over your backdrop, bending what is behind it with a faint rainbow fringe, and morphs from pill to circle to rounded square. The look from every 2026 interface.

The liquid glass look that spread from Apple’s interfaces into motion design and the web: a rounded, bevelled slab of clear glass that refracts whatever sits behind it, splits light into a subtle colour fringe at its edges (dispersion), catches a bright specular rim from the studio lights and morphs between shapes as it moves. Put it over colour bands, a word, a logo or a photo plane; set the glass thickness, how much it bends light, the frosting and the colour fringe; choose whether it morphs and how far it glides.

- Kind: material; status: published; digest sha256:a687d58152a8819dc3a19180b1c0e49e6af6e67d613564c3e5b73909899db4b0
- Role: Foreground glass element (Three.js) that refracts an opaque backdrop.
- Implementation: three; entry `src/liquid-glass.js`
- Files: https://aipixelwizard.com/registry/liquid-glass/1.0.0/<path> (`LICENSE`, `asset.json`, `demo.js`, `index.html`, `src/liquid-glass.js`)
- Manifest JSON: https://aipixelwizard.com/api/v1/visuals/liquid-glass/versions/1.0.0
- Runnable demo: https://aipixelwizard.com/registry/liquid-glass/1.0.0/index.html (open over http; it imports sibling packages by relative path)
- Dependencies (exact): `three@0.185.1` (source) — WebGL rendering (MeshPhysicalMaterial transmission and dispersion).; `chrome-material@1.1.0` (demo) — Demo uses the studio environment, cove and floor. Any environment map works with the glass.; `apw-runtime@1.0.0` (demo) — Demo harness.

## Exports
- `createLiquidGlassMaterial({ tint?, ior?, thickness?, roughness?, dispersion?, clearcoat?, envMapIntensity? }) => THREE.MeshPhysicalMaterial` — Thick clear glass with transmission, dispersion and a clear coat.
- `createSlabGeometry({ width?, height?, depth?, radius?, bevel?, segments? }) => THREE.BufferGeometry` — A rounded-rectangle slab with a bevelled edge.
- `createLiquidGlass({ shapes?, depth?, bevel?, material?, hover?, drift?, tiltAmount?, cycles? }) => { mesh, update(progress), setShape(w, h, r), shapeAt(progress), dispose() }` — A slab that morphs through shape keyframes, hovers and tilts as a pure function of progress (exact loop).

## Parameters
- `backdrop` (select one of bands | dots | gradient, default "bands") — Behind the glass
- `text` (text, default "LIQUID") — Word on the backdrop
- `morph` (boolean, default true) — Morph between shapes
- `cycles` (integer 1–2, default 1) — Morph cycles per clip
- `thickness` (number 0.2–0.9, default 0.5) — Glass thickness: Thicker glass bends the backdrop more.
- `ior` (number 1.1–2.4, default 1.5) — Bend of light (IOR): 1.5 is window glass, 1.33 water, 2.4 diamond.
- `dispersion` (number 0–0.4, default 0.14) — Colour fringe: The rainbow split at the edges. 0 is none.
- `frost` (number 0–0.3, default 0.02) — Frosting
- `glide` (number 0–1.2, default 0.55) — Glide distance
- `tilt` (number 0–0.4, default 0.16) — Tilt
- `tint` (color, default "#ffffff") — Glass tint
- `colorA` (color, default "#ff4f3d") — Backdrop colour 1
- `colorB` (color, default "#1e3cff") — Backdrop colour 2
- `colorC` (color, default "#ffd23f") — Backdrop colour 3
- `textColor` (color, default "#ffffff") — Word colour
- `background` (color, default "#0f1117") — Background

## Composition
- Inputs: Clip progress (frame / durationFrames). A material and shape keyframes.
- Outputs: A THREE.Mesh placed at the origin; update(progress) moves and morphs it.
- Coordinates: Y-up, centred on the origin, facing +Z. Default slab about 2.6 × 1.15 × 0.5 units; put the backdrop at z ≈ −1.5.
- Lighting: Needs scene.environment for highlights. The studio from Chrome Material works well.
- Timing: Pure function of progress. Whole cycles loop exactly.
- Works with: chrome-material, orbit-camera, kinetic-title, gradient-background, glass-container
- Transmission sees only opaque objects: put a photo, text or colour on an opaque plane behind the glass, not a transparent one.
- Morphing rebuilds the geometry when the shape changes; it is cheap at this size, but keep segments modest for long clips.

## Output and loop
- 1080×1080, 30 fps, 8 s, procedural
- Seamless loop: yes — Shape keyframes, glide, hover and tilt are periodic in clip progress; the clip returns exactly to its start.
- Verified 2026-10-03 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (WebGL 2 via SwiftShader (software)); deterministic: yes; loop check: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.

## Use it
New project: Create the studio (chrome-material), an opaque backdrop plane at z = −1.6, then createLiquidGlass() and call update(progress) each frame.

Existing project: Copy src/liquid-glass.js. Add the mesh to your scene with an environment map; call update(progress) or setShape() yourself.

Reuse ideas:
- Put a logo or product name on the backdrop plane and let the glass glide across it for a launch bumper.
- Use it as a lens: a thick, high-IOR slab over a photo plane, driven by Orbit Camera for a slow pass.
- Layer Kinetic Title underneath on an opaque canvas texture so the letters refract as they rise.

## Limitations
- Glass behind glass is not visible through the front face (a Three.js transmission limit).
- The slab is a flat extrusion; it does not deform like a true liquid, it morphs between rounded shapes.

## License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder.

Provenance: Original code written for AI Pixel Wizard on 3 October 2026 by an automated agent, inspired by the liquid glass trend (Apple’s interface material, Webflow’s Three.js refraction showcase, open-source Liquid Glass web implementations on X). No code, images or shaders were copied; the technique is Three.js MeshPhysicalMaterial transmission with dispersion.