Orb

1<script lang="ts" module>
2	import type { HTMLAttributes } from "svelte/elements";
3	import type { OrbAgentState } from "./types.js";
4 
5	export type OrbProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
6		/**
7		 * Two hex colors sampled across the orb's gradient. Update reactively
8		 * to animate between palettes.
9		 * @default ["#CADCFC", "#A0B9D1"]
10		 */
11		colors?: [string, string];
12		/**
13		 * Seed for the orb's internal noise, determining its overall shape.
14		 * Defaults to a stable per-instance random value so multiple orbs on
15		 * one page look distinct.
16		 */
17		seed?: number;
18		/**
19		 * Drives the orb's visual behavior to reflect the agent lifecycle.
20		 * Pass `null` to render the idle state.
21		 * @default null
22		 */
23		agentState?: OrbAgentState;
24		/**
25		 * `"auto"` uses the active microphone and output audio streams to
26		 * drive reactivity. `"manual"` reads `manualInput` / `manualOutput`
27		 * (or the `get*Volume` callbacks) instead.
28		 * @default "auto"
29		 */
30		volumeMode?: "auto" | "manual";
31		/** Manual input volume in `[0, 1]`. Only read when `volumeMode="manual"`. */
32		manualInput?: number;
33		/** Manual output volume in `[0, 1]`. Only read when `volumeMode="manual"`. */
34		manualOutput?: number;
35		/**
36		 * Called every frame to sample input volume in `[0, 1]`. Takes
37		 * precedence over `manualInput` when both are provided.
38		 */
39		getInputVolume?: () => number;
40		/**
41		 * Called every frame to sample output volume in `[0, 1]`. Takes
42		 * precedence over `manualOutput` when both are provided.
43		 */
44		getOutputVolume?: () => number;
45	};
46</script>
47 
48<script lang="ts">
49	import { Canvas } from "@threlte/core";
50	import { ACESFilmicToneMapping, WebGLRenderer } from "three";
51	import OrbScene from "./orb-scene.svelte";
52	import { cn } from "$UTILS$.js";
53 
54	let {
55		colors = ["#CADCFC", "#A0B9D1"],
56		seed,
57		agentState = null,
58		volumeMode = "auto",
59		manualInput,
60		manualOutput,
61		getInputVolume,
62		getOutputVolume,
63		class: className,
64		...restProps
65	}: OrbProps = $props();
66 
67	// Stable per-instance fallback seed if none is passed
68	const instanceSeed = Math.floor(Math.random() * 2 ** 32);
69	const resolvedSeed = $derived(seed ?? instanceSeed);
70</script>
71 
72<div data-slot="orb" class={cn("relative h-full w-full", className)} {...restProps}>
73	<Canvas
74		toneMapping={ACESFilmicToneMapping}
75		createRenderer={(canvas) =>
76			new WebGLRenderer({
77				canvas,
78				alpha: true,
79				antialias: true,
80				premultipliedAlpha: true,
81			})}
82	>
83		<OrbScene
84			{colors}
85// … truncated