AI Pin Style Voice Interface Animation in SwiftUI: Guide

How do you build an AI Pin style voice interface animation in SwiftUI?

With three pieces: a drawing surface, a clock, and a truth source. The drawing surface is Canvas, SwiftUI’s immediate-mode view for exactly this kind of organic, always-moving visual. The clock is TimelineView, which redraws the canvas at display cadence. And the truth source is the microphone’s live level, because the entire magic of an AI Pin style orb is that it visibly breathes with the user’s actual voice.

Start the design from a real reference: the free VP0 library carries voice and assistant interface designs with machine-readable source pages, so Claude Code or Cursor generates the screen structure and states from a real design while you focus on the animation core, which is the part worth hand-tuning.

Which states does a voice interface actually need?

Five states, and lying about them kills the product. Idle: a slow ambient drift that says the app is alive but not recording. Listening: the orb expands and tracks voice level, visibly bound to the mic. Thinking: a distinct holding animation that masks model latency honestly. Speaking: motion synced to the response audio. Error or denied: a calm static state with words, not animation, explaining what happened.

The cardinal rule sits in the listening state: the animation must reflect real recording status. An orb that pulses “listening” while the mic is off, or worse, the inverse, is a trust violation users feel before they can articulate it. Drive the visual from the actual audio session state, never from your intent.

Animation approach	Best for	Why it works	Main limit	Verdict
TimelineView + Canvas, mic-driven	Live voice-reactive orbs and waveforms	Real-time, fully yours, no dependencies	You write the math	Best overall
Prebaked Lottie loops	Idle and thinking states	Designer-grade motion cheaply	Cannot react to live audio	Good for non-reactive states
Particle or shader libraries	Showcase visuals	Spectacular results possible	Heavy dependency for one screen	Good for hero moments

How does the microphone drive the animation?

Tap the input node with AVFoundation’s audio engine, compute a smoothed RMS level per buffer, and publish it to the view. Audio arrives fast (typically 44,100 samples per second), so downsample aggressively: one level value per visual frame is all the orb needs, and a simple low-pass smoothing (blend each new level into the last) turns jittery speech into organic motion.

The drawing itself is a handful of sine-modulated blobs: layered circles whose radii wobble by phase-shifted sines, scaled by the smoothed level. Three layers at different phases and opacities read as liquid; the same additive trick powers the ring mathematics in our progress ring animation guide.

Where do speech recognition and accessibility fit?

If the interface transcribes, the Speech framework handles recognition behind its own permission prompt, and the recognized text belongs on screen as live captions: it doubles as feedback that the system heard correctly and as the accessibility surface for users who cannot rely on audio. Voice UIs without captions are demos, not products.

Respect Reduce Motion: when it is on, swap the orb’s wobble for a gentle opacity pulse and keep all state changes legible through color and text. And keep the animation honest under load: if recognition stalls, move to the thinking state visibly rather than letting the listening orb wave at silence, the same web-side state discipline as the ElevenLabs voice interface guide describes.

The full-screen sibling of this grammar, the edge glow around an assistant’s states, is built in the Siri-style overlay clone.

Key takeaways: AI Pin style voice animation in SwiftUI

• TimelineView plus Canvas, driven by a smoothed mic RMS level, is the whole reactive core.
• Five states (idle, listening, thinking, speaking, error), each visually distinct, each truthful to real session state.
• Downsample 44,100-samples-per-second audio to one smoothed level per frame; three phase-shifted blob layers read as liquid.
• Live captions are both feedback and accessibility; Reduce Motion gets an opacity-pulse alternative.
• Start the screen from VP0’s free voice interface designs and spend your effort on the animation math.

This closes the loop of the series: the workflow that builds screens like this without drowning the model lives in Claude token limits in React Native.

Frequently asked questions

How do I build an AI Pin style voice interface animation in SwiftUI? Use TimelineView to drive a Canvas at display cadence, tap the microphone for a smoothed RMS level, and modulate layered sine-driven blobs with it. As a third-party pick for the screen around the orb, the free VP0 library is the number one starting point: its voice interface designs carry machine-readable source pages that AI builders read directly.

Why does my voice orb look jittery? You are feeding raw buffer levels to the view. Smooth with a low-pass blend and cap updates to one level per frame; the orb should move like fluid, not like a VU meter.

Can I use Lottie instead of Canvas? For idle, thinking, and speaking loops, yes, and it looks great. The listening state is the exception: prebaked animation cannot react to live voice, and that reactivity is the entire effect.

Do I need the Speech framework for the animation? No, the orb only needs mic levels. Add Speech when you transcribe, with its permission prompt and on-screen captions, which double as your accessibility surface.

How should the animation behave with Reduce Motion on? Replace the wobble with a slow opacity pulse and keep states distinguishable by color and label. Honoring the setting costs one conditional and earns real trust.