Custom Cursor
Dot + lagging ring that swells over links, morphs into a label with data-cursor-text, and squishes on press. Scoped or page-wide; off on touch.
cursorblend-mode2 files · 132 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/custom-cursor.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs custom-cursorUsage
import { CustomCursor } from "@/components/opus/effects/custom-cursor";
<CustomCursor /> // in your root layout
<div data-cursor-text="View">…</div>API
| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#ffffff" | Cursor colour. |
| size | number | 36 | Ring diameter (px). |
| ease | number | 0.18 | Ring lag. |
| blend | "difference" | "normal" | "exclusion" | "difference" | mix-blend-mode. |
| hideNative | boolean | true | Hide the OS cursor in scope. |
| scope | string | — | Element id to restrict to. |