Every screen, flow, block and app template in SwiftPieces Pro, for good.All of Pro, $199 once.$199 once.Get Pro

Screen · Health

Breathe SwiftUI Screen

A guided breathing session around a glass orb with a Siri-style wave inside.

A breathing session screen on one centre line: a display phase caption, a ring that winds on the inhale and unwinds on the exhale around a dark glass orb whose thin voice wave travels through the equator, a giant light serif count, the pattern as one filling row, and session controls. The orb stays still; its colour glides from aqua on the inhale to lavender on the hold and ember on the exhale.

  • SwiftUI
  • iOS 17.0+
  • phase-orb
Get SwiftPieces Pro

$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 ring that winds on the inhale, holds, and unwinds on the exhale
  • A dark glass orb with four sine membranes travelling inside
  • Breathe in, hold and out palettes that glide with each step
  • One Metal file included

In the Build Kit

Ember (style), Meditation and Sleep (brief), Daily Health (recipe). Your agent builds around this screen in the same design.

Used in

Meditation App (template)

02

Implementation notes

How it behaves, what it handles, and the decisions behind it.

A dark glass ball with a Siri-style voice wave inside, shipped as PhaseOrb.metal. Four thin sine membranes travel left to right through the equator with white crests, seen through a refracting shell with a cool and a warm rim. Motion is fixed to the thinking look: there is no phase, level or touch input, and the sphere never scales, floats or pulses. Colour is the one input, so the orb can show what the screen is about.

Notes

  • Use it anywhere: PhaseOrb(size: 160, palette: .siri). The ball fills 90% of the square frame, so leave the frame square.
  • palette takes a PhaseOrb.Palette: four bands, a dark ground, a crest and the cool and warm rim. Build your own from hex (Palette(bands: [0x…], ground: 0x…, rimCool: 0x…, rimWarm: 0x…)) or from Color. A change crossfades over 0.8 seconds.
  • Presets: .siri (blue, pink, orange and red over violet, the default), .breatheIn (aqua and sea blue), .breatheHold (lavender and violet) and .breatheOut (ember and persimmon).
  • PhaseOrb.metal must be in Compile Sources; the CLI installs it beside the Swift file. Its stitchable function is phaseOrbSiriWave with helpers in the phaseOrbSiri namespace, so it links next to the other orb pieces in one target.
  • The clock is relative to first appearance, which keeps Float time precise. Reduce Motion pauses the wave and makes palette changes instant. One VoiceOver element labeled "Assistant" with the value "Thinking".
  • The screen sits on one centre line: the phase as a display headline, the orb on a halo disc inside a ring that tracks the breath, a giant light serif count with the session time under it, the 4 · 4 · 6 pattern as one compact row that fills as each step runs, and a floating bar with restart, pause and finish. The ring is the breath itself, winding on the in, holding full, and unwinding on the out. Each step carries its palette, so the orb glides from aqua to lavender to ember while the sphere and its halo stay still.
  • Pausing holds the count and the colour. PhaseOrbExample at the end of PhaseOrb.swift is the Breathe screen from the preview.

03

Keep building

Pieces that work well next to this one.