{"_id":"@crazygl/hero-sand-typography","name":"@crazygl/hero-sand-typography","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@crazygl/hero-sand-typography","version":"0.1.1","description":"Sand Typography — Your headline is built from thousands of grains of sand. The grains drift on the breeze, erode where the cursor sweeps through them, and spring back to spell the word again. A customizable CrazyGL animated hero section — WebGL, React, dr","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/sand-typography","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-sand-typography.git"},"publishConfig":{"access":"public"},"keywords":["particles","typography","sand","wind","travel","wellness","outdoor","storytelling","interactive","webgl","sand-typography","crazygl","hero","hero-section","react","animation","ui","landing-page","frontend","component","canvas","three"],"bugs":{"url":"https://github.com/crazygl-com/hero-sand-typography/issues"},"gitHead":"021dcf5a968310b3db68f9078bc2e9cc79aec0e0","_id":"@crazygl/hero-sand-typography@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-Ee5JqLRllBhNG2PWLmr+pT3rm7e4hyF3CarOdshhkvBkleXruE2bc3qPmhikoO+7vm/UO1z9R46xCQJYOaeYPw==","shasum":"3be92e43ebbc3446dddee959bf10b4c83c0bea33","tarball":"https://registry.npmjs.org/@crazygl/hero-sand-typography/-/hero-sand-typography-0.1.1.tgz","fileCount":9,"unpackedSize":90274,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICPSz34NWHjux8Qmcf41mP0hdI2wlfcClLqGOXertETDAiA/pcLkLEko0uHbp7zfwBkL/cY6kUR3I4QAFAdF1K6gEA=="}]},"_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-sand-typography_0.1.1_1782922507580_0.0980417923853043"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T16:15:07.427Z","0.1.1":"2026-07-01T16:15:07.712Z","modified":"2026-07-01T16:15:07.997Z"},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"description":"Sand Typography — Your headline is built from thousands of grains of sand. The grains drift on the breeze, erode where the cursor sweeps through them, and spring back to spell the word again. A customizable CrazyGL animated hero section — WebGL, React, dr","homepage":"https://crazygl.com/hero/sand-typography","keywords":["particles","typography","sand","wind","travel","wellness","outdoor","storytelling","interactive","webgl","sand-typography","crazygl","hero","hero-section","react","animation","ui","landing-page","frontend","component","canvas","three"],"repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-sand-typography.git"},"author":{"name":"ybouane"},"bugs":{"url":"https://github.com/crazygl-com/hero-sand-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-sand-typography/banner-full.png\" alt=\"Sand Typography\" width=\"640\">\n</p>\n\n# @crazygl/hero-sand-typography\n\nYour headline is built from thousands of grains of sand. The grains drift on the breeze, erode where the cursor sweeps through them, and spring back to spell the word again.\n\n## Demo\n[Sand Typography](https://crazygl.com/hero/sand-typography)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-sand-typography\n```\n\n## Usage\n\n```tsx\nimport SandTypography from '@crazygl/hero-sand-typography';\n\nexport default function App() {\n\treturn (\n\t\t<SandTypography\n\t\t\theading=\"Sands of time.\"\n\t\t\tsubheading=\"Sweep your cursor and watch the wind do its work.\"\n\t\t\tctaLabel=\"Begin the journey →\"\n\t\t\tgrainCount={8000}\n\t\t/>\n\t);\n}\n```\n\n## Customise\n\n- **Content** — `heading`, optional `subheading`, and a CTA (`ctaLabel`, `onCTAClick` as URL or function, `ctaTextColor`, `ctaBgColor`).\n- **Grains** — `grainCount` (2000–15000, sweet spot 6000–10000), `grainSize`, and the `grainColorLight` / `grainColorDark` palette.\n- **Spring** — `springStiffness`, `springDamping`, `brownianJitter` tune how grains recover and how alive the field feels at rest.\n- **Wind** — `windRadius`, `windStrength`, `windDecayTime` control the cursor gust.\n- **Typography** — `headingFontFamily`, `headingFontWeight`, `headingSize`, `headingOffsetX` / `headingOffsetY`.\n- **Ambient grains** — `ambientGrainCount`, `ambientGrainOpacity`, `ambientGrainSpeed` for the background drift layer.\n- **Background** — `bgTop` / `bgBottom` dune gradient or `transparentBackground`.\n\n## Best for\n\n- Travel, adventure, and outdoor lifestyle brands.\n- Wellness, retreat, and luxury hospitality launches.\n- Editorial homepages where the headline is the visual centrepiece.\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-32906d85a39b453b00a633457bbaf890"}