隆重推出 Magic UI Pro - 50+ 区块和模板,助您在数分钟内构建精美落地页。

命令面板

搜索要运行的命令...

文档
平滑光标

平滑光标

一个可自定义、基于物理的平滑光标动画组件,适用于 React 应用。

轻触任意位置查看光标

功能特性

  • 🎯 平滑的物理光标动画
  • 🔄 基于移动方向的旋转效果
  • ⚡ 通过 RAF 优化性能
  • 🎨 完全可自定义的光标设计
  • 📦 轻量且易于实现

安装

用法

import { SmoothCursor } from "@/components/ui/smooth-cursor";
<SmoothCursor />

属性

属性类型默认值描述
cursorJSX.Element<DefaultCursorSVG />用于替换默认光标的自定义光标组件
springConfigSpringConfig见下方用于配置弹簧动画行为的对象

SpringConfig 类型

interface SpringConfig {
  damping: number; // Controls how quickly the animation settles
  stiffness: number; // Controls the spring stiffness
  mass: number; // Controls the virtual mass of the animated object
  restDelta: number; // Controls the threshold at which animation is considered complete
}

默认弹簧配置

const defaultSpringConfig = {
  damping: 45,
  stiffness: 400,
  mass: 1,
  restDelta: 0.001,
};

浏览器支持

兼容所有支持以下功能的现代浏览器:

  • requestAnimationFrame
  • CSS 转换
  • 指针事件

无障碍性

使用此组件时,请考虑:

  • 通过键盘导航的用户将无法看到自定义光标
  • 您可能需要为交互元素提供替代视觉提示
  • 部分用户可能对动态效果敏感,因此请考虑提供禁用动画的方式

致谢