Breathe

Quick implementation

.breathe {
  animation: breathe 4s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 oklch(0.52 0.22 265 / 0.3);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 0 1rem oklch(0.52 0.22 265 / 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .breathe { animation: none; }
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a CSS animation expert. Create a slow "breathing" animation using CSS keyframes — a calm, rhythmic scale pulse for ambient UI elements like status indicators or meditation UI.

Requirements:
1. Use @keyframes with scale() going from 1 to 1.1–1.15 and back, over 4s with ease-in-out.
2. Add a secondary box-shadow pulse that expands and fades out in sync with the scale (ripple effect).
3. Loop infinitely. Keep it slow and gentle — this is not a pulse alert, it's a calm breath.
4. Include @media (prefers-reduced-motion: reduce) { animation: none }.
5. Use oklch() for all colors.

Variants:
A) Apply to a circle avatar/status indicator.
B) Apply to a full-width hero banner background element for ambient depth.

Edge cases:
- Use transform: scale() not width/height changes to avoid layout reflow.
- Do not use animation-direction: alternate alone — the ease-in-out on a single keyframe range reads more naturally as a breath than alternate timing.

Why this matters in 2026

As interfaces incorporate more ambient and always-on UI — status indicators, AI presence dots, meditation and wellness apps — a breathing animation communicates "alive but calm" without demanding attention the way a pulse or flash would. The 4-second cycle matches a slow resting breath rate, which research in human-computer interaction associates with reduced cognitive load when passively observed. It's one of the few animations that can loop indefinitely without becoming irritating.

The logic

The animation scales from 1 to 1.15 and back using ease-in-out on a 4-second loop, which creates a smooth sinusoidal rhythm. The secondary box-shadow ripple — expanding from 0 to 1rem spread while fading opacity to 0 — adds a sense of energy radiating outward on the "exhale," reinforcing the biological metaphor. Both properties (transform and box-shadow) are GPU-composited, so the animation runs without triggering layout recalculation.

Accessibility & performance

The prefers-reduced-motion media query is essential here — users with vestibular disorders or motion sensitivity find looping animations particularly disruptive. When motion is reduced, the element remains visible and functional, just static. Because transform and box-shadow are composited properties, the animation runs on the GPU with no layout cost, making it safe even on pages with many animated elements.