thanhphuchuynh/meniscus

Liquid glass components for React, refracted by real optics. Live demo, playground, and docs.

TypeScript

0

13 commits

updated Sep 24, 2026

See the code

See what people are saying

SourceMessageScoreDate

Meniscus: React glass that refracts the page using Snell's law (r/reactjs)

I made an open-source React library for liquid glass surfaces. The part I wanted to get right was the edge: instead of a blur and bright border, Meniscus gives the bezel a height profile, traces rays through it with Snell's law, and uses the resulting displacement to bend the content behind it. The…

2

Sep 24, 2026

README

meniscus workspace

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 30-second Meniscus demo

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.

Changelog · Release process

Live site and manual · Manual

pnpm install
pnpm dev        # demo site at http://localhost:5173
pnpm test       # optics and component tests
pnpm build      # library, then site

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.

glassmorphism
liquid-glass
react
react-components
typescript
webgl

Contributors

thanhphuchuynh

13 commits

thanhphuchuynh/meniscus

Liquid glass components for React, refracted by real optics. Live demo, playground, and docs.

TypeScript

0

13 commits

updated Sep 24, 2026

See the code

See what people are saying

SourceMessageScoreDate

Meniscus: React glass that refracts the page using Snell's law (r/reactjs)

I made an open-source React library for liquid glass surfaces. The part I wanted to get right was the edge: instead of a blur and bright border, Meniscus gives the bezel a height profile, traces rays through it with Snell's law, and uses the resulting displacement to bend the content behind it. The…

2

Sep 24, 2026

README

meniscus workspace

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 30-second Meniscus demo

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.

Changelog · Release process

Live site and manual · Manual

pnpm install
pnpm dev        # demo site at http://localhost:5173
pnpm test       # optics and component tests
pnpm build      # library, then site

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.

glassmorphism
liquid-glass
react
react-components
typescript
webgl

Contributors

thanhphuchuynh

13 commits

Languages

TypeScript

84.6%

CSS

12.9%

JavaScript

1.7%