AIOrb

<AIOrb /> renders an AI entity as a living orb. It is adapted from Alfred's orb in the Trade Sider terminal and shares its engine with the three-orb intelligence field.

Usage

import { AIOrb } from "@/components/orbs/AIOrb";

<AIOrb entity="alfred" size="min(80vw, 420px)" intensity={0.2} label />;

Adding an entity

Entities are configuration in src/components/orbs/entities.ts:

export const nova: AIEntity = {
  id: "nova",
  name: "Nova",
  description: "Research assistant",
  domain: "Research",
  appearance: {
    base: "#140a2a",
    hot: "#7b6cff",
    glow: "#9d90ff",
    halo: "#b9b2ff",
    particles: ["#ffffff", "#c9c4ff", "#7b6cff"],
    rest: { distortion: 0.06, frequency: 1.3, spin: 0.05, bloom: 0.5 },
    active: { distortion: 0.13, frequency: 1.8, spin: 0.14, bloom: 1 },
  },
  signals: ["Literature review", "Experiment design"],
  profile: [{ label: "Domain", value: "Research" }],
  summary: "…",
};

Choose hot as a mid-tone rather than white: the fresnel term brightens the rim, and a white hot color washes the whole sphere out.

Performance contract

• Three.js loads only when an orb nears the viewport.
• Rendering pauses off-screen and in hidden tabs.
• Coarse pointers, small screens and low core counts get lower detail.
• Under prefers-reduced-motion, time stops and frames render only on state change.
• A CSS orb is server-rendered in place and remains as the WebGL fallback.