Cursor

Cursor 是一个用于 React 的创意光标组件。它可以轻松构建自定义光标和跟随光标效果。

通过其默认设置，它将浏览器光标替换为动态光标。

<Cursor />

此光标自动检测其悬停内容的类型。当悬停链接或按钮时，它会增大。当按下时，它会缩小。它还会检测 disabled 状态。

当悬停可选择文本时，它会转换为文本选择器，并随文本大小而增大。

光标可以使用 CSS 完全自定义样式，并使用 Motion 的 variants 进行动画处理。 除此之外，还可以设置悬停在特定元素上时的自定义内容。

仅需一个 prop，我们就可以创建跟随光标效果。非常适合预览或弹出信息。

<Cursor follow />

我们还可以同时渲染任意数量的光标。使用不同强度的弹簧将它们附加到光标上。

在本指南中，我们将学习如何安装 Cursor，使用其各种选项自定义它，以及 useCursorState Hook。