Plasma Core

Use it like any other component. Choose a theme with preset; any prop you pass as well overrides the preset.

import { useRef } from 'react'
import { PlasmaCore, type PlasmaCoreHandle } from '@/components/effects/plasma-core/plasma-core'

export function Hero() {
  const core = useRef<PlasmaCoreHandle>(null)
  return (
    <section className="relative h-[640px] overflow-hidden">
      {/* fills its parent; coreX / coreY / coreSize put the core beside the headline */}
      <PlasmaCore ref={core} preset="Ion" coreX={0.72} coreY={0.5} energy={0.8} className="absolute inset-0" />
      <div className="relative z-10 max-w-md p-12">
        <h1>Run on pure energy.</h1>
        <button onClick={() => core.current?.pulse()}>Ignite the core</button>
      </div>
    </section>
  )
}

// Presets: Solaris, Ion, Nebula, Verdant Reactor, Eclipse (the one made for light pages).
// Bind `energy` to scroll or a loading state; it eases, so you can set it every frame.
// The stage above is <PlasmaCoreShowcase />, also exported, if you want the same hero composition.

<PlasmaCore preset="Ion" energy={0.75} />

• Solaris
• Ion
• Nebula
• Verdant Reactor
• Eclipse

• Move the pointer near the core: it leans toward you, its hot spot follows, the filaments stream in your direction and the corona and the first two flares reach for the cursor. Set pointerPull to 0 to ignore the pointer.
• A click or tap sends a shock wave through the corona and the stars: a ring of light races outward, bends the star field as it passes and the core flashes. Call pulse() on a ref (pulse(1.5) for a stronger one) to trigger it from your own button or a scroll position; pulseOnClick turns the click off.
• energy (0 to 1) scales how alive the core is: at 0 it smoulders, dim and slow with almost no flares; at 1 it burns bright with a wide corona and frequent flares. It eases to new values, so you can bind it to scroll progress or a loading state.
• The effect fills its parent and keeps the core at coreX, coreY and coreSize, so it can sit beside a headline. The stars, dust and corona use the whole box.
• The Eclipse preset is a black disc with a bright rim and is rendered as ink on a light page. Any light background colour switches the same rendering on.
• It pauses off screen and in a background tab, lowers its resolution automatically if frames run slow, and draws one composed still frame under prefers-reduced-motion. Without WebGL, and before the first frame, you see a CSS poster in the same colours.

See all effects