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

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.

ReactWebGL3DImageInteractiveFont#integrations#saas#automation#neon#orbit#three#ecosystem#dashboard

Usage

import NeonOrbital from '@crazygl/hero-neon-orbital';

export default function Page() {
  return (
    <NeonOrbital
      screenshot="https://crazygl.com/samples/screenshot-dashboard-dark.avif"
      ringTilt={25}
      lineColor="#56e3ff"
      pulseEnabled
    />
  );
}

Customise

  • Screenshot — screenshot (image or video at the centre; aspect auto-derived), plus screenshotX/Y, screenshotScale, screenshotTilt, screenEmissive.
  • Chips — chips (one per line, label | glyph | color, up to 12), chipSize, outlineIntensity.
  • Ring — ringRadius, ringTilt, autoRotateSpeed, dragSensitivity, momentumDecay.
  • Connection lines — lineColor, lineOpacity, pulseEnabled, pulseSpeed, pulseBrightness.
  • Atmosphere — haloColor, haloStrength, bgCenter / bgEdge radial backdrop, transparentBackground, parallaxStrength.

Best for

  • iPaaS and automation platforms; integration marketplaces.
  • Premium SaaS launch pages that plug into many tools.
  • Developer-tool and API products saying "we connect to everything you use."
01 · Install the package

One command, zero config.

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

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

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

Multi-Screen Orbital Carousel

A ring of product screenshots orbits slowly around the hero in 3D space. The front card faces the camera and pops larger; the others recede into a depth-fogged background. Drag to spin, then let the ring glide back to its idle rotation.

Neon Tubes

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

Orbiting Word System

A bold centered headline anchors a 3D system of keyword satellites. Each orbit word travels its own tilted ellipse around the center; hover pulls a word forward and lights up the rest of the constellation.

Floating Dashboard With Light Beam Reveal

Your product dashboard, tilted in 3D space, scanned into existence by a soft blue-purple light beam. A glowing uplight underneath and a subtle floor reflection complete the look.

Dashboard Eclipse

Your dashboard screenshot sits low in the frame, partially hidden behind a glowing eclipse horizon, a vertical beam of light rising from it like the product itself is powering the scene.

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

Neon Orbital Integrations

Dashboard screenshotImage (or video) shown at the centre. Aspect is auto-derived from the loaded media.Screenshot X0worldScreenshot Y0worldScreenshot scale0.8Screenshot tilt0°Screen emissive0.55ChipsOne chip per line. Format: label | glyph | color. Up to 12 chips.Chip size0.45worldOutline intensity1Ring radius2.5worldRing tilt25°Auto rotation speed0.15rad/sDrag sensitivity0.4Drag-to-rotate sensitivity.Momentum decay0.95Line colorLine opacity0.75Pulse beadsPulse speed0.8HzPulse brightness1.5Halo colorHalo strength0.4Background centerBackground edgeTransparent backgroundParallax strength0.35InteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.