{"_id":"@crazygl/hero-magnetic-letter-field","name":"@crazygl/hero-magnetic-letter-field","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@crazygl/hero-magnetic-letter-field","version":"0.1.1","description":"Magnetic Letter Field — Every character of the headline is an individual physical object. The cursor projects an invisible magnetic field — letters lean toward it, push back, and lift away. Hover a word and its letters… A customizable CrazyGL animated her","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/magnetic-letter-field","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-magnetic-letter-field.git"},"publishConfig":{"access":"public"},"keywords":["typography","dom","magnetic","playful","interactive","saas","portfolio","agency","css","physics","magnetic-letter-field","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","frontend","component","canvas","three"],"bugs":{"url":"https://github.com/crazygl-com/hero-magnetic-letter-field/issues"},"gitHead":"6ccb804bf3c1a83f47c713560977fc86387d10e8","_id":"@crazygl/hero-magnetic-letter-field@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-94b554Yw4Z4naKhZ+FqAXzGZ8OFA9/VaIEp3v7TRf/kkFEayfd4QrMYcOj9ALA662Q+9fEcGd81IFjdSOyUwWA==","shasum":"4ffdd5e5e12aaf609994078711c92af5b6ec946f","tarball":"https://registry.npmjs.org/@crazygl/hero-magnetic-letter-field/-/hero-magnetic-letter-field-0.1.1.tgz","fileCount":9,"unpackedSize":64614,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIC2Nq8VFNKsaAxyke+JjB1V+OFPXpyU+tq3vGYzAG4ypAiEAoPt1cc+spTYre4lVSKlSbbRwglFf0RDNFPJbwTzGHmo="}]},"_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-magnetic-letter-field_0.1.1_1782922415426_0.11011784963563054"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T16:13:35.271Z","0.1.1":"2026-07-01T16:13:35.554Z","modified":"2026-07-01T16:13:35.786Z"},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"description":"Magnetic Letter Field — Every character of the headline is an individual physical object. The cursor projects an invisible magnetic field — letters lean toward it, push back, and lift away. Hover a word and its letters… A customizable CrazyGL animated her","homepage":"https://crazygl.com/hero/magnetic-letter-field","keywords":["typography","dom","magnetic","playful","interactive","saas","portfolio","agency","css","physics","magnetic-letter-field","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","frontend","component","canvas","three"],"repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-magnetic-letter-field.git"},"author":{"name":"ybouane"},"bugs":{"url":"https://github.com/crazygl-com/hero-magnetic-letter-field/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-magnetic-letter-field/banner-full.png\" alt=\"Magnetic Letter Field\" width=\"640\">\n</p>\n\n# @crazygl/hero-magnetic-letter-field\n\nEvery character of the headline is an individual physical object. The cursor projects an invisible magnetic field — letters lean toward it, push back, and lift away. Hover a word and its letters float upward like iron filings rising from a sheet of paper.\n\n## Demo\n[Magnetic Letter Field](https://crazygl.com/hero/magnetic-letter-field)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-magnetic-letter-field\n```\n\n## Usage\n\n```tsx\nimport MagneticLetterField from '@crazygl/hero-magnetic-letter-field';\n\nexport default function Hero() {\n  return (\n    <MagneticLetterField\n      heading={'Make every\\nword magnetic.'}\n      repelOrAttract=\"repel\"\n      ctaLabel=\"Try it yourself\"\n    />\n  );\n}\n```\n\n## Customise\n\n- **Content / CTA** — `heading` (newlines control wrapping), `subheading`, `ctaLabel`, `onCTAClick`.\n- **Magnetism** — `magneticStrength`, `magneticRadius`, `repelOrAttract`, `maxTiltDegrees`.\n- **Spring** — `springStiffness` (how fast letters settle home).\n- **Word float** — `wordFloatStrength` (how high the hovered word lifts).\n- **Appearance** — `textColor`, `accentColor` (hovered word), `headingFontWeight`, `headingFontFamily`.\n- **Background** — `bgColor`, `bgGradient` (preset overlay), `transparentBackground`.\n\n## Best for\n\n- Agency, studio, and portfolio sites where the type is the showpiece\n- Modern SaaS landing pages wanting a premium interactive layer without WebGL\n- Conference / product-launch heroes needing one memorable interaction beat\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-0042cd740b09871571bb3aed79221f8a"}