Liquid Cursor
A gooey liquid blob effect that follows your cursor inside a container. Supports theme-aware colors.
npx arupui add liquid-cursor
Preview
Move your cursor here
Usage
liquid-cursor.tsx
import { LiquidCursor } from "@/components/blocks/liquid-cursor"
<LiquidCursor className="h-96 rounded-lg">
<div className="flex h-full items-center justify-center">
<h2 className="text-2xl font-bold">Hover me</h2>
</div>
</LiquidCursor>Props
| Prop | Type | Default |
|---|---|---|
colors | string[] | theme colors |
particleSize | [number, number] | [10, 30] |
decayRate | number | 0.01 |
blurAmount | number | 10 |
colorsType:
string[]Default: theme colorsparticleSizeType:
[number, number]Default: [10, 30]decayRateType:
numberDefault: 0.01blurAmountType:
numberDefault: 10