Clicky

Click here
Customize
Color
Size40
Delay0.2
Interval2.4

Installation

pnpm dlx shadcn@latest add @clover-ui/clicky

Usage

import { Clicky } from "@/components/clicky";

<Clicky>
  <span>Click here</span>
</Clicky>

When the element scrolls into view, the hand pops in on top of it and presses it with a soft glow, then keeps pressing every interval seconds. It is only an effect by default. Pass autoClick if the press should also click the element. When reduced motion is on, the hand appears without pressing.

Props

PropType

The element to point at.

Hand height in pixels.

Default40

Where the fingertip lands, in percent of the element's box.

Default{ x: 62, y: 58 }

Seconds to wait after the element scrolls into view.

Default0.2

Keep pressing after the first click.

Defaulttrue

Seconds between presses when looping.

Default2.4

Also fire a real click on the wrapped element.

Defaultfalse