移动鼠标轻触任意位置查看光标
功能特性
- 🎯 平滑的物理光标动画
- 🔄 基于移动方向的旋转效果
- ⚡ 通过 RAF 优化性能
- 🎨 完全可自定义的光标设计
- 📦 轻量且易于实现
安装
用法
import { SmoothCursor } from "@/components/ui/smooth-cursor";
<SmoothCursor />
属性
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
cursor | JSX.Element | <DefaultCursorSVG /> | 用于替换默认光标的自定义光标组件 |
springConfig | SpringConfig | 见下方 | 用于配置弹簧动画行为的对象 |
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 转换
- 指针事件
无障碍性
使用此组件时,请考虑:
- 通过键盘导航的用户将无法看到自定义光标
- 您可能需要为交互元素提供替代视觉提示
- 部分用户可能对动态效果敏感,因此请考虑提供禁用动画的方式
致谢
- 感谢 @Code_Parth 提供了原始概念和实现