CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/cyberpunk-text

Cyberpunk Text

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

ReactFont#cyberpunk#neon#typography

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

One command, zero config.

npm install @crazygl/hero-cyberpunk-text
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 CyberpunkText from '@crazygl/hero-cyberpunk-text';

export default function Landing() {
  return (
    <CyberpunkText />
  );
}
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 CyberpunkText from '@crazygl/hero-cyberpunk-text';

export default function Page() {
  return (
    <section>
      <CyberpunkText
        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

Flicker Text

A heading that flickers character by character like a broken neon sign, an LED panel, a retro CRT or an electric arc — with three patterns and four style presets.

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.

Gradient Text

Heading filled with a slowly drifting multi-stop linear gradient — three configurable colours, customizable angle, optional animation.

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.

Text Illuminate

A spotlight follows the cursor across the heading — letters under the beam glow and brighten, the rest fall into shadow.

Blend Text

A heading with CSS mix-blend-mode applied so it changes appearance against whatever sits behind it — picks the inverse colour of the backdrop pixel, like ink on a poster.Live customizer

Cyberpunk Text

Primary glowSecondary glowFlicker rate (Hz)0.4Text colourSub colourFont size150pxFontWeight400Transparent backgroundBackgroundCrazyGL · crazygl.comProgrammable hero sections for real websites.