cursor-rain-effect
Advanced tools
A beautiful rain effect that follows cursor movement with realistic physics. Features slim raindrops that gradually rotate from random angles to vertical during fall, optimized with GSAP and compatible with VitePress.
一个美丽的光标雨点效果库，当鼠标移动时会在光标位置产生逼真的雨点落下动画。具有真实的物理效果：细长雨滴从随机角度开始，在下落过程中逐渐变为垂直状态。使用 GSAP 优化性能，完美兼容 VitePress 和其他现代前端框架。
npm install cursor-rain-effect gsap
或者使用 yarn：
yarn add cursor-rain-effect gsap
或者使用 pnpm：
pnpm add cursor-rain-effect gsap
import { initCursorRain } from 'cursor-rain-effect';
// 使用默认配置初始化
const rainEffect = initCursorRain();
// 或者自定义配置
const rainEffect = initCursorRain({
maxDrops: 30,
color: 'rgba(100, 200, 255, 0.8)',
dropSize: [3, 10]
});
对于 VitePress 博客，推荐使用专门的初始化函数：
// .vitepress/theme/index.js 或 index.ts
import DefaultTheme from 'vitepress/theme';
import { initCursorRainForVitePress } from 'cursor-rain-effect';
export default {
...DefaultTheme,
enhanceApp({ app, router, siteData }) {
// 初始化雨点效果
if (typeof window !== 'undefined') {
initCursorRainForVitePress({
maxDrops: 25,
color: 'rgba(173, 216, 230, 0.6)',
duration: [1.0, 2.0]
});
}
}
};
import { createCursorRainEffect } from 'cursor-rain-effect';
const rainEffect = createCursorRainEffect({
maxDrops: 50,
dropSize: [2, 8],
color: 'rgba(173, 216, 230, 0.8)',
duration: [0.8, 1.5],
delay: 100,
zIndex: 9999,
container: document.getElementById('my-container')
});
// 手动控制
rainEffect.init();
// 暂停效果
rainEffect.disable();
// 恢复效果
rainEffect.enable();
// 更新配置
rainEffect.updateOptions({
color: 'rgba(255, 182, 193, 0.8)',
maxDrops: 30,
initialVelocity: [150, 400], // 🆕 调整初速度
gravity: 600 // 🆕 调整重力
});
// 销毁效果
rainEffect.destroy();
| 参数 | 类型 | 默认值 | 描述 | 推荐范围 |
|---|---|---|---|---|
maxDrops | number | 50 | 同时显示的最大雨滴数量 | 5-50 |
dropSize | [number, number] | [2, 8] | 雨滴大小范围 [最小, 最大] | [1, 15] |
color | string | 'rgba(173, 216, 230, 0.8)' | 雨滴颜色（支持任何CSS颜色） | - |
duration | [number, number] | [0.8, 1.5] | 动画持续时间范围（秒） | [0.5, 3.0] |
delay | number | 100 | 鼠标移动到雨滴开始的延迟（毫秒） | 50-300 |
enabled | boolean | true | 是否启用效果 | - |
zIndex | number | 9999 | 雨滴容器的 z-index | 1000-10000 |
container | HTMLElement | document.body | 效果容器元素 | - |
initialVelocity | [number, number] | [100, 300] | 初速度范围（像素/秒） | [0, 800] |
gravity | number | 500 | 重力加速度（像素/秒²） | 100-1500 |
import { initCursorRainForVitePress } from 'cursor-rain-effect';
// 默认蓝色主题
initCursorRainForVitePress({
color: 'rgba(173, 216, 230, 0.6)'
});
// 粉色主题
initCursorRainForVitePress({
color: 'rgba(255, 182, 193, 0.7)',
maxDrops: 30
});
// 绿色主题
initCursorRainForVitePress({
color: 'rgba(144, 238, 144, 0.7)',
duration: [1.2, 2.0]
});
// 金色主题
initCursorRainForVitePress({
color: 'rgba(255, 215, 0, 0.6)',
dropSize: [2, 6],
delay: 120
});
// 🆕 物理效果预设
// 轻柔飘散
initCursorRainForVitePress({
color: 'rgba(255, 255, 255, 0.8)',
initialVelocity: [0, 50],
gravity: 200,
duration: [3.0, 5.0]
});
// 急速暴雨
initCursorRainForVitePress({
color: 'rgba(100, 149, 237, 0.8)',
initialVelocity: [300, 600],
gravity: 800,
duration: [0.3, 0.8],
maxDrops: 50
});
你可以通过 CSS 进一步自定义雨滴的外观：
.cursor-rain-container .rain-drop {
/* 自定义雨滴样式 */
filter: blur(0.5px);
box-shadow: 0 0 3px rgba(173, 216, 230, 0.5);
}
/* 深色主题适配 */
@media (prefers-color-scheme: dark) {
.cursor-rain-container .rain-drop {
background: rgba(173, 216, 230, 0.6) !important;
}
}
为了在 VitePress 中获得最佳体验，建议进行以下配置：
// .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme';
import { initCursorRainForVitePress } from 'cursor-rain-effect';
import './custom.css'; // 可选：自定义样式
export default {
...DefaultTheme,
enhanceApp({ app, router, siteData }) {
if (typeof window !== 'undefined') {
initCursorRainForVitePress({
maxDrops: 20, // 减少数量以提高性能
color: 'rgba(173, 216, 230, 0.5)',
zIndex: 1000, // 避免与 VitePress UI 冲突
duration: [1.2, 2.0] // 稍慢的动画更优雅
});
}
}
};
// 根据屏幕大小调整配置
const isMobile = window.innerWidth < 768;
initCursorRainForVitePress({
maxDrops: isMobile ? 10 : 25,
dropSize: isMobile ? [2, 6] : [3, 8],
duration: isMobile ? [1.5, 2.5] : [1.0, 2.0]
});
该库已经包含多项性能优化：
// 移动端优化
const mobileConfig = {
maxDrops: 10, // 减少数量
duration: [2.0, 3.0], // 增加时间
delay: 200, // 增加延迟
dropSize: [2, 4] // 减小尺寸
};
// 高性能设备
const desktopConfig = {
maxDrops: 50, // 更多雨滴
duration: [0.5, 1.2], // 更快动画
delay: 30, // 更快响应
dropSize: [4, 12] // 更大尺寸
};
// 条件初始化
if (window.location.pathname !== '/no-rain') {
initCursorRainForVitePress(config);
}
// 全局访问实例（开发环境）
window.rainEffect.updateOptions({
maxDrops: 20,
color: 'rgba(255, 99, 99, 0.8)'
});
maxDrops 数量delay 延迟duration 时间欢迎提交 Issue 和 Pull Request！
git checkout -b feature/AmazingFeature)git commit -m 'Add some AmazingFeature')git push origin feature/AmazingFeature)MIT License - 详见 LICENSE 文件
npm install cursor-rain-effect gsap
import { initCursorRain } from 'cursor-rain-effect';
// Initialize with default settings
const rainEffect = initCursorRain();
// Or with custom configuration
const rainEffect = initCursorRain({
maxDrops: 30,
color: 'rgba(100, 200, 255, 0.8)',
dropSize: [3, 10]
});
For VitePress blogs, use the dedicated initialization function:
// .vitepress/theme/index.js or index.ts
import DefaultTheme from 'vitepress/theme';
import { initCursorRainForVitePress } from 'cursor-rain-effect';
export default {
...DefaultTheme,
enhanceApp({ app, router, siteData }) {
if (typeof window !== 'undefined') {
initCursorRainForVitePress({
maxDrops: 25,
color: 'rgba(173, 216, 230, 0.6)',
duration: [1.0, 2.0]
});
}
}
};
| Parameter | Type | Default | Description | Recommended Range |
|---|---|---|---|---|
maxDrops | number | 50 | Maximum number of raindrops to show simultaneously | 5-50 |
dropSize | [number, number] | [2, 8] | Raindrop size range [min, max] | [1, 15] |
color | string | 'rgba(173, 216, 230, 0.8)' | Raindrop color (supports any CSS color) | - |
duration | [number, number] | [0.8, 1.5] | Animation duration range (seconds) | [0.5, 3.0] |
delay | number | 100 | Delay from cursor move to rain start (milliseconds) | 50-300 |
enabled | boolean | true | Whether to enable the effect | - |
zIndex | number | 9999 | Z-index for the rain container | 1000-10000 |
container | HTMLElement | document.body | Container element for the effect | - |
import { initCursorRainForVitePress } from 'cursor-rain-effect';
// Default blue theme
initCursorRainForVitePress({
color: 'rgba(173, 216, 230, 0.6)'
});
// Pink theme
initCursorRainForVitePress({
color: 'rgba(255, 182, 193, 0.7)',
maxDrops: 30
});
// Green theme
initCursorRainForVitePress({
color: 'rgba(144, 238, 144, 0.7)',
duration: [1.2, 2.0]
});
// Gold theme
initCursorRainForVitePress({
color: 'rgba(255, 215, 0, 0.6)',
dropSize: [2, 6],
delay: 120
});
interface CursorRainEffect {
init(): void; // Initialize the effect
destroy(): void; // Clean up and destroy
enable(): void; // Enable the effect
disable(): void; // Disable the effect
updateOptions(options: Partial<RainDropOptions>): void;
}
The library includes several performance optimizations:
// Mobile optimization
const mobileConfig = {
maxDrops: 10, // Reduce quantity
duration: [2.0, 3.0], // Increase time
delay: 200, // Increase delay
dropSize: [2, 4] // Reduce size
};
// High-performance devices
const desktopConfig = {
maxDrops: 50, // More raindrops
duration: [0.5, 1.2], // Faster animation
delay: 30, // Faster response
dropSize: [4, 12] // Larger size
};
// Conditional initialization
if (window.location.pathname !== '/no-rain') {
initCursorRainForVitePress(config);
}
// Global access to instance (development)
window.rainEffect.updateOptions({
maxDrops: 20,
color: 'rgba(255, 99, 99, 0.8)'
});
maxDrops quantitydelay timingduration timeContributions are welcome! Please feel free to submit a Pull Request.
git checkout -b feature/AmazingFeature)git commit -m 'Add some AmazingFeature')git push origin feature/AmazingFeature)MIT License - see the LICENSE file for details
FAQs
A beautiful rain effect that follows cursor movement with realistic physics. Features slim raindrops that gradually rotate from random angles to vertical during fall, optimized with GSAP and compatible with VitePress.
The npm package cursor-rain-effect receives a total of 1 weekly downloads. As such, cursor-rain-effect popularity was classified as not popular.
We found that cursor-rain-effect demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
A supply chain attack on Axios introduced a malicious dependency, plain-crypto-js@4.2.1, published minutes earlier and absent from the project’s GitHub releases.
Research
Malicious versions of the Telnyx Python SDK on PyPI delivered credential-stealing malware via a multi-stage supply chain attack.
Security News
TeamPCP is partnering with ransomware group Vect to turn open source supply chain attacks on tools like Trivy and LiteLLM into large-scale ransomware operations.