{"_id":"@crazygl/hero-morph-astronaut","name":"@crazygl/hero-morph-astronaut","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@crazygl/hero-morph-astronaut","version":"0.1.1","description":"Morph Astronaut — A hover-focus hero: a bold display word is rendered as a true signed-distance field and softens or sharpens under the cursor via an SDF lens blur (no chromatic aberration), while an animated 3D… A customizable CrazyGL animated hero secti","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"},"peerDependencies":{"react":">=18","react-dom":">=18"},"keywords":["3d","three","glb","astronaut","text","sdf","lens-blur","hover","focus","interactive","morph-astronaut","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","frontend","component","canvas"],"license":"Apache-2.0","author":{"name":"ybouane"},"homepage":"https://crazygl.com/hero/morph-astronaut","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-morph-astronaut.git"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/crazygl-com/hero-morph-astronaut/issues"},"gitHead":"b825c29905702f423ff8f49c979af7a0d7263c7b","_id":"@crazygl/hero-morph-astronaut@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-qku2wrpUUe0d90CompjQlP87bxJYHErZAj+ZV1YImtgnU3SddbJEoUrtpdn5OIbUUV8PlaBhqQClIx63mJi75w==","shasum":"3fa65999257bc8dcddbdaaf9bda61ba07d97008f","tarball":"https://registry.npmjs.org/@crazygl/hero-morph-astronaut/-/hero-morph-astronaut-0.1.1.tgz","fileCount":13,"unpackedSize":76265,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFAXLIZVjTdVtH/VjDaylUDPotWbT7C89AMAv1qnhI/UAiEAvcYT2tqUVrnTp3lgCzwX0AXWCxL1l2JHbKRQKYhe4js="}]},"_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-morph-astronaut_0.1.1_1782922427247_0.7913570504369956"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T16:13:47.075Z","0.1.1":"2026-07-01T16:13:47.372Z","modified":"2026-07-01T16:13:47.624Z"},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"description":"Morph Astronaut — A hover-focus hero: a bold display word is rendered as a true signed-distance field and softens or sharpens under the cursor via an SDF lens blur (no chromatic aberration), while an animated 3D… A customizable CrazyGL animated hero secti","homepage":"https://crazygl.com/hero/morph-astronaut","keywords":["3d","three","glb","astronaut","text","sdf","lens-blur","hover","focus","interactive","morph-astronaut","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","frontend","component","canvas"],"repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-morph-astronaut.git"},"author":{"name":"ybouane"},"bugs":{"url":"https://github.com/crazygl-com/hero-morph-astronaut/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-morph-astronaut/banner-full.png\" alt=\"Morph Astronaut\" width=\"640\">\n</p>\n\n# @crazygl/hero-morph-astronaut\n\nA hover-focus hero: a bold display word is rendered as a true signed-distance field and softens or sharpens under the cursor via an SDF lens blur (no chromatic aberration), while an animated 3D character floats in front — playing its loop animation, tilting toward the pointer in 3D, and bobbing as if weightless. Drop in any animated .glb (e.g. an astronaut).\n\n## Demo\n[Morph Astronaut](https://crazygl.com/hero/morph-astronaut)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-morph-astronaut\n```\n\n## Usage\n\n```tsx\nimport MorphAstronaut from '@crazygl/hero-morph-astronaut';\n\nexport default function Page() {\n  return (\n    <MorphAstronaut\n      word=\"COSMOS\"\n      model=\"https://crazygl.com/samples/astronaut.glb\"\n      textColor=\"#ff1919\"\n    />\n  );\n}\n```\n\n## Customise\n\n- **Text** — `word`, `textColor`, `fillWidth` (auto-fits any word length), `letterSpacing`, `fontFamily`, `fontWeight`.\n- **Lens blur** — `lensStrength`, `lensRadius` (focus spot size), `baseBlur` (base softness), `glowIntensity`, `glowColor`.\n- **Model** — `model` (any animated `.glb`), `animationName`, `modelScale`, `modelYOffset`, `lightIntensity`, `starfield` / `starCount` / `starColor`.\n- **Motion** — `pointerTilt`, `spin` (idle turntable), `floatAmount`, `floatSpeed`.\n- **Backdrop** — `backgroundColor`, `transparentBackground`.\n\n## Best for\n\n- 3D product, game, and entertainment launch pages.\n- Space / sci-fi and creative-studio brands.\n- Showcasing a hero character or mascot over a bold wordmark.\n\n> The default uses a sample floating astronaut (Idle loop). Point `model` at your own animated GLB to reskin it.\n\n## Credits\n\nThe sample model — [“Animated Floating Astronaut in Space Suit Loop”](https://sketchfab.com/3d-models/animated-floating-astronaut-in-space-suit-loop-e2c4b146e58141e4b87917456a9970b1) — is from Sketchfab. Swap in your own animated GLB via the `model` prop; if you keep theirs, honour its license and attribution.\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-44fba32eb6fc862cdd845e1c95314d39"}