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

Neon Tubes

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

ReactWebGLInteractiveFont#neon#tubes#spline#bloom#premium

Usage

import NeonTubes from '@crazygl/hero-neon-tubes';

export default function Page() {
  return (
    <NeonTubes
      heading="Filaments."
      count={5}
      bloom={1}
      tintA="#ff6cd1"
      tintB="#5cf2ff"
      tintC="#a4ff60"
    />
  );
}

Customise

  • Content — contentType (heading / two-columns / custom), heading, subheading, or custom node columns.
  • Background — transparent toggle, plus bgTop / bgBottom for the vertical gradient.
  • Tubes — tintA / tintB / tintC cycled across tubes, count (2-9), thickness (0.4-2.5), bloom (0-2.5), and speed bend rate (0-2).
  • Typography — headingFontFamily.

Best for

  • Retro-futurist and synthwave brand pages
  • Nightlife, music, and streaming sites
  • Creative agency and studio portfolios
  • Gaming and event landing pages
01 · Install the package

One command, zero config.

npm install @crazygl/hero-neon-tubes
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 NeonTubes from '@crazygl/hero-neon-tubes';

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

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

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 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.

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.

Energy Core Reactor

A glowing reactor core suspended in space — rotating orbital rings, procedural plasma arcs lashing inward, and emissive bloom.

Lens Flare Machine

A cinematic light source moves across the frame, throwing anamorphic streaks, hex aperture ghosts, glowing rings, and chromatic glares.

Neon Orbital Integrations

A dashboard screenshot at the centre with integration chips orbiting around it on an inclined plane, linked to the dashboard by glowing neon lines that pulse with travelling beads of light. Drag to spin the ring with momentum.Live customizer

Neon Tubes

Transparent backgroundBG topBG bottomTint ATint BTint CTube count5Thickness1Bloom1Bend speed0.5Heading FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.