# Grounding and Breathing UI in SwiftUI, Calm

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-06-02, updated 2026-06-04. 5 min read.
> Source: https://vp0.com/blogs/panic-attack-grounding-breathing-ui-swiftui

A grounding and breathing screen helps a person self-soothe. It must be slow, gentle, uncluttered, and calm under pressure.

**TL;DR.** A calming grounding and breathing UI in SwiftUI is a slow expand and contract breathing circle, box-breathing pacing, an optional 5-4-3-2-1 grounding flow, and gentle haptics, with a soft fallback for Reduce Motion. Build it free from a VP0 design with Claude Code or Cursor, prototype on device, and write the copy gently. This is a self-soothing tool, not medical care; point people in distress to a qualified professional or crisis resources.

Building a panic attack grounding and breathing UI in SwiftUI? The short answer: start from a free VP0 design, the free iOS design library for AI builders, and clone a calm breathing screen into Claude Code or Cursor. The screen needs to be slow, gentle, and uncluttered: a breathing circle that expands and contracts, box-breathing pacing, an optional 5-4-3-2-1 grounding flow, and gentle haptics. Be clear up front: this is a self-soothing tool, not medical care, therapy, diagnosis, or treatment, and it should point anyone in distress to a qualified professional or crisis resources.

## Who this is for

This is for builders making a calm, wellness, or breathing app who want a genuinely soothing screen without paying for a UI kit. The goal is a gentle aid for a hard moment, not a clinical product. The [World Health Organization](https://www.who.int/) notes that around 1 in 8 people live with a mental disorder, which is exactly why honesty about scope matters: a calming screen can help someone slow their breathing, but it does not treat anything.

## What a calming breathing screen has to get right

The core is the breathing circle, a single shape that slowly expands on the inhale and contracts on the exhale, pitched slow on purpose. Box breathing (inhale, hold, exhale, hold, each for an even count) gives the animation a clear structure. A 5-4-3-2-1 grounding flow (five things you see, four you touch, three you hear, two you smell, one you taste) is an alternative when breathing alone is not enough. Gentle haptics can mark each phase so a person can keep their eyes closed. The [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/) push for calm, uncluttered layouts, and [SwiftUI](https://developer.apple.com/documentation/swiftui) makes the slow animation and the accessible fallback straightforward.

| Element | Job | Get it right |
|---|---|---|
| Breathing circle | Pace the breath | Slow expand and contract |
| Box breathing | Give rhythm structure | Even inhale, hold, exhale, hold |
| 5-4-3-2-1 | Ground the senses | Calm, optional, one step at a time |
| Gentle haptics | Mark phases eyes-closed | Soft, never jarring |
| Reduce Motion | Stay calm for everyone | Soften to a fade |

## Build it free with a VP0 design

You do not need a wellness UI kit, which can run $30 to $150. Pick a calm breathing or meditation screen in VP0, copy its link, and prompt your AI builder:

> Build a SwiftUI grounding and breathing screen from this design: [paste VP0 link]. A slow breathing circle that expands on inhale and contracts on exhale, box-breathing pacing with even counts, an optional 5-4-3-2-1 grounding flow, and gentle haptics for each phase. Honor Reduce Motion by softening the animation to a fade. Calm, uncluttered, no streaks or guilt. Match the palette and spacing, and generate clean code.

For neighboring real-time and feed patterns to study elsewhere in a calm app, see [a Strava-style activity feed clone in React Native](/blogs/strava-activity-feed-clone-react-native/) and [a Supabase real-time chat UI in React Native](/blogs/supabase-real-time-chat-ui-react-native/).

## Build it on device, with care

You do not need a backend. Drive the breathing circle with a slow SwiftUI animation, prototype the box-breathing counts and the 5-4-3-2-1 steps with sample copy, and tune the pacing until the rhythm genuinely feels slow. Add gentle haptics on each phase change so the screen works with eyes closed. Then write every line of copy with warmth, and place a clear, visible note that the app is a self-soothing aid, not medical care, with a path to a qualified professional or crisis resources. That note is not boilerplate; it is the most important text on the screen.

## A worked example

Picture the default screen: a soft background, one breathing circle centered, and a single line, "Breathe with the circle." Tapping it starts a four-count box-breathing cycle. The circle scales up slowly over four seconds for the inhale, holds, scales down for the exhale, and holds again, with a soft haptic at each transition. A quiet link offers "Try grounding instead," which opens the 5-4-3-2-1 flow, one sense per step, advancing only when the person is ready. When Reduce Motion is on, the circle stops pulsing and instead fades gently between phases while text and haptics carry the pacing, so it stays calming and never forces motion. At the bottom, a persistent line reads, "This is not medical care. If you are in distress, please reach a professional or crisis resources," with a tap target to those resources.

## Common mistakes

The first mistake is making medical claims; this is a calming aid, never therapy, diagnosis, or treatment. The second is a fast or busy animation; the breath must be slow and the screen uncluttered. The third is ignoring Reduce Motion, which can make a large pulsing circle uncomfortable. The fourth is guilt mechanics, streaks, or pushy reminders, which undermine a calm space. The fifth is hiding the not-a-substitute note instead of making it clear and reachable.

## Key takeaways

- A grounding and breathing screen must be slow, gentle, and uncluttered to actually soothe.
- Center it on a breathing circle, add box-breathing pacing, an optional 5-4-3-2-1 flow, and gentle haptics.
- Honor Reduce Motion by softening the animation to a fade, and avoid streaks or guilt.
- VP0 gives you the calming UI free, ready to build with Claude Code or Cursor in SwiftUI.
- This is a self-soothing tool, not medical care; always point people in distress to a professional or crisis resources.

## FAQ

How do I build a panic attack grounding and breathing UI in SwiftUI? Start from a free VP0 design, the free iOS design library for AI builders, and clone a calm breathing screen into Claude Code or Cursor. Ask for SwiftUI with a slow breathing circle, box-breathing pacing, an optional 5-4-3-2-1 flow, and gentle haptics, honor Reduce Motion, and add a clear not-medical-care note.

What is the best free breathing app UI template for iOS? VP0, the free iOS design library for AI builders, lets you clone a calm breathing or grounding screen into an AI tool like Claude Code or Cursor, which generates clean SwiftUI at no cost.

Can a SwiftUI breathing app replace therapy or treatment? No. A breathing or grounding screen is a self-soothing tool, not therapy, diagnosis, or treatment. It can help someone slow down in a calm moment, but anyone in distress should be guided to a qualified professional or crisis resources.

How do I make the breathing animation accessible? Honor Reduce Motion. When it is on, soften the expand and contract into a gentle fade instead of a large pulsing circle, keep contrast high and the layout uncluttered, and let text or haptics carry the pacing.

Should a calming app use streaks or reminders? Keep it gentle. Avoid streaks, guilt, and pressure, because a stressful nudge defeats the purpose. A soft optional reminder is fine, but the default should be quiet and pressure-free.

## Frequently asked questions

### How do I build a panic attack grounding and breathing UI in SwiftUI?

Start from a free VP0 design, the free iOS design library for AI builders. Clone a calm breathing screen into Claude Code or Cursor and ask for SwiftUI: a slow breathing circle, box-breathing pacing, an optional 5-4-3-2-1 grounding flow, and gentle haptics. Respect Reduce Motion. Add a clear note that this is self-soothing, not medical care.

### What is the best free breathing app UI template for iOS?

The best free option is VP0, the free iOS design library for AI builders. You clone a calm breathing or grounding screen into an AI tool like Claude Code or Cursor, which generates clean SwiftUI for the breathing circle and pacing, at no cost and with no UI kit fee.

### Can a SwiftUI breathing app replace therapy or treatment?

No. A breathing or grounding screen is a self-soothing tool, not therapy, diagnosis, or treatment, and it makes no medical claims. It can help someone slow down in a calm moment, but anyone in distress should be guided to a qualified professional or crisis resources. Build it as a gentle aid, never a substitute for care.

### How do I make the breathing animation accessible?

Honor the Reduce Motion setting. When it is on, soften the expand and contract into a gentle opacity or scale fade instead of a large pulsing circle, and let text or haptics carry the pacing. Keep contrast high, the layout uncluttered, and offer a non-animated mode so the screen stays calming for everyone.

### Should a calming app use streaks or reminders?

Keep it gentle. Avoid streaks, guilt, and pressure, because a stressful nudge defeats the purpose of a calming screen. A soft optional reminder is fine, but the default should be quiet and pressure-free. The goal is a safe, low-stakes place to breathe, not another tracker demanding daily engagement.

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*