Screen · AI
Voice Mode SwiftUI Screen
A voice conversation screen around a Metal glass orb with a Siri-style wave, locked to thinking.
A voice call screen: the orb in a solid block with the phase set as a giant word, and the live transcript in stacked color rows. The orb is locked to thinking: four thin sine membranes travel through a dark glass ball with a refracting rim, and only the wave moves. Its colour follows who holds the turn, with Ember palettes for your turn, listening, thinking and speaking. Ships with a status pill.
- SwiftUI
- iOS 17.0+
- voice-orb
$199 once, every piece included. See how installing works · Sign in
01
What's included
SwiftUI source you own, built on Apple frameworks only.
- A Metal orb: a Siri-style wave inside a refracting dark glass ball
- Locked to thinking; palettes show who holds the turn
- A status pill with the orb as its mark
- A live transcript in overlapping color rows
In the Build Kit
Ember (style), AI Assistant (brief), AI Assistant (recipe). Your agent builds around this screen in the same design.
Used in
AI Assistant (template)
02
Implementation notes
How it behaves, what it handles, and the decisions behind it.
The orb is a Metal kernel shipped as VoiceOrb.metal and drawn through colorEffect: a dark glass ball with four thin sine membranes (blue, pink, orange and red over a deep violet ground) travelling left to right through its equator, seen through a refracting shell with a white crest and a cool and warm rim. Its motion is locked to the thinking state. There is no phase, level or preset, and no gestures: the sphere never moves, scales or pulses, only the wave inside it. Colour is the one input, so the orb can show what a screen portrays; a palette change crossfades over 0.8 s. VoiceOrb.Pill is the same orb as a control: mark, label and four dots that pulse in turn, in a Material capsule that becomes a button when you pass an action.
Notes
- The whole API is
VoiceOrb(size:palette:). The ball fills 90% of the square it draws in, so leave that margin in your layout. palettedefaults to.siri(blue, pink, orange and red over violet). The Ember turn-taking set colours the orb for whoever holds the turn:.emberYourTurn(dusk blue),.emberListening(rose),.emberThinking(amber) and.emberSpeaking(persimmon). Build your own withVoiceOrb.Palette(bands:ground:crest:rimCool:rimWarm:)from hex orColor: four bands light to deep in one family, a dark ground, a white crest, and a lighter and a warmer rim tint.VoiceOrb.Pill(label:palette:markSize:showsDots:action:)defaults its label to "Thinking". The mark never moves; only the dots do.VoiceOrb.metalmust be in the target's Compile Sources; the CLI installs it next to the Swift file. Its stitchable function isvoiceOrbSiriWaveand its helpers are file-local, so it can share a target with other orb kernels.- The shader clock is relative to first appearance; passing
timeIntervalSinceReferenceDateto afloatuniform freezes the wave. - Reduce Motion pauses the wave on a still frame and switches palettes without the crossfade; Reduce Transparency gives the pill an opaque surface. The orb is one VoiceOver element labelled Assistant with the value Thinking; the pill announces its label and hides the dots.
- The screen reads
\.spTheme: the orb sits in a solid block inside thin static rings, the current turn is set as a giant display word cropped by the first transcript row, and the last two turns stack as overlapping color rows with the live line in a large serif. The word, meter, captions and the orb's colour follow the scripted call; the orb's motion stays on thinking. Rows have fixed heights, so words arriving never shift the layout. VoiceOrbExample(the earlier call screen) stays in the file for the AI Assistant template;VoiceOrbScreenExampleabove it is the Voice Mode screen from the preview.
03
Keep building
Pieces that work well next to this one.