{"id":"liquid-glass","version":"1.0.0","title":"Liquid Glass","summary":"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.","kind":"material","target":"three","collections":["chrome-glass","product-reveals","backgrounds"],"tags":["liquid glass","glass","refraction","dispersion","glassmorphism","frosted","pill","morph","apple","ui","3d","three.js","transmission","chromatic"],"loopable":true,"motion":"procedural","durationSeconds":8,"status":"published","media":{"poster":"https://aipixelwizard.com/media/liquid-glass/1.0.0/poster.webp","preview":"https://aipixelwizard.com/media/liquid-glass/1.0.0/preview.mp4","sample":"https://aipixelwizard.com/media/liquid-glass/1.0.0/sample.mp4","sampleBytes":798689,"sampleNote":"Pre-rendered with the default settings. Customised settings must be exported locally (npm run render)."},"urls":{"page":"https://aipixelwizard.com/visuals/liquid-glass","manifest":"https://aipixelwizard.com/api/v1/visuals/liquid-glass/versions/1.0.0","agentMd":"https://aipixelwizard.com/registry/liquid-glass/1.0.0/agent.md","files":"https://aipixelwizard.com/registry/liquid-glass/1.0.0/","demo":"https://aipixelwizard.com/registry/liquid-glass/1.0.0/index.html"},"description":"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.","role":"Foreground glass element (Three.js) that refracts an opaque backdrop.","useCases":["Product or app launch visual","Logo or word under moving glass","Background element for a UI showcase","Transition element over a photo"],"synonyms":["liquid glass effect","glass pill","glass button","glassmorphism animation","refracting glass","apple liquid glass","glass morph","lens","magnifier","glass overlay"],"digest":"a687d58152a8819dc3a19180b1c0e49e6af6e67d613564c3e5b73909899db4b0","implementation":{"target":"three","runtime":"browser","language":"javascript","module":"esm","entry":"src/liquid-glass.js","exports":[{"name":"createLiquidGlassMaterial","signature":"createLiquidGlassMaterial({ tint?, ior?, thickness?, roughness?, dispersion?, clearcoat?, envMapIntensity? }) => THREE.MeshPhysicalMaterial","description":"Thick clear glass with transmission, dispersion and a clear coat."},{"name":"createSlabGeometry","signature":"createSlabGeometry({ width?, height?, depth?, radius?, bevel?, segments? }) => THREE.BufferGeometry","description":"A rounded-rectangle slab with a bevelled edge."},{"name":"createLiquidGlass","signature":"createLiquidGlass({ shapes?, depth?, bevel?, material?, hover?, drift?, tiltAmount?, cycles? }) => { mesh, update(progress), setShape(w, h, r), shapeAt(progress), dispose() }","description":"A slab that morphs through shape keyframes, hovers and tilts as a pure function of progress (exact loop)."}],"reusable":["src/liquid-glass.js"],"demo":"demo.js","harness":"index.html"},"dependencies":[{"id":"three","version":"0.185.1","scope":"source","reason":"WebGL rendering (MeshPhysicalMaterial transmission and dispersion)."},{"id":"chrome-material","version":"1.1.0","scope":"demo","reason":"Demo uses the studio environment, cove and floor. Any environment map works with the glass."},{"id":"apw-runtime","version":"1.0.0","scope":"demo","reason":"Demo harness."}],"uses":[],"usedBy":[],"params":[{"key":"backdrop","label":"Behind the glass","type":"select","default":"bands","options":[{"value":"bands","label":"Colour bands"},{"value":"dots","label":"Dot grid"},{"value":"gradient","label":"Gradient"}]},{"key":"text","label":"Word on the backdrop","type":"text","default":"LIQUID","maxLength":16,"sensitive":true},{"key":"morph","label":"Morph between shapes","type":"boolean","default":true},{"key":"cycles","label":"Morph cycles per clip","type":"integer","min":1,"max":2,"step":1,"default":1},{"key":"thickness","label":"Glass thickness","help":"Thicker glass bends the backdrop more.","type":"number","min":0.2,"max":0.9,"step":0.01,"default":0.5},{"key":"ior","label":"Bend of light (IOR)","help":"1.5 is window glass, 1.33 water, 2.4 diamond.","type":"number","min":1.1,"max":2.4,"step":0.01,"default":1.5},{"key":"dispersion","label":"Colour fringe","help":"The rainbow split at the edges. 0 is none.","type":"number","min":0,"max":0.4,"step":0.01,"default":0.14},{"key":"frost","label":"Frosting","type":"number","min":0,"max":0.3,"step":0.01,"default":0.02},{"key":"glide","label":"Glide distance","type":"number","min":0,"max":1.2,"step":0.05,"default":0.55},{"key":"tilt","label":"Tilt","type":"number","min":0,"max":0.4,"step":0.01,"default":0.16},{"key":"tint","label":"Glass tint","type":"color","default":"#ffffff"},{"key":"colorA","label":"Backdrop colour 1","type":"color","default":"#ff4f3d"},{"key":"colorB","label":"Backdrop colour 2","type":"color","default":"#1e3cff"},{"key":"colorC","label":"Backdrop colour 3","type":"color","default":"#ffd23f"},{"key":"textColor","label":"Word colour","type":"color","default":"#ffffff"},{"key":"background","label":"Background","type":"color","default":"#0f1117"}],"presets":[{"id":"default","label":"Bands","params":{}},{"id":"frosted","label":"Frosted pill","params":{"frost":0.09,"dispersion":0.04,"morph":false,"backdrop":"gradient","colorA":"#2b1c6b","colorB":"#8a3cff","colorC":"#ff6fb5"}},{"id":"lens","label":"Thick lens","params":{"thickness":0.9,"ior":1.9,"dispersion":0.3,"backdrop":"dots","colorA":"#f1e9d6","colorB":"#1b1e27","colorC":"#d84a2c","background":"#f1f2f4","textColor":"#1b1e27"}}],"output":{"width":1080,"height":1080,"fps":30,"durationSeconds":8,"posterSeconds":1.2,"alpha":false,"motion":"procedural","loop":{"seamless":true,"cycleSeconds":8,"method":"Shape keyframes, glide, hover and tilt are periodic in clip progress; the clip returns exactly to its start."},"seed":null},"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.","compatibleWith":["chrome-material","orbit-camera","kinetic-title","gradient-background","glass-container"],"notes":["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."]},"reuse":["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."],"integration":{"newProject":"Create the studio (chrome-material), an opaque backdrop plane at z = −1.6, then createLiquidGlass() and call update(progress) each frame.","existingProject":"Copy src/liquid-glass.js. Add the mesh to your scene with an environment map; call update(progress) or setShape() yourself."},"performance":{"notes":"One transmission pass per frame; dispersion adds three samples. Fine at 1080p on a GPU.","limits":"Software WebGL renders slowly (about 1–3 s per 1080p frame)."},"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":{"spdx":"MIT","notice":"Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder.","thirdParty":[]},"rights":{"approvedForPublicRelease":true},"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.","changelog":[{"version":"1.0.0","date":"2026-10-03","notes":"Initial release."}],"verification":{"testedOn":"2026-10-03","inputs":{"liquid-glass@1.0.0":"a687d58152a8819dc3a19180b1c0e49e6af6e67d613564c3e5b73909899db4b0","three@0.185.1":"664ca387e5fab46ff2daaa6895e1d015426850891af5ea5082cbbcc3985b068c","chrome-material@1.1.0":"ecb41776bfc1ee88997604f916a5ffe833f971d7edcc97c855697a5792d6f1dd","apw-runtime@1.0.0":"5be859cdac74823ba0bcc32c6daf06688a871104d24db5d4ceaffffd84d7c40d"},"environment":"Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0","renderer":"WebGL 2 via SwiftShader (software)","width":1080,"height":1080,"fps":30,"frames":240,"renderSeconds":346.6,"loopCheck":{"checked":true,"seamless":true,"maxDifference":0,"note":"Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255."},"determinism":{"checked":true,"identical":true},"errors":[],"media":{"poster":"/media/liquid-glass/1.0.0/poster.webp","preview":"/media/liquid-glass/1.0.0/preview.mp4","sample":"/media/liquid-glass/1.0.0/sample.mp4","sampleBytes":798689}},"files":[{"path":"LICENSE","size":1072,"sha256":"8a5f3a96f07e11522ec4bdd0a583356f99bad1245920f9709cee09b995a45153","contentType":"text/plain; charset=utf-8","url":"https://aipixelwizard.com/registry/liquid-glass/1.0.0/LICENSE"},{"path":"asset.json","size":10125,"sha256":"ba438a3f0e6b10c8304ac9ed08d31ac5e7f1176242d8afe2122b0761a5e8cbb7","contentType":"application/json; charset=utf-8","url":"https://aipixelwizard.com/registry/liquid-glass/1.0.0/asset.json"},{"path":"demo.js","size":4398,"sha256":"0d9c3750ad258ae9abae07d60bc332f108bdbe7e57fe51f938437c7d62b64179","contentType":"text/javascript; charset=utf-8","url":"https://aipixelwizard.com/registry/liquid-glass/1.0.0/demo.js"},{"path":"index.html","size":526,"sha256":"ca012c8eecf53c12b4cab0f6eb4768471ad7c9b4cef81377df7c56e8bff5b8f0","contentType":"text/html; charset=utf-8","url":"https://aipixelwizard.com/registry/liquid-glass/1.0.0/index.html"},{"path":"src/liquid-glass.js","size":5783,"sha256":"bbc578af15dc4a85126e1379f8f861299b6b20345919f5c8644ff3778277fc53","contentType":"text/javascript; charset=utf-8","url":"https://aipixelwizard.com/registry/liquid-glass/1.0.0/src/liquid-glass.js"}],"warnings":[]}