Voice assistant
A voice assistant's orb of 3D dots that breathes while idle, ripples with your voice as it listens, swirls into a ring as it thinks, and pulses as it speaks.
Things to try
- Watch it play. The orb breathes while it waits, ripples while you speak and your words appear under it, swirls into a spinning ring while it thinks, then pulses in lobes as it answers.
- Press the mic. It stops playing and starts listening; press again and it goes off to think.
Install
npx shadcn@latest add https://your-docs-site/r/voice-assistant.jsonDependencies
The install command adds these for you. If you copy the code by hand, install them yourself.
npm install @base-ui/react @hugeicons/core-free-icons @hugeicons/react @remold-ui/core @remold-ui/reactHow it works
- One orb, four shapes. Each state is a shape from
shapesin@remold-ui/core: aspherethat breathes with.scale, the same sphere rippled or bulged with.warp, and atorusfor thinking.<Remold.Particles>turns it with acameraand flows between them. - Your voice, if you have it. Pass
level(0 to 1) from the microphone or the reply's audio, and the ripples follow it. Left out, the orb makes up a lively one. - Dots that stay put. Ripples use
pairing="index", so each dot keeps its place on the ball and only moves in and out. Going to or from the ring usespairing="flow", so the ball unrolls into it in one sweep. - Base UI for the mic. The mic is a Base UI
Toggle, pressed while listening, and the status reads out to screen readers as it changes. It holds still with reduced motion, and offscreen.
The question and the answer are made up.
Particle shapes
Thousands of dots turning in 3D that flow from a spiral galaxy into a double helix, then into the Lorenz attractor's two wings, a honeybee, a butterfly and the Remold mark.
Voice orb
A soft sphere of drifting cloud for voice interfaces: it breathes when idle, swells with your voice, gathers while thinking and flows while speaking. The demo is live translation, and the translated line morphs as it revises itself.