Shadcn.io is not affiliated with official shadcn/ui
Breathing Text
Calm meditative text that gently scales and pulses opacity in a slow synchronized breath cycle for React applications.
Breathing Text preview
A word that breathes. The whole text gently scales up and down while opacity rises and falls in lockstep — one slow inhale, one slow exhale, looping forever. Optional subtle blur pulse adds a meditative softness, like the word is exhaling fog. Built with Motion's keyframe animation, no per-character work needed because this is a unified whole-word effect. Configurable cycle duration, scale amount, opacity amount, and blur toggle. Perfect for hero copy, mindful loading states, wellness apps, and anywhere you want type that feels alive and at peace.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this text effect for you — no copy-paste, no CLI:
use shadcnio to install the breathing-text text effect into my projectRelated Components
Shimmering Text
Wave-like color shimmer across text
Wave Text
Letters undulating along a sine wave
Blur Text
Text animation from blur to focus
Gradient Text
Flowing gradient color animations
Text Reveal
Cinematic text reveals with clip-path animations
Fuzzy Text
Soft fuzzy distortion on text
FAQ
Was this page helpful?
Sign in to leave feedback.
Bouncing Text
Letters bouncing upward off an invisible ground line with damped multi-bounce easing and sequential stagger for React applications.
Caps Toggle Text
Per-letter cross-fade between lowercase and uppercase forms with staggered timing for typographic interactions in React, Next.js, and motion projects.