# Breathing Circle Widget

> A calm card where a soft ring swells for Inhale and shrinks for Exhale, with a Breathe caption.

- Kind: Element
- Page: https://ownlyplans.com/bhaskar/breathing-circle-widget/
- Licence: MIT (do anything, keep the notice)

## Code

`index.html`

```html
<div class='br'><div class='rn'><span id='brl'>INHALE</span></div><b>Breathe</b></div>
```

`styles.css`

```css
.br{width:180px;margin:auto;padding:20px 16px 16px;background:#fff;border-radius:26px;box-shadow:0 10px 30px rgba(0,0,0,.09);text-align:center;font-family:Inter,Arial,sans-serif}.rn{display:grid;place-items:center;width:84px;height:84px;margin:6px auto 16px;border-radius:50%;border:12px solid #ececec;animation:br 8s ease-in-out infinite}.rn span{font-size:8.5px;font-weight:600;letter-spacing:.12em;color:#666}.br b{font-size:13px;font-weight:500}@keyframes br{0%,100%{transform:scale(.8);border-color:#e6e6e6}50%{transform:scale(1.1);border-color:#c9d8f4}}@media(prefers-reduced-motion:reduce){.rn{animation:none}}
```

`script.js`

```js
const l=document.getElementById('brl');let i=true;setInterval(()=>{i=!i;l.textContent=i?'INHALE':'EXHALE'},4000);
```

## About

A guided breathing widget. The ring scales on a 8 second loop while the label switches between Inhale and Exhale.

---
Also available as JSON: https://ownlyplans.com/bhaskar/breathing-circle-widget/?format=json
MCP server: https://ownlyplans.com/mcp