Voice orb

Tap the orb to translate your own voice between Spanish and English.

Things to tryCopy Anchor Link

• Tap the orb and speak. It goes through each state in turn: listening (the microphone is open and the orb waits), hearing you (it moves like a voice as your words appear), translating (the clouds gather while the last words are finished) and speaking (the translation is read aloud). Tap again to finish early or stop it talking.
• Watch the translation correct itself. Mid-sentence, "la estación" can read as season; once the sentence ends it becomes train station. Remold.Text changes only the words that changed, so the line settles instead of flickering.
• Swap languages with the arrows between them.

Live mode uses react-speech-recognition for captions, the on-device Translator API in recent Chrome, and the browser's speech synthesis. Where translation isn't available it still captions what you said, and says so.

The orb on its ownCopy Anchor Link

// Feed a 0–1 level from your own audio or agent:
<VoiceOrb state="speaking" level={amplitude} />

Without a level, it simulates a believable voice while listening or speaking. state is idle | listening | thinking | speaking; theme is aurora | ember | mono; size sets the square size.

InstallCopy Anchor Link

npx shadcn@latest add https://your-docs-site/r/voice-orb.json

DependenciesCopy Anchor Link

npm install @hugeicons/core-free-icons @hugeicons/react @remold-ui/canvas @remold-ui/react react-speech-recognition

How it worksCopy Anchor Link

• The sphere is a clipped circle filled with a sky gradient, a few soft cloud blobs drifting on their own orbits, a deep current along the bottom, a highlight on the top left and a gentle shade at the edge. No outline, no rings.
• It's a Remold.Canvas. Each state is a set of values (size, drift speed, breathing, how tightly the clouds gather), so the orb springs from wherever it is into the next state. The canvas handles sizing, the frame loop and reduced motion; the component is the paint function.
• The voice level, from your level prop or the simulation, rises fast and falls slowly, so the orb leaps to a word and eases back. It also speeds the clouds up.
• It's continuous, so it keeps drifting between state changes. It pauses off screen, and reduced motion holds it still.