Crosshair
crosshairTracks the pointer with configurable horizontal and vertical guide lines.
Usage
Basic usage
Component self-rendering absolute inset-0 is covered with the parent crosshair layer, and the following crosshair will appear when the mouse is moved into it.
<div
className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}
>
<Crosshair />
</div>Color and Thickness
color goes to token, thickness controls the line thickness.
<Crosshair color="var(--color-chart-1)" thickness={2} />High viscosity tailing
Turn down smoothing to make the crosshair following more laggy and trailing more obvious.
<Crosshair smoothing={0.06} color="var(--color-chart-3)" />Turn off entry pulse
pulseOnEnter={false} removes the jitter pulse when entering, leaving only smooth following.
<Crosshair pulseOnEnter={false} color="var(--color-foreground)" />When to Use
Use it when you need to display a crosshair that follows the pointer in a certain area (aiming/framing/technical style interactive area). It's a crosshair; if you want the cursor to jelly trail, use BlobCursor, to make clicks sparkle, use ClickSpark, to fill the screen with particles to absorb the background, use Antigravity.
Import
import { Crosshair } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| color | string | var(--color-primary) | Crosshair color (automatic light and dark theme), it is recommended to use token |
| smoothing | number | 0.15 | Follow the smoothing coefficient (0–1), the smaller it is, the sticky and trailing it will be, the larger it will be, the more trailing it will be |
| thickness | number | 1 | Crosshair thickness (px) |
| pulseOnEnter | boolean | true | Trigger a jitter pulse (CSS scale) when entering the container; invalid under reduced-motion, the following is still retained |
| className | string | — | Forwarded to the root container (must be positioning context, absolute inset-0 inside the component is filled with the parent) |
| style | CSSProperties | — | Forward inline styles to the root container |
Usage Guidelines
- The parent container must be a positioning context and have a clear height: the inside of the component is filled with
absolute inset-0. If there is no positioning/no height, the crosshair will not be visible. - It is recommended to use the token
colorwith the--color-prefix (var(--color-primary)) to ensure parsing. See [[hulian-token-color-var-needs-color-prefix]]. - Enter pulse is disabled in reduced-motion, but pointer following is still retained.
Related
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<Crosshair
smoothing={0.15}
thickness={1}
pulseOnEnter={true}
/>
</div>