Skip to content
Pinky UI

cursor

Liquid Cursor

A velocity-aware squash-and-stretch follower.

  • cursor

Quick usage

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

<LiquidCursor />

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

LiquidCursor is a small follower that stretches along pointer velocity and springs back to a circle. It gives a product or portfolio cursor a tactile signature without a fluid simulation.

Use it as the one primary cursor gesture on a spacious desktop surface. Keep stretch around 0.2–0.4 and the size near 20–32px; large elongation reads as a smear. Do not combine it with a large blob, heavy trail and hidden native cursor unless the page has a very clear hierarchy.

It is aria-hidden, pointer-transparent, disabled for reduced motion and absent on coarse pointers. Native pointer, hover, focus and keyboard paths remain the real interface. A static circle is preferable to making reduced-motion users follow deformation.

Open this skill on its own page