CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/floating-neon-logo-sign

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.

ReactCanvasImageInteractiveFont#logo#neon#glow#sign#music#creator#interactive#canvas#premium

Usage

import FloatingNeonLogoSign from '@crazygl/hero-floating-neon-logo-sign';

export default function Hero() {
  return (
    <FloatingNeonLogoSign
      heading="Open. After dark."
      logo="https://crazygl.com/samples/crazygl.svg"
      neonColor="#ff3da4"
      bootDuration={2.6}
    />
  );
}

Customise

  • Logo — logo image, sampleMode (alpha / luminosity / inverseLuma), sampleThreshold, sampleDensity, logoScale, logoOffsetX/Y.
  • Tube — neonColor, accentColor (hot core), tubeThickness, bloomAmount, tubeBrightness, backgroundColor, transparent.
  • Animation — pulseAmount, flickerAmount, bootDuration, pointerBrightness (hover boost), hoverRadius.
  • Atmosphere — smokeAmount, smokeColor.

Best for

  • Music venues, labels and nightlife brands.
  • Restaurants, bars and creator portfolios.
  • Retro / 80s-aesthetic launch pages.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-floating-neon-logo-sign
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 FloatingNeonLogoSign from '@crazygl/hero-floating-neon-logo-sign';

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

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

Logo Edge Glow

Upload an SVG or transparent PNG logo and light it with a neon inner glow — a bright, radial-gradient rim clipped to the silhouette that fades to a dark core, and intensifies toward your cursor as it approaches.

Magnetic Logo Field

An image-driven particle field. Drop in a logo and the particles drift around then snap into its silhouette in waves. Cursor magnetically pulls or repels the swarm. Sample by alpha, luminosity, or transparency.

Logo Sand Formation

Thousands of glowing sand grains drift on a warm desert current and re-form the supplied logo. Pointer movement scatters them in a Gaussian shockwave; springs and damping pull each grain back into the silhouette.

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

Floating Neon Logo Sign

Logo ImageSVG or PNG with transparency. Silhouette becomes the neon tube path.Sample byThreshold0.5Density1.5Higher = more samples along the tube path — smoother silhouette.Logo Size0.55Horizontal Offset0Shifts the sign left or right so the heading copy can sit on the opposite side. 0 = centred.Vertical Offset-0.16BackgroundTransparent backgroundNeon TubeTube colour. Default is hot pink — try electric blue (#3da4ff) or lime (#a4ff3d).Hot CoreInner core colour — kept near white for that overexposed plasma look.Tube Thickness1Bloom1Glass-and-aura radius around each tube. 1.0 is photogenic; >2 reads as flooded.Brightness1Pulse Amount0.25How deep the steady-state breathing is. 0.2–0.3 reads as alive.Flicker0.6Persistent electrical flicker after boot. 0 = perfectly steady; 1+ = ageing tube.Boot-Up Time2.6sHow long the segment-by-segment startup takes. 0 = already on.Hover Boost0.7Per-segment brightness lift when the cursor hovers over the sign. Falls off with distance from the segment.Hover Radius0.32How wide the cursor's brightness halo reaches across the sign (in logo-UV). 0.1 = pinpoint, 1.0 = whole sign lights together.Smoke0.6Density of drifting smoke/fog behind the sign.Smoke TintSmoke colour — usually a desaturated cousin of the tube colour.Heading FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.