ResizeHint
Show how to pull a corner outward to make an element larger.
Drag the corner outward to resize.
Preview settings
import { ResizeHint } from "@gestik/react";
<ResizeHint
size={112}
duration={2200}
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; all artwork and travel scale with it. |
| duration | 2200 | One press, pull, release, and reset 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
Drag the corner outward to resize. The violet cursor pulls the teal frame from its lower-right corner.
import { ResizeHint } from "@gestik/react";
const CursorArtwork = () => (
<svg width="100%" height="100%" viewBox="0 0 32 32" fill="currentColor">
<path d="M4 2V26L10 20L15 30L20 27L15 17H25Z" />
</svg>
);
<ResizeHint
className="custom-resize-hint"
size={168}
icon={<CursorArtwork />}
hotspot={{ x: 4 / 32, y: 2 / 32 }}
/>.custom-resize-hint {
--gestik-resize-hint-color: #7c3aed;
--gestik-resize-hint-frame-color: #0f766e;
}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
ResizeHint is decorative and ignores pointer events. Pair it with visible instructions, such as “Drag the corner outward to resize,” and an accessible control for changing the size. Under reduced motion, the initial frame and hand stay still. Your application handles resizing and decides when to show the hint. Custom artwork stays inside an inert, hidden subtree and should be static.