useBreathing

Returns a CSS animation style object with a randomized delay for the breathing animation. Each instance gets a unique delay so elements don't pulse in sync.

Usage

import { useBreathing } from "@bloomkit/react";
 
export function PulsingOrb() {
  const breathingStyle = useBreathing();
 
  return (
    <div
      style={breathingStyle}
      className="w-16 h-16 rounded-full bg-[var(--bloom-accent1)]"
    />
  );
}

Options

Option	Type	Default	Description
`duration`	`number`	`6`	Animation cycle duration in seconds
`animation`	`string`	`"bloom-breathe"`	Keyframe animation name to use

Return value

Property	Type	Description
`animationName`	`string`	Name of the keyframe animation
`animationDuration`	`string`	Duration string, e.g. `"6s"`
`animationDelay`	`string`	Randomized delay string, e.g. `"2.47s"`
`animationTimingFunction`	`string`	Always `"ease-in-out"`
`animationIterationCount`	`string`	Always `"infinite"`

The return value can be spread directly onto the style prop of any element.

Custom duration

Pass a duration option to slow down or speed up the rhythm:

import { useBreathing } from "@bloomkit/react";
 
export function SlowPulse() {
  const breathingStyle = useBreathing({ duration: 10 });
 
  return (
    <div
      style={breathingStyle}
      className="w-24 h-24 rounded-full bg-[var(--bloom-accent3)]"
    />
  );
}

Custom animation name

If you define your own keyframes, pass the name via the animation option:

import { useBreathing } from "@bloomkit/react";
 
export function CustomPulse() {
  const breathingStyle = useBreathing({ animation: "my-pulse", duration: 4 });
 
  return <div style={breathingStyle} className="w-12 h-12 rounded-full" />;
}