@fxshelf/glyph-rain/docs/使用说明.md

Matrix-style glyph rain with cursor stir and drop-head lighting for React and Vue. WebGL2, zero animation-lib deps. Copy-as-source friendly.

# Glyph Rain — 使用说明

## 安装

```bash
npm install @fxshelf/glyph-rain
```

## React

```tsx
import { GlyphRain } from '@fxshelf/glyph-rain'

<GlyphRain style={{ height: 420 }} density={0.18}>
  <img src="/photo.jpg" alt="" style={{ width: '100%', display: 'block' }} />
</GlyphRain>
```

## Vue

```vue
<script setup>
import { GlyphRain } from '@fxshelf/glyph-rain/vue'
</script>

<template>
  <GlyphRain :style="{ height: '420px' }" :density="0.18">
    <img src="/photo.jpg" alt="" style="width:100%;display:block" />
  </GlyphRain>
</template>
```

## 常用 props

| prop | 默认 | 说明 |
|------|------|------|
| `cell` | `15` | 字元格子大小（CSS px） |
| `speed` | `0.2` | 下落速度 |
| `density` | `0.15` | 雨滴密度 |
| `trail` | `0.65` | 拖尾长度 |
| `glow` | `1.75` | 头部亮度 |
| `stir` | `0.7` | 光标搅动强度 |
| `dim` / `light` | `0.5` / `2.8` | 页面压暗与雨滴照明（需 html-in-canvas） |

完整 API 见站点文档。