[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73600":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":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":9,"rankLanguage":9,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":9,"pushedAt":9,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":15,"starSnapshotCount":15,"syncStatus":29,"lastSyncTime":30,"discoverSource":31},73600,"liquid-glass-react","rdev\u002Fliquid-glass-react","rdev","Apple's Liquid Glass effect for React",null,"TypeScript",5125,342,25,19,0,31,63,177,93,113.61,"MIT License",false,"master",true,[],"2026-06-12 04:01:10","# Liquid Glass React\n\nApple's Liquid Glass effect for React.\n\nCard Example              |  Button Example\n:-------------------------:|:-------------------------:\n![](https:\u002F\u002Fgithub.com\u002Frdev\u002Fliquid-glass-react\u002Fraw\u002Fmaster\u002Fassets\u002Fcard.png)  |  ![](https:\u002F\u002Fgithub.com\u002Frdev\u002Fliquid-glass-react\u002Fraw\u002Fmaster\u002Fassets\u002Fbutton.png)\n\n## 🎬  Demo\n\n[Click here](https:\u002F\u002Fliquid-glass.maxrovensky.com) to see it in action!\n\n![project liquid gif](.\u002Fassets\u002Fproject-liquid.gif)\n\n## ✨ Features\n\n- Proper edgy bending and refraction\n- Multiple refraction modes\n- Configurable frosty level\n- Supports arbitrary child elements\n- Configurable paddings\n- Correct hover and click effects\n- Edges and highlights take on the underlying light like Apple's does\n- Configurable chromatic aberration\n- Configurable elasticity, to mimic Apple's \"liquid\" feel\n\n> **⚠️ NOTE:** Safari and Firefox only partially support the effect (displacement will not be visible)\n\n## 🚀 Usage\n\n### Installation\n\n```bash\nnpm install liquid-glass-react\n```\n\n### Basic Usage\n\n```tsx\nimport LiquidGlass from 'liquid-glass-react'\n\nfunction App() {\n  return (\n    \u003CLiquidGlass>\n      \u003Cdiv className=\"p-6\">\n        \u003Ch2>Your content here\u003C\u002Fh2>\n        \u003Cp>This will have the liquid glass effect\u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002FLiquidGlass>\n  )\n}\n```\n\n### Button Example\n\n```tsx\n\u003CLiquidGlass\n  displacementScale={64}\n  blurAmount={0.1}\n  saturation={130}\n  aberrationIntensity={2}\n  elasticity={0.35}\n  cornerRadius={100}\n  padding=\"8px 16px\"\n  onClick={() => console.log('Button clicked!')}\n>\n  \u003Cspan className=\"text-white font-medium\">Click Me\u003C\u002Fspan>\n\u003C\u002FLiquidGlass>\n```\n\n### Mouse Container Example\n\nWhen you want the glass effect to respond to mouse movement over a larger area (like a parent container), use the `mouseContainer` prop:\n\n```tsx\nfunction App() {\n  const containerRef = useRef\u003CHTMLDivElement>(null)\n\n  return (\n    \u003Cdiv ref={containerRef} className=\"w-full h-screen bg-image\">\n      \u003CLiquidGlass\n        mouseContainer={containerRef}\n        elasticity={0.3}\n        style={{ position: 'fixed', top: '50%', left: '50%' }}\n      >\n        \u003Cdiv className=\"p-6\">\n          \u003Ch2>Glass responds to mouse anywhere in the container\u003C\u002Fh2>\n        \u003C\u002Fdiv>\n      \u003C\u002FLiquidGlass>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `children` | `React.ReactNode` | - | The content to render inside the glass container |\n| `displacementScale` | `number` | `70` | Controls the intensity of the displacement effect |\n| `blurAmount` | `number` | `0.0625` | Controls the blur\u002Ffrosting level |\n| `saturation` | `number` | `140` | Controls color saturation of the glass effect |\n| `aberrationIntensity` | `number` | `2` | Controls chromatic aberration intensity |\n| `elasticity` | `number` | `0.15` | Controls the \"liquid\" elastic feel (0 = rigid, higher = more elastic) |\n| `cornerRadius` | `number` | `999` | Border radius in pixels |\n| `className` | `string` | `\"\"` | Additional CSS classes |\n| `padding` | `string` | - | CSS padding value |\n| `style` | `React.CSSProperties` | - | Additional inline styles |\n| `overLight` | `boolean` | `false` | Whether the glass is over a light background |\n| `onClick` | `() => void` | - | Click handler |\n| `mouseContainer` | `React.RefObject\u003CHTMLElement \\| null> \\| null` | `null` | Container element to track mouse movement on (defaults to the glass component itself) |\n| `mode` | `\"standard\" \\| \"polar\" \\| \"prominent\" \\| \"shader\"` | `\"standard\"` | Refraction mode for different visual effects. `shader` is the most accurate but not the most stable. |\n| `globalMousePos` | `{ x: number; y: number }` | - | Global mouse position coordinates for manual control |\n| `mouseOffset` | `{ x: number; y: number }` | - | Mouse position offset for fine-tuning positioning |\n","该项目为React应用提供Apple风格的液态玻璃效果。它具备边缘弯曲和折射、多种折射模式、可配置的霜冻程度以及对任意子元素的支持等核心功能，同时允许用户自定义填充、悬停与点击效果、色散和弹性等参数，以高度模仿Apple的设计美学。适用于需要增强视觉体验的Web项目中，如卡片、按钮等UI组件的设计。需要注意的是，Safari和Firefox浏览器对该效果的支持有限。",2,"2026-06-11 03:46:19","high_star"]