apple-liquid-glass-webgl

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

Viscose is a portfolio carousel rendered as a single full-screen WebGL fragment shader rather than a grid of DOM elements. Project cards travel around a mostly off-screen ring that can be turned by scrolling, dragging, swiping, or clicking; momentum carries the ring and it snaps the nearest card to the front. Signed distance fields make neighboring cards melt together as they approach and form thin, sagging threads as they separate, while pointer interaction softens the field, shifts nearby cards, and creates connecting effects. The same shader pass renders the threads, the refracting glass-like edges at the top and bottom of the viewport, and the cursor tag. On touch devices, swiping turns the ring and press-and-hold triggers the hover effects. The project includes a development-only lil-gui panel with roughly 136 live parameters and is built with Next.js, React, Three.js, GSAP, and Tailwind CSS; it requires Node.js 20 or newer to run locally.

A browser-based Three.js study of foldable-screen transitions that recreates an iPhone Duo fold animation with projected screen UI, progressive blur, and custom image uploads. Only the cover half rotates while the rear-camera half remains fixed; screen content uses a front-view projection, and blur and darkening follow image coordinates during the fold. It provides Wallpaper, Launcher, and Custom modes, with orbit controls, zooming, a fold slider, and a play button. The application is static HTML, CSS, and JavaScript with Three.js bundled locally, and can be deployed to Vercel or another static host after preparing the Apple reference assets. The original application code is MIT-licensed; Apple models and imagery are excluded from that license and remain subject to Apple's 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.

WebGL 2.0 is a web graphics API standardized by the Khronos Group that provides GPU-accelerated 2D and 3D rendering inside web browsers. It is based on OpenGL ES 3.0 and exposes features including GLSL ES 3.00 shaders, vertex array objects, uniform buffer objects, transform feedback, multiple render targets, 3D textures and floating‑point texture formats; it renders to HTMLCanvasElement framebuffers via a WebGL2RenderingContext. WebGL 2.0 is implemented in modern browsers and is used from JavaScript and WebAssembly for in‑browser rendering and graphics applications.