Skip to content
Pinky UI

cursor

Cursor Trail

A capped, short-lived trail of dots or bubbles.

  • cursor

Quick usage

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

<CursorTrail />

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

CursorTrail leaves a short recycled trail of dots, bubbles or soft marks behind a fine pointer. It suits a creative landing section or a quiet portfolio gesture where a little motion helps the surface feel tactile.

Keep the pool small (roughly 8–18 nodes), lifetime short (400–750ms), and spacing high enough that the trail disappears while the pointer rests. Do not use it beside text-heavy reading, forms, or another dominant cursor signature; it becomes visual noise quickly.

The trail is decorative, pointer-events: none, disabled for reduced motion and simplified away on touch. It uses a fixed node pool and Web Animations rather than React state per pointer frame. Content and focus must work exactly without it.

Open this skill on its own page