Skip to content
Pinky UI

backgrounds

Bubble Field

A capped deterministic field of slowly drifting soft orbs.

  • backgrounds
  • ambient
  • orbs
  • friendly

Live preview

Capped soft orbs

The content keeps the loudest voice.

Quick usage

usage
import { BubbleField } from "@pinky-ui/experiences";

<BubbleField count={10} pointerResponse>{content}</BubbleField>

Presets

Default

The restrained Pinky production default.

Default behaviour

Quiet

A flatter or lower-intensity treatment for dense pages.

count={6} pointerResponse={false}

Install

Add @pinky-ui/experiences as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/experiences

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
countnumber10Requested bubble count, capped at eighteen and reduced on mobile.
classNamestring—Styles the outer composition without changing its behaviour.
disabledbooleanfalseUses the static, readable composition.

Accessibility

  • Content remains in logical DOM order and motion never carries the only meaning.
  • Interactive descendants retain native link or button semantics and visible focus.

Performance

  • Deterministic SSR placement with a hard eighteen-node cap.
  • Movement pauses offscreen and mobile lowers density.

Reduced motion

Spatial or continuous movement is removed while content, selection and controls remain available.

When to use

  • Friendly campaign and empty-state atmosphere

When not to use

  • Data-dense screens or multiple fields per page

Skill

Purpose

BubbleField creates a small deterministic set of slowly drifting soft orbs. Use it for friendly campaign sections, playful product intros and decorative empty states.

Six to twelve bubbles is usually enough; the component caps the total at eighteen. Avoid data-dense screens, multiple fields on one page, high-contrast bubbles or treating it as a general particle engine. Pointer repulsion should be rare and subtle.

The DOM order is deterministic for SSR, motion pauses offscreen and mobile reduces density. Reduced motion renders a static field and the layer is hidden from assistive technology. Keep foreground contrast high and do not add filter-heavy effects to each bubble.

Open this skill on its own page