Hero made by @ybouane.

@crazygl/hero-cyberpunk-text

Neon-lit cyberpunk heading with magenta + cyan glow, periodic flicker, and faint scanlines — Night City wall poster vibes.

Demo

Cyberpunk Text

Install

npm install @crazygl/hero-cyberpunk-text

Usage

import CyberpunkText from '@crazygl/hero-cyberpunk-text';

export default function Hero() {
	return (
		<CyberpunkText
			heading="NEON CITY"
			subheading="after midnight"
			primary="#ff3aff"
			secondary="#3affff"
		/>
	);
}

Customise

• Content — heading and subheading text.
• Neon — primary and secondary glow colours, plus flickerHz (flicker rate in Hz; 0 = steady).
• Typography — textColor, subColor, fontSize, headingFontFamily (a Google font, default Major Mono Display), headingFontWeight.
• Backdrop — transparentBackground toggle and bgColor.

Best for

• Gaming, music, and nightlife landing pages that want a retro-future edge.
• Product or event teasers with a bold, single-word headline.
• Section dividers and 404 / coming-soon screens with attitude.

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.