# Meditation Breathing Circle Animation in SwiftUI

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-05-31, updated 2026-06-02. 4 min read.
> Source: https://vp0.com/blogs/meditation-breathing-circle-animation-code

A breathing animation is a metronome you watch instead of hear. The whole design goal is calm: slow, smooth, and never demanding.

**TL;DR.** A meditation breathing circle is a shape that slowly expands on the inhale, holds, and contracts on the exhale, pacing the user's breath. Build it in SwiftUI by animating scale and opacity on a smooth, slow curve, sync optional gentle haptics to the phases, and let users pick a pattern like box breathing. The design goal is calm, so keep motion slow and smooth, respect Reduce Motion, and frame it as a wellness aid rather than a medical treatment. Build it from a free VP0 design.

Want a calming breathing guide animation in SwiftUI? The short answer: a circle that slowly expands on the inhale, holds, and contracts on the exhale, pacing the user's breath like a visual metronome. The code is a gentle scale-and-opacity animation; the design challenge is restraint, because the entire point is calm. Build it from a free VP0 design, the free iOS design library for AI builders, and frame it honestly as a wellness aid.

## Who this is for

This is for builders of meditation, sleep, focus, and wellness apps who want a breathing-guide animation that genuinely relaxes, without overpromising on health or ignoring accessibility.

## How the breathing animation works

The animation is a loop of phases: inhale, optional hold, exhale, optional hold. A circle scales up smoothly over the inhale duration, holds at full size, then scales down over the exhale, with opacity and a soft glow following along. The key is the curve and the timing: motion should be slow and eased, never snappy, because a fast or jerky animation does the opposite of calming. Drive the phases from a simple timer or phase state and animate with [SwiftUI animation](https://developer.apple.com/documentation/swiftui/animation). You can sync gentle taps to the phase changes with [Core Haptics](https://developer.apple.com/documentation/corehaptics) so users can breathe with their eyes closed, and let them choose a pattern such as box breathing, four counts each for inhale, hold, exhale, and hold.

| Phase | Animation | Feel |
|---|---|---|
| Inhale | Circle scales up, slowly | Expanding, opening |
| Hold | Steady at full size | A calm pause |
| Exhale | Circle scales down, slowly | Releasing, settling |
| Loop | Repeat for the session | Steady rhythm |
| Reduce Motion | Static guide with text | Accessible alternative |

## Build it free with a VP0 design

Pick a meditation or wellness design from VP0, copy its link, and prompt your AI builder:

> Rebuild this VP0 meditation design in SwiftUI: [paste VP0 link]. Animate a circle that expands slowly on the inhale, holds, and contracts on the exhale, looping for a session timer, with calm inhale and exhale labels. Let the user choose box breathing or a simple pattern, add optional gentle haptics on phase changes, and provide a Reduce Motion fallback that guides with text instead of animation.

Demand for calm is real, with the meditation and mindfulness app market valued at over [$5 billion](https://www.grandviewresearch.com/) and growing. Slow breathing is widely studied as a relaxation technique, and resources like the US [National Center for Complementary and Integrative Health](https://www.nccih.nih.gov/) describe its calming use, though you should keep your framing non-clinical. Apple's [Human Interface Guidelines on motion](https://developer.apple.com/design/human-interface-guidelines/motion) require honoring Reduce Motion. For neighboring animation and wellness patterns, see [a Duolingo-style streak flame animation](/blogs/duolingo-streak-flame-animation-code/), [a confetti cannon animation in SwiftUI](/blogs/confetti-cannon-swiftui-package/), [a leaderboard podium animation](/blogs/leaderboard-podium-animation-ios/), and [a dopamine detox journal app](/blogs/dopamine-detox-journal-app-template-ios/). For an audio companion, see [an AI music generator with a waveform player UI](/blogs/ai-music-generator-waveform-player-ui/).

## Calm and honest

Two principles guide this one. Keep it calm: slow, smooth motion, soft colors, no flashing, no urgency, and always a Reduce Motion path that guides with text and haptics instead. And keep it honest: a breathing animation is a relaxation aid, not a medical treatment, so avoid clinical claims and gently point anyone with anxiety or a breathing condition toward a professional. A genuinely soothing, honest tool earns trust that a hype-filled one never will.

## Common mistakes

The first mistake is motion that is too fast or jerky, which agitates instead of calms. The second is ignoring Reduce Motion, leaving some users with no usable guide. The third is harsh haptics or sound that break the mood. The fourth is medical claims a wellness app should not make. The fifth is paying for an animation kit when a free VP0 design plus a SwiftUI animation does it.

## Key takeaways

- A breathing circle expands on inhale, holds, and contracts on exhale.
- Animate slowly and smoothly; calm is the entire goal.
- Offer patterns like box breathing and optional gentle haptics.
- Always provide a Reduce Motion fallback and avoid medical claims.
- Build the animation free from a VP0 design.

## Frequently asked questions

How do I build a breathing circle animation in SwiftUI? Animate a circle's scale and opacity on a slow, smooth curve, expanding on the inhale and contracting on the exhale, looping for the session with calm labels and optional gentle haptics.

What is the safest way to build a breathing app with Claude Code or Cursor? Start from a free VP0 design, animate slowly with selectable patterns, respect Reduce Motion, keep haptics gentle, and frame it as a wellness aid, not a treatment.

Can VP0 provide a free SwiftUI or React Native template for a meditation app? Yes. VP0 is a free iOS design library; pick a wellness design and your AI tool rebuilds the breathing animation, timer, and calm UI at no cost.

Is a breathing app a medical treatment? No. It is a relaxation and wellness aid, not a treatment, so present it that way and suggest professional help for anxiety or breathing conditions.

## Frequently asked questions

### How do I build a breathing circle animation in SwiftUI?

Animate a circle's scale and opacity on a slow, smooth curve: expand over the inhale duration, hold, then contract over the exhale, looping for the session. Drive the phases from a simple timer or phase state, add a calm label like inhale and exhale, and optionally sync gentle haptics. Keep the motion slow and respect Reduce Motion.

### What is the safest way to build a breathing app with Claude Code or Cursor?

Start from a free VP0 design and prompt for a slow, smooth expand-and-contract animation with selectable patterns like box breathing. Respect the Reduce Motion setting with a non-animated guide, keep haptics gentle and optional, and frame the app as a relaxation and wellness aid, not a medical treatment.

### Can VP0 provide a free SwiftUI or React Native template for a meditation app?

Yes. VP0 is a free iOS design library for AI builders. Pick a meditation or wellness design, copy its link, and your AI tool rebuilds the breathing animation, session timer, and calm UI at no cost.

### Is a breathing app a medical treatment?

No. A breathing-guide app is a relaxation and wellness aid, not a medical treatment or therapy, and you should present it that way. Slow breathing can feel calming, but avoid clinical claims, and suggest users consult a professional for anxiety or breathing conditions.

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