Hero made by @ybouane.

@crazygl/hero-neon-tube-typography

A glowing neon-tube headline that flickers on, settles into a slow plasma breath, sparks on hover, and bends its glow toward the cursor. Rendered to a HiDPI canvas with rounded tube strokes plus stacked blurred copies for true additive bloom.

Demo

Neon Tube Typography

Install

npm install @crazygl/hero-neon-tube-typography

Usage

import NeonTubeTypography from '@crazygl/hero-neon-tube-typography';

export default function Hero() {
	return (
		<NeonTubeTypography
			heading="AFTER HOURS"
			tubeColor="#ff3ee0"
			tubeThickness={18}
			ctaLabel="Enter the show"
		/>
	);
}

Customise

• Content — heading, subheading, ctaLabel, onCTAClick (URL string or function).
• Neon — tubeColor, coreColor (hot filament), tubeThickness (8–32px), brightness, bloomStrength (halo size), cornerDetail (how much letter detail / counters survive), letterSpacing.
• Flicker — flickerOnLoad, flickerDuration, ambientFlicker (persistent electrical jitter).
• Hover — hoverBoost, sparkCount, sparkColor.
• Pointer — glowDirectionStrength (anisotropic bloom lean toward the cursor).
• Background — bgColor, transparent, vignetteStrength.
• Typography — headingFontFamily (the tube is traced from this font's glyphs; display faces like Audiowide / Monoton / Bungee read best), headingFontWeight.

Best for

• Music venues, labels, and event / nightlife sites.
• Gaming brands and cyberpunk / synthwave landing pages.
• Creator and artist portfolios that want a loud, characterful wordmark.

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.