{"_id":"@crazygl/hero-crystal-logo-prism","_rev":"2-d3e6138787404bfe14886fc9855d7048","name":"@crazygl/hero-crystal-logo-prism","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@crazygl/hero-crystal-logo-prism","version":"0.1.0","author":{"name":"ybouane"},"license":"Apache-2.0","_id":"@crazygl/hero-crystal-logo-prism@0.1.0","maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"homepage":"https://crazygl.com/hero/crystal-logo-prism","bugs":{"url":"https://github.com/crazygl-com/hero-crystal-logo-prism/issues"},"dist":{"shasum":"81d629dbacaabbd7978973640a6f2c4cc9a3060c","tarball":"https://registry.npmjs.org/@crazygl/hero-crystal-logo-prism/-/hero-crystal-logo-prism-0.1.0.tgz","fileCount":9,"integrity":"sha512-s2tgMlXwL2Dp9HycQDZQjbp5yvONW2Wi/eT8dJWryXivrp7z91OKGjCjLjukxpiOoMF8rcNdrx9OQrhs4wlkrQ==","signatures":[{"sig":"MEUCIGUyrHvrICLh5BdJUTtN/M0GDRVd7e+QO7vdDb9jHsw3AiEAohYrWxBLBZze/7njlQKM+GQKPepWOS1S9WBR0nZoFi4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":60762},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./style.css":"./style.css","./metadata.json":"./metadata.json"},"gitHead":"d76a93e6e6f7cd24b23ee98516652353d6f9f4d2","_npmUser":{"name":"ybouane","email":"ybouane@ybouane.com"},"repository":{"url":"git+https://github.com/crazygl-com/hero-crystal-logo-prism.git","type":"git"},"_npmVersion":"11.12.0","description":"Logo suspended inside a rotating 3D ray-marched crystal prism — per-channel IOR refraction, caustic floor, bloom on inner emission.","directories":{},"_nodeVersion":"24.14.0","dependencies":{"@crazygl/core":"^0.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/hero-crystal-logo-prism_0.1.0_1782870717134_0.21786334561827814","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@crazygl/hero-crystal-logo-prism","version":"0.1.1","description":"Logo Inside a Crystal — A slowly rotating crystal prism (3D ray-marched rounded cube) with your logo suspended inside as a glowing emissive mesh. Per-channel IOR refraction on the cube faces splits white light into… A customizable CrazyGL animated hero se","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/crystal-logo-prism","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-crystal-logo-prism.git"},"publishConfig":{"access":"public"},"keywords":["crystal","prism","logo","refraction","chromatic-aberration","dispersion","raymarching","caustics","bloom","premium","crystal-logo-prism","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas","three"],"bugs":{"url":"https://github.com/crazygl-com/hero-crystal-logo-prism/issues"},"gitHead":"c136e9983f6f04b36de3bd1e19e2df6fcd3a90c5","_id":"@crazygl/hero-crystal-logo-prism@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-lA9zB0xXy4Hh/sV9Szj6GzocNiZF0aACHNpvHw+71gT+iBb5uZzZaULHIjeWtnrC0Ax+FchP3eMIWJ1AabSaDw==","shasum":"7c14d4949aa1e1d45149dd8d249904bd4359c45f","tarball":"https://registry.npmjs.org/@crazygl/hero-crystal-logo-prism/-/hero-crystal-logo-prism-0.1.1.tgz","fileCount":9,"unpackedSize":61424,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCjjr1yiU6LW14BMdyg2nbTKG0EoHKjasD/7q6KOSqCBAIgPkQB5j2DKBdwovXrURbbefpGOj82wbEaGmi1kbpH6xU="}]},"_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-crystal-logo-prism_0.1.1_1782922291394_0.543064408456196"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T01:51:56.915Z","modified":"2026-07-01T16:11:31.678Z","0.1.0":"2026-07-01T01:51:57.260Z","0.1.1":"2026-07-01T16:11:31.528Z"},"bugs":{"url":"https://github.com/crazygl-com/hero-crystal-logo-prism/issues"},"author":{"name":"ybouane"},"license":"Apache-2.0","homepage":"https://crazygl.com/hero/crystal-logo-prism","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-crystal-logo-prism.git"},"description":"Logo Inside a Crystal — A slowly rotating crystal prism (3D ray-marched rounded cube) with your logo suspended inside as a glowing emissive mesh. Per-channel IOR refraction on the cube faces splits white light into… A customizable CrazyGL animated hero se","maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"readme":"<sub>*Hero made by [@ybouane](https://x.com/ybouane).*</sub>\n<p align=\"center\">\n  <img src=\"https://crazygl.com/heroes/hero-crystal-logo-prism/banner-full.png\" alt=\"Logo Inside a Crystal\" width=\"640\">\n</p>\n\n# @crazygl/hero-crystal-logo-prism\n\nA slowly rotating crystal prism (3D ray-marched rounded cube) with your logo suspended inside as a glowing emissive mesh. Per-channel IOR refraction on the cube faces splits white light into rainbow seams; caustic highlights pool on the virtual floor; soft bloom on the inner emission.\n\n## Demo\n[Logo Inside a Crystal](https://crazygl.com/hero/crystal-logo-prism)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-crystal-logo-prism\n```\n\n## Usage\n\n```tsx\nimport CrystalLogoPrism from '@crazygl/hero-crystal-logo-prism';\n\nexport default function Page() {\n  return (\n    <CrystalLogoPrism\n      heading=\"Held in crystal.\"\n      logo=\"https://crazygl.com/samples/crazygl.svg\"\n      logoEmission=\"#9be5ff\"\n      dispersion={0.055}\n      ior={1.5}\n    />\n  );\n}\n```\n\n## Customise\n\n- **Content** — `heading` / `subheading`, or switch `contentType` to two-columns / custom node.\n- **Logo** — `logo` (SVG/PNG; sampled to an alpha mask), `logoEmission` color, `logoBrightness`.\n- **Crystal** — `crystalSize`, `crystalRound` edge round-off, `crystalCenterX` lateral position, `rotSpeed`, `tiltX`.\n- **Optics** — `ior` (green channel), `dispersion` rainbow spread, `fresnel` rim, `specGloss`, `absorbHex` inner tint.\n- **Caustics & Bloom** — `causticStrength`, `causticHex`, `bloom` on the inner logo.\n- **Background / Behavior** — `bgTop`, `bgBottom`, `vignette`, `pointerParallax`.\n\n## Best for\n\n- Premium SaaS and brand launch pages\n- Luxury product, jewelry, and identity-system showcases\n- Web3 / fintech landing pages wanting a \"hand-cut light\" signature\n- Agency and design-studio portfolios\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","keywords":["crystal","prism","logo","refraction","chromatic-aberration","dispersion","raymarching","caustics","bloom","premium","crystal-logo-prism","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas","three"]}