光标动效 PC2005-cloud/cursorkit

CursorKit

给你的页面装上会呼吸的光标

25 套鼠标光标动效，封装为零依赖 Web Component。原生 Canvas 绘制，一行 import 接入，Vue / React / Next.js 与纯 HTML 通吃。

在线演示 · 纯净展示页

用法

引入动效模块会自行注册自定义元素，然后在页面任意位置放一个标签。主题光标默认开启，宿主页面无需任何配置。

snow 换成任意效果名即可，只用哪个就只引入哪个。registerAll() 一次注册全部。

方式一：下载文件

把 src/core/ 和 src/effects/ 一起复制进项目。动效文件会 import '../core/base.js'，只复制单个动效文件会缺依赖。

import './src/effects/snow.js';

<cursor-snow></cursor-snow>

方式二：npm 安装

npm i cursorkit-effects

import 'cursorkit-effects/src/effects/snow.js';

<cursor-snow></cursor-snow>

在框架里用

组件是标准 Custom Element，任何框架里都只是「import 一次 + 放一个标签」，不需要 wrapper。

Vue 3

import 'cursorkit-effects/src/effects/snow.js';

<cursor-snow />

不加配置也能渲染，但 Vue 会先把非原生标签当组件解析，开发时刷 "Failed to resolve component" 警告。按官方建议在构建配置里声明跳过：

// vite.config.js
vue({ template: { compilerOptions: { isCustomElement: (t) => t.includes('-') } } })

React

import 'cursorkit-effects/src/effects/snow.js';

export default function App() {
return <cursor-snow />;
}

Next.js / 任何 SSR 环境

动效模块顶层就 extends HTMLElement，服务端没有 HTMLElement，直接 import 会让 SSR 抛错。把注册放进 useEffect，只在浏览器里执行：

'use client';
import { useEffect } from 'react';

export default function CursorFx() {
useEffect(() => { import('cursorkit-effects/src/effects/snow.js'); }, []);
return <cursor-snow />;
}

浏览器扩展

装个扩展，访问到的每个页面都自动带上动效。下载最新构建，解压后在 edge://extensions 开启「开发人员模式」，点「加载解压缩的扩展」选中该目录。

Edge / Chrome 通用，详细请看 extension/README.md。

DSH 插件

装进 DeepSeek Harness 的 Web 界面，25 种动效铺满整个窗口，在「设置 → 通用」里切换。发布在 npm，零运行时依赖。

dsh plugin --profile <profile> add dsh-cursorkit

也可以在侧栏的「插件」面板里添加 dsh-cursorkit。详细请看 plugins/dsh-cursorkit/README.md。

| snow雪花 | ice冰晶 | pixel像素 | sun太阳 | silk丝绸 | refract光折射 |
| orb光球 | geom几何 | ball弹球 | planet星球 | mist迷雾 | code代码 |
| rainbow彩虹 | moon月亮 | bubble气泡 | ink墨迹 | doodle涂鸦 | firefang火牙 |
| hole黑洞 | lightning闪电 | kaleido万花筒 | cell细胞 | fish鱼群 | firework烟花 |
| radar雷达 | | | | | |

no-cursor / no-wheel 可关掉主题光标与滚轮动效，变化实时生效 · JS 里对应 fx.cursorEnabled 与 fx.wheelEnabled · 图层层级用 --cursor-effect-z 覆盖

MIT