Breathing Circle Widget
A calm card where a soft ring swells for Inhale and shrinks for Exhale, with a Breathe caption.
Preview and code
index.html
<div class='br'><div class='rn'><span id='brl'>INHALE</span></div><b>Breathe</b></div>
styles.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
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.