Clicky

Click here

Customize

Color
40
0.2
2.4

Installation

Installs are paused for now. You can still preview and customize every component on its page.

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