{"_id":"@crazygl/hero-liquid-aurora-gradient","name":"@crazygl/hero-liquid-aurora-gradient","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@crazygl/hero-liquid-aurora-gradient","version":"0.1.1","description":"Liquid Aurora Gradient — A full-bleed liquid gradient: large organic blobs of electric blue and warm orange bleed and morph across a near-black field, driven by domain-warped FBM in a single WebGL2 fragment shader. Slow… A customizable CrazyGL animated he","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/liquid-aurora-gradient","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-liquid-aurora-gradient.git"},"publishConfig":{"access":"public"},"keywords":["gradient","liquid","aurora","fbm","domain-warping","noise","fluid","shader","premium","agency","liquid-aurora-gradient","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas","three"],"bugs":{"url":"https://github.com/crazygl-com/hero-liquid-aurora-gradient/issues"},"gitHead":"7a163ad6a6364036a264e48b2223b3dcd9298d4f","_id":"@crazygl/hero-liquid-aurora-gradient@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-zyptDQM6lC5pLgnSS4ABaoAQqt+CJ1s7NV8g/V4MsJO4AnzEq6gOFj7VETMrT1vY3Wd3a6AKHaNWJit/GLl1sA==","shasum":"ed69b93a842469684cb1c52c175a7a0b2d9d9969","tarball":"https://registry.npmjs.org/@crazygl/hero-liquid-aurora-gradient/-/hero-liquid-aurora-gradient-0.1.1.tgz","fileCount":9,"unpackedSize":48270,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCvhb86pZyaxWByW5T4hTj6geyw5+tkkD9Rtia2H5sY8wIgW5Rs7060hr4gwQQaEjInAM9vSbyOpYg4ntToSp62BDY="}]},"_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-aurora-gradient_0.1.1_1782922390959_0.900713527960403"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T16:13:10.759Z","0.1.1":"2026-07-01T16:13:11.102Z","modified":"2026-07-01T16:13:11.379Z"},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"description":"Liquid Aurora Gradient — A full-bleed liquid gradient: large organic blobs of electric blue and warm orange bleed and morph across a near-black field, driven by domain-warped FBM in a single WebGL2 fragment shader. Slow… A customizable CrazyGL animated he","homepage":"https://crazygl.com/hero/liquid-aurora-gradient","keywords":["gradient","liquid","aurora","fbm","domain-warping","noise","fluid","shader","premium","agency","liquid-aurora-gradient","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas","three"],"repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-liquid-aurora-gradient.git"},"author":{"name":"ybouane"},"bugs":{"url":"https://github.com/crazygl-com/hero-liquid-aurora-gradient/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-aurora-gradient/banner-full.png\" alt=\"Liquid Aurora Gradient\" width=\"640\">\n</p>\n\n# @crazygl/hero-liquid-aurora-gradient\n\nA full-bleed liquid gradient: large organic blobs of electric blue and warm orange bleed and morph across a near-black field, driven by domain-warped FBM in a single WebGL2 fragment shader. Slow lava-lamp / aurora flow with deep black negative space; the pointer gently pulls the fluid toward the cursor.\n\n## Demo\n[Liquid Aurora Gradient](https://crazygl.com/hero/liquid-aurora-gradient)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-liquid-aurora-gradient\n```\n\n## Usage\n\n```tsx\nimport LiquidAuroraGradient from '@crazygl/hero-liquid-aurora-gradient';\n\nexport default function Page() {\n  return (\n    <LiquidAuroraGradient\n      heading=\"We are bold and effective.\"\n      flowSpeed={0.22}\n      contrast={1.4}\n    />\n  );\n}\n```\n\n## Customise\n\n- **Content** — `contentType` (heading / two-columns / custom), `heading`, `subheading`.\n- **Gradient** — `colorBase` (deepest black), `colorDeep` (navy), `colorA` (electric blue), `colorB` (orange), `colorHot` (hot highlight).\n- **Flow** — `flowSpeed`, `warpAmount`, `scale`, `contrast` (black negative space).\n- **Interaction / backdrop** — `pointerWarp`, `transparent`.\n\n## Best for\n\n- Premium agency, studio, and design-portfolio sites\n- Fashion and editorial landing pages\n- Product launches and AI / creative-tool brands\n- Any hero that wants one confident, expensive-looking gesture behind the headline\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-01b639990dfef023970dd555da3f8e3b"}