{"_id":"@crazygl/hero-typographic-fluid-simulation","name":"@crazygl/hero-typographic-fluid-simulation","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@crazygl/hero-typographic-fluid-simulation","version":"0.1.1","description":"Typographic Fluid Simulation — A bold headline acts as a mask for a real-time colorful fluid. Domain-warped FBM noise advected over time + a pointer-driven velocity grid swirl two color fields inside the type while the… 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/typographic-fluid-simulation","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-typographic-fluid-simulation.git"},"publishConfig":{"access":"public"},"keywords":["typography","fluid","shader","webgl","interactive","creative","ai","saas","premium","typographic-fluid-simulation","crazygl","hero","hero-section","react","animation","ui","landing-page","frontend","component","canvas","three"],"bugs":{"url":"https://github.com/crazygl-com/hero-typographic-fluid-simulation/issues"},"gitHead":"dedd281610970181c02409459cf361b23e00a7e8","_id":"@crazygl/hero-typographic-fluid-simulation@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-gvglotwraeU1+YU62pKU9o3or+kQSitY2fFPZsGKuT6e+4H9xmcImeGcXdodsmXATyY8De4tC2fQOxVtRzr+3w==","shasum":"4bfba4d710d08f1d77ea1460f78558f292f0279b","tarball":"https://registry.npmjs.org/@crazygl/hero-typographic-fluid-simulation/-/hero-typographic-fluid-simulation-0.1.1.tgz","fileCount":9,"unpackedSize":77056,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDff+XyDTEbMTS4DhXfPUjaYA7lSmfqski0vdlZOJyU/QIhAPypnKLdOoyy03cBPat+2b5mCk9Cjufia6XxkBce9V1u"}]},"_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-fluid-simulation_0.1.1_1782922742809_0.25634887990717137"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T16:19:02.646Z","0.1.1":"2026-07-01T16:19:02.972Z","modified":"2026-07-01T16:19:03.201Z"},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"description":"Typographic Fluid Simulation — A bold headline acts as a mask for a real-time colorful fluid. Domain-warped FBM noise advected over time + a pointer-driven velocity grid swirl two color fields inside the type while the… A customizable CrazyGL animated her","homepage":"https://crazygl.com/hero/typographic-fluid-simulation","keywords":["typography","fluid","shader","webgl","interactive","creative","ai","saas","premium","typographic-fluid-simulation","crazygl","hero","hero-section","react","animation","ui","landing-page","frontend","component","canvas","three"],"repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-typographic-fluid-simulation.git"},"author":{"name":"ybouane"},"bugs":{"url":"https://github.com/crazygl-com/hero-typographic-fluid-simulation/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-fluid-simulation/banner-full.png\" alt=\"Typographic Fluid Simulation\" width=\"640\">\n</p>\n\n# @crazygl/hero-typographic-fluid-simulation\n\nA bold headline acts as a mask for a real-time colorful fluid. Domain-warped FBM noise advected over time + a pointer-driven velocity grid swirl two color fields inside the type while the background stays minimal. Move the cursor to inject velocity and color into the letters.\n\n## Demo\n[Typographic Fluid Simulation](https://crazygl.com/hero/typographic-fluid-simulation)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-typographic-fluid-simulation\n```\n\n## Usage\n\n```tsx\nimport TypographicFluidSimulation from '@crazygl/hero-typographic-fluid-simulation';\n\nexport default function Page() {\n  return (\n    <TypographicFluidSimulation\n      heading=\"FLOW\"\n      colorA=\"#ff5ec4\"\n      colorB=\"#5cf2ff\"\n    />\n  );\n}\n```\n\n## Customise\n\n- **Content** — `heading` (acts as the fluid mask), `subheading`, `ctaLabel`, `onCTAClick`.\n- **Fluid** — `fluidScale`, `fluidSpeed`, `ambientSwirl`, `fluidViscosity`.\n- **Colors** — `colorA`, `colorB`, `colorC` (accent), `backgroundColor`.\n- **Pointer** — `pointerInjection`, `pointerColorShift`.\n- **Text** — `textOpacity`, `bloomStrength` (tendril glow).\n- **Typography** — `headingFontFamily` (heavy sans with big counters), `headingFontWeight`.\n\n## Best for\n\n- Creative-tool launches and generative-art portfolios.\n- AI / SaaS heroes that want a personality moment.\n- Music, audio, and magazine-tier editorial sites.\n\nShort, bold words (3–8 letters) with large counters give the fluid the most room to swirl. Heavy sans serifs like Inter Tight 900, Sora, or Archivo Black are the sweet spot.\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-779c25436a3ee79ab4cdd8024c4d1915"}