{"_id":"@crazygl/hero-liquid-metal-typography","name":"@crazygl/hero-liquid-metal-typography","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@crazygl/hero-liquid-metal-typography","version":"0.1.1","description":"Liquid Metal Typography — Heavy 3D headline rendered as molten chrome — letters wobble with FBM noise while staying readable, pointer creates localized ripples on the surface, and clicking triggers a quick splash… A customizable CrazyGL animated hero sect","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.0"},"peerDependencies":{"react":">=18","react-dom":">=18"},"license":"Apache-2.0","author":{"name":"ybouane"},"homepage":"https://crazygl.com/hero/liquid-metal-typography","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-liquid-metal-typography.git"},"publishConfig":{"access":"public"},"keywords":["three","3d","typography","metal","chrome","mercury","hdri","interactive","premium","shader","liquid-metal-typography","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","frontend","component","canvas"],"bugs":{"url":"https://github.com/crazygl-com/hero-liquid-metal-typography/issues"},"gitHead":"ff60bcb7c4954a2b62275b2ccda0fc58964df189","_id":"@crazygl/hero-liquid-metal-typography@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-qDrZ2DmJgFlIDkrNd04bGGRPO6bNKKtmTEvlfStyObkwJ+hx+0nyWMti1OoCxx8qTzVXqWtWoUGsuiIeOJUuow==","shasum":"81aa3ae5edbb53594d7746878e11c4157955a58e","tarball":"https://registry.npmjs.org/@crazygl/hero-liquid-metal-typography/-/hero-liquid-metal-typography-0.1.1.tgz","fileCount":11,"unpackedSize":96850,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCHkQBx50r+qLxMZRL1doKg7k3q9FvRFSWsW4hq95hZwAIhAPWoST+oA9F8LSU40Ada5FxdsI7J4384mdULEbH6Qw/y"}]},"_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-liquid-metal-typography_0.1.1_1782922402184_0.3589531990399788"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T16:13:21.964Z","0.1.1":"2026-07-01T16:13:22.347Z","modified":"2026-07-01T16:13:22.664Z"},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"description":"Liquid Metal Typography — Heavy 3D headline rendered as molten chrome — letters wobble with FBM noise while staying readable, pointer creates localized ripples on the surface, and clicking triggers a quick splash… A customizable CrazyGL animated hero sect","homepage":"https://crazygl.com/hero/liquid-metal-typography","keywords":["three","3d","typography","metal","chrome","mercury","hdri","interactive","premium","shader","liquid-metal-typography","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","frontend","component","canvas"],"repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-liquid-metal-typography.git"},"author":{"name":"ybouane"},"bugs":{"url":"https://github.com/crazygl-com/hero-liquid-metal-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-liquid-metal-typography/banner-full.png\" alt=\"Liquid Metal Typography\" width=\"640\">\n</p>\n\n# @crazygl/hero-liquid-metal-typography\n\nHeavy 3D headline rendered as molten chrome — letters wobble with FBM noise while staying readable, pointer creates localized ripples on the surface, and clicking triggers a quick splash wavefront. Floats over an image or video backdrop with a user-selectable HDRI driving the reflections.\n\n## Demo\n[Liquid Metal Typography](https://crazygl.com/hero/liquid-metal-typography)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-liquid-metal-typography\n```\n\n## Usage\n\n```tsx\nimport LiquidMetalTypography from '@crazygl/hero-liquid-metal-typography';\n\nexport default function Page() {\n  return (\n    <LiquidMetalTypography\n      heading=\"LIQUID\"\n      chromeTint=\"#eef2f6\"\n      wobbleAmount={0.3}\n      envHdri=\"https://crazygl.com/samples/hdri1.jpg\"\n    />\n  );\n}\n```\n\n## Customise\n\n- **Content** — `heading` (only line 1 becomes 3D geometry), `subheading`, and an optional `ctaLabel` / `onCTAClick`.\n- **Geometry** — `extrudeDepth` (letter thickness; bevel auto-scales) and `letterSpacing`.\n- **Material** — `chromeTint` (base F0 reflectance; warm it for gold/copper), `wobbleAmount` and `wobbleSpeed` for the molten boil.\n- **Pointer & splash** — `rippleStrength` / `rippleRadius` for the cursor ripple, `splashStrength` for the click wavefront.\n- **Lighting & environment** — `rimIntensity`, `envIntensity` (HDRI reflection strength), and `envHdri` (the equirectangular panorama the chrome mirrors).\n- **Background** — `backgroundImage` (image or video, cover-fit), `backgroundOverlay` and `backgroundOverlayOpacity`.\n- **Typography** — `headingFontFamily` / `headingFontWeight` (the actual .ttf is fetched and extruded).\n\n## Best for\n\n- Luxury product launches and premium SaaS / fintech landing pages.\n- Fashion, beauty, and music-release sites where the headline is the centerpiece.\n- Bold creative-agency and portfolio splash pages.\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-04b692b91ec8486cb95c041f5681933d"}