{"_id":"@crazygl/hero-glass-tile-logo","name":"@crazygl/hero-glass-tile-logo","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@crazygl/hero-glass-tile-logo","version":"0.1.1","description":"Glass Tile Logo — The logo is reconstructed from a grid of small glass blocks. Each tile floats apart, refracts the background through real MeshPhysicalMaterial transmission, then assembles into the silhouette on load.… 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","three":"^0.160.0"},"peerDependencies":{"react":">=18","react-dom":">=18"},"license":"Apache-2.0","author":{"name":"ybouane"},"homepage":"https://crazygl.com/hero/glass-tile-logo","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-glass-tile-logo.git"},"publishConfig":{"access":"public"},"keywords":["glass","logo","three","instanced","tiles","refraction","transmission","modular","image-input","premium","glass-tile-logo","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas"],"bugs":{"url":"https://github.com/crazygl-com/hero-glass-tile-logo/issues"},"gitHead":"61b35e4b6fc077227ecb3baa14927cfacf7a1625","_id":"@crazygl/hero-glass-tile-logo@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-6ck52rNLxooaSStvLlOQ2EWrfYynO51/97NJjDHoYSLJdOlOqDZLjrU1epKSEZo8fIDvmYJ8I/5WWlLvIeW4Fg==","shasum":"392b31fdaa125c7f568eadb12964ffccbd6d336f","tarball":"https://registry.npmjs.org/@crazygl/hero-glass-tile-logo/-/hero-glass-tile-logo-0.1.1.tgz","fileCount":9,"unpackedSize":83373,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIAzv1jDoDUS3oSZ8nXWOgHRqrk8g97IlByKqM1rHTWh+AiB9VCKzGBfS3MIX4sT8qOpbKuzEU7GyscQ340PZIFOrRw=="}]},"_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-glass-tile-logo_0.1.1_1782922338427_0.02580514186148064"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T16:12:18.256Z","0.1.1":"2026-07-01T16:12:18.573Z","modified":"2026-07-01T16:12:18.823Z"},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"description":"Glass Tile Logo — The logo is reconstructed from a grid of small glass blocks. Each tile floats apart, refracts the background through real MeshPhysicalMaterial transmission, then assembles into the silhouette on load.… A customizable CrazyGL animated her","homepage":"https://crazygl.com/hero/glass-tile-logo","keywords":["glass","logo","three","instanced","tiles","refraction","transmission","modular","image-input","premium","glass-tile-logo","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas"],"repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-glass-tile-logo.git"},"author":{"name":"ybouane"},"bugs":{"url":"https://github.com/crazygl-com/hero-glass-tile-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-glass-tile-logo/banner-full.png\" alt=\"Glass Tile Logo\" width=\"640\">\n</p>\n\n# @crazygl/hero-glass-tile-logo\n\nThe logo is reconstructed from a grid of small glass blocks. Each tile floats apart, refracts the background through real MeshPhysicalMaterial transmission, then assembles into the silhouette on load. Hover separates the tiles slightly. Built with Three.js InstancedMesh + HDRI reflections + soft contact shadows.\n\n## Demo\n[Glass Tile Logo](https://crazygl.com/hero/glass-tile-logo)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-glass-tile-logo\n```\n\n## Usage\n\n```tsx\nimport GlassTileLogo from '@crazygl/hero-glass-tile-logo';\n\nexport default function Page() {\n  return (\n    <GlassTileLogo\n      logo=\"https://crazygl.com/samples/crazygl.png\"\n      tileGrid={20}\n      glassIOR={1.5}\n      glassDispersion={0.04}\n      heading=\"Built block by block.\"\n    />\n  );\n}\n```\n\n## Customise\n\n- **Logo & layout** — `logo` (transparent PNG), `tileGrid` (tiles per long edge, 10–40), `tileGapPct`, `tileDepth`, `logoZoom`, `logoCenterX/Y`.\n- **Glass material** — `glassTransmission`, `glassRoughness`, `glassIOR` (1.5 = BK7, up to 2.4 for diamond), `glassThickness`, `glassDispersion` (rainbow seam), `glassTintHex`, `envIntensity`.\n- **Assembly animation** — `assembleDuration`, `scatterDistance`, `staggerAmount` (ripple-in order).\n- **Hover** — `hoverSeparation`, `hoverRadiusPct`.\n- **Ambient motion** — `ambientFloat`, `ambientSwaySpeed`.\n- **Stage** — `environmentImage` (equirectangular HDRI; biggest mood lever), `bgTopHex`, `bgBotHex`, `shadowAlpha`.\n\n## Best for\n\n- Premium SaaS and design-system launch pages where \"built from parts\" is the story\n- Developer tools, fintech and crypto products wanting a crafted, glassy signature\n- Luxury and product brands after a jewel-like logo reveal\n- Brand or rebrand announcement pages\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-dca31030738bc1428bbe918695a502c5"}