# Cursor

- Page: https://jiguang132.com/resources/motion-primitives/docs/cursor
- Resource: Motion Primitives (https://jiguang132.com/resources/motion-primitives.md)
- All guides: https://jiguang132.com/resources/motion-primitives/docs.md

Show a contextual pointer inside an interactive region.

## Usage guidance

Preserve the native cursor fallback on touch and keyboard devices; do not encode essential information only in the pointer.

## Version and preflight

This source was verified with React 18.3.1, Motion 11.12.0 and Tailwind CSS 4. Inspect the target React version, stylesheet entry and existing dependencies first. Do not downgrade React automatically or mix different Motion APIs. React 19 projects require separate compatibility validation.

Isolated preview support does not justify overwriting an existing global stylesheet. Merge only required theme tokens and utilities, preserving application styles.

## Install component

JGUANG_ORIGIN is a placeholder for a verified JGuang origin serving this resource. Use the JGuang origin currently serving this resource; check its status and version before installation. Review file changes before installation; do not use --overwrite.

```sh
npx shadcn@latest add https://jiguang132.com/r/motion-primitives/cursor.json
```

Direct dependencies: `clsx@2.1.1`, `motion@11.12.0`, `tailwind-merge@2.6.0`. React and ReactDOM are supplied by the host project.

## Runnable examples

These identifiers map one-to-one to previews and example bundles. Each example includes its state and required support files. Start with a complete example, then adjust its public parameters.

### Image spring cursor

```sh
npx shadcn@latest add https://jiguang132.com/r/motion-primitives/cursor--cursor-1.json
```

```tsx
import { Cursor1 } from "@/components/motion-primitives/app/docs/cursor/cursor-1";

export function Example() { return <Cursor1 />; }
```

### Custom cursor

```sh
npx shadcn@latest add https://jiguang132.com/r/motion-primitives/cursor--cursor-2.json
```

```tsx
import { Cursor2 } from "@/components/motion-primitives/app/docs/cursor/cursor-2";

export function Example() { return <Cursor2 />; }
```

### Image caption cursor

```sh
npx shadcn@latest add https://jiguang132.com/r/motion-primitives/cursor--cursor-3.json
```

```tsx
import { Cursor3 } from "@/components/motion-primitives/app/docs/cursor/cursor-3";

export function Example() { return <Cursor3 />; }
```

## Interaction and accessibility checks

Test focusable controls, Enter/Space, dismissal and focus return. Check overflow and contrast on mobile and both themes. Respect prefers-reduced-motion and provide pause or static alternatives for continuous animation. The platform preview pause control belongs to the preview host; component installation does not add it automatically.

## Provenance and local changes

https://github.com/ibelick/motion-primitives/tree/120f64f6ca60348e251f929e9c81f11ccbe45eda

Retain the MIT license; packages containing the scroll-lock helper also include Adobe Apache-2.0 notices. Local adaptations restore dialog focus and replace demo artwork with authored geometric assets. See the bundled LOCAL_CHANGES.md. This is JGuang practical guidance, not a verbatim translation of upstream MDX.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt