[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-92662":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":14,"stars7d":14,"stars30d":15,"stars90d":14,"forks30d":14,"starsTrendScore":14,"compositeScore":16,"rankGlobal":9,"rankLanguage":9,"license":17,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":20,"hasPages":18,"topics":21,"createdAt":9,"pushedAt":9,"updatedAt":22,"readmeContent":23,"aiSummary":24,"trendingCount":14,"starSnapshotCount":14,"syncStatus":25,"lastSyncTime":26,"discoverSource":27},92662,"liquid-glass","deepika-builds\u002Fliquid-glass","deepika-builds","Apple-style liquid glass for the web — real refraction via SVG displacement, one file, zero dependencies",null,"JavaScript",160,22,1,0,27,46.79,"MIT License",false,"main",true,[],"2026-07-22 04:02:06","# liquid-glass\n\nApple-style **liquid glass** for the web: a translucent panel that visibly\nbends the content behind it at its rim — with a faint prism fringe — while\nthe interior stays legible. One file, zero dependencies, works on any DOM\nelement.\n\nReal refraction in Chromium browsers (Chrome, Edge, Arc, Brave); automatic\nfrosted-blur fallback in Safari and Firefox.\n\n![demo](https:\u002F\u002Fraw.githubusercontent.com\u002Fdeepika-builds\u002Fliquid-glass\u002Fmain\u002Fdemo\u002Fscreenshot.jpg)\n\n## Quick start\n\n```html\n\u003Cscript src=\"liquid-glass.js\">\u003C\u002Fscript>\n\n\u003Cdiv class=\"glass\">…your content…\u003C\u002Fdiv>\n\n\u003Cscript>\n  const glass = liquidGlass(document.querySelector(\".glass\"));\n  \u002F\u002F glass.supported  — false on Safari\u002FFirefox (frosted fallback applied)\n  \u002F\u002F glass.refresh()  — regenerate after manual size changes (auto on resize)\n  \u002F\u002F glass.destroy()  — remove the effect\n\u003C\u002Fscript>\n```\n\nThe module owns the *optics* — SVG filter, displacement map, backdrop-filter,\nresize handling, fallback. The *material dressing* is plain CSS on your\nelement, and it's what makes the panel read as glass:\n\n```css\n.glass {\n  border-radius: 28px;                 \u002F* the module reads this for the map *\u002F\n  background: linear-gradient(180deg,  \u002F* slight tint for text contrast     *\u002F\n    rgba(14, 14, 22, 0.18), rgba(14, 14, 22, 0.32));\n  box-shadow:\n    0 24px 60px rgba(0, 0, 0, 0.45),           \u002F* drop shadow               *\u002F\n    inset 0 1px 1px rgba(255, 255, 255, 0.5),  \u002F* specular top highlight    *\u002F\n    inset 0 -8px 20px rgba(255, 255, 255, 0.06),\n    inset 0 0 0 1px rgba(255, 255, 255, 0.13); \u002F* 1px glass border          *\u002F\n}\n```\n\nOpen [`demo\u002Findex.html`](demo\u002Findex.html) for a live example with a draggable\ncard.\n\n## Options\n\n```js\nliquidGlass(el, {\n  scale: -112,      \u002F\u002F displacement strength; negative = magnifying bulge\n                    \u002F\u002F   −60 subtle … −180 dramatic\n  chroma: 6,        \u002F\u002F per-channel scale stagger (prism fringe); 0 disables\n  border: 0.07,     \u002F\u002F neutral interior inset, fraction of the smaller side\n  mapBlur: 12,      \u002F\u002F curvature of the bulge: small = hard rim, large = dome\n  blur: 3,          \u002F\u002F backdrop blur inside the glass (raise for busy bgs)\n  saturate: 1.5,    \u002F\u002F backdrop saturation boost\n  radius: null,     \u002F\u002F corner radius override (px); defaults to border-radius\n  fallbackBlur: 16, \u002F\u002F frosted blur on Safari\u002FFirefox\n});\n```\n\n## How it works\n\n1. **Displacement map** (canvas → data URI): a red left→right ramp encodes X\n   displacement and a blue top→bottom ramp encodes Y, combined with\n   `globalCompositeOperation: \"difference\"`. A blurred, inset, 50%-gray\n   rounded rect neutralizes the interior, confining refraction to an edge\n   band. RGB(128, 128, ·) = neutral; deviation from 128 = push.\n2. **SVG filter**: `feImage` loads the map; three `feDisplacementMap` passes\n   at staggered scales, each isolated to one channel with `feColorMatrix`,\n   recombined with `feBlend mode=\"screen\"` → chromatic aberration at the rim.\n3. Applied via `backdrop-filter: url(#id) …` so real DOM content refracts —\n   text stays selectable, inputs stay usable.\n\n## Gotchas\n\n- **`color-interpolation-filters=\"sRGB\"` is mandatory** (the module sets it).\n  SVG filters default to linearRGB, which re-maps the map's neutral gray and\n  injects a constant phantom displacement over the whole element.\n- **Keep the interior legible.** If content behind the glass smears, lower\n  `scale`\u002F`chroma`, raise `blur`, or increase `border` — don't reach for an\n  opaque background, which kills the material.\n- **Refraction is Chromium-only.** Never let it carry meaning, only delight.\n- The 0×0 host `\u003Csvg>` must not be `display:none` (the module handles this).\n- Map generation is O(w×h); the filter runs on the GPU per frame. Great for\n  cards, navs, and buttons; avoid elements larger than ~800px per side.\n  Position-only animation needs no new map — only size changes do.\n\n## Framework usage\n\nWrap in an effect hook tied to the element ref and call `destroy()` on\nunmount:\n\n```jsx\nuseEffect(() => {\n  const glass = liquidGlass(ref.current);\n  return () => glass.destroy();\n}, []);\n```\n\n## Credits\n\nTechnique informed by [Aave's \"Building glass for the web\"](https:\u002F\u002Faave.com\u002Fdesign\u002Fbuilding-glass-for-the-web)\nand [rizroze\u002Fliquid-glass](https:\u002F\u002Fgithub.com\u002Frizroze\u002Fliquid-glass).\n\n## License\n\n[MIT](LICENSE)\n","liquid-glass 是一个为网页实现苹果风格液态玻璃效果的轻量级视觉库，通过 SVG 位移滤镜在 Chromium 浏览器中真实模拟光线折射与棱镜色散，在 Safari 和 Firefox 中自动降级为毛玻璃模糊效果。核心功能包括动态生成位移贴图、多通道错位映射以生成边缘色散、自适应圆角识别、响应式重绘及零依赖单文件集成。适用于需要高端视觉质感的 UI 组件，如模态框、卡片面板、控制中心或系统级浮层等现代 Web 应用界面。",2,"2026-07-10 02:30:06","CREATED_QUERY"]