Skip to content
Pinky UI

cursor

Cursor Blob

A slow ambient blob behind the page content.

  • cursor

Quick usage

usage
import { CursorBlob } from "@pinky-ui/effects";

<CursorBlob />

Install

Add @pinky-ui/effects 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/effects

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

Accessibility

  • Motion never carries the only meaning; the underlying content remains in the DOM.
  • Pair pointer effects with an equivalent focus or keyboard state where the target is interactive.

Reduced motion

The effect resolves to a static readable state when motion is reduced.

When to use

  • As a restrained enhancement to meaningful content.

When not to use

  • When the content or control would be unclear without motion.

Skill

Purpose

CursorBlob is a large, slow ambient shape that lags behind the pointer. It belongs behind a hero or feature surface as atmosphere, not as a cursor or target indicator.

Use one low-opacity blob with generous blur when the background has room for it. Keep it behind content, pointer-transparent, and slow enough that it feels like a soft field. Do not put it over body copy, inputs, or a dense grid, and do not stack multiple blurred filters.

The blob is decorative and disappears for touch and reduced motion. Contrast and reading order must be correct with the blob absent. Prefer a static tint or no layer on mobile.

Open this skill on its own page