TargetCursor
target-cursorSnaps an animated targeting reticle to marked interactive elements.
Usage
Basic usage
Container scope: The root node absolute is anchored to the parent container. The pointer appears as soon as it enters and moves to the .cursor-target element. The four-corner crosshair expands and wraps its bounding box.
<div className="relative h-64 overflow-hidden rounded-xl border">
<button className="cursor-target rounded-lg border px-5 py-3">Aim at me</button>
<button className="cursor-target rounded-lg border px-5 py-3">Try this too</button>
<TargetCursor />
</div>Main color cursor · Fast rotation
color passes token to change the main color of the cursor. The smaller the spinDuration is, the faster the four corners will rotate.
<div className="relative">
<button className="cursor-target">primary</button>
<TargetCursor color="var(--color-primary)" spinDuration={0.8} />
</div>Sticky Package
The larger the hoverDuration, the "stickier" the easing movement of the target wrapped in the four corners will be, and the adsorption will feel slower and smoother.
<div className="relative">
<button className="cursor-target">Slowly stick over</button>
<TargetCursor color="var(--color-chart-1)" hoverDuration={0.6} />
</div>When to Use
If you want to put a crosshair-style custom cursor on a page/a certain area, and the four-corner brackets will automatically frame the target element when you hover it, it can be used for gamification or dazzling interaction. It takes over the cursor itself; if you just want an element to glow/deform on hover (without changing the cursor), use GlareHover; for a partial magnifier that the mouse follows, use Lens.
Import
import { TargetCursor } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| targetSelector | string | ".cursor-target" | A CSS selector that hits the target and expands the square brackets around the matching element when hovering it |
| spinDuration | number | 2 | The number of seconds it takes for the idle square bracket to rotate around the center. The smaller the number, the faster |
| hideDefaultCursor | boolean | true | Whether to hide the system default cursor (container scope only hides the parent container; fullScreen takes over the body cursor, uninstall and restore) |
| fullScreen | boolean | false | Uses a fixed viewport-wide cursor and window-level listeners; the default container scope is absolutely positioned, hides on leave, and supports multiple instances |
| color | string | var(--color-foreground) | Cursor main color (dot background + four-corner stroke), must be parsed with --color- prefix |
| hoverDuration | number | 0.2 | The easing follow time of the target wrapped in square brackets (seconds), the larger it is, the "stickier" it is |
| className | string | — | Forward the additional class name of the root container |
| style | CSSProperties | — | Forward the root container inline style |
Usage Guidelines
- The
colortoken must be prefixed with--color-(such asvar(--color-primary)), and barevar(--primary)does not resolve. See [[hulian-token-color-var-needs-color-prefix]]. - Container scope requires the parent element to be a positioning context; if the parent element is
position: static, the component will fill inposition: relativein place and restore it when unloading - don't rely on the static positioning of the parent element itself. fullScreenmode takes over the cursor ofdocument.body, and only one instance should be placed on the entire page; only multiple instances can coexist in the container scope.- Monitoring the hanging window/container and hiding the system cursor are browser behaviors and must be run by the client (the component is marked
"use client").
Related
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
<div className="relative">
<button className="cursor-target">Aim at me</button>
<TargetCursor
spinDuration={2}
hoverDuration={0.2}
color="var(--color-foreground)"
/>
</div>