Avatar

Stable

A specialized entity visual crafted with frosted glassmorphism, cyberpunk neon auras, animated neural status pulses, and squircle geometries.

Installation

$pnpm add @siberui/react

Import

tsx
import { Avatar, AvatarGroup } from '@siberui/react';

Neon & Hologram Cyberpunk Avatars

The variant="neon" and variant="hologram" presets illuminate avatars with cyber cyan ambient glows, crisp high-tech borders, and optional scanlines.

Cypher Sentinel
variant="neon"
Apex Operator
scanline hologram
GS
neon initials
tsx
<div className="flex flex-wrap gap-6 items-center">
  {/* Neon Variant */}
  <Avatar 
    size="xl"
    variant="neon"
    src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&auto=format&fit=crop&q=80" 
    name="Cypher Sentinel"
    status="streaming"
  />

  {/* Hologram Variant with Scanlines */}
  <Avatar 
    size="xl"
    variant="hologram"
    scanline
    src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&auto=format&fit=crop&q=80" 
    name="Apex Operator"
    status="online"
  />

  {/* Fallback Neon Initials */}
  <Avatar 
    size="xl"
    variant="neon"
    name="Ghost Shell"
    status="busy"
  />
</div>

Neural Glow & Activity States

Combine ring halo highlights with active status states to indicate live telemetry and signal sync.

Neural Node
C
tsx
<div className="flex flex-wrap gap-8 items-center justify-center">
  <Avatar ring="emerald" status="online" size="lg" name="Neural Node" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=150&auto=format&fit=crop&q=80" />
  <Avatar ring="cyan" variant="neon" size="lg" name="CY" status="streaming" />
</div>

Frosted Glassmorphism Variant

The variant="glass" preset renders translucent acrylic avatar tokens designed to layer seamlessly on textured cyberpunk backdrops.

Glass Operator
V
tsx
<div className="p-8 rounded-2xl border border-white/10 bg-[#060913] bg-[url('/textures/circuit-board.svg')] bg-repeat flex flex-wrap gap-8 items-center justify-center">
  <Avatar variant="glass" size="lg" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&auto=format&fit=crop&q=80" name="Glass Operator" />
  <Avatar variant="glass" size="lg" name="VS" />
</div>

Shapes & Scaling

Choose between traditional rounded circles, smooth geometric squircles (shape="squircle"), or angular cyber squares (shape="square").

C
circle
S
squircle
B
square
tsx
<div className="flex flex-wrap gap-8 items-center justify-center">
  <div className="flex flex-col items-center gap-2">
    <Avatar shape="circle" size="lg" name="CI" />
    <span className="text-[11px] font-mono text-slate-400">circle</span>
  </div>

  <div className="flex flex-col items-center gap-2">
    <Avatar shape="squircle" size="lg" name="SQ" />
    <span className="text-[11px] font-mono text-cyan-300">squircle</span>
  </div>

  <div className="flex flex-col items-center gap-2">
    <Avatar shape="square" size="lg" name="BX" />
    <span className="text-[11px] font-mono text-slate-400">square</span>
  </div>
</div>

Glowing Ring Halos

Highlight VIP agents, clearance levels, or active roles with illuminated dual-layer ring halos (cyan, violet, emerald, rose, amber).

SC
RT
SW
tsx
<div className="flex flex-wrap gap-6 items-center">
  <Avatar size="lg" ring="cyan" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&auto=format&fit=crop&q=80" />
  <Avatar size="lg" ring="violet" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&auto=format&fit=crop&q=80" />
  <Avatar size="lg" ring="emerald" name="Sarah Connor" />
  <Avatar size="lg" ring="rose" name="Red Team" />
  <Avatar size="lg" ring="amber" name="Sentinel Warning" />
</div>

Animated Neural Status Pulses

Real-time status indicators support pulse animations. The streaming status emits an animated telemetry radar ping.

A0
online (pulse)
NS
streaming (ping)
A0
idle
A0
busy
A0
offline
tsx
<div className="flex flex-wrap gap-8 items-center">
  <Avatar size="lg" status="online" name="Agent 01" />
  <Avatar size="lg" status="streaming" name="Neural Stream" />
  <Avatar size="lg" status="idle" name="Agent 02" />
  <Avatar size="lg" status="busy" name="Agent 03" />
  <Avatar size="lg" status="offline" name="Agent 04" />
</div>

AI Agents & Entity Fallbacks

When displaying non-human entities like Autonomous LLM Agents, Core Processors, or Generic Operators, use fallbackType="bot" | "cpu" | "user".

fallbackType="bot"
fallbackType="cpu"
fallbackType="user"
tsx
<div className="flex gap-6 items-center">
  <Avatar size="lg" variant="neon" fallbackType="bot" status="streaming" />
  <Avatar size="lg" variant="neon" fallbackType="cpu" status="online" />
  <Avatar size="lg" variant="neon" fallbackType="user" status="idle" />
</div>

Avatar Group with Hover Expansion

AvatarGroup stacks avatars with a negative overlap. Hovering dynamically expands the stack with smooth spring spacing and active hover scaling.

Commander Nova
Echo Zero
+2
tsx
<AvatarGroup 
  max={4}
  size="lg"
  variant="neon"
  shape="squircle"
  avatars={[
    { src: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150', name: 'Commander Nova', status: 'streaming' },
    { src: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150', name: 'Echo Zero', status: 'online' },
    { fallbackType: 'bot', name: 'Agent Sentinel', status: 'online' },
    { fallbackType: 'cpu', name: 'Neural Core', status: 'online' },
    { name: 'Marcus Vance' },
    { name: 'Elena Rostova' }
  ]}
/>

HUD Operator Card Composition

Here is how Cyber & Frosted Glass avatars integrate seamlessly into cyberpunk HUD operator and agent telemetry cards.

Nova Vance
NOVA_VANCE
L5 CLEARANCE
Neural Interface ArchitectNode Sync: 99.8% | Latency: 0.2ms
tsx
<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-2xl">
  <CardContent className="p-6">
    <Row gap="md" align="center">
      <Avatar 
        size="xl"
        shape="squircle"
        variant="neon"
        scanline
        src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150"
        name="Nova Vance"
        status="streaming"
      />
      <Stack gap="xs" className="flex-1">
        <Row justify="between" align="center">
          <span className="font-mono font-bold text-slate-100">NOVA_VANCE</span>
          <Badge variant="neon" size="sm">CLEARANCE: L5</Badge>
        </Row>
        <span className="text-xs text-cyan-400 font-mono">Neural Interface Architect</span>
        <span className="text-xs text-slate-400">Node Sync: 99.8% | Latency: 0.2ms</span>
      </Stack>
    </Row>
  </CardContent>
</Card>

API Reference

PROPERTIES (9)← swipe to inspect →
PropertyDescriptionTypeDefault
size
Dimensions of the avatar container.
"xs" | "sm" | "md" | "lg" | "xl" | "2xl"
"md"
shape
Corner rounding geometry style.
"circle" | "squircle" | "square"
"circle"
variant
Cyberpunk & frosted glass visual aesthetic preset.
"default" | "neon" | "glass" | "hologram"
"default"
ring
Illuminated dual-layer ring halo color.
"none" | "cyan" | "violet" | "emerald" | "rose" | "amber" | "white"
"none"
status
Animated live status indicator dot.
"online" | "idle" | "busy" | "streaming" | "offline"
-
fallbackType
Icon glyph displayed when image is missing or for autonomous agents.
"initials" | "user" | "bot" | "cpu"
"initials"
scanline
Overlays futuristic holographic CRT scanline raster.
boolean
false
src
Direct image URL source.
string
-
name
Entity name used for fallback initials and accessible alt label.
string
-

Accessibility

  • Always provide a descriptive name or alt property for assistive screen readers.
  • Status indicator dots include programmatic aria-label tags (e.g., "Online", "Streaming Telemetry").
  • Status colors are backed by high-contrast border outlines so they remain discernible against bright or dark avatars.

Best Practices

  • Spatial UIs: Use shape="squircle" and variant="glass" when building spatial navigation or floating HUD cards.
  • AI Agent Distinction: Pair fallbackType="bot" or fallbackType="cpu" with variant="neon" to immediately differentiate AI co-pilots from human operators.