{"_id":"@crazygl/hero-liquid-metal-orb","name":"@crazygl/hero-liquid-metal-orb","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@crazygl/hero-liquid-metal-orb","version":"0.1.1","description":"Liquid Metal Orb — A floating mercury sphere ray-marched in real time, sampling a real environment image (or a procedural studio HDRI) for genuine mirror-like reflections. Drop in a photo to see it bend across the… A customizable CrazyGL animated hero sec","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./metadata.json":"./metadata.json","./style.css":"./style.css"},"dependencies":{"@crazygl/core":"^0.1.1"},"peerDependencies":{"react":">=18","react-dom":">=18"},"license":"Apache-2.0","author":{"name":"ybouane"},"homepage":"https://crazygl.com/hero/liquid-metal-orb","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-liquid-metal-orb.git"},"publishConfig":{"access":"public"},"keywords":["raymarching","metal","mercury","fresnel","reflections","hdri","image-input","webgl","premium","liquid-metal-orb","crazygl","hero","hero-section","react","animation","ui","landing-page","interactive","frontend","component","canvas","three"],"bugs":{"url":"https://github.com/crazygl-com/hero-liquid-metal-orb/issues"},"gitHead":"418837ad13a9d64de63762952c94730dd58f8f6c","_id":"@crazygl/hero-liquid-metal-orb@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-IIjeKUDG/aLHxnmqHj4RrnGBL0A/f4HvRsQaZn25n12AwjAv6GBK+B6nn6hmzt7GRSGaWBwW0l4iCduwPKdG1Q==","shasum":"964e033454a1215de702cee9982ad3c31b54607d","tarball":"https://registry.npmjs.org/@crazygl/hero-liquid-metal-orb/-/hero-liquid-metal-orb-0.1.1.tgz","fileCount":9,"unpackedSize":60757,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDh9CCxbHnVQC0+jwejbZAVO6ZUdNehSl5oxwtL3BfDwQIhAJ5vy3vDqjeW/+GIXhRFZzecCzUjloIAq/TnxBUJAiLW"}]},"_npmUser":{"name":"ybouane","email":"ybouane@ybouane.com"},"directories":{},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/hero-liquid-metal-orb_0.1.1_1782922397391_0.12732396239200328"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T16:13:17.186Z","0.1.1":"2026-07-01T16:13:17.532Z","modified":"2026-07-01T16:13:17.804Z"},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"description":"Liquid Metal Orb — A floating mercury sphere ray-marched in real time, sampling a real environment image (or a procedural studio HDRI) for genuine mirror-like reflections. Drop in a photo to see it bend across the… A customizable CrazyGL animated hero sec","homepage":"https://crazygl.com/hero/liquid-metal-orb","keywords":["raymarching","metal","mercury","fresnel","reflections","hdri","image-input","webgl","premium","liquid-metal-orb","crazygl","hero","hero-section","react","animation","ui","landing-page","interactive","frontend","component","canvas","three"],"repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-liquid-metal-orb.git"},"author":{"name":"ybouane"},"bugs":{"url":"https://github.com/crazygl-com/hero-liquid-metal-orb/issues"},"license":"Apache-2.0","readme":"<sub>*Hero made by [@ybouane](https://x.com/ybouane).*</sub>\n<p align=\"center\">\n  <img src=\"https://crazygl.com/heroes/hero-liquid-metal-orb/banner-full.png\" alt=\"Liquid Metal Orb\" width=\"640\">\n</p>\n\n# @crazygl/hero-liquid-metal-orb\n\nA floating mercury sphere ray-marched in real time, sampling a real environment image (or a procedural studio HDRI) for genuine mirror-like reflections. Drop in a photo to see it bend across the surface. Three layouts: orb centered or content beside it.\n\n## Demo\n[Liquid Metal Orb](https://crazygl.com/hero/liquid-metal-orb)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-liquid-metal-orb\n```\n\n## Usage\n\n```tsx\nimport LiquidMetalOrb from '@crazygl/hero-liquid-metal-orb';\n\nexport default function Page() {\n  return (\n    <LiquidMetalOrb\n      layout=\"content-left\"\n      environmentImage=\"https://crazygl.com/samples/hdri1.avif\"\n      metallic={1}\n      orbSize={0.95}\n    />\n  );\n}\n```\n\n## Customise\n\n- **Environment** — `environmentImage` (equirectangular 2:1 reflection map; empty = procedural studio HDRI), `envRotation`, plus `envTopColor` / `envBottomColor` for the procedural fallback.\n- **Material** — `metallic` (1 = pure mirror, 0 = matte), `metalTint`, `fresnelStrength`, `rimColor`, `sunColor`.\n- **Shape** — `orbSize`, `deformAmount` (noise boil amplitude), `boilSpeed`, `stretch` (pointer pull).\n- **Background** — `backgroundImage` or a `bgColor1/2/3` procedural mesh gradient; `transparent` to composite the orb over the page.\n- **Layout** — orb `centered`, `content-left`, or `content-right`.\n\n## Best for\n\n- Premium product and luxury beauty brand launch pages.\n- AI and developer tools wanting a living, tactile centerpiece.\n- Fintech, crypto, and automotive concept reveals.\n- Design-studio portfolios needing a striking hero focal point.\n\n\n\nThis hero is part of [CrazyGL](https://crazygl.com), a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready `SKILL.md` file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.\n","readmeFilename":"README.md","_rev":"1-b0e4471f37f93a9dd77a46ce992e4006"}