BloomOrb

An organic, breathing orb — bloomkit's signature ambient decoration. It breathes with a subtle scale animation and morphs its shape continuously, making every orb feel alive and unique. Leave it empty for pure decoration, or place content inside for avatar-style use.

Installation

npm install @bloomkit/react

Usage

import { BloomOrb } from "@bloomkit/react";
 
<BloomOrb color="accent1" size="md" />

Sizes

Four preset sizes: sm, md, lg, xl. Use sizePx to override with a custom pixel value.

<BloomOrb color="accent2" size="sm" />
<BloomOrb color="accent2" size="md" />
<BloomOrb color="accent2" size="lg" />
<BloomOrb color="accent2" size="xl" />

Colors

Four accent colors map to your theme palette: accent1, accent2, accent3, accent4.

<BloomOrb color="accent1" size="md" />
<BloomOrb color="accent2" size="md" />
<BloomOrb color="accent3" size="md" />
<BloomOrb color="accent4" size="md" />

With content

Pass children to render initials, numbers, or icons inside the orb.

<BloomOrb color="accent1" size="md">BK</BloomOrb>
<BloomOrb color="accent3" size="lg">42</BloomOrb>

Morph disabled

Set morphDisabled to freeze the orb in its initial shape. The breathing animation still runs unless breatheDisabled is also set.

{/* flowing */}
<BloomOrb color="accent4" size="md" />
 
{/* fixed shape */}
<BloomOrb color="accent4" size="md" morphDisabled />

Props