Fluid Cursor

NewPremium

Metaball-style cursor with trailing blobs that merge and separate. Direction-aware coloring with blend mode effects.

effectscursormetaballfluiddirection-aware

Installation

Terminalbash

npx motioncraft add fluid-cursor

fluid-cursor.tsxtsx

import { FluidCursor } from "@/components/effects/fluid-cursor";

<FluidCursor size={24} trailCount={10} />

Prop	Type	Default	Description
size	number	20	Cursor dot size in pixels
trailCount	number	8	Number of trailing dots
color	string	—	Override cursor color
blend	boolean	true	Use difference blend mode

Custom cursor replacement with smooth trailing and hover state changes.

Text that reveals an image on hover, following the cursor position with spring animations.

Input field with animated label, focus ring, and validation states.

Elements that pulse and react to audio input from the microphone. Includes visualizer bars and scale effects.