{"_id":"@crazygl/hero-text-reveal-lens","name":"@crazygl/hero-text-reveal-lens","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@crazygl/hero-text-reveal-lens","version":"0.1.1","description":"Text Reveal Lens — A cursor-driven lens that reveals the bright real colour of a heading from underneath a dim default. Five lens shapes — circle, rectangle, diamond, wave, star — with an optional gradient fill on the… 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/text-reveal-lens","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-text-reveal-lens.git"},"publishConfig":{"access":"public"},"keywords":["lens","spotlight","reveal","typography","interactive","headline","text-reveal-lens","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","frontend","component","canvas","three"],"bugs":{"url":"https://github.com/crazygl-com/hero-text-reveal-lens/issues"},"gitHead":"2a6f22c142f54e3a1cb932a89781784b4b73b792","_id":"@crazygl/hero-text-reveal-lens@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-mgFHcU4U8jLj/erta3RCM2JHm8Xf47iCHYNdxMP6oVVUAhJmo8HZinz+uHPiULC0XlkQ5RmOIBBostQqzwO7Nw==","shasum":"b6b44a8d436b9814cd5ee874b93d1868565d2475","tarball":"https://registry.npmjs.org/@crazygl/hero-text-reveal-lens/-/hero-text-reveal-lens-0.1.1.tgz","fileCount":9,"unpackedSize":35554,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIG0ULe7Dd5SuCwWsqYpgicY1YBGppJ02toUTOpDxcdyeAiBebQa/4+Ickov+UN/SQzHQjxHXHh35we/YW6teSoD9Qg=="}]},"_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-text-reveal-lens_0.1.1_1782922713389_0.5503834416652309"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T16:18:33.165Z","0.1.1":"2026-07-01T16:18:33.584Z","modified":"2026-07-01T16:18:33.970Z"},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"description":"Text Reveal Lens — A cursor-driven lens that reveals the bright real colour of a heading from underneath a dim default. Five lens shapes — circle, rectangle, diamond, wave, star — with an optional gradient fill on the… A customizable CrazyGL animated hero","homepage":"https://crazygl.com/hero/text-reveal-lens","keywords":["lens","spotlight","reveal","typography","interactive","headline","text-reveal-lens","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-text-reveal-lens.git"},"author":{"name":"ybouane"},"bugs":{"url":"https://github.com/crazygl-com/hero-text-reveal-lens/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-text-reveal-lens/banner-full.png\" alt=\"Text Reveal Lens\" width=\"640\">\n</p>\n\n# @crazygl/hero-text-reveal-lens\n\nA cursor-driven lens that reveals the bright real colour of a heading from underneath a dim default. Five lens shapes — circle, rectangle, diamond, wave, star — with an optional gradient fill on the revealed text.\n\n## Demo\n[Text Reveal Lens](https://crazygl.com/hero/text-reveal-lens)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-text-reveal-lens\n```\n\n## Usage\n\n```tsx\nimport TextRevealLens from '@crazygl/hero-text-reveal-lens';\n\nexport default function Page() {\n  return (\n    <TextRevealLens\n      heading=\"REVEAL\"\n      maskShape=\"circle\"\n      maskSize={220}\n      useGradient\n      gradientStart=\"#ff6b6b\"\n      gradientEnd=\"#4ecdc4\"\n    />\n  );\n}\n```\n\n## Customise\n\n- **Content** — `heading` (the wordmark).\n- **Lens** — `maskShape` (`circle` / `rectangle` / `diamond` / `wave` / `star`), `maskSize` (80–600px), `edgeSoftness`.\n- **Colours** — `showHiddenText` + `hiddenColor` (outside the lens), `useGradient` with `gradientStart`/`gradientEnd`, or flat `revealedColor`.\n- **Typography** — `fontSize`, `letterSpacing`, `headingFontFamily`, `headingFontWeight`.\n- **Backdrop** — `transparentBackground`, `bgColor`.\n\n## Best for\n\n- Brand wordmark splashes and interactive case-study covers\n- Art-collective, gallery, and poster product pages\n- Any landing page where the headline asks to be poked at\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-30b2139352e044eab98a27a1f25a6599"}