{"_id":"@crazygl/hero-dashboard-light-beam","_rev":"2-ced48f80ecdb426ec32ee371e91f5084","name":"@crazygl/hero-dashboard-light-beam","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@crazygl/hero-dashboard-light-beam","version":"0.1.0","author":{"name":"ybouane"},"license":"Apache-2.0","_id":"@crazygl/hero-dashboard-light-beam@0.1.0","maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"homepage":"https://crazygl.com/hero/dashboard-light-beam","bugs":{"url":"https://github.com/crazygl-com/hero-dashboard-light-beam/issues"},"dist":{"shasum":"b835dff605aa3b94e26c4e1b93618faf18ae5c0f","tarball":"https://registry.npmjs.org/@crazygl/hero-dashboard-light-beam/-/hero-dashboard-light-beam-0.1.0.tgz","fileCount":11,"integrity":"sha512-GsAjKLBrbNO6JVROL2Mqz/z2pLFk3oP+FaJUyy1kOxHvg2Ib1g5hLKvxK77XpcvfUuGZkRaVpxnFwZaG99lEvA==","signatures":[{"sig":"MEYCIQD+wpiBSpMCMwmd8oiT5604pRjVI19PfdD4cIt+ukBvgAIhAL8urqyr1gFDk2gSFsMgpD7CL3lfWKeuZY0HFOjbv/pC","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":79207},"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":"f3f9bbe5c9f96acf93c65474186957bf6135619f","_npmUser":{"name":"ybouane","email":"ybouane@ybouane.com"},"repository":{"url":"git+https://github.com/crazygl-com/hero-dashboard-light-beam.git","type":"git"},"_npmVersion":"11.12.0","description":"Floating Dashboard with Light Beam Reveal — your screenshot tilted in 3D space, scanned in by a soft blue-purple light beam, then sat above a reflective floor with a glowing uplight.","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-dashboard-light-beam_0.1.0_1782870862617_0.27101203370396276","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@crazygl/hero-dashboard-light-beam","version":"0.1.1","description":"Floating Dashboard With Light Beam Reveal — Your product dashboard, tilted in 3D space, scanned into existence by a soft blue-purple light beam. A glowing uplight underneath and a subtle floor reflection complete the… A customizable CrazyGL animated hero ","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/dashboard-light-beam","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-dashboard-light-beam.git"},"publishConfig":{"access":"public"},"keywords":["three","3d","screenshot","dashboard","reveal","beam","scan","saas","analytics","admin","dashboard-light-beam","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas"],"bugs":{"url":"https://github.com/crazygl-com/hero-dashboard-light-beam/issues"},"gitHead":"fa9984cd63ef0ea6d00c7065cd13289619342cc2","_id":"@crazygl/hero-dashboard-light-beam@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-KY7hM4Uv8KxAyOrCf1ePzdTc1C7mJjqdbIIqwizPl/fd/lHzIVJT+dBGOrmLdlFoHQZFVdYHOEQ8R+KFD6zEQg==","shasum":"f3c01cfccc23d860f0040b56f4576184a878dd46","tarball":"https://registry.npmjs.org/@crazygl/hero-dashboard-light-beam/-/hero-dashboard-light-beam-0.1.1.tgz","fileCount":11,"unpackedSize":79730,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD170+T6xt5OwYHiSF/kdGVrKBMX+Se0HsLMj/sea+P/gIgYpIrgfHJ9i5fferXO4p75XLc7QvGY6X6CDKZRSxAY5g="}]},"_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-dashboard-light-beam_0.1.1_1782922296169_0.4513467297457052"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T01:54:22.430Z","modified":"2026-07-01T16:11:36.481Z","0.1.0":"2026-07-01T01:54:22.797Z","0.1.1":"2026-07-01T16:11:36.340Z"},"bugs":{"url":"https://github.com/crazygl-com/hero-dashboard-light-beam/issues"},"author":{"name":"ybouane"},"license":"Apache-2.0","homepage":"https://crazygl.com/hero/dashboard-light-beam","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-dashboard-light-beam.git"},"description":"Floating Dashboard With Light Beam Reveal — Your product dashboard, tilted in 3D space, scanned into existence by a soft blue-purple light beam. A glowing uplight underneath and a subtle floor reflection complete the… A customizable CrazyGL animated hero ","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-dashboard-light-beam/banner-full.png\" alt=\"Floating Dashboard With Light Beam Reveal\" width=\"640\">\n</p>\n\n# @crazygl/hero-dashboard-light-beam\n\nYour product dashboard, tilted in 3D space, scanned into existence by a soft blue-purple light beam. A glowing uplight underneath and a subtle floor reflection complete the look.\n\n## Demo\n[Floating Dashboard With Light Beam Reveal](https://crazygl.com/hero/dashboard-light-beam)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-dashboard-light-beam\n```\n\n## Usage\n\n```tsx\nimport FloatingDashboardWithLightBeamReveal from '@crazygl/hero-dashboard-light-beam';\n\nexport default function Page() {\n  return (\n    <FloatingDashboardWithLightBeamReveal\n      screenshot=\"/shots/dashboard-dark.avif\"\n      heading=\"See your numbers, lit.\"\n      subheading=\"Real-time. Beautifully presented.\"\n      beamColor=\"#7080ff\"\n      cardTilt={13}\n    />\n  );\n}\n```\n\n## Customise\n\n- **Content** — `heading`/`subheading`, two-column, or custom `node`.\n- **Screenshot** — `screenshot` media (dark dashboards read most cinematic; non-16:9 framed not stretched).\n- **Beam** — `beamColor`, `beamDuration`, `beamWidth`, `beamIntensity`, `loopBeam`, `loopBeamPeriod`.\n- **Card** — `cardScale`, `cardTilt`, `screenshotX/Y`, `screenEmissive`.\n- **Atmosphere** — `underlightStrength`, `underlightCool`, `underlightWarm`, `floorReflection`.\n- **Motion / Background** — `parallaxStrength`, `transparentBackground`, `bgTop`, `bgBottom`.\n\n## Best for\n\n- SaaS launch and product landing heroes.\n- Analytics / BI dashboards and admin tools.\n- AI / data products showing off a live interface.\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","dashboard","reveal","beam","scan","saas","analytics","admin","dashboard-light-beam","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas"]}