{"_id":"liquid-glass-react","_rev":"7-d5c2868449d33df1da663f520a069405","name":"liquid-glass-react","dist-tags":{"latest":"1.1.1"},"versions":{"0.0.1":{"name":"liquid-glass-react","version":"0.0.1","_id":"liquid-glass-react@0.0.1","maintainers":[{"name":"fivepointseven","email":"fivepointseven@icloud.com"}],"dist":{"shasum":"813674576ea363e9f39113bfc7fd54583aa55a5f","tarball":"https://registry.npmjs.org/liquid-glass-react/-/liquid-glass-react-0.0.1.tgz","fileCount":5,"integrity":"sha512-a7+KEObFzc1D0a1Gtw5CYguJOijHL19xpqTID4wqsz5pkekCr9rX6OR1i3/ScvNzRMtwCbcL8vzft9jrfjd+Rw==","signatures":[{"sig":"MEUCIBrL3dowJliap2/QZdeuWK+XcTYHgetAKX0Yew78/36ZAiEApPM7xv3m1aMivVaqXZQQaDkAqb/c5PH5fpA1qhpziB0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3869},"type":"module","module":"index.ts","_npmUser":{"name":"fivepointseven","email":"fivepointseven@icloud.com"},"_npmVersion":"10.4.0","description":"To install dependencies:","directories":{},"_nodeVersion":"21.6.2","_hasShrinkwrap":false,"devDependencies":{"@types/bun":"latest"},"peerDependencies":{"typescript":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/liquid-glass-react_0.0.1_1749581927184_0.7832073964350141","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"liquid-glass-react","version":"0.0.2","keywords":["react","component","library","typescript"],"author":"","license":"MIT","_id":"liquid-glass-react@0.0.2","maintainers":[{"name":"fivepointseven","email":"fivepointseven@icloud.com"}],"dist":{"shasum":"677696a2279149561bec9553e702d069e1a42bdf","tarball":"https://registry.npmjs.org/liquid-glass-react/-/liquid-glass-react-0.0.2.tgz","fileCount":8,"integrity":"sha512-ngWXymf38e/V/fnQS9V8SkRdgAT3XfEL8qiONVJKBgpy0STKAPimrFA3K/34x3+ZJ6G/s/atlwG4WwrLGfERPw==","signatures":[{"sig":"MEQCIAY20xxXDM4cxZGH6GEhS7/S0jswe+bN0aCEKq4XFvnVAiBbNBSvtm8mOKoY/qzfzS8+za8Iiz/MBqUoLYOakQNKZQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":61655},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"npm run build:esm -- --watch","build":"npm run clean && npm run build:esm && npm run build:cjs && npm run build:types","clean":"rm -rf dist","build:cjs":"esbuild src/index.tsx --bundle --format=cjs --outfile=dist/index.js --external:react --external:react-dom","build:esm":"esbuild src/index.tsx --bundle --format=esm --outfile=dist/index.esm.js --external:react --external:react-dom","build:types":"tsc --emitDeclarationOnly --outDir dist","prepublishOnly":"npm run build"},"_npmUser":{"name":"fivepointseven","email":"fivepointseven@icloud.com"},"repository":{"url":"","type":"git"},"workspaces":["liquid-glass"],"_npmVersion":"10.4.0","description":"A React component library built with esbuild","directories":{},"_nodeVersion":"21.6.2","_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","esbuild":"^0.19.0","react-dom":"^18.2.0","typescript":"^5.0.0","@types/react":"^18.2.0","@biomejs/biome":"^1.9.4","@types/react-dom":"^18.2.0"},"peerDependencies":{"react":">=19","react-dom":">=19"},"_npmOperationalInternal":{"tmp":"tmp/liquid-glass-react_0.0.2_1749594235985_0.9793995870797458","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"liquid-glass-react","version":"1.0.0","keywords":["react","component","library","typescript"],"author":"","license":"MIT","_id":"liquid-glass-react@1.0.0","maintainers":[{"name":"fivepointseven","email":"fivepointseven@icloud.com"}],"dist":{"shasum":"fa13200086360670591d5c290959f09285ab4789","tarball":"https://registry.npmjs.org/liquid-glass-react/-/liquid-glass-react-1.0.0.tgz","fileCount":8,"integrity":"sha512-2IKXBoYJAkKZIINSIdRxHbita9BCPooSKlNzEZrs9uSw0retWovYeTl3fqKtXYvOQo0Myza4NL4DoRC28uJGtQ==","signatures":[{"sig":"MEUCIENXcc3q+M+v3/U/2O+nT2lZcQHsC1i3M9us9y64tbRmAiEA07Mi1kjqb5aLt4jfRXK/O/R/5/siaXoInB4/6CnNYdA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":63213},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"34b4efb9c2a0e2573eb3af972fe19061b30ca838","scripts":{"dev":"npm run build:esm -- --watch","build":"npm run clean && npm run build:esm && npm run build:cjs && npm run build:types","clean":"rm -rf dist","build:cjs":"esbuild src/index.tsx --bundle --format=cjs --outfile=dist/index.js --external:react --external:react-dom","build:esm":"esbuild src/index.tsx --bundle --format=esm --outfile=dist/index.esm.js --external:react --external:react-dom","build:types":"tsc --emitDeclarationOnly --outDir dist","prepublishOnly":"npm run build"},"_npmUser":{"name":"fivepointseven","email":"fivepointseven@icloud.com"},"repository":{"url":"","type":"git"},"workspaces":["liquid-glass"],"_npmVersion":"10.4.0","description":"Apple's Liquid Glass effect for React","directories":{},"_nodeVersion":"21.6.2","_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","esbuild":"^0.19.0","react-dom":"^18.2.0","typescript":"^5.0.0","@types/react":"^18.2.0","@biomejs/biome":"^1.9.4","@types/react-dom":"^18.2.0"},"peerDependencies":{"react":">=19","react-dom":">=19"},"_npmOperationalInternal":{"tmp":"tmp/liquid-glass-react_1.0.0_1749595965802_0.8154148422364371","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"liquid-glass-react","version":"1.0.1","keywords":["react","component","library","typescript"],"author":"","license":"MIT","_id":"liquid-glass-react@1.0.1","maintainers":[{"name":"fivepointseven","email":"fivepointseven@icloud.com"}],"dist":{"shasum":"f22713c343dfbbe02c14fa51e57b699a0bfed606","tarball":"https://registry.npmjs.org/liquid-glass-react/-/liquid-glass-react-1.0.1.tgz","fileCount":9,"integrity":"sha512-eIoT+9d8KWrB/8vrITGPMZZ8JFPt4iECKpAJy6apdhnlHFY6FO0/JeftqcK6hYdxS31kQkVaCap29m80XmU4Kg==","signatures":[{"sig":"MEUCIDZ0p7VxLb/U9LGnvWuWrCdriY1S7A/C2jwGa8+VDu20AiEA1ZFNWUnd4VYUWURvR/FQ971WFK2iHIDyplIGNrf2gdk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":82506},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"0114cbc5c7d4ec6355e84733319cad7986636643","scripts":{"dev":"npm run build:esm -- --watch","build":"npm run clean && npm run build:esm && npm run build:cjs && npm run build:types","clean":"rm -rf dist","build:cjs":"esbuild src/index.tsx --bundle --format=cjs --outfile=dist/index.js --external:react --external:react-dom","build:esm":"esbuild src/index.tsx --bundle --format=esm --outfile=dist/index.esm.js --external:react --external:react-dom","build:types":"tsc --emitDeclarationOnly --outDir dist","prepublishOnly":"npm run build"},"_npmUser":{"name":"fivepointseven","email":"fivepointseven@icloud.com"},"repository":{"url":"","type":"git"},"workspaces":["liquid-glass"],"_npmVersion":"10.4.0","description":"Apple's Liquid Glass effect for React","directories":{},"_nodeVersion":"21.6.2","_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","esbuild":"^0.19.0","react-dom":"^18.2.0","typescript":"^5.0.0","@types/react":"^18.2.0","@biomejs/biome":"^1.9.4","@types/react-dom":"^18.2.0"},"peerDependencies":{"react":">=19","react-dom":">=19"},"_npmOperationalInternal":{"tmp":"tmp/liquid-glass-react_1.0.1_1749640215245_0.4319402917679276","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"liquid-glass-react","version":"1.0.2","keywords":["react","component","library","typescript"],"author":"","license":"MIT","_id":"liquid-glass-react@1.0.2","maintainers":[{"name":"fivepointseven","email":"fivepointseven@icloud.com"}],"dist":{"shasum":"344bec95e55cd5d4710921a55b080d6d3e384c62","tarball":"https://registry.npmjs.org/liquid-glass-react/-/liquid-glass-react-1.0.2.tgz","fileCount":9,"integrity":"sha512-zQEbu4177JT2VhcIzoABvKUURAZSoeB2rRSEgt1ZvolWrWIDcZ47aAUB2T8o3kkBaCjEhvFxN4s9z/dRkq+big==","signatures":[{"sig":"MEYCIQDq8cXfho/B7hD6Uz+zbcQobKS3CCQpEgUWykYoGUaLmQIhAPjkTNzTi8Hjrvrt5GzmtJbCFWNpFtYFT9IajpO7D/rA","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":170868},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"f3c6efab2d8e035cb6dd7aea303abe52c3bdaef3","scripts":{"dev":"npm run build:esm -- --watch","build":"npm run clean && npm run build:esm && npm run build:cjs && npm run build:types","clean":"rm -rf dist","build:cjs":"esbuild src/index.tsx --bundle --format=cjs --outfile=dist/index.js --external:react --external:react-dom","build:esm":"esbuild src/index.tsx --bundle --format=esm --outfile=dist/index.esm.js --external:react --external:react-dom","build:types":"tsc --emitDeclarationOnly --outDir dist","prepublishOnly":"npm run build"},"_npmUser":{"name":"fivepointseven","email":"fivepointseven@icloud.com"},"repository":{"url":"","type":"git"},"workspaces":["liquid-glass"],"_npmVersion":"10.4.0","description":"Apple's Liquid Glass effect for React","directories":{},"_nodeVersion":"21.6.2","_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","esbuild":"^0.19.0","react-dom":"^18.2.0","typescript":"^5.0.0","@types/react":"^18.2.0","@biomejs/biome":"^1.9.4","@types/react-dom":"^18.2.0"},"peerDependencies":{"react":">=19","react-dom":">=19"},"_npmOperationalInternal":{"tmp":"tmp/liquid-glass-react_1.0.2_1749659479425_0.9089875808637262","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"liquid-glass-react","version":"1.1.0","keywords":["react","component","library","typescript"],"author":"","license":"MIT","_id":"liquid-glass-react@1.1.0","maintainers":[{"name":"fivepointseven","email":"fivepointseven@icloud.com"}],"dist":{"shasum":"6dea18a2eceb240b987cec42b22c2e565f20e9a5","tarball":"https://registry.npmjs.org/liquid-glass-react/-/liquid-glass-react-1.1.0.tgz","fileCount":11,"integrity":"sha512-ijiM3oiGHtz4f0ctOEPf0c/qwoNmv7FXs4JFGVHsFhYiqLQzAcinha9KaKKQYaxIEFmOfDg+Kj+PLdE6LOkAnA==","signatures":[{"sig":"MEYCIQCcjZdGyPN/KW9TOVyXOJS5GLsbtYahWHBd4k4dRDrnOAIhAOg4hDx+EJXqSWmIdRhcNS1z3d6zZU5YVQZ+4wu8iwoc","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":180183},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"ef9a0bbcd9aa1cfae8ab2bea50a32998d8aa4613","scripts":{"dev":"npm run build:esm -- --watch","build":"npm run clean && npm run build:esm && npm run build:cjs && npm run build:types","clean":"rm -rf dist","build:cjs":"esbuild src/index.tsx --bundle --format=cjs --outfile=dist/index.js --external:react --external:react-dom","build:esm":"esbuild src/index.tsx --bundle --format=esm --outfile=dist/index.esm.js --external:react --external:react-dom","build:types":"tsc --emitDeclarationOnly --outDir dist","prepublishOnly":"npm run build"},"_npmUser":{"name":"fivepointseven","email":"fivepointseven@icloud.com"},"repository":{"url":"","type":"git"},"workspaces":["liquid-glass"],"_npmVersion":"10.4.0","description":"Apple's Liquid Glass effect for React","directories":{},"_nodeVersion":"21.6.2","_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","esbuild":"^0.19.0","react-dom":"^18.2.0","typescript":"^5.0.0","@types/react":"^18.2.0","@biomejs/biome":"^1.9.4","@types/react-dom":"^18.2.0"},"peerDependencies":{"react":">=19","react-dom":">=19"},"_npmOperationalInternal":{"tmp":"tmp/liquid-glass-react_1.1.0_1749672272955_0.670323581260585","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"liquid-glass-react","version":"1.1.1","description":"Apple's Liquid Glass effect for React","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","workspaces":["liquid-glass"],"scripts":{"build":"npm run clean && npm run build:esm && npm run build:cjs && npm run build:types","build:esm":"esbuild src/index.tsx --bundle --format=esm --outfile=dist/index.esm.js --external:react --external:react-dom","build:cjs":"esbuild src/index.tsx --bundle --format=cjs --outfile=dist/index.js --external:react --external:react-dom","build:types":"tsc --emitDeclarationOnly --outDir dist","clean":"rm -rf dist","dev":"npm run build:esm -- --watch","prepublishOnly":"npm run build"},"peerDependencies":{"react":">=19","react-dom":">=19"},"devDependencies":{"@biomejs/biome":"^1.9.4","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","esbuild":"^0.19.0","react":"^18.2.0","react-dom":"^18.2.0","typescript":"^5.0.0"},"keywords":["react","component","library","typescript"],"author":"","license":"MIT","repository":{"type":"git","url":""},"_id":"liquid-glass-react@1.1.1","gitHead":"2f134d928b0313a7075f22e9f844212a72254231","_nodeVersion":"21.6.2","_npmVersion":"10.4.0","dist":{"integrity":"sha512-pKzaktaMAEztd93wpWcz2Z5Z9qdLJUNJdMX+n00Ca4XsnrLTQ5xJzm/+GQXZUeuFXe/PQ8ziVMZO6531PyaFJw==","shasum":"d510517b5fda7785890e28a7885881abff887421","tarball":"https://registry.npmjs.org/liquid-glass-react/-/liquid-glass-react-1.1.1.tgz","fileCount":11,"unpackedSize":180339,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHkR8RTmsFLsXBmBQgoQKV7E3S3hTS/iP5lL6dOw9oVtAiEAmSY2W1bRyUeAgxkHQiqtwXOnbkK5D9ploUvMj9TYeHI="}]},"_npmUser":{"name":"fivepointseven","email":"fivepointseven@icloud.com"},"directories":{},"maintainers":[{"name":"fivepointseven","email":"fivepointseven@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/liquid-glass-react_1.1.1_1749672778932_0.47982137203694886"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-10T18:58:47.183Z","modified":"2025-06-11T20:12:59.299Z","0.0.1":"2025-06-10T18:58:47.343Z","0.0.2":"2025-06-10T22:23:56.212Z","1.0.0":"2025-06-10T22:52:45.972Z","1.0.1":"2025-06-11T11:10:15.407Z","1.0.2":"2025-06-11T16:31:19.597Z","1.1.0":"2025-06-11T20:04:33.158Z","1.1.1":"2025-06-11T20:12:59.134Z"},"license":"MIT","keywords":["react","component","library","typescript"],"repository":{"type":"git","url":""},"description":"Apple's Liquid Glass effect for React","maintainers":[{"name":"fivepointseven","email":"fivepointseven@icloud.com"}],"readme":"# Liquid Glass React\n\nApple's Liquid Glass effect for React.\n\nCard Example | Button Example\n:-------------------------:|:-------------------------:\n | \n\n## Video\n\n[See it in action](https://raw.githubusercontent.com/rdev/liquid-glass-react/refs/heads/master/assets/video.mov?token=GHSAT0AAAAAACPNNASADXWXU2ZZA2OCMJ3W2CIWMMA)\n\n## Demo\n\n[See it in action but touch it](https://liquid-glass.maxrovensky.com)\n\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 \n
\n
Your content here
\n
This will have the liquid glass effect
\n
\n \n )\n}\n```\n\n### Button Example\n\n```tsx\n console.log('Button clicked!')}\n>\n Click Me\n\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(null)\n\n return (\n
\n \n
\n
Glass responds to mouse anywhere in the container
\n
\n \n
\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/frosting 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 \\| 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","readmeFilename":"README.md"}