CrazyGLSlow 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 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.
Usage
import GlitchFabric from '@crazygl/hero-glitch-fabric';
export default function Hero() {
return (
<GlitchFabric
heading="Signal, controlled."
ambient={0.34}
glitchStrength={0.5}
rgbSplit={1}
/>
);
}Customise
- Fabric —
colorA/colorBgradient,accentColor,bandHeight,idleDrift,scanlines,grain. - Glitch —
glitchRadius,glitchStrength,ambient(ever-present floor),rgbSplit,decay(focal linger). - Backdrop —
transparentto composite over the page. - Content & typography — heading / subheading / two-column / custom content, plus heading font.
Best for
- AI and developer-tool launch pages
- Cyber-security and infrastructure dashboards
- Music, streaming, and broadcast brands
- Dark, editorial product pages that want signal energy without busyness
One command, zero config.
npm install @crazygl/hero-glitch-fabricImport once, drop it in.
The component takes the same props you see in the live customizer on the right — every default ships poster-quality.
import SlowGlitchFabric from '@crazygl/hero-glitch-fabric';
export default function Landing() {
return (
<SlowGlitchFabric />
);
}SSR-safe by default.
The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';
import SlowGlitchFabric from '@crazygl/hero-glitch-fabric';
export default function Page() {
return (
<section>
<SlowGlitchFabric
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
