Breathing Text for React

Breathing Text breathes a line in and out: the whole of it slowly shrinks a touch and fades as it breathes out, then fills back to itself as it breathes in, calm and steady, over and over. It can also soften a little on the way out, like breath on glass.

Use it for a meditation or wellness screen, a quiet hero, or a gentle waiting state ("Settling in…"). For letters that each move on their own, use Drift Text; for light running through the text, Shimmering Text. The text moves as one piece, never split into letters: one CSS keyframe animation the install adds to your stylesheet, from the text's own size and colour and back, so it never jumps when it starts or stops. There's no animation library. With reduced motion the text holds still.

Installation

Usage

import { BreathingText } from "@/components/ui/breathing-text";

<h1>
  <BreathingText text="Breathe in, breathe out" />
</h1>

Demos

Intensity

intensity is how far the text shrinks and fades as it breathes out: subtle to 90% opacity, medium, the default, to 80%, strong to 70%. duration is one breath, out and in, 4000 ms by default; around six seconds matches a slow, calm breath.

Blur

blur softens the text a little as it breathes out and sharpens it as it breathes in, for a dreamier breath. The softness scales with the text, so it shows best at a headline's size.

Accessibility

The text stays real text, read by screen readers and selectable, since it's never split. At the end of a breath out it's at most 30% fainter (strong), so check that your text colour still contrasts with the page at that point: the default text colour does at every intensity. With reduced motion it holds still at its full size and colour.

FAQ

API Reference