Liquid glass for React, refracted by optics. The library lives in packages/meniscus and is published on npm. The demo site, playground and manual live in apps/site.
Watch the full 30-second demo — drag a lens across Newton's engraving, tune its optical layers, compare finished interfaces with glass on and off, then see the React example.
Components: Glass and its layers; GlassButton, GlassPanel, GlassTabs, the form fields and GlassLoader; and the kit of overlays, bars and controls: GlassDialog (modal, sheet or drawer), GlassPopover, GlassMenu, GlassTooltip, GlassToaster with toast(), GlassNavbar, GlassSidebar, GlassSwitch, GlassSlider and GlassSegmented. See them all.
Run the editable example — refractive index, RGB splitting and lighting controls, using the published npm package. Choose Edit in StackBlitz on the site to open it without installing anything.
Next.js App Router example — meniscus rendered from Server Components. CI builds it against the library packed from this repository.
pnpm install
pnpm dev # demo site at http://localhost:5173
pnpm test # optics and component tests
pnpm build # library, then siteWith the development server running, pnpm --filter site test:browser checks lens motion, layered GPU rendering, comparisons, touch input and reduced motion in Chromium. Install its browser once with pnpm exec playwright install chromium. Set MENISCUS_CAPTURE=1 to save desktop/mobile screenshots to your system’s temporary directory.
The demo reproduces two plates from Isaac Newton's Opticks (London, 1704): Book I, Plates II and IV, public domain, scanned by the Internet Archive and duotoned for the site.
The original project code and documentation are MIT licensed. The site's bundled fonts and JavaScript dependencies retain their own licenses, listed in the third-party notices. The demo's privacy note describes its local theme preference and current data use.