网格吸附式鼠标拖尾特效

前言

最近收到一封来自 GitHub 的邮件，点开后进入了 githubuniverse.com 页面。这个页面里的鼠标拖尾特效让我印象深刻：方块沿网格吸附弹出、依次缩回，跟随灵敏、动画流畅，快速移动时也几乎感觉不到卡顿，于是就想把它「扒」出来研究一下。

研究完之后，我把实现整理成了独立项目，开源到 GitHub，也发布到了 npm，通过包管理器一行命令即可安装，方便大家直接接入自己的项目。

项目零运行时依赖、不绑定框架，用原生 DOM 与 CSS 变换复刻效果，整体非常轻量，原生页面、React、Vue 项目都能接入。

项目地址

• GitHub 仓库 — 源码、实现说明与完整文档
• npm 包 — 可直接安装使用

快速接入

pnpm add github-cursor-trail

关键一步：给允许出现拖尾的区域加上 trailAnimationArea 类名。 它只是一个供 JS 查询的纯标记白名单，本身不带任何样式；没有标记的区域，鼠标怎么滑都不会生成方块。

<section class="trailAnimationArea">
    <h1>Universe 2026</h1>

    <!-- 区域内需要排除的部分，加上 trailAnimationIgnore -->
    <div class="trailAnimationIgnore">
        <a href="/register">立即注册</a>
    </div>
</section>

<!-- 未标记的区域永远不会出现拖尾 -->
<footer>© 2026 GitHub Inc.</footer>

标记完成后再实例化，监听会自动启用：

import { CursorTrail } from "github-cursor-trail";

const trail = new CursorTrail();
// 页面卸载或路由离开时记得销毁，避免残留事件监听
trail.destroy();

补充几点：

• trailAnimationIgnore 是黑名单，用于局部排除；a、button、表单控件、[role="button"] 等默认已在黑名单里，无需额外加类。
• data-grid 属性可选：加上后格子边长会按该容器的宽度实时计算，不加则使用默认的 17px。
• 想改用自定义类名，可通过 areaSelector / ignoreSelector 配置；样式由脚本自动注入，无需额外引入 CSS。更多配置项与 UMD、CDN 用法见仓库 README。

效果预览

鼠标划过空白区域时，彩色方块沿网格依次弹出并缩回；移到按钮、链接、正文等内容上则不会触发，不影响正常阅读与操作。