Grounding and Breathing UI in SwiftUI, Calm

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 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 push for calm, uncluttered layouts, and 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 and a Supabase real-time chat UI in 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.