DragHint
Show how to drag an element from one position to another.
Drag the square to the right.
Preview settings
import { DragHint } from "@gestik/react";
<DragHint
direction="right"
size={112}
duration={2800}
iterations="infinite"
playing={true}
/>Props
| Prop | Default | Purpose |
|---|---|---|
| direction | "right" | Drag left or right. |
| size | 112 | Scene width in pixels; its height scales with it. |
| duration | 2800 | Duration of one cycle in milliseconds. |
| iterations | "infinite" | Total number of cycles, or infinite. |
| playing | true | Pause or resume at the current frame. |
| icons | Built-in hands | Static inline SVG poses with automatic cutouts. |
| hotspot | { x: 0.5, y: 0 } | Interaction point in normalized icon coordinates. |
| className | — | A class for styling the hint. |
| style | — | Inline styles and --gestik-* CSS variables on the outer span. |
Example
Drag the teal square to the violet destination. The amber hand shows the gesture.
import { DragHint } from "@gestik/react";
import { HandIcon, HandGrabbingIcon } from "@phosphor-icons/react";
<DragHint
className="custom-drag-hint"
size={168}
hotspot={{ x: 0.5, y: 0.5 }}
icons={{
idle: <HandIcon weight="regular" />,
grabbing: <HandGrabbingIcon weight="regular" />,
}}
/>.custom-drag-hint {
--gestik-drag-hint-square-stroke: #0f766e;
--gestik-drag-hint-square-fill: #ccfbf1;
--gestik-drag-hint-target-stroke: #7c3aed;
--gestik-drag-hint-target-stroke-opacity: 0.65;
--gestik-drag-hint-icon-color: #b45309;
}Custom artwork
Use one static inline SVG with a viewBox per pose. Paths, basic shapes, groups, transforms, and CSS fills and strokes are supported. Cutouts fill enclosed holes and stay opaque; artwork changes rebuild them and restart playback.
Custom hints reserve space until their cutouts are ready in the browser. Generation requires canvas and CSP permission for data: images. Unsupported artwork or unavailable canvas renders without cutouts. Built-in hands appear immediately, even without JavaScript.
Accessibility
DragHint is decorative and ignores pointer events. Pair it with visible instructions and an accessible control for the same action. Custom artwork stays inside an inert, hidden subtree and should be static. Reduced motion leaves the hand and square at rest. For looping hints shown alongside other content, provide a pause or dismiss control, or choose a finite iteration count.