Logo
Neura UI
Loading…
Logo
All pages 86

Orb

Animated activity indicators for agent UIs — canvas thinking states, plus compact CSS variants (lattice, lens, ring, helix, morph) inspired by AICSS Orbs.

Basic Usage

Drop in an orb and pick a state. It renders on a transparent canvas and defaults to foreground , so it reads correctly in both light and dark mode.
blade 
<neura::orb state="searching" :size="72" />
<neura::orb state="working" />

States

Six states, each a different dot geometry — orbiting particles, a scanned globe, scrambling bands, a rolling wave, an undulating ribbon, and a morphing outline.
blade
working
orbits
searching
globe
solving
rubik
listening
wave
composing
ribbon
shaping
morph
<neura::orb state="working" />    
<neura::orb state="searching" />  
<neura::orb state="solving" />    
<neura::orb state="listening" />  
<neura::orb state="composing" />  
<neura::orb state="shaping" />

CSS Variants

Pass a variant code to switch to the DOM/CSS engine — 25 compact glyphs across five families. Defaults to a 20px stage (AICSS scale); use pill for an inline status chip.
blade
Lattice
S1
Thinking
S2
Processing
S3
Working
S4
Searching
S5
Finalizing
Helix
G1
Processing
G2
Sequencing
G3
Uploading
G4
Syncing
G5
Idling
Ring
C1
Loading
C2
Listening
C3
Streaming
C4
Analyzing
C5
Compiling
Lens
B1
Thinking
B2
Searching
B3
Generating
B4
Solving
B5
Routing
Morph
M1
Shaping
M2
Expanding
M3
Unfolding
M4
Transforming
M5
Dispersing
<neura::orb variant="S1" />
<neura::orb variant="B4" :size="40" />
<neura::orb variant="C3" />
<neura::orb variant="G2" />
<neura::orb variant="M1" />

Status Pill

Wrap the CSS orb with a label for chat / agent status rows:
blade
Searching… Searching the web… Streaming… 
<neura::orb variant="S4" pill />
<neura::orb variant="B2" label="Searching the web…" pill />
<neura::orb variant="C3" pill color="primary" />

Colors

Apply different colors to orbs:
blade
Primary
Secondary
Success
Danger
Warning
Info 
<neura::orb state="working" color="primary" />
<neura::orb state="working" color="secondary" />
<neura::orb state="working" color="success" />
<neura::orb state="working" color="danger" />
<neura::orb state="working" color="warning" />
<neura::orb state="working" color="info" />

Sizes

Any pixel size. Tuned for small, inline-to-avatar scales.
blade 
<neura::orb state="searching" :size="24" />
<neura::orb state="searching" :size="64" />
<neura::orb state="searching" :size="88" />

Speed

The speed prop multiplies the animation clock.
blade
0.5×
1×
2× 
<neura::orb state="working" :speed="0.5" />
<neura::orb state="working" :speed="2" />

Configuration

Defaults live under the orb key of config/neura-kit.php . The state → geometry and color packs are swappable.
PHP 
// config/neura-kit.php

use Neura\Kit\NeuraKitConfig as Config;

'orb' => Config::orb([
    'default' => [
        'state' => 'searching',
        'size' => 64,
        'speed' => 1,
        'color' => 'foreground',
    ],
    'packs' => [
        'states' => \Neura\Kit\Packs\Orb\State::class,
        'colors' => \Neura\Kit\Packs\Orb\Color::class,
    ],
]),

Props

Property Type Default Description
state string searching Canvas engine: working · searching · solving · listening · composing · shaping
variant string null CSS engine: S1–S5 · B1–B5 · C1–C5 · G1–G5 · M1–M5 (takes priority over state)
color string foreground foreground · muted · primary · secondary · success · warning · danger · info · white · black · current
size int 64 / 20 Pixels — canvas default 64, CSS variant default 20
speed number 1 Canvas animation speed multiplier
label string auto CSS orb accessible label / pill text
pill bool false CSS orb status chip with label
Without variant , the canvas neuraOrb Alpine component is used. With variant , a DOM/CSS glyph is rendered (no Alpine). Both respect prefers-reduced-motion and follow currentColor .