Cursify 将熟悉的光标变成网站的交互工具

当你在 Awwwards 上打开另一个来自工作室或设计机构的时尚网站时，微交互界面会立即吸引你的目光。光标在链接上平滑放大、在身后留下光迹、拉伸文字，或用柔和的渐变高亮卡片。这看起来很新鲜，但当你坐下来在自己的 React 项目中复刻这些效果时，很快就会遇到一堆繁琐的工作。你必须手动计算鼠标坐标、跟踪重新渲染、配置弹性动画，还要应对移动设备上的延迟问题。

最近，UI-Layout 团队发布了 cursify 代码库。从本质上讲，这是一个现成的组件集合和文档模板，适用于任何想要快速为 React 或 Next.js 应用添加独特光标效果、发光按钮和动态动画的人。

项目包含什么

该代码库以 Next.js 启动模板的形式构建，支持 MDX。架构遵循 shadcn/ui 的原则：无需引入一个包含大量冗余代码的 npm 包，你只需将需要的组件直接复制到项目中即可。

代码库包含几组组件：

• 交互式光标和文字。像 cursor-follow-text 这样的组件通过弹性物理实现平滑的缓动效果，将文字或卡片绑定到鼠标移动上。
• 按钮效果。包括运行高亮（btn-bg-shine）、跟随光标的聚光灯（btn-bg-spotlight）以及平滑的按压状态。
• 模糊和暗角效果。blur-vignette 组件集为卡片、图片和背景视频应用模糊渐变遮罩。
• 滚动和数字动画。使用 Framer Motion 实现水平滚动，以及运行中的数字计数器（numbersuffle）。

技术栈配置

项目基础非常精简。它使用 React、Tailwind CSS 和 motion 库（Framer Motion 创建者推出的现代独立包）。

要在现有项目中安装基础依赖，只需运行：

npm install motion clsx tailwind-merge

对于合并 Tailwind 类，使用标准的 cn 辅助函数，熟悉现代 React 技术栈的人应该很熟悉：

import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

智能手机和平板电脑上的光标动画通常会碍事并破坏原生滚动体验。Cursify 开发者将触摸屏检测移到了单独的 hook useMediaQuery 中。有了它，你可以轻松地在触屏设备上禁用复杂的光标效果：

import { useEffect, useState } from 'react';

export function useMediaQuery(query: string) {
  const [value, setValue] = useState(false);

  useEffect(() => {
    function onChange(event: MediaQueryListEvent) {
      setValue(event.matches);
    }

    const result = matchMedia(query);
    result.addEventListener('change', onChange);
    setValue(result.matches);

    return () => result.removeEventListener('change', onChange);
  }, [query]);

  return value;
}

实际应用场景

专业的光标动画并非处处都需要。在繁重的 CRM 系统或分析仪表板中，一个在鼠标后面飞来飞去的圆圈更可能让用户烦恼。但有些场景下，视觉细节直接影响转化率和产品感知：

1. 作品集和宣传页面。当需要展示对细节的关注，从众多模板落地页中脱颖而出时。
2. 在线商店的产品卡片。暗角效果和悬停高亮能吸引用户注意关键产品。
3. 创业项目演示。不寻常的微交互有助于让科技服务网站更加令人难忘。
4. 交互式展示和画廊。使用 clip-path 上的复杂滚动和几何形状让长页面生动起来。

优点和不足

该代码库的主要优势是开源可用性。每个组件都作为独立的 TypeScript 文件存在于 registry/components 文件夹中。你可以查看 btn-bg-spotlight.tsx 内部，了解 clientX 和 clientY 偏移量是如何计算的，调整衰减公式，或更改颜色以匹配你的设计系统。

突出的缺点是 README 内容很少。它缺少每个组件的详细属性表格，所以你需要通过运行本地文档服务器（pnpm dev）或直接阅读 registry/ 和 components/ 目录中的代码来探索选项。不过，代码编写得很干净，易于阅读。

如果你正在构建宣传网站、侧项目的落地页，或刷新个人作品集，Cursify 可以为你节省几个晚上的手动动画编码工作。该项目提供了一套坚实的现成视觉技术，你可以在几分钟内集成到你现有的 Tailwind 和 Next.js 技术栈中。你可以在 GitHub 上查看代码库并派生模板。