Breathing Exercise Animated Background

Backgrounds 83

About

Breathing exercise animated background for React: six luminous petals orbit one centre on a slow in, hold, out loop with a quiet cue. Drag sideways to spread the petals and down to grow them, click to pin a shape and use the arrow keys to tune it; on release it eases back into its breath. No dependencies, content sits on top as children.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Breathing Exercise Animated Background to your project and fits it to your theme.

Code

How Breathing Exercise Animated Background is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import BreathBloom from "@/components/ui/breath-bloom"

export default function Demo() {
  return (
    // w-full matters: 21st centres demos in a flex wrapper, and a flex item
    // left at width:auto shrinks the bloom to 0px wide.
    <div className="relative w-full">
      <BreathBloom>
        <div className="flex h-full flex-col justify-between p-6 sm:p-10">
          <div className="flex items-center justify-between font-mono text-[10px] uppercase tracking-[0.32em] text-[#e2e8ff]/55">
            <span>breath bloom / no. 06</span>
            <span className="hidden sm:inline">4s in · 4s hold · 4s out</span>
          </div>
          <div className="max-w-xs pb-10">
            <h1 className="text-3xl font-semibold leading-tight tracking-tight text-[#e2e8ff] sm:text-4xl">
              Slow down
              <br />
              for one breath.
            </h1>
            <p className="mt-3 text-sm leading-relaxed text-[#e2e8ff]/55">
              Follow the petals. Or take over — sideways spreads them, down grows them.
            </p>
          </div>
        </div>
      </BreathBloom>
    </div>
  )
}