HoldHint

Show how to press and keep a finger in place.

Press and hold to reveal more options.

Preview settings

Size112px

Duration3000ms

Iterations

React

import { HoldHint } from "@gestik/react";

<HoldHint
  size={112}
  duration={3000}
  iterations="infinite"
  playing={true}
/>

Props

Prop	Default	Purpose
icon	Built-in pointing hand	Static inline SVG artwork with an automatic cutout in a 32px box.
hotspot	{ x: 116 / 256, y: 16 / 256 }	Contact point in normalized icon coordinates, shared by the artwork and its cutout.
size	112	Scene width in pixels; the whole illustration scales with it.
duration	3000	One press, hold, release, and rest cycle in milliseconds.
iterations	"infinite"	Total number of complete cycles, or infinite.
playing	true	Pause or resume at the current frame.
className	—	A class for styling the hint.
style	—	Inline styles and `--gestik-*` CSS variables on the outer span.

Example

Press and hold to reveal more options. An indigo hand stays in place while the rose ring fills.

import { HoldHint } from "@gestik/react";
import { HandPointingIcon } from "@phosphor-icons/react";

<HoldHint
  className="custom-hold-hint"
  size={168}
  icon={<HandPointingIcon weight="fill" />}
  hotspot={{ x: 116 / 256, y: 16 / 256 }}
/>

.custom-hold-hint {
  --gestik-hold-hint-color: #4338ca;
  --gestik-hold-hint-ring-color: #e11d48;
}

Custom artwork

Use a static inline SVG with a viewBox. Cutouts fill enclosed holes and stay opaque; artwork changes restart playback. Custom hints reserve space until browser generation finishes. Generation requires canvas and CSP permission for data: images; unsupported artwork renders without cutouts. Built-in hands appear immediately, even without JavaScript.

Accessibility

HoldHint is decorative and ignores pointer events. Pair it with visible instructions, such as “Press and hold to reveal more options,” and an accessible control for the same action. Under reduced motion, the hand stays still and the ring stays hidden. Your application handles the gesture and decides when to show the hint; the ring demonstrates a hold and does not report live progress. Custom artwork stays inside an inert, hidden subtree and should be static.