Plasma Globe

Procedural plasma sphere rendered with OGL - multiple filaments, volumetric glow, and optional pointer tilt. The canvas is transparent by default so any stage color shows through. Respects prefers-reduced-motion.

Default

Electric blue filaments with glass corona - move the pointer to bend the arcs.

Loading…

Installation

CLI

npx @sonojs/ui@latest add plasma-globe

Also needsnpm i ogl

Usage

page.tsx

"use client"

import { PlasmaGlobe } from "@/components/3d/plasma-globe"

export default function Page() {
  return (
    <div className="relative h-[380px] w-full overflow-hidden rounded-[12px] bg-[#020617] sm:h-[480px]">
      <PlasmaGlobe height="100%" />
    </div>
  )
}

Props

Prop	Type	Default	Description
speed	number	1	Global animation time multiplier.
intensity	number	1.15	Emission / color intensity multiplier.
interactive	boolean	true	Pointer tilt plus filament focus bias.
corona	number	1.15	Glass Fresnel rim and outer halo strength.
crackle	number	0.45	Electrical flicker on filaments (0–1).
height	string · number	380	Stage height (shorter default for mobile).
className	string	-	Classes on the stage container.
style	CSSProperties	-	Inline styles on the stage container.