BreathingBox

Wraps any child in a subtle breathing scale animation. Ambient decoration — the component that makes the "components that breathe" tagline literal. Opacity never changes, so children with text remain readable. Respects prefers-reduced-motion automatically.

Installation

npm install @bloomkit/react

Usage

import { BreathingBox } from "@bloomkit/react";
 
<BreathingBox>
  <Card>
    <CardContent>I breathe softly and infinitely.</CardContent>
  </Card>
</BreathingBox>

Intensity

Three presets: subtle (1.01), soft (1.02, default), and bold (1.04).

<BreathingBox intensity="subtle"><Logo /></BreathingBox>

Custom scale

Use the scale prop to set an exact peak scale factor. When provided, it overrides intensity.

<BreathingBox scale={1.06}>
  <Card>Exactly 6% growth at the peak.</Card>
</BreathingBox>

asChild

Use asChild to merge the animation directly onto the child element (via Radix Slot) instead of rendering a wrapper <div>. Useful for components that care about their DOM shape, like buttons.

<BreathingBox asChild>
  <Button variant="primary">Breathing CTA</Button>
</BreathingBox>

Staggered group

Pass different delay values to stagger multiple boxes so they don't pulse in unison.

<div className="flex gap-4">
  <BreathingBox delay={0}><Dot /></BreathingBox>
  <BreathingBox delay={1}><Dot /></BreathingBox>
  <BreathingBox delay={2}><Dot /></BreathingBox>
</div>

Props