Interactive React Orb Animation Component

I’m adding a floating, glossy-black orb to my React app and need it brought to life in code. The reference clip I already have shows a slow, seamless rotation with soft lighting; now I want that same look rendered in the browser, maintaining 60 fps even on modest mobile hardware.

The orb must react to the AI’s voice pipeline: whenever the AI begins or grows louder, the rotation speed should ramp up smoothly, then ease back when the voice quiets. I’ll expose the current voice level (or a simple isSpeaking boolean) via props, so you can wire the animation without touching the speech stack itself.

Key goals
• Performance and visual fluidity take top priority; no jitter on mobile, tablet, or desktop.
• Identical sheen and lighting across breakpoints—feel free to lean on Three.js, React Three Fiber, WebGL shaders, or ultra-light CSS transforms, as long as the result remains buttery.
• Fully responsive sizing so the orb never clips or pixelates, no matter the viewport.

Deliverables
1. A self-contained React component (TypeScript preferred but not mandatory) with prop hooks for voice data and optional style overrides.
2. Clear setup notes so I can drop the component into an existing Vite/CRA build and see the same smoothness locally.
3. Brief performance report: fps targets achieved on at least one mobile, tablet, and desktop test.

I’m ready to test as soon as you push a branch or CodeSandbox, and I’ll sign off when the demo meets the 60 fps target and the rotation acceleration feels natural to the AI’s speech cadence.