CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/neon-tube-typography

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.

ReactCanvasInteractiveFont#neon#typography#headline#cyberpunk#music#gaming#interactive#canvas#premium

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.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-neon-tube-typography
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

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

export default function Landing() {
  return (
    <NeonTubeTypography />
  );
}
03 · Use it in a page

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.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

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

export default function Page() {
  return (
    <section>
      <NeonTubeTypography
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Floating Neon Logo Sign

The logo becomes a 3D neon tube sign floating in a dark cinematic scene. Segments flicker on during boot, then settle into a gentle pulse. Smoke drifts behind; hovering brightens the tubes.

Neon CTA Dock

A cyberpunk control-dock hero: 1-3 CTA buttons rendered as thick glowing physical panels on a floating console, with periodic light pulses, hover halos, and click bursts. Real, clickable DOM buttons with a custom-painted WebGL glow under each one.

Neon Fluid

GPU Eulerian fluid simulation (Stam 1999). Advected dye + velocity ping-pong textures with a Jacobi pressure solve give true divergence-free flow. Drag to inject momentum and colour; additive bloom on the dye field paints glowing smoke through the void.

Neon Tubes

Flexible neon tubes float and bend through space, forming abstract loops. Each tube glows with its own colour and bloom.

Cyberpunk Text

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

Typography In Portal

Your headline rendered inside a glowing circular portal — text drifts across the opening, the rim glows and ripples with noise, and the pointer bends the portal in real time. Built as a single fullscreen WebGL shader that samples a canvas-rendered text texture with chromatic aberration.Live customizer

Neon Tube Typography

Tube colourOuter / inner glow colour. Default is hot magenta — try cyan (#3ef0ff), lime (#a4ff3d), or orange (#ff7a3d).Hot coreInner core (white-hot plasma).Tube thickness12pxThickness of the rounded glass tube body. 16–22 is photogenic.Brightness1Global multiplier on every glow layer. 1.2–1.8 looks vibrant; >2.5 floods the frame.Bloom strength2Size of the outer halo around the tubes. 1.5–2.5 reads as real glass; 0 = wireframe.Corner detail0.46How much detail the tube preserves. 0 = every counter ('e','a','o','O') keeps an inner ring and corners stay sharp. 1 = small counters seal and corners round off (most 'neon tube' looking, fewest interior details).Letter spacing0.05emExtra horizontal gap between letters, in em. 0 matches the font's natural tracking; positive values widen the wordmark.Boot flickerTurns the boot-up plasma kick on or off.Boot duration1.5sHow long the stochastic boot flicker lasts before settling.Ambient flicker0.5Persistent electrical flicker after boot. 0 = perfectly steady; 1+ = ageing tube.Hover brightness0.6Extra brightness when the cursor is over the hero.Sparks on hover14Tiny embers that fly off the tubes while hovering.Spark colourDirectional glow0.4How much the bloom shifts toward the cursor. 0 = symmetric; 1 = strongly anisotropic.BackgroundTransparent backgroundVignette0.5Corner darkening that sinks the sign into deeper shadow.Heading fontThe neon tube is traced from this font's glyphs. Rounded / display faces read best as bent glass — Audiowide, Monoton, Bungee, Pacifico, Righteous. Inherit uses a system display face (no network).Heading weight400Thinner weights read more like delicate neon tubing; heavier weights look like thick bar signage. 300–500 is the sweet spot. (Variable-only Google fonts may ignore this.)InteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.