Hero made by @ybouane.

@crazygl/hero-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.

Demo

Slow Glitch Fabric

Install

npm install @crazygl/hero-glitch-fabric

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 / colorB gradient, accentColor, bandHeight, idleDrift, scanlines, grain.
• Glitch — glitchRadius, glitchStrength, ambient (ever-present floor), rgbSplit, decay (focal linger).
• Backdrop — transparent to 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

This hero is part of CrazyGL, 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.