ngx-orb

This library is part of the NGXUI ecosystem. View all available components at https://ngxui.com

@omnedia/ngx-orb is an Angular standalone component for an animated, interactive 3D orb with procedural GLSL shaders (OGL/WebGL). Customizable hue, hover effects, animation, and full signal/zones support.

Features

Procedural 3D orb shader using OGL, running on a real WebGL canvas.
Fully interactive: reacts to hover and mouse movement, with smooth signal-driven animation.
Customize hue, hover intensity, auto-rotation on hover, forced hover state.
Standalone Angular 20: SSR-safe, zone-less, signals-based inputs.
Animation is paused automatically when out of view (IntersectionObserver).
Responsive: resizes to its parent container.
Proper cleanup: no memory leaks, disposes GL context and events.

Installation

npm install @omnedia/ngx-orb ogl

Note: Requires ogl as a peer dependency.

Usage

Import the NgxOrbComponent in your module/component:

import { NgxOrbComponent } from '@omnedia/ngx-orb';

@Component({
  ...
  imports: [NgxOrbComponent],
})
export class DemoComponent {}

Use it in your template:

<div style="width: 350px; height: 350px; background: #15181a;">
  <om-orb
    [hue]="210"
    [hoverIntensity]="0.35"
    [rotateOnHover]="true"
    [forceHoverState]="false"
    style="width: 100%; height: 100%; display: block;"
  ></om-orb>
</div>

API

<om-orb
  [hue]="number"                // Hue in degrees (0-360)
  [hoverIntensity]="number"      // 0–1, default: 0.2
  [rotateOnHover]="boolean"      // default: true
  [forceHoverState]="boolean"    // default: false
  [styleClass]="customClass"
>
    <ng-content></ng-content>
</om-orb>

hue (default: 0): Base hue for the orb colors (float, degrees).
hoverIntensity (default: 0.2): How strongly the orbs hover effect appears.
rotateOnHover (default: true): Auto-rotate animation on hover.
forceHoverState (default: false): Force hover effect.
styleClass (optional): Add your own CSS class to the host element.

Styling

Fills its parent by default—set size via style or CSS.
All rendering is inside a transparent WebGL canvas. Overlay your own content with CSS if desired.

Notes

Animation pauses when component is out of view.
SSR-safe: DOM access is guarded.
All inputs are reactive/signals, update instantly.
Zone-free, standalone Angular 20 component.
Full disposal on destroy: cleans GL, removes listeners, releases context.

Contributing

PRs, issues, and feedback welcome!

License

MIT

Package detail

@omnedia/ngx-orb

readme