Loading hero…

@crazygl/energy-core

Energy Core Reactor

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

React

WebGL

Interactive

Font

#sci-fi

#reactor

#plasma

#bloom

#rings

#premium

Usage

import EnergyCore from '@crazygl/hero-energy-core';

export default function Page() {
  return (
    <EnergyCore
      heading="Reactor."
      coreSize={0.12}
      rotationSpeed={1}
      bloomStrength={1}
    />
  );
}

Customise

Layout — centerX slides the reactor across the frame (−0.6…0.6; 0 = centred).
Core — coreColor, innerColor, coreSize, coreIntensity shape the hot sphere; ringColor / ringIntensity and plasmaColor / plasmaIntensity drive the orbital bands and arcs.
Glow & motion — bloomStrength lifts highlights into a halo; rotationSpeed multiplies all three ring rates.
Background — bgColor sets the deep-space backdrop, or flip transparent to drop the star field and composite over your own page background.

Best for

Sci-fi, game-studio, and deep-tech landing pages
AI / ML platforms wanting a powerful "engine" metaphor
Fusion, energy, and climate-tech brands
Compute-infrastructure sites with a futuristic streak

01 · Install the package

One command, zero config.

npm install @crazygl/hero-energy-core

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 EnergyCoreReactor from '@crazygl/hero-energy-core';

export default function Landing() {
  return (
    <EnergyCoreReactor />
  );
}

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 EnergyCoreReactor from '@crazygl/hero-energy-core';

export default function Page() {
  return (
    <section>
      <EnergyCoreReactor
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}

Similar heroes

Live customizer