{"_id":"@crazygl/hero-neon-tube-typography","name":"@crazygl/hero-neon-tube-typography","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@crazygl/hero-neon-tube-typography","version":"0.1.1","description":"Neon Tube Typography — A glowing neon-tube headline that flickers on, settles into a slow plasma breath, sparks on hover, and bends its glow toward the cursor. Rendered to a HiDPI canvas with rounded tube strokes plus… 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"},"peerDependencies":{"react":">=18","react-dom":">=18"},"license":"Apache-2.0","author":{"name":"ybouane"},"homepage":"https://crazygl.com/hero/neon-tube-typography","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-neon-tube-typography.git"},"publishConfig":{"access":"public"},"keywords":["neon","typography","headline","cyberpunk","music","gaming","interactive","canvas","premium","neon-tube-typography","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","frontend","component","three"],"bugs":{"url":"https://github.com/crazygl-com/hero-neon-tube-typography/issues"},"gitHead":"7333ca576261fa9d2d74ffdf52a264fbb1b62971","_id":"@crazygl/hero-neon-tube-typography@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-ibXiryNbTd31gZnbeuz+pSmDo2WBukTH7cFv3/ii9hQZ3TGxKqIwOIO3Z++XxdOlt3WOGVEpl5w34mRHaSqRbQ==","shasum":"a509f130e8c005bc7db33089e11e6eeb9b17cc46","tarball":"https://registry.npmjs.org/@crazygl/hero-neon-tube-typography/-/hero-neon-tube-typography-0.1.1.tgz","fileCount":9,"unpackedSize":87019,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDmkKj+iSa5goRnrfSD7HHaNjEoEIGvP1mCLAHrTy3xMQIhAN12bf/7YtG7Um06u2IBmd1sBhhF9lrajoD/lemqAii+"}]},"_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-tube-typography_0.1.1_1782922439378_0.6377432145009254"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T16:13:59.219Z","0.1.1":"2026-07-01T16:13:59.507Z","modified":"2026-07-01T16:13:59.922Z"},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"description":"Neon Tube Typography — A glowing neon-tube headline that flickers on, settles into a slow plasma breath, sparks on hover, and bends its glow toward the cursor. Rendered to a HiDPI canvas with rounded tube strokes plus… A customizable CrazyGL animated hero","homepage":"https://crazygl.com/hero/neon-tube-typography","keywords":["neon","typography","headline","cyberpunk","music","gaming","interactive","canvas","premium","neon-tube-typography","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","frontend","component","three"],"repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-neon-tube-typography.git"},"author":{"name":"ybouane"},"bugs":{"url":"https://github.com/crazygl-com/hero-neon-tube-typography/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-tube-typography/banner-full.png\" alt=\"Neon Tube Typography\" width=\"640\">\n</p>\n\n# @crazygl/hero-neon-tube-typography\n\nA glowing neon-tube headline that flickers on, settles into a slow plasma breath, sparks on hover, and bends its glow toward the cursor. Rendered to a HiDPI canvas with rounded tube strokes plus stacked blurred copies for true additive bloom.\n\n## Demo\n[Neon Tube Typography](https://crazygl.com/hero/neon-tube-typography)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-neon-tube-typography\n```\n\n## Usage\n\n```tsx\nimport NeonTubeTypography from '@crazygl/hero-neon-tube-typography';\n\nexport default function Hero() {\n\treturn (\n\t\t<NeonTubeTypography\n\t\t\theading=\"AFTER HOURS\"\n\t\t\ttubeColor=\"#ff3ee0\"\n\t\t\ttubeThickness={18}\n\t\t\tctaLabel=\"Enter the show\"\n\t\t/>\n\t);\n}\n```\n\n## Customise\n\n- **Content** — `heading`, `subheading`, `ctaLabel`, `onCTAClick` (URL string or function).\n- **Neon** — `tubeColor`, `coreColor` (hot filament), `tubeThickness` (8–32px), `brightness`, `bloomStrength` (halo size), `cornerDetail` (how much letter detail / counters survive), `letterSpacing`.\n- **Flicker** — `flickerOnLoad`, `flickerDuration`, `ambientFlicker` (persistent electrical jitter).\n- **Hover** — `hoverBoost`, `sparkCount`, `sparkColor`.\n- **Pointer** — `glowDirectionStrength` (anisotropic bloom lean toward the cursor).\n- **Background** — `bgColor`, `transparent`, `vignetteStrength`.\n- **Typography** — `headingFontFamily` (the tube is traced from this font's glyphs; display faces like Audiowide / Monoton / Bungee read best), `headingFontWeight`.\n\n## Best for\n\n- Music venues, labels, and event / nightlife sites.\n- Gaming brands and cyberpunk / synthwave landing pages.\n- Creator and artist portfolios that want a loud, characterful wordmark.\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-1613e58936d2d416cf0e472e157ee3eb"}