{"_id":"@crazygl/hero-liquid-glass-badge-logo","name":"@crazygl/hero-liquid-glass-badge-logo","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@crazygl/hero-liquid-glass-badge-logo","version":"0.1.1","description":"Liquid Glass Badge Logo — Your logo becomes a thick translucent liquid-glass badge that refracts a user-supplied photograph through its biconvex body. Per-channel IORs paint a real rainbow seam at the rim, the interior… A customizable CrazyGL animated her","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-glass-badge-logo","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-liquid-glass-badge-logo.git"},"publishConfig":{"access":"public"},"keywords":["glass","liquid-glass","logo","refraction","dispersion","fresnel","badge","image-input","premium","sdf","liquid-glass-badge-logo","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas","three"],"bugs":{"url":"https://github.com/crazygl-com/hero-liquid-glass-badge-logo/issues"},"gitHead":"ca8018b0d8b661f5852ab4fc826966e9c6e54aeb","_id":"@crazygl/hero-liquid-glass-badge-logo@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-oHzCfgyHf02uv5ADNuSSXfWPeRPU+gF0R0GYQSCd8gMRWTH1JY0rFZTOaIkq6sj0cUVDQR+suEPSWebIb/Lbaw==","shasum":"b7af9b924b4009bffd921fcd9c33f14aed5842b4","tarball":"https://registry.npmjs.org/@crazygl/hero-liquid-glass-badge-logo/-/hero-liquid-glass-badge-logo-0.1.1.tgz","fileCount":9,"unpackedSize":75019,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDIXzaJ5bol9dPzD+XvcQX3wpAPBJYpdKA0CuZjZ65vSgIhAKDYLFH3Xjh+qINL8lqzgS8b6bMsvwUK7Yy2UzJj0BHj"}]},"_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-glass-badge-logo_0.1.1_1782922396987_0.7363453315800077"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T16:13:16.806Z","0.1.1":"2026-07-01T16:13:17.112Z","modified":"2026-07-01T16:13:17.368Z"},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"description":"Liquid Glass Badge Logo — Your logo becomes a thick translucent liquid-glass badge that refracts a user-supplied photograph through its biconvex body. Per-channel IORs paint a real rainbow seam at the rim, the interior… A customizable CrazyGL animated her","homepage":"https://crazygl.com/hero/liquid-glass-badge-logo","keywords":["glass","liquid-glass","logo","refraction","dispersion","fresnel","badge","image-input","premium","sdf","liquid-glass-badge-logo","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas","three"],"repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-liquid-glass-badge-logo.git"},"author":{"name":"ybouane"},"bugs":{"url":"https://github.com/crazygl-com/hero-liquid-glass-badge-logo/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-glass-badge-logo/banner-full.png\" alt=\"Liquid Glass Badge Logo\" width=\"640\">\n</p>\n\n# @crazygl/hero-liquid-glass-badge-logo\n\nYour logo becomes a thick translucent liquid-glass badge that refracts a user-supplied photograph through its biconvex body. Per-channel IORs paint a real rainbow seam at the rim, the interior reads as frosted glass, and a 4-light Blinn-Phong studio rig sells the volume. Falls back to a rotating gradient backdrop when no image is supplied.\n\n## Demo\n[Liquid Glass Badge Logo](https://crazygl.com/hero/liquid-glass-badge-logo)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-liquid-glass-badge-logo\n```\n\n## Usage\n\n```tsx\nimport LiquidGlassBadgeLogo from '@crazygl/hero-liquid-glass-badge-logo';\n\nexport default function Page() {\n  return (\n    <LiquidGlassBadgeLogo\n      logo=\"/logo.svg\"\n      backgroundImage=\"/hero-photo.jpg\"\n      refraction={1.35}\n      dispersion={1.1}\n    />\n  );\n}\n```\n\n## Customise\n\n- **Logo** — transparent SVG (preferred) or PNG; the alpha silhouette is rasterised into a distance field and sculpted into the glass. `logoScale`, `logoCenterX`/`logoCenterY` place it.\n- **Backdrop** — `backgroundImage` (JPG/PNG/AVIF/WebP) is what refracts through the body. Leave empty for the procedural gradient + particles fallback (`bgWarm`/`bgCool`/`bgDeep`, `bgPulse`, `particles`), or blend with `proceduralAmount`.\n- **Glass shape** — `bevelDepth` (thickness) and `edgeSoftness`.\n- **Glass physics** — `refraction`, `dispersion` (rainbow-seam width), `fresnel`, `specGloss`, `absorption`, `frost`, plus `tintHex` and `rimHex`.\n- **Behavior** — `pointerTilt` parallax and idle `ambientSway`.\n\n## Best for\n\n- Premium product launches and luxury / beauty brand pages\n- Design-studio and agency sites that want their mark to feel physical\n- High-end SaaS landing pages and hero sections\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-ad53e8810b77faad81e439e51ecaba11"}