{"_id":"@crazygl/hero-glitch-fabric","name":"@crazygl/hero-glitch-fabric","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@crazygl/hero-glitch-fabric","version":"0.1.1","description":"Slow Glitch Fabric — An elegant, controlled digital-signal background: deep moody bands drift like a damaged broadcast, always carrying a tasteful base glitch — blocky horizontal tears and red/cyan channel splits. Move… 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/glitch-fabric","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-glitch-fabric.git"},"publishConfig":{"access":"public"},"keywords":["glitch","bands","scanlines","signal","chromatic","shader","webgl","pointer","premium","abstract","glitch-fabric","crazygl","hero","hero-section","react","animation","ui","landing-page","interactive","frontend","component","canvas","three"],"bugs":{"url":"https://github.com/crazygl-com/hero-glitch-fabric/issues"},"gitHead":"2af662c8b9c3575c42be77341058fe4906b8fcb7","_id":"@crazygl/hero-glitch-fabric@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-yXN2V8RB1YIFA4Zt4P5BtbTrHTmFwSH3VntXF/oULJmBDaGXjO74QXUAO1jrkoGQWgqDZitB9Pfdn1dOqdwA/Q==","shasum":"48566971c01a02143d18e6522ebd3d6bb9bfa413","tarball":"https://registry.npmjs.org/@crazygl/hero-glitch-fabric/-/hero-glitch-fabric-0.1.1.tgz","fileCount":9,"unpackedSize":62345,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIFDp0pVOoOdqW2J9UKIvrN1+IA0stQQX/gDRtj4W5QpLAiAQ+3Ohp4NJXDULmUnPAyd3sFdjrKSHhIqq3VwuaCPUvA=="}]},"_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-glitch-fabric_0.1.1_1782922339185_0.8296661270924204"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T16:12:18.948Z","0.1.1":"2026-07-01T16:12:19.332Z","modified":"2026-07-01T16:12:19.623Z"},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"description":"Slow Glitch Fabric — An elegant, controlled digital-signal background: deep moody bands drift like a damaged broadcast, always carrying a tasteful base glitch — blocky horizontal tears and red/cyan channel splits. Move… A customizable CrazyGL animated her","homepage":"https://crazygl.com/hero/glitch-fabric","keywords":["glitch","bands","scanlines","signal","chromatic","shader","webgl","pointer","premium","abstract","glitch-fabric","crazygl","hero","hero-section","react","animation","ui","landing-page","interactive","frontend","component","canvas","three"],"repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-glitch-fabric.git"},"author":{"name":"ybouane"},"bugs":{"url":"https://github.com/crazygl-com/hero-glitch-fabric/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-glitch-fabric/banner-full.png\" alt=\"Slow Glitch Fabric\" width=\"640\">\n</p>\n\n# @crazygl/hero-glitch-fabric\n\nAn elegant, controlled digital-signal background: deep moody bands drift like a damaged broadcast, always carrying a tasteful base glitch — blocky horizontal tears and red/cyan channel splits. Move the cursor and the glitch concentrates around its position, intensifying the tears and chromatic split right where you point, then eases back out when you leave.\n\n## Demo\n[Slow Glitch Fabric](https://crazygl.com/hero/glitch-fabric)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-glitch-fabric\n```\n\n## Usage\n\n```tsx\nimport GlitchFabric from '@crazygl/hero-glitch-fabric';\n\nexport default function Hero() {\n\treturn (\n\t\t<GlitchFabric\n\t\t\theading=\"Signal, controlled.\"\n\t\t\tambient={0.34}\n\t\t\tglitchStrength={0.5}\n\t\t\trgbSplit={1}\n\t\t/>\n\t);\n}\n```\n\n## Customise\n\n- **Fabric** — `colorA` / `colorB` gradient, `accentColor`, `bandHeight`, `idleDrift`, `scanlines`, `grain`.\n- **Glitch** — `glitchRadius`, `glitchStrength`, `ambient` (ever-present floor), `rgbSplit`, `decay` (focal linger).\n- **Backdrop** — `transparent` to composite over the page.\n- **Content & typography** — heading / subheading / two-column / custom content, plus heading font.\n\n## Best for\n\n- AI and developer-tool launch pages\n- Cyber-security and infrastructure dashboards\n- Music, streaming, and broadcast brands\n- Dark, editorial product pages that want signal energy without busyness\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-9804c7371b604d67de3beb3cb8cbd465"}