Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Liquid Glass

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.

Material, V2 Objects3DSeamless loop, verified211 lines of codev1.1.0

In Light, glass & shine, Liquids

Next: Chrome Material & Studio LightSurprise me

Liquid Glass preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source at reduced resolution.

Open in the title maker

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

1
0.5

Thicker glass bends the backdrop more.

1.5

1.5 is window glass, 1.33 water, 2.4 diamond.

0.14

The rainbow split at the edges. 0 is none.

0.02
0.55
0.16

The preview runs the same code your AI receives. These settings travel with the hand-off.

View code Sample video (default settings, 597 KB)
Info

What it is

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.

Reuse it in your own idea

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

Which part is reusable

src/liquid-glass.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses chrome-material only for the demo.

Good to know

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

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/liquid-glass.js
Exports
  • createLiquidGlassMaterial({ tint?, ior?, thickness?, roughness?, dispersion?, clearcoat?, envMapIntensity? }) => THREE.MeshPhysicalMaterial
  • createSlabGeometry({ width?, height?, depth?, radius?, bevel?, segments?, smooth? }) => THREE.BufferGeometry
  • createLiquidGlass({ shapes?, depth?, bevel?, material?, hover?, drift?, tiltAmount?, cycles? }) => { mesh, update(progress), setPhase(phase), shapeAt(phase), setShape(w, h, r), dispose() }
  • smoothNormals(geometry, creaseDegrees?) => BufferGeometry
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.
How it fits a scene

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.

Output
1080×1080, 30 fps, 8 s · procedural (computed from the frame number) · seamless loop — Shape keyframes, glide, hover and tilt are periodic in clip progress; the clip returns exactly to its start.
Tested
Rendered 240 frames on 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)). Same frame twice from fresh pages: identical. Loop: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.
Performance
One transmission pass per frame; dispersion adds three samples. Fine at 1080p on a GPU. Software WebGL renders slowly (about 1–3 s per 1080p frame).
Export a video yourself
Download the source, then in the folder: npm install npm run render -- liquid-glass/1.1.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.1.0 · sha256:82a19cdfd9b869ae… · other versions: 1.0.0
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. License details
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. Version 1.1.0 (4 October 2026) adds smoothed normals and morph targets.
BinMore like this

More like this

Play these full screen

Resin Pour

3D object3DSeamless loop14 seconds

Soap Film

3D object3DSeamless loop12 seconds