{"_id":"@crazygl/hero-black-glass-reveal","_rev":"2-ef50f55c9fb508193f67f2f054860386","name":"@crazygl/hero-black-glass-reveal","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@crazygl/hero-black-glass-reveal","version":"0.1.0","author":{"name":"ybouane"},"license":"Apache-2.0","_id":"@crazygl/hero-black-glass-reveal@0.1.0","maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"homepage":"https://crazygl.com/hero/black-glass-reveal","bugs":{"url":"https://github.com/crazygl-com/hero-black-glass-reveal/issues"},"dist":{"shasum":"328278ee127f20fb25cd378cd4b1ee2b1d128536","tarball":"https://registry.npmjs.org/@crazygl/hero-black-glass-reveal/-/hero-black-glass-reveal-0.1.0.tgz","fileCount":11,"integrity":"sha512-mHjeRolBq8ryksTyfbTIMfcdn/IPopThdZTB49NrgKmLyFVKkWQpZjHn1tG4G6YvAoXlzQJGo4W11DCEHU/xsA==","signatures":[{"sig":"MEUCIQD9z0JjK75XO1B5/u+gSo0S+Oz4y4k9SKebT4ro+JRdXgIgHPdegocJPxTvI160jbw/lI6n8hKYFnq5D6gZ2Yp6fuo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":69561},"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":"814334a777a408df907a5d53df1fbad141cf2946","_npmUser":{"name":"ybouane","email":"ybouane@ybouane.com"},"repository":{"url":"git+https://github.com/crazygl-com/hero-black-glass-reveal.git","type":"git"},"_npmVersion":"11.12.0","description":"Black Glass Product Reveal — a horizontal light sweep crosses an almost-black canvas, revealing a glossy product screenshot inside a ceramic black-glass frame.","directories":{},"_nodeVersion":"24.14.0","dependencies":{"three":"^0.184.0","@crazygl/core":"^0.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/hero-black-glass-reveal_0.1.0_1782870543500_0.39501962703829885","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@crazygl/hero-black-glass-reveal","version":"0.1.1","description":"Black Glass Product Reveal — An almost-black canvas. A slow horizontal light sweeps left to right, revealing a glossy product screenshot inside a ceramic black-glass frame. Cinematic reveal for luxury SaaS, fintech, and… A customizable CrazyGL animated he","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.184.0"},"peerDependencies":{"react":">=18","react-dom":">=18"},"license":"Apache-2.0","author":{"name":"ybouane"},"homepage":"https://crazygl.com/hero/black-glass-reveal","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-black-glass-reveal.git"},"publishConfig":{"access":"public"},"keywords":["three","3d","screenshot","reveal","black-glass","luxury","premium","fintech","saas","cinematic","black-glass-reveal","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas"],"bugs":{"url":"https://github.com/crazygl-com/hero-black-glass-reveal/issues"},"gitHead":"57e7e920533844cfa29222cc1f17689e08898d1b","_id":"@crazygl/hero-black-glass-reveal@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-r9Gl7dIn8w2YNIRgcS55rjL7qffPLa9BYI3oR1ffJUnMbUjVTLyBYWaOJEJSdOnVSAeN7u1dIPJZrtWwQFZuVA==","shasum":"846f1d4b4bd429622d3b0f429f372af99616cae4","tarball":"https://registry.npmjs.org/@crazygl/hero-black-glass-reveal/-/hero-black-glass-reveal-0.1.1.tgz","fileCount":11,"unpackedSize":70115,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBA6Dj9r3E5qgL1O28nl2CL5NK733DxfI6ewyBS0Bnj2AiEAx2KY8wVrSWW51jFiQYa+wZ/YWb36mYnkZ9i97dEj5nU="}]},"_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-black-glass-reveal_0.1.1_1782922263645_0.7215565000215476"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T01:49:03.308Z","modified":"2026-07-01T16:11:03.963Z","0.1.0":"2026-07-01T01:49:03.624Z","0.1.1":"2026-07-01T16:11:03.784Z"},"bugs":{"url":"https://github.com/crazygl-com/hero-black-glass-reveal/issues"},"author":{"name":"ybouane"},"license":"Apache-2.0","homepage":"https://crazygl.com/hero/black-glass-reveal","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-black-glass-reveal.git"},"description":"Black Glass Product Reveal — An almost-black canvas. A slow horizontal light sweeps left to right, revealing a glossy product screenshot inside a ceramic black-glass frame. Cinematic reveal for luxury SaaS, fintech, and… A customizable CrazyGL animated he","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-black-glass-reveal/banner-full.png\" alt=\"Black Glass Product Reveal\" width=\"640\">\n</p>\n\n# @crazygl/hero-black-glass-reveal\n\nAn almost-black canvas. A slow horizontal light sweeps left to right, revealing a glossy product screenshot inside a ceramic black-glass frame. Cinematic reveal for luxury SaaS, fintech, and premium B2B tools.\n\n## Demo\n[Black Glass Product Reveal](https://crazygl.com/hero/black-glass-reveal)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-black-glass-reveal\n```\n\n## Usage\n\n```tsx\nimport BlackGlassReveal from '@crazygl/hero-black-glass-reveal';\n\nexport default function Page() {\n  return (\n    <BlackGlassReveal\n      screenshot=\"https://crazygl.com/samples/screenshot-dashboard-dark-2.avif\"\n      heading=\"A new standard.\"\n      sweepPeriod={7}\n    />\n  );\n}\n```\n\n## Customise\n\n- **Screenshot** — `screenshot` media plus `screenshotX/Y`, `screenshotScale`, `screenshotTilt`, and `screenEmissive` (how bright the revealed display reads).\n- **Frame** — `frameColor`, `frameMetalness`, `frameRoughness`, `frameClearcoat`, `frameThickness`, `frameDepth` shape the ceramic black-glass bezel.\n- **Sweep** — `sweepPeriod`, `sweepWidth`, `sweepIntensity`, `sweepColor`, `revealFloor` control the light band and how visible the screen sits at rest.\n- **Motion** — `parallaxStrength` (pointer tilt) and `floorReflection` (dim mirrored floor).\n- **Background** — `bgColor`, `transparentBackground`.\n\n## Best for\n\n- Luxury SaaS launch pages and premium B2B tools\n- Fintech and trading dashboards\n- High-end product or device reveals\n- Any dark, cinematic landing where a single screenshot is the star\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":["three","3d","screenshot","reveal","black-glass","luxury","premium","fintech","saas","cinematic","black-glass-reveal","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas"]}