{"_id":"@crazygl/hero-typographic-black-hole","name":"@crazygl/hero-typographic-black-hole","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@crazygl/hero-typographic-black-hole","version":"0.1.1","description":"Typographic Black Hole — A headline warped by a glowing gravitational center. The cursor moves the singularity — letters bend, chromatic-aberrate, and pour toward the event horizon while a starfield lenses behind it. A customizable CrazyGL animated hero s","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/typographic-black-hole","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-typographic-black-hole.git"},"publishConfig":{"access":"public"},"keywords":["typography","black-hole","gravitational-lens","ai","cybersecurity","futuristic","typographic-black-hole","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas","three"],"bugs":{"url":"https://github.com/crazygl-com/hero-typographic-black-hole/issues"},"gitHead":"48aa2445d0a71cf395a57df43b0e5182a7ef0ce0","_id":"@crazygl/hero-typographic-black-hole@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-B9tKoSsyxgYXuMvKaWb5W57o9/F8feeqN3V0T/odvU4Sb23AcqzjBmxjVDyi1IGS2ab1NhdJJ8HQzQSyqOmd1A==","shasum":"b90cb31d3f4760efa8f5ae4281c7799b1240d177","tarball":"https://registry.npmjs.org/@crazygl/hero-typographic-black-hole/-/hero-typographic-black-hole-0.1.1.tgz","fileCount":9,"unpackedSize":71302,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCKwZHFjTM4mE81qGFqK3UqAJiQPZl1UTB5e8GSvfIFMAIhAOZxLx9Z1ZSdEXReXuzn2ls8IFcAe8l7Cvu/e8Ky69Fs"}]},"_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-typographic-black-hole_0.1.1_1782922741881_0.4397294309318336"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T16:19:01.685Z","0.1.1":"2026-07-01T16:19:02.020Z","modified":"2026-07-01T16:19:02.225Z"},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"description":"Typographic Black Hole — A headline warped by a glowing gravitational center. The cursor moves the singularity — letters bend, chromatic-aberrate, and pour toward the event horizon while a starfield lenses behind it. A customizable CrazyGL animated hero s","homepage":"https://crazygl.com/hero/typographic-black-hole","keywords":["typography","black-hole","gravitational-lens","ai","cybersecurity","futuristic","typographic-black-hole","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas","three"],"repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-typographic-black-hole.git"},"author":{"name":"ybouane"},"bugs":{"url":"https://github.com/crazygl-com/hero-typographic-black-hole/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-typographic-black-hole/banner-full.png\" alt=\"Typographic Black Hole\" width=\"640\">\n</p>\n\n# @crazygl/hero-typographic-black-hole\n\nA headline warped by a glowing gravitational center. The cursor moves the singularity — letters bend, chromatic-aberrate, and pour toward the event horizon while a starfield lenses behind it.\n\n## Demo\n[Typographic Black Hole](https://crazygl.com/hero/typographic-black-hole)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-typographic-black-hole\n```\n\n## Usage\n\n```tsx\nimport TypographicBlackHole from '@crazygl/hero-typographic-black-hole';\n\nexport default function Hero() {\n  return (\n    <TypographicBlackHole\n      heading=\"EVENT HORIZON\"\n      gravityStrength={1}\n      swirl={0.95}\n      coreColor=\"#ffd680\"\n    />\n  );\n}\n```\n\n## Customise\n\n- **Content** — `heading` (warped on the canvas), `subheading`, `ctaLabel`, `onCTAClick`.\n- **Black hole** — `gravityStrength`, `gravityRadius`, `eventHorizon`, `swirl`, `chromaticAberration`.\n- **Core glow** — `coreColor`, `haloColor`, `coreBrightness`.\n- **Text** — `textColor`, `textGlow`.\n- **Starfield** — `starDensity`, `starBrightness`.\n- **Pointer** — `pointerInfluence`, `driftSpeed`. **Typography** — `headingFontFamily`, `headingFontWeight`, `letterSpacing`. **Background** — `bgColor`.\n\n## Notable controls\n\n- **Gravity strength** (`gravityStrength`, 0–2) — how hard the lens pulls. Around 0.8–1.3 reads as a physical bend; past 1.5 it turns deliberately exaggerated.\n- **Accretion swirl** (`swirl`, 0–2.5) — how much the headline winds tangentially as it falls in. The default 0.95 shows a clear orbiting arc; near 0.65 keeps the word most readable; above 1.5 winds it into a vortex.\n- **Chromatic aberration** (`chromaticAberration`, 0–1) — the per-channel color split near the core. Sweet spot is 0.3–0.7; above 0.8 it reads as overtly fake.\n- **Event horizon** (`eventHorizon`, 0–0.3) — radius of the black sphere that swallows text entirely. Push above 0.12 for a heavier, blacker singularity.\n- **Pointer influence** (`pointerInfluence`, 0–1) — drop to 0 for a static centered subject that drifts on its own; raise toward 1 for full cursor follow.\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-ee529b20af26643da91dc1bc3698a5dd"}