Vagus nerve breathing pacer UI in SwiftUI: a calm build

A breathing pacer in SwiftUI is a shape that expands and contracts to guide the rhythm of a slow breathing exercise, with phase labels and a timer driving it. The build is a scaling circle animated through an inhale, hold, and exhale cycle, paced by a small state machine and smoothed with SwiftUI’s animation system. Slow, paced breathing is a widely used relaxation technique, often discussed in the context of the vagus nerve, though a pacer app is a calm visual guide, not a medical device. Starting from a free VP0 design and letting Claude Code or Cursor read its source page gets the motion and layout right so you can focus on making it feel calm.

The whole point of a breathing pacer is that the animation feels smooth and unhurried, so the technical bar is a circle that scales without a single dropped frame and a rhythm a user can actually follow. The sections below cover the pacer, the phase timing, an optional HealthKit log, and the honest limits worth keeping in mind.

How do you build a breathing pacer animation in SwiftUI?

A breathing pacer is a circle whose scale follows the breath: it grows on the inhale, holds at its largest, shrinks on the exhale, and pauses before the next breath. In SwiftUI you drive a scale value with withAnimation using a duration that matches each phase, or with a TimelineView for a continuously updating render. A label names the current phase, and a small state machine advances inhale to hold to exhale to hold on a timer.

The reason to keep the animation on scale and opacity is the same as in any SwiftUI work: those properties animate cheaply and smoothly, while animating layout would make the circle stutter. A pacer that hitches breaks the calm it is trying to create, so smoothness is the feature, not a nice-to-have. For the related grounding-exercise pattern, the panic attack grounding and breathing UI covers a different technique, the senses-based grounding flow, that pairs well with a pacer.

The pacer: a circle that breathes

The visible core is a circle that scales between a small and a large size with gentle easing. An easeInOut curve matches the natural feel of a breath better than a linear one, because real breathing slows at the top and bottom.

struct BreathingPacer: View {
    @State private var scale: CGFloat = 0.5
    let inhale = 4.0, hold = 4.0, exhale = 4.0

    var body: some View {
        Circle()
            .fill(.teal.opacity(0.3))
            .scaleEffect(scale)
            .frame(width: 260, height: 260)
            .onAppear { breatheIn() }
    }

    func breatheIn() {
        withAnimation(.easeInOut(duration: inhale)) { scale = 1.0 }
        DispatchQueue.main.asyncAfter(deadline: .now() + inhale + hold) {
            withAnimation(.easeInOut(duration: exhale)) { scale = 0.5 }
        }
    }
}

A soft fill and a faint outer ring read as calmer than a hard-edged shape, and a blurred glow behind the circle adds to the effect without costing much. The scale range matters too: going from roughly half size to full size gives a visible breath without the circle dominating the screen. Pair the motion with a phase label that fades between “Breathe in,” “Hold,” and “Breathe out” so the user always knows where they are in the cycle.

Driving the phases over time

The pacer needs a rhythm, and the cleanest way to run one is a small state machine that cycles through the phases on a timer. Common patterns are box breathing, four counts each for inhale, hold, exhale, and hold, and the 4-7-8 pattern of a four-count inhale, seven-count hold, and eight-count exhale. Let the user pick a pattern, then drive the circle’s scale and the phase label from the current phase.

A small enum and an index keep the cycle readable, with each phase carrying its own duration so patterns are easy to swap:

enum Phase: String { case inhale = "Breathe in", hold = "Hold", exhale = "Breathe out" }
let cycle: [(Phase, Double)] = [(.inhale, 4), (.hold, 4), (.exhale, 4), (.hold, 4)]

func advance() {
    index = (index + 1) % cycle.count
    let (phase, duration) = cycle[index]
    label = phase.rawValue
    withAnimation(.easeInOut(duration: duration)) {
        scale = phase == .inhale ? 1.0 : phase == .exhale ? 0.5 : scale
    }
    Haptics.soft()
    timer = Timer.scheduledTimer(withTimeInterval: duration, repeats: false) { _ in advance() }
}

A TimelineView or a repeating Timer advances the phases, and a haptic on each transition gives a gentle cue so the user can follow the rhythm with their eyes closed. Showing a small countdown of the seconds left in the current phase helps beginners who are still learning the pattern, and you can hide it once they are comfortable. Slow, paced breathing of this kind is described by sources like the NIH’s National Center for Complementary and Integrative Health and Cleveland Clinic as a common relaxation technique, which is the honest framing to use in the app: a tool that may support relaxation, described in plain terms, without medical claims. Keep the counts visible or audible so the pacer guides rather than just decorates.

Optional: logging a session to HealthKit

If the app fits into a user’s wellness routine, logging a completed session as a mindfulness minute is a natural touch. HealthKit has a mindful-session category, so when a user finishes a breathing cycle you can record the duration as a mindful session that appears in the Health app alongside their other activity.

Two rules keep this honest and compliant. Ask permission clearly and explain why, since HealthKit access is sensitive and users should understand what is being written. And only log what actually happened, the real duration of a completed session, rather than inflating it. A mindfulness log is a record, not a claim about an outcome, so keep the framing factual. Logging is optional, and a pacer is perfectly useful without it; add it only if it genuinely fits the product.

Making it calm with AI and a real design

AI builders produce a breathing animation quickly and then trip on the timing and the feel. Claude Code and Cursor will scaffold a scaling circle, but they often animate the wrong property so it stutters, chain the phases with fragile delays that drift out of sync, or skip the Reduce Motion path entirely. The animation looks right in a quick demo and feels off the moment you actually try to breathe with it.

A real design plus clear rules fixes most of it. When the circle size, colors, phase labels, and timing are already decided, the model implements a calm pacer instead of guessing at the rhythm, and you spend your time tuning easing and durations. Starting from a free VP0 design gives that structure, since each design has a machine-readable source page Claude Code, Cursor, or Rork read from a pasted link. The same smooth-animation foundation shows up in a progress ring animation and in the gentle motion of a focus timer like Forest, so the techniques carry across calm-app screens.

Common breathing pacer mistakes

A few mistakes recur in breathing UIs. Animating layout properties instead of scaleEffect is the first, and it makes the circle hitch; keep the animation on scale and opacity. Chaining phases with stacked asyncAfter delays is the second, because small timing errors accumulate and the cycle drifts; a single timer or TimelineView driving a phase state stays in sync.

Ignoring the Reduce Motion setting is the third and matters more here than in most apps, since the audience may be sensitive to motion; when reduced motion is on, switch to a gentler cue like a fading label or a slow color shift instead of a large scaling shape. The fourth is overclaiming in the copy, promising stress relief or health outcomes the app cannot deliver. Describe what it is, a paced breathing guide, and let the user decide how it helps.

A note on claims and accessibility

A breathing pacer should be honest about what it is and easy for anyone to use. It is a visual guide for a relaxation technique, not a treatment, and the copy should say so; avoid language about curing anxiety, treating conditions, or guaranteed calm, and point users with medical concerns to a professional. This is not just good ethics, it keeps the app clear of medical-claim territory it is not equipped for.

Accessibility deserves the same care. Respect @Environment(\.accessibilityReduceMotion) and offer a low-motion mode, make sure the phase labels are readable and announced to VoiceOver, and do not rely on color alone to signal the phase. A calm app that excludes people who need reduced motion or a screen reader is not as calm as it thinks. Building these in from the start is far easier than adding them after the fact.

Key takeaways: a SwiftUI breathing pacer that feels calm

Build the pacer as a circle scaled with easeInOut between a small and large size, driven by a phase state machine on a single timer so the rhythm stays in sync. Let users pick a pattern like box breathing or 4-7-8, add a soft haptic on each phase change, and keep the animation on scale and opacity for smoothness. Respect Reduce Motion, keep the copy honest about being a relaxation guide rather than a treatment, and log to HealthKit only if it genuinely fits. Let an AI builder implement the motion from a real design, then tune the easing yourself. A commissioned wellness UI can cost $5,000 or more, while starting from a free VP0 design costs only the time you spend making it feel calm.

You can browse VP0 designs to start your breathing screen from a real layout rather than a blank canvas.

Frequently asked questions

How do you build a vagus nerve breathing pacer UI in SwiftUI?

Build a circle that scales between a small and a large size with an easeInOut curve, and drive it with a phase state machine that cycles inhale, hold, and exhale on a single timer. Add fading phase labels and a soft haptic on each transition so the user can follow the rhythm. Keep the animation on scaleEffect and opacity for smoothness, and describe it honestly as a paced breathing guide. Starting from a free VP0 design gets the layout and motion right so you can focus on the feel.

What breathing pattern should a pacer use?

Box breathing, with four counts each for inhale, hold, exhale, and hold, is a common and easy starting point, and the 4-7-8 pattern of a four-count inhale, seven-count hold, and eight-count exhale is another widely used option. Letting the user choose is the best approach, since comfort with a pattern varies. Sources like the NIH’s complementary health center describe slow paced breathing as a general relaxation technique, which is the honest way to frame it in the app.

Can I log breathing sessions to the Health app?

Yes. HealthKit has a mindful-session category, so you can record a completed breathing session as mindful minutes that appear in the Health app. Ask permission clearly and explain why you need it, since HealthKit access is sensitive, and only log the real duration of a session rather than inflating it. Logging is optional, and a pacer works fine without it, so add it only if it fits the product.

Can VP0 provide a free SwiftUI template for a breathing or wellness screen?

Yes. VP0 is a free iOS app design library where every design has a machine-readable source page an AI builder reads from a pasted link, with SwiftUI and React Native variants. You start from the breathing screen design, hand its source to Claude Code, Cursor, or Rork, and build the animation and timing on top, rather than designing the screen and coding the motion from a blank prompt.

What common errors happen when vibe coding a breathing animation?

The frequent ones are animating layout properties instead of scaleEffect so the circle stutters, chaining phases with stacked delays that drift out of sync, ignoring the Reduce Motion setting for an audience that may be motion-sensitive, and overclaiming health benefits in the copy. The fix is to animate scale and opacity, drive phases from one timer or a TimelineView, offer a low-motion mode, and describe the app honestly as a relaxation guide rather than a treatment.