Crosshair
crosshair鼠标跟随的容器内准星十字线 · lerp 平滑拖尾 + 进入抖动脉冲 + token 配色(零依赖·reduced-motion)
用法
基础用法
组件自渲染 absolute inset-0 铺满父级的准星层，鼠标移入即出现跟随十字线。
把鼠标移到这里
tsx
<div
className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}
>
<Crosshair />
</div>颜色与粗细
color 走 token，thickness 控制线条粗细。
把鼠标移到这里
tsx
<Crosshair color="var(--color-chart-1)" thickness={2} />高黏滞拖尾
调小 smoothing 让十字线跟随更迟滞、拖尾更明显。
慢速跟随 · 拖尾更明显
tsx
<Crosshair smoothing={0.06} color="var(--color-chart-3)" />关闭进入脉冲
pulseOnEnter={false} 去掉进入时的抖动脉冲，只保留平滑跟随。
把鼠标移到这里
tsx
<Crosshair pulseOnEnter={false} color="var(--color-foreground)" />何时用
需要在某区域内显示跟随鼠标的准星十字线（瞄准/取景/技术风互动区）时用。它是十字准星；要光标果冻拖尾用 BlobCursor，要点击迸发火花用 ClickSpark，要满屏粒子吸附背景用 Antigravity。
导入
ts
import { Crosshair } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| color | string | var(--color-primary) | 准星十字线颜色（自动吃明暗主题），推荐用 token |
| smoothing | number | 0.15 | 跟随平滑系数（0–1），越小越黏越拖尾，越大越跟手 |
| thickness | number | 1 | 十字线粗细（px） |
| pulseOnEnter | boolean | true | 进入容器时触发一次抖动脉冲（CSS scale）；reduced-motion 下失效，跟随仍保留 |
| className | string | — | 透传到根容器（须为定位上下文，组件内部 absolute inset-0 铺满父级） |
| style | CSSProperties | — | 透传到根容器内联样式 |
禁忌 / 坑
- 父容器须为定位上下文且有明确高度：组件内部以
absolute inset-0铺满父级，无定位/无高度则准星不可见。 color用 token 推荐带--color-前缀（var(--color-primary)）以确保解析。见 [[hulian-token-color-var-needs-color-prefix]]。- reduced-motion 下进入脉冲失效，但鼠标跟随仍保留。
相关
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>