CursorKit

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

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

在线演示  ·  纯净展示页

用法

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

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

方式一：下载文件

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

<script type="module">
  import './src/effects/snow.js';
</script>

<cursor-snow></cursor-snow>

方式二：npm 安装

npm i cursorkit-effects

<script type="module">
  import 'cursorkit-effects/src/effects/snow.js';
</script>

<cursor-snow></cursor-snow>

在框架里用

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

Vue 3

<script setup>
import 'cursorkit-effects/src/effects/snow.js';
</script>

<template>
  <cursor-snow />
</template>

不加配置也能渲染，但 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