# AI Orb — Skecher UI

A responsive circular Three.js plasma orb with a configurable surface, strand shape, motion, and pointer-driven depth.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/ai-orb
```

## Dependencies

- None beyond React.

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
import { AiOrb } from "@/components/ui/ai-orb";

export default function AiOrbExample() {
  return (
    <div className="flex min-h-96 items-center justify-center bg-neutral-950 p-8">
      <AiOrb
        ariaLabel="Animated purple and cyan AI plasma orb"
        backgroundColor="#090A0F"
        primaryColor="#A855F7"
        secondaryColor="#06B6D4"
        intensity={1.25}
        strandWidth={0.5}
        twist={5}
        speed={0.45}
        pointerStrength={1}
        interactive
        className="w-[min(80vw,22rem)]"
      />
    </div>
  );
}
```

## Source files

- components/ui-components/ai-orb.tsx — AI Orb component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/ai-orb
- Registry item with complete source: https://skecher-ui.com/r/ai-orb.json
- Component AI context: https://skecher-ui.com/llms/ai-orb