SwipeHint
Show how to swipe through a carousel or between cards.
Swipe to the right.
Preview settings
Direction
Iterations
React
import { SwipeHint } from "@gestik/react";
<SwipeHint
direction="right"
size={112}
duration={2200}
iterations="infinite"
playing={true}
/>Props
| Prop | Default | Purpose |
|---|---|---|
| direction | "right" | Finger travel: left or right. |
| size | 112 | Scene width in pixels; height and illustrations scale with it. |
| duration | 2200 | Duration of a complete cycle in milliseconds. |
| iterations | "infinite" | Total number of cycles, or infinite. |
| playing | true | Pause or resume at the current frame. |
| icon | Built-in pointing hand | A decorative illustration for the fingertip. |
| hotspot | { x: 116 / 256, y: 16 / 256 } | The contact point in normalized icon coordinates. |
| className | — | A class for styling the hint. |
| style | — | Inline styles and --gestik-* CSS variables on the outer span. |
Example
Swipe left to see the next card. The rose trail follows a bold violet fingertip.
import { SwipeHint } from "@gestik/react";
import { HandPointingIcon } from "@phosphor-icons/react";
<SwipeHint
className="custom-swipe-hint"
size={168}
direction="left"
icon={<HandPointingIcon weight="bold" />}
hotspot={{ x: 116 / 256, y: 12 / 256 }}
/>.custom-swipe-hint {
--gestik-swipe-hint-icon-color: #7c3aed;
--gestik-swipe-hint-trail-color: #e11d48;
}Accessibility
SwipeHint is decorative and ignores pointer events. Pair it with visible instructions and accessible controls for the actual interaction. Under reduced motion, the hand stays still, with no press, trail, or travel; the accompanying instruction communicates direction. Custom icons stay inside an inert, hidden subtree and should be static. For looping hints shown alongside other content, provide a pause or dismiss control, or choose a finite iteration count.