Cursor & pointer

Cursor

A liquid cursor: a dot, a ring that lags on a spring and stretches with speed, and a trail of blobs. Grows over links, becomes a beam over text, squeezes while dragging.

Paste it into ChatGPT, Claude, Cursor or v0.

Usage

import { Cursor } from '@vizzele/react';

export function App() {
  return (
    <>
      <Cursor trail={4} />
      <a href="/work" data-vz-cursor-label="Open">Our work</a>
    </>
  );
}

Props

Prop	Type	Default	Description
`trail`	`number`	`4`	Number of trailing blobs.
`size`	`number`	`36`	Ring diameter in px.
`hideNative`	`boolean`	`true`	Hide the system cursor while active.
`stretch`	`boolean`	`true`	Stretch the ring along its velocity.
`spring`	`SpringConfig \| SpringPreset`	`{ stiffness: 380, damping: 30 }`	How the ring follows.
`hoverSelector`	`string`	—	Elements that trigger the hover state.
`textSelector`	`string`	—	Elements that trigger the text state.
`disabled`	`boolean`	—	Turn off without unmounting.

Usage

Props

Accessibility