StickerCursor

Install

Scout UI is in alpha preflight and is not represented here as a public npm release. Inside the workspace, consume the frozen package contract by name.

import { StickerCursor } from "@scout-ui/react";
import "@scout-ui/react/styles.css";

Usage

Use Cursor only inside a clearly bounded visual canvas with artwork whose normalized hotspot matches the intended point.

import { StickerCursor } from "@scout-ui/react";
import { chunkyCheck } from "@scout-ui/stickers/definitions/chunky-check";
import { scribblePointer } from "@scout-ui/stickers/definitions/scribble-pointer";
import "@scout-ui/react/styles.css";

export default function StickerCursorExample() {
  return (
    <StickerCursor
      visuals={{
        default: { source: scribblePointer },
        hover: { source: chunkyCheck },
      }}
      size={48}
    >
      <section style={{ minHeight: 320, padding: 32 }}>
        <h2>Cursor showcase</h2>
        <button data-sticker-cursor="hover" type="button">
          Hover target
        </button>
        <input aria-label="Native cursor text field" />
      </section>
    </StickerCursor>
  );
}

Examples

Inspect a complete authored setting, then adapt it without copying private implementation details.

API

StickerCursorProps / CursorVisual is part of the frozen alpha surface. The table below is generated from the same typed schema that powers presets, preview, Copy Code, share URLs, and Copy AI Prompt.

Presets

• DefaultBounded expressive cursor.
• Native firstNever hide the native cursor.
• QuietSmall and restrained.

Accessibility

Cursor visuals never appear as keyboard feedback and never replace focus rings or native semantic controls.

Motion and reduced motion

The native cursor remains authoritative and custom movement is not initialized.

Touch and small screens

Coarse pointers and devices without hover retain the native cursor and attach no movement engine.

SSR and React Server Components

The client leaf renders an inert visual layer; capability checks and asset decoding occur only after hydration.

Performance

One node follows the latest sample once per frame, settle stops at epsilon, and the optional echo pool is capped at four.

Constraints

Never apply it across editors, forms, resize handles, native media, or the whole application. Readiness failure must keep native behavior.

Source

Inspect the implementation and tests in the public Scout UI repository. Code uses MIT licensing; official artwork uses its separately documented asset license.