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

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.

ReactWebGLInteractiveFont#webgl#cta#cyberpunk#buttons#neon#dock#landing#interactive#waitlist#launch

Usage

import NeonCtaDock from '@crazygl/hero-neon-cta-dock';

export default function Page() {
  return (
    <NeonCtaDock
      heading="Reserve your slot."
      subheading="Beta access closes Friday."
      buttonCount={2}
      button1Label="Get early access →"
      button1Color="#56e3ff"
      onButton1Click="/signup"
      button2Label="View pricing"
      button2Color="#a070ff"
      onButton2Click={(e) => console.log('clicked', e)}
    />
  );
}

Each onButtonNClick accepts either a string URL (navigates via window.location.href) or a function callback (receives the MouseEvent).

Customise

  • Content — heading / subheading, two-column, or fully custom node content.
  • Buttons — buttonCount (1–3), per-button labelN, colorN, and onButtonNClick.
  • Button styling — buttonGlow, pulseEnabled / pulsePeriod, hoverBoost, clickBurst.
  • Dock surface — dockEnabled, dockColor, dockGlow, padding, corner radius, border colour/strength.
  • Atmosphere — background strips (count/width/speed), particles (count/size/speed), bgTop/bgBottom gradient, transparency.
  • Motion — parallaxStrength for the pointer-driven scene shift.

Best for

  • Product launches and waitlist / beta-access pages chasing one decisive click.
  • Developer tools, AI products, and crypto or gaming landing pages.
  • "Reserve your slot" countdown and early-access moments where the CTA is the hero.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-neon-cta-dock
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 NeonCTADock from '@crazygl/hero-neon-cta-dock';

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

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

Energy Beam CTA

A conversion-focused hero: the main CTA button emits a glowing vertical beam that connects to a tilted product dashboard, making the button feel like it activates the product. Hover the CTA to brighten the beam, burst particles, and ripple a wake across the dashboard.

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.

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.

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 Tubes

Flexible neon tubes float and bend through space, forming abstract loops. Each tube glows with its own colour and 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.Live customizer

Neon CTA Dock

Button count2Button 1 labelButton 1 colourOn clickURL to navigate to on click. Code consumers can also pass a function — same prop name.Button 2 labelButton 2 colourOn clickURL to navigate to on click. Code consumers can also pass a function — same prop name.Button glow0.7Base glow intensity around each button.Pulse enabledPulse period3.8sHover boost1.6Glow multiplier on hover.Click burstSpawn a particle burst on click.Dock surfaceDock colourDock glow0.25Dock horizontal padding28pxHorizontal padding of the dock plate around the buttons.Dock vertical padding22pxVertical padding of the dock plate.Dock corner radius14pxCorner radius of the dock plate.Dock border colourColor of the thin border line around the dock plate.Dock border strength0.45Visibility of the dock plate's border.Background stripsStrips colourStrip count14Strip width4.5pxPixel width of the strips at default DPR.Strip speed0.4How fast strips drift across the canvas.Particle count90Particle colourParticle size2pxPixel radius of each particle.Particle speed0.08Drift speed.Background topBackground bottomTransparent backgroundParallax strength0.3InteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.