Screen · Health

Breathe

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.

SwiftUIiOS 17.0+phase-orb

Get Swift Pieces Pro

$199 once, every piece included. See how installing works · Sign in

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

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

Used in

Meditation App (template)

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.

Keep building

Pieces that work well next to this one.

Screen · AI

Voice Mode

A voice conversation screen around a Metal glass orb with a Siri-style wave, locked to thinking.

Screen · Health

Mood

A daily mood check-in around a glass orb with a Siri-style wave inside and a week of moods as bars.

Screen · Productivity

Focus

A focus session with a dial you drag to set minutes and a ring that drains as you work.

Breathe

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

SwiftUIiOS 17.0+phase-orb

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.