handsomezhuzhu.github.io/otherdocs/cursor-rain-parameter-guide.md

🎛️ 光标雨点效果参数控制指南

📍 参数控制位置

1. 快速修改 - docs/.vitepress/theme/index.ts

直接在主题文件中自定义参数：

// 完全自定义配置
const customConfig = {
  maxDrops: 30,                              // 🌧️ 雨滴数量 (建议: 10-50)
  color: 'rgba(173, 216, 230, 0.7)',        // 🎨 颜色 
  duration: [1.0, 2.0],                     // ⏱️ 下落时间范围(秒) 
  dropSize: [3, 8],                         // 📏 雨滴大小范围(像素)
  delay: 100,                               // ⏰ 鼠标移动延迟(毫秒)
  zIndex: 1000,                             // 📐 层级
  enabled: true                             // 🔄 是否启用
}

const rainEffect = initCursorRainForVitePress(customConfig)

2. 预设选择 - 使用现有预设

// 选择预设
const config = rainPresets.fancy    // 华丽模式
const config = rainPresets.light    // 轻量模式  
const config = rainPresets.pink     // 粉色主题
const config = rainPresets.green    // 绿色主题
const config = rainPresets.gold     // 金色主题

3. 预设修改 - docs/.vitepress/theme/cursor-rain-config.ts

创建新预设或修改现有预设：

export const rainPresets = {
  // 添加你的自定义预设
  myCustom: {
    maxDrops: 35,
    color: 'rgba(255, 100, 100, 0.8)',
    duration: [0.8, 1.5],
    dropSize: [2, 10],
    delay: 80,
    zIndex: 1000
  } as RainDropOptions,
  
  // 修改现有预设
  default: {
    maxDrops: 20,  // 从25改为20
    // ... 其他参数
  }
}

🎯 详细参数说明

核心参数

参数	类型	默认值	说明	推荐范围
maxDrops	number	25	同时显示的最大雨滴数量	5-50
color	string	'rgba(173,216,230,0.6)'	雨滴颜色(支持任何CSS颜色)	-
duration	[min,max]	[1.0, 2.0]	下落时间范围(秒)	[0.5, 3.0]
dropSize	[min,max]	[3, 8]	雨滴大小范围(像素)	[1, 15]
delay	number	100	鼠标移动到雨滴出现的延迟(毫秒)	50-300

高级参数

参数	说明	默认值
zIndex	雨滴容器的层级	1000
enabled	是否启用效果	true
container	效果容器元素	document.body

🎨 视觉效果参数

雨滴形状控制 (CSS)

在 docs/.vitepress/theme/cursor-rain-styles.css 中：

.cursor-rain-container .rain-drop {
  /* 🔸 雨滴形状 - 数值越大越尖锐 */
  border-radius: 50% 50% 50% 50% / 90% 90% 10% 10% !important;
  
  /* 🌟 发光效果 */
  box-shadow: 0 0 6px rgba(173, 216, 230, 0.4);
  
  /* 🌫️ 模糊效果 */
  filter: blur(0.5px);
}

雨滴尺寸控制 (JavaScript源码)

在 cursor-rain/src/CursorRainEffect.ts 中：

// 第177-178行
width: size * 0.3,  // 🔸 宽度倍数 (越小越细)
height: size * 4,   // 🔸 高度倍数 (越大越长)

🚀 实时调试

浏览器控制台调试

// 🔄 更新配置
window.rainEffect.updateOptions({
  maxDrops: 50,
  color: 'rgba(255, 99, 99, 0.8)',
  duration: [0.5, 1.0]
})

// ⏸️ 暂停效果
window.rainEffect.disable()

// ▶️ 恢复效果  
window.rainEffect.enable()

动态切换主题

// 需要先导入switchRainTheme函数
import { switchRainTheme } from './cursor-rain-config'

// 🎨 切换颜色主题
switchRainTheme(window.rainEffect, 'pink')
switchRainTheme(window.rainEffect, 'green')  
switchRainTheme(window.rainEffect, 'gold')

🎛️ 常用调整场景

🐌 性能优化 (减少卡顿)

const performanceConfig = {
  maxDrops: 10,         // 减少数量
  duration: [2.0, 3.0], // 增加时间
  delay: 200,           // 增加延迟
  dropSize: [2, 4]      // 减小尺寸
}

🌪️ 华丽效果 (更多雨滴)

const fancyConfig = {
  maxDrops: 50,         // 增加数量
  duration: [0.5, 1.2], // 减少时间
  delay: 30,            // 减少延迟
  dropSize: [4, 12]     // 增大尺寸
}

📱 移动端优化

const mobileConfig = {
  maxDrops: 8,          // 大幅减少
  duration: [2.5, 4.0], // 增加时间
  delay: 300,           // 增加延迟
  dropSize: [2, 5]      // 减小尺寸
}

🌈 彩色雨滴

// 多种颜色随机
const colors = [
  'rgba(255, 99, 99, 0.7)',   // 红
  'rgba(99, 255, 99, 0.7)',   // 绿  
  'rgba(99, 99, 255, 0.7)',   // 蓝
  'rgba(255, 255, 99, 0.7)'   // 黄
]

// 在JavaScript中需要修改源码来支持随机颜色

🔧 修改步骤

1. 选择修改方式：

   • 简单调整 → 修改 index.ts
   • 创建预设 → 修改 cursor-rain-config.ts
   • 视觉效果 → 修改 cursor-rain-styles.css
   • 深度定制 → 修改源码 CursorRainEffect.ts

2. 测试效果：

   • 保存文件后VitePress会自动热重载
   • 或在浏览器控制台实时调试

3. 优化性能：

   • 移动端减少 maxDrops
   • 低性能设备增加 delay 和 duration

享受你的个性化雨滴效果！🌧️✨