Ai Orb Face

1"use client";
2 
3import { cn } from "@/lib/utils";
4import {
5  motion,
6  useAnimationControls,
7  useReducedMotion,
8  useSpring,
9} from "motion/react";
10import { useCallback, useEffect, useId, useRef } from "react";
11import {
12  type AIAmplitude,
13  type AIState,
14  getAIStateMotion,
15  useAmplitudeValue,
16} from "../ai-core";
17 
18const VIEWBOX = 100;
19const CENTER = VIEWBOX / 2;
20const EYE_OFFSET = 16;
21const EYE_Y = 44;
22const EYE_WIDTH = 11;
23const EYE_HEIGHT = 26;
24const EYE_RADIUS = 5.5;
25/** How far the pupils can travel from centre, in viewBox units. */
26const GAZE_RANGE = 5.5;
27/** Cursor distance, in px, at which the gaze reaches full deflection. */
28const GAZE_FALLOFF = 220;
29const EASE_OUT = [0.23, 1, 0.32, 1] as const;
30const EASE_IN = [0.4, 0, 1, 1] as const;
31/** A ~1.25-turn swirl; spun in place it reads as dizzy. */
32const SPIRAL = "M0 0C-0.6 -4 5 -5 6 -0.6C7 4.5 1 8 -4 6C-9 4.5 -9.5 -2 -6 -6";
33const BLINK_MIN_MS = 3200;
34const BLINK_EXTRA_MS = 2600;
35const DOUBLE_BLINK_CHANCE = 0.25;
36/** Thinking saccades: the eyes look away and up, the way people search. */
37const SACCADE_MIN_MS = 700;
38const SACCADE_EXTRA_MS = 700;
39const SACCADE_TARGETS = [
40  { x: -1, y: -1 },
41  { x: 1, y: -1 },
42  { x: -0.6, y: -0.4 },
43  { x: 0.8, y: -0.9 },
44] as const;
45 
46export type AIOrbFaceProps = {
47  /** Accessible label. Omit to keep the character decorative. */
48  "aria-label"?: string;
49  /** Live audio level, 0–1. Widens the eyes and lifts the body while speaking. */
50  amplitude?: AIAmplitude;
51  className?: string;
52  colors?: { body?: string; bodyEdge?: string; feature?: string };
53  /**
54   * Follow the pointer with its gaze. Turn off inside dense UI where a dozen
55   * of these tracking the cursor would be noise.
56   */
57  gaze?: boolean;
58  /** Rendered size. Numbers are pixels. */
59  size?: number | string;
60  state?: AIState;
61};
62 
63const DEFAULT_COLORS = {
64  body: "oklch(78% 0.14 280)",
65  bodyEdge: "oklch(70% 0.16 320)",
66  feature: "oklch(24% 0.03 280)",
67};
68 
69/**
70 * A little character rather than an indicator.
71 *
72 * Status is carried by expression — the thing humans read fastest and the reason
73 * a literal checkmark stuck onto an orb feels wrong. Squints while it thinks,
74 * eyes wide while it listens, happy arcs when it finishes, spiral-eyed when it
75 * breaks. The gaze and blink cadence are borrowed from the SmoothUI moai so the
76 * two feel like the same creature.
77 */
78const AIOrbFace = ({
79  "aria-label": ariaLabel,
80  amplitude,
81  className,
82  colors,
83  gaze = true,
84  size = 128,
85  state = "idle",
86// … truncated