GlowOrb

Tier: clientUnstable

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { VoiceOrb } from '@nizivo/react/unstable/voice-orb';
import { GlowOrb } from '@nizivo/react/unstable/glow-orb';

export function GlowOrbExample(): JSX.Element {
  return <VoiceOrb state="speaking" orb={<GlowOrb state="speaking" />} />;
}

ImportCopy Anchor Link

import { GlowOrb } from '@nizivo/react/unstable/glow-orb';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/glow-orb.css';

Static or interactiveCopy Anchor Link

Client. The server renders the CSS orb VoiceOrb draws, as a poster; once the page hydrates, a canvas draws the shader over it from its first frame. A browser without WebGL keeps the poster. How to choose.

With VoiceOrbCopy Anchor Link

Pass it as VoiceOrb's orb, with the same state: <VoiceOrb state={state} orb={<GlowOrb state={state} />} />. It fills VoiceOrb's 160 px orb, and VoiceOrb drops its own halo behind it. The same goes for AiWelcome's 72 px orb (orb={<GlowOrb />}, idle, so it breathes). On its own it fills its box, a square.

The voice levelCopy Anchor Link

level is the voice's loudness, from 0 to 1. Pass a number, or a function the orb calls on every frame, such as one that reads a Web Audio AnalyserNode, so the page does not re-render sixty times a second. Without level, the orb simulates a voice for its state: still when idle, soft while listening, in syllables while speaking. The sphere grows with the level, its outline moves while it is live, the light drifts so the highlight changes angle, and the halo widens.

Light on a phoneCopy Anchor Link

No library: one fragment shader on WebGL 1 and a few kilobytes of script. It draws only while it is on screen and the page is visible, at a pixel ratio of at most 2. Under Reduced motion it draws one still frame. In forced colours it shows the poster with an outline, since the canvas is only colour.

ColoursCopy Anchor Link

It reads Nizivo's accent and brand colours, and follows the theme. Set --nz-glow-orb-light, --nz-glow-orb-deep and --nz-glow-orb-halo (a colour whose alpha is the halo's strength) to recolour it. It is decoration, hidden from assistive technology: say the state in words beside it, as VoiceOrb's label does.

PropsCopy Anchor Link

Other exportsCopy Anchor Link

GlowOrbProps type

import type { GlowOrbProps } from '@nizivo/react/unstable/glow-orb'

The props of GlowOrb, listed above.

GlowOrbState type

import type { GlowOrbState } from '@nizivo/react/unstable/glow-orb'

The voice states, as VoiceOrb names them.

type GlowOrbState = "idle" | "listening" | "speaking"

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

Layers: nz.components. Classes: .nz-glow-orb, .nz-glow-orb-canvas, .nz-glow-orb-poster, .nz-glow-orb-sphere.

AccessibilityCopy Anchor Link

Nothing in this component takes focus or keyboard input.

KeyboardCopy Anchor Link

None.