4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T2703,"use client"; // karaui.kamisama-v0.my.id/components/agents/voice-orb import { AnimatePresence, type MotionValue, motion, useAnimationFrame, useMotionValue, useReducedMotion, useSpring, useTransform, } from "motion/react"; import { type CSSProperties, useEffect, useRef } from "react"; import { EASE_IN_OUT, EASE_OUT, SPRING_GLIDE } from "@/lib/ease"; import { cn } from "@/lib/utils"; export type VoiceOrbState = "idle" | "listening" | "thinking" | "speaking"; export interface VoiceOrbProps { state?: VoiceOrbState; /** Audio amplitude 0..1 (mic input while listening, output while speaking). */ level?: number; /** Synthesize a plausible `level` for the current state (no audio needed). */ simulate?: boolean; /** Diameter in px. Default 160. */ size?: number; /** Accessible name; the current state is appended. Default "Voice assistant". */ label?: string; className?: string; } const STATE_TEXT: Record = { idle: "idle", listening: "listening", thinking: "thinking", speaking: "speaking", }; // Per-state motion character: how fast the blobs orbit, how far they drift // from center and how much the audio level swells the core. const STATE_MOTION: Record = { idle: { speed: 0.25, drift: 0.05, gain: 0 }, listening: { speed: 0.6, drift: 0.08, gain: 0.18 }, thinking: { speed: 1.4, drift: 0.11, gain: 0 }, speaking: { speed: 0.9, drift: 0.1, gain: 0.3 }, }; // Blob layers: token color, orbit phase offset and relative size. const BLOBS = [ { color: "var(--chart-1)", phase: 0, scale: 0.78 }, { color: "var(--chart-2)", phase: 2.1, scale: 0.7 }, { color: "var(--chart-3)", phase: 4.2, scale: 0.66 }, { color: "var(--primary)", phase: 1.05, scale: 0.6 }, ] as const; /** Deterministic pseudo-speech envelope: layered sines read as syllables. */ function syntheticLevel(state: VoiceOrbState, t: number) { if (state === "speaking") { const syllable = Math.abs(Math.sin(t * 7.3) * Math.sin(t * 2.9 + 1)); const phrase = 0.55 + 0.45 * Math.sin(t * 0.8); return Math.min(1, 0.15 + syllable * 0.85 * phrase); } if (state === "listening") { const burst = Math.max(0, Math.sin(t * 1.3)) ** 2; return 0.08 + burst * Math.abs(Math.sin(t * 9.1)) * 0.55; } return 0; } export function VoiceOrb({ state = "idle", level = 0, simulate = false, size = 160, label = "Voice assistant", className, }: VoiceOrbProps) { const reduce = useReducedMotion() ?? false; const stateRef = useRef(state); useEffect(() => { stateRef.current = state; }, [state]); const target = useMotionValue(0); const smooth = useSpring(target, SPRING_GLIDE); // `clock` integrates speed over time so a state change eases the orbit // rate instead of jumping the blobs to a new phase; drift and gain ease too. const clock = useMotionValue(0); const drift = useMotionValue(STATE_MOTION[state].drift); const gain = useMotionValue(STATE_MOTION[state].gain); const speed = useRef(STATE_MOTION[state].speed); useEffect(() => { if (!simulate) target.set(Math.max(0, Math.min(1, level))); }, [level, simulate, target]); // Motion values update per frame without re-rendering React. useAnimationFrame((t, delta) => { if (reduce) return; const goal = STATE_MOTION[stateRef.current]; const k = Math.min(1, delta / 400); speed.current += (goal.speed - speed.current) * k; drift.set(drift.get() + (goal.drift - drift.get()) * k); gain.set(gain.get() + (goal.gain - gain.get()) * k); clock.set(clock.get() + (delta / 1000) * speed.current); if (simulate) target.set(syntheticLevel(stateRef.current, t / 1000)); }); const coreScale = useTransform(() => 0.92 + smooth.get() * gain.get()); const haloScale = useTransform(() => 1 + smooth.get() * gain.get() * 1.4); const haloOpacity = useTransform(smooth, (l) => 0.35 + l * 0.5); return (

{/* Soft halo that breathes with the level. */} {/* Listening: rings ripple outward. */} {state === "listening" && !reduce && ( {/* Thinking: a comet arc circles the orb. */} {state === "thinking" && ( {/* Core: a clipped sphere holding drifting color blobs. */} {STATE_TEXT[state]}

); } function Blob({ index, color, phase, blobScale, clock, level, drift, gain, still, }: { index: number; color: string; phase: number; blobScale: number; clock: MotionValue; level: MotionValue; drift: MotionValue; gain: MotionValue; still: boolean; }) { const dir = index % 2 === 0 ? 1 : -1; // Each blob orbits on its own Lissajous path (percent of the core), and the // level pushes it outward so loud audio visibly churns the colors. const x = useTransform(() => { const t = clock.get() * dir + phase; const r = (drift.get() + level.get() * gain.get() * 0.35) * 100; return `${Math.cos(t) * r}%`; }); const y = useTransform(() => { const t = clock.get() * 1.3 + phase * 1.7; const r = (drift.get() + level.get() * gain.get() * 0.35) * 100; return `${Math.sin(t) * r}%`; }); const scale = useTransform(() => { const t = clock.get() * 0.7 + phase; return blobScale * (1 + 0.08 * Math.sin(t * 2) + level.get() * gain.get() * 0.6); }); const staticOffset = [ ["-18%", "-14%"], ["16%", "-6%"], ["-4%", "18%"], ["10%", "10%"], ][index] ?? ["0%", "0%"]; return ( ); } 51:T686,// Shared motion tokens. Easing curves mirror the CSS custom properties in // globals.css; springs are the canonical physics used across components. // Strong custom variants — defaults like `ease-in`/`ease-out` feel weak. export const EASE_OUT = [0.16, 1, 0.3, 1] as const; export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const; export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const; /** CSS string form of EASE_OUT for inline style transitions. */ export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)"; /** Press feedback on buttons and other tappable surfaces. */ export const SPRING_PRESS = { type: "spring", stiffness: 500, damping: 30, mass: 0.6, } as const; /** Content swaps — label/icon slots trading places inside a control. */ export const SPRING_SWAP = { type: "spring", stiffness: 460, damping: 30, mass: 0.55, } as const; /** Overlay panel entrances — modals and sheets summoned by pointer. */ export const SPRING_PANEL = { type: "spring", stiffness: 420, damping: 40, mass: 0.5, } as const; /** Shared-layout glides — pills, indicators and panels morphing between positions. */ export const SPRING_LAYOUT = { type: "spring", stiffness: 360, damping: 32, mass: 0.6, } as const; /** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */ export const SPRING_MOUSE = { stiffness: 200, damping: 15, mass: 0.3, } as const; /** Dragged handles and fills (sliders) — critically damped `useSpring` config, * so the value follows the pointer butterily and never rebounds off an end. */ export const SPRING_GLIDE = { stiffness: 700, damping: 50, mass: 0.5, } as const; 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L4e",null,{"namespace":"@karaui","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"components/agents/voice-orb.tsx","content":"$50","type":"registry:component","target":"@components/agents/voice-orb.tsx"},{"path":"lib/ease.ts","content":"$51","type":"registry:lib","target":"@lib/ease.ts"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]