Runnable recipe · @scout-ui/react

A custom-cursor product canvas

Scope a safety-first custom cursor to one visual comparison canvas and restore the native cursor everywhere else.

Live example

Cursor-safe canvas

Compare the tactile finish.

Move here; editable and native regions keep the system cursor.

Source

tsx

import { StickerCursor } from "@scout-ui/react/sticker-cursor";

<StickerCursor visuals={{ default: { source: star } }}>
  <ProductCanvas />
</StickerCursor>

Dependencies

Install @scout-ui/react and the shared @scout-ui/react/styles.css stylesheet. Artwork may come from @scout-ui/stickers or your own source.

Accessibility contract

Keyboard focus and native controls remain unchanged; cursor artwork is supplemental and pointer-transparent.

Motion, touch, and adaptation

The native cursor wins for reduced motion, coarse pointers, editable regions, load failure, and leave.