Circuit Board Avatar

Interactive Demo

Current mode: idle

Idle

Standby state. Minimal activity, dim traces.

Thinking

Processing. Cyan glow, contemplative pulses.

Tools

Tool execution. Orange activity, rapid blinking.

Writing

Output generation. Green flow, sequential cascade.

Executing

Intense operation. Magenta strobe, maximum activity.

Size Variants (CSS Scaled)

64px

96px

128px (native)

192px

Usage

// HTML attribute
<circuit-avatar mode="thinking"></circuit-avatar>

// JavaScript property
const avatar = document.querySelector('circuit-avatar');
avatar.mode = 'executing';

// Method
avatar.setMode('tools');

// Manual pulse effect
avatar.pulse();

// Listen for mode changes
avatar.addEventListener('modechange', (e) => {
  console.log(`Mode: ${e.detail.mode}`);
});