Hero made by @ybouane.

@crazygl/hero-glitch-title

Massive title with horizontal slice glitches, RGB drift and faint scanlines — the classic broken-broadcast hero.

Demo

Glitch Title

Install

npm install @crazygl/hero-glitch-title

Usage

import GlitchTitle from '@crazygl/hero-glitch-title';

export default function Hero() {
	return (
		<GlitchTitle
			heading="BROKEN BEAM"
			subheading="transmission unstable"
			rgbDrift={12}
			sliceCount={5}
		/>
	);
}

Customise

• Glitch — sliceCount (horizontal bands), burstHz (how often the glitch fires), rgbDrift (channel-split distance in px), scanlines toggle.
• Colours — textColor, redColor / cyanColor (the two ghost channels), subColor.
• Typography — fontSize, headingFontFamily, headingFontWeight.
• Backdrop — bgColor or transparentBackground.

Best for

• Cyberpunk, gaming, and esports landing pages.
• Music drops, film/TV teasers, and broadcast-themed brands.
• Bold agency splash pages that want a broken-signal aesthetic.

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.