Skip to content
Pinky UI

transitions

Bubble Transition

A soft circular cover and reveal originating from a trigger or point.

  • transitions
  • transition
  • origin
  • circular

Live preview

Chapter 1

Quick usage

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

<BubbleTransition transitionKey={view} origin={triggerRef}>{content}</BubbleTransition>

Presets

Default

The restrained Pinky production default.

Default behaviour

Quiet

A flatter or lower-intensity treatment for dense pages.

disabled={true}

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
origin"center" | coordinates | RefObject"center"The meaningful initiation point for the reveal.
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

  • One temporary overlay is mounted per transition.
  • No liquid simulation or filter stack is used.

Reduced motion

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

When to use

  • Occasional local mode or campaign changes

When not to use

  • Frequent product navigation that should be immediate

Skill

Purpose

BubbleTransition briefly covers a local content region from a trigger, coordinate or centre origin. Use it for a small mode switch or expressive campaign step where the interaction point matters.

Keep the duration around 0.45–0.7 seconds and use one quiet theme color. Avoid global route changes that must feel instantaneous, frequent pagination, or origins unrelated to the initiating control. It should not resemble a presentation slide effect.

The next content remains in normal DOM order and the region receives focus after change when requested. Reduced motion swaps immediately. Bound the component to the transitioning region; viewport-sized clip paths should be occasional rather than routine.

Open this skill on its own page