Blob cursor
A liquid blob that chases the pointer, stretches along its travel, merges a trail and bursts into droplets on click.
Move across the panel, then click.
Implementation
1"use client";2 3import {4 useCallback,5 useEffect,6 useMemo,7 useRef,8 type CSSProperties,9 type PointerEvent as ReactPointerEvent,10} from "react";11 12export type BlobMaterial = "chrome" | "jelly" | "pearl" | "ink";13 14export type BlobBlend = "normal" | "screen" | "multiply" | "overlay";15 16export type BlobCursorProps = {17 /** Surface treatment of the blob. */18 material?: BlobMaterial;19 /** Base colour of the blob. */20 color?: string;21 /** Blob diameter in pixels. */22 size?: number;23 /** How much the blob breathes between shapes. */24 morph?: number;25 /** Rate of the breathing cycle. */26 morphSpeed?: number;27 /** Parallax depth of the trail behind the pointer. */28 depth?: number;