Liquid Glass

A framework-free WebGL2 package for rendering Apple-inspired translucent glass surfaces for folders, rectangles, pills, and circles. Its renderer models screen-space refraction using a squircle signed-distance-field thickness field, Snell refraction with a meniscus rim, variable-blur scattering, Fresnel reflection, chromatic dispersion, edge highlights, contact shadows, hit testing, and live backdrops. It provides the original frosted V1 renderer and a separate clear optical V2 renderer, each with its own material contract; both can be used together. The package is distributed through npm, requires WebGL2, accepts CSS-pixel element coordinates, and can load image backdrops.

Solid Glass is an open-source design system for AI applications, implemented as a single lightweight CSS stylesheet for shadcn/ui components. It targets shadcn/ui components through their existing data-slot attributes and classes, so the components generally require no changes, and supports light and dark modes with a material-inspired treatment based on edge highlights, borders, shadows, and three glass thicknesses. The repository includes a Create page with controls for thickness, tint, chart color, type, radius, rim, and blur; it previews each selection and outputs the corresponding CSS. It also provides shadcn-installable components for agent interfaces, including status indicators, composer fields, tool steps, diff views, context rings, task notices, and reasoning displays, along with blocks, examples, documentation, and a component registry. Solid Glass is distributed under the MIT License. The published site and registry are hosted through GitHub Pages, and the repository includes scripts for local development, building, type checking, documentation generation, and registry generation.

Hyalite is a JavaScript library for real-refraction liquid-glass effects on the web. It models an element as a glass slab with a bevelled edge, computes a signed-distance-field lens map for its rounded-rectangle geometry, applies Snell's-law refraction, and feeds the resulting displacement and edge-light data into an SVG filter used through backdrop-filter. It supports per-corner radii, configurable bevel, thickness, slope, dispersion, shading, rim light, resizing, and materialization effects. The library is distributed as a single file with no WebGL or build step. Its watch and attach APIs manage matching or individual elements, rebuild maps when geometry changes, cache maps across similar sizes, and provide fallback CSS behavior. The refraction effect is rendered in Chromium-based browsers; Safari and Firefox use the supplied fallback because their SVG backdrop-filter support is incomplete. Hyalite is released under the MIT license by VII-Cae (VII).

Shaders is an open-source WebGPU component library and design platform from Shader Effects, Inc. It provides declarative effects for React, Vue, Svelte, Solid, JavaScript, and Framer, including gradients, noise, glass, metal, lighting, distortions, transitions, blurs, and cursor effects. Components render as GPU-blended layers that can be nested, masked, and composed without writing shader code. Its visual editor at shaders.com lets users arrange components on an infinite canvas, adjust their properties, connect them to cursor or timeline inputs, and export the resulting component tree. The accompanying CLI connects a project to a Shaders account, detects the framework, installs selected effects as component files, and can search, preview, and update them. Custom components can be defined with JavaScript objects and WGSL pixel code. The engine, components, framework bindings, and npm package are MIT-licensed; the hosted editor, presets, and other platform features have separate terms.

Canvas UI is an open-source, framework-agnostic library of creative UI components that render canvas and WebGL effects over live, interactive HTML. Its components use the experimental HTML-in-canvas API to read and redraw the DOM as a texture while preserving selectable text and clickable links; where that API is unavailable, they fall back to WebGL overlays. The library includes fluid simulations, shader effects, 3D scenes, distortion, particles, glass, fire, retro, and glitch effects, including Liquid, Ripple, Blaze, Glass, VHS, Shatter, and Decrypt Reveal. Each component is implemented as a plain TypeScript and WebGL engine with thin wrappers for React, Solid, Preact, Vue, Svelte, and vanilla JavaScript. Components are copied into an application through a shadcn-compatible registry rather than installed as a conventional dependency, and provide typed props with default configuration. The registry is MCP-ready for AI-assisted component discovery and installation. HTML-in-canvas effects require Chrome with the relevant flag or an origin-trial token; other environments use the WebGL-overlay fallback, while the library’s 3D effect components work without that flag. The project includes the component source, documentation site, demos, and registry builder, and is distributed under the MIT license with the Commons Clause, which restricts selling the library itself.