{"_id":"@crazygl/hero-neon-orbital","name":"@crazygl/hero-neon-orbital","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@crazygl/hero-neon-orbital","version":"0.1.1","description":"Neon Orbital Integrations — A dashboard screenshot at the centre with integration chips orbiting around it on an inclined plane, linked to the dashboard by glowing neon lines that pulse with travelling beads of light.… 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.160.0"},"peerDependencies":{"react":">=18","react-dom":">=18"},"license":"Apache-2.0","author":{"name":"ybouane"},"homepage":"https://crazygl.com/hero/neon-orbital","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-neon-orbital.git"},"publishConfig":{"access":"public"},"keywords":["integrations","saas","automation","neon","orbit","three","ecosystem","dashboard","neon-orbital","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas"],"bugs":{"url":"https://github.com/crazygl-com/hero-neon-orbital/issues"},"gitHead":"33db379c66062680e43c4f48375edbb44c23a4c3","_id":"@crazygl/hero-neon-orbital@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-738zZo9kS/KKysU8QvBBvYaCq0tvxBOi8e4XVOHXB27lisp06NSDEc7kkjlyvx8eMGuU+WI5wYtfs1kSzqBlUg==","shasum":"f6fe04eb360213d3f79d460cd3c0e46fb6b71eed","tarball":"https://registry.npmjs.org/@crazygl/hero-neon-orbital/-/hero-neon-orbital-0.1.1.tgz","fileCount":11,"unpackedSize":80295,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGCa1aoAmEJbKAI05c0PShOFTY472ODUbVr/WkK5O6vkAiBe4NfdLQsboLTZIPdWgQbn6nWKaYe+n5QteXAFmtvhWg=="}]},"_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-neon-orbital_0.1.1_1782922439093_0.02476099441820878"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T16:13:58.977Z","0.1.1":"2026-07-01T16:13:59.261Z","modified":"2026-07-01T16:13:59.466Z"},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"description":"Neon Orbital Integrations — A dashboard screenshot at the centre with integration chips orbiting around it on an inclined plane, linked to the dashboard by glowing neon lines that pulse with travelling beads of light.… A customizable CrazyGL animated hero","homepage":"https://crazygl.com/hero/neon-orbital","keywords":["integrations","saas","automation","neon","orbit","three","ecosystem","dashboard","neon-orbital","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-neon-orbital.git"},"author":{"name":"ybouane"},"bugs":{"url":"https://github.com/crazygl-com/hero-neon-orbital/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-neon-orbital/banner-full.png\" alt=\"Neon Orbital Integrations\" width=\"640\">\n</p>\n\n# @crazygl/hero-neon-orbital\n\nA dashboard screenshot at the centre with integration chips orbiting around it on an inclined plane, linked to the dashboard by glowing neon lines that pulse with travelling beads of light. Drag to spin the ring with momentum.\n\n## Demo\n[Neon Orbital Integrations](https://crazygl.com/hero/neon-orbital)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-neon-orbital\n```\n\n## Usage\n\n```tsx\nimport NeonOrbital from '@crazygl/hero-neon-orbital';\n\nexport default function Page() {\n  return (\n    <NeonOrbital\n      screenshot=\"https://crazygl.com/samples/screenshot-dashboard-dark.avif\"\n      ringTilt={25}\n      lineColor=\"#56e3ff\"\n      pulseEnabled\n    />\n  );\n}\n```\n\n## Customise\n\n- **Screenshot** — `screenshot` (image or video at the centre; aspect auto-derived), plus `screenshotX/Y`, `screenshotScale`, `screenshotTilt`, `screenEmissive`.\n- **Chips** — `chips` (one per line, `label | glyph | color`, up to 12), `chipSize`, `outlineIntensity`.\n- **Ring** — `ringRadius`, `ringTilt`, `autoRotateSpeed`, `dragSensitivity`, `momentumDecay`.\n- **Connection lines** — `lineColor`, `lineOpacity`, `pulseEnabled`, `pulseSpeed`, `pulseBrightness`.\n- **Atmosphere** — `haloColor`, `haloStrength`, `bgCenter` / `bgEdge` radial backdrop, `transparentBackground`, `parallaxStrength`.\n\n## Best for\n\n- iPaaS and automation platforms; integration marketplaces.\n- Premium SaaS launch pages that plug into many tools.\n- Developer-tool and API products saying \"we connect to everything you use.\"\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-980f76a954644a0a681a2093e5f9036b"}