@fxshelf/starfield/docs/使用说明.md

Canvas 2D starfield tunnel for React and Vue — perspective fly-through, glitter flashes, additive trails. Zero animation-lib deps. Copy-as-source friendly.

# Starfield — 使用说明

## 安装

```bash
npm install @fxshelf/starfield
```

## React

```tsx
import { Starfield } from '@fxshelf/starfield'

<Starfield style={{ height: 420, background: '#0f0f12' }} particleCount={263}>
  <div style={{ color: '#fff', padding: 24 }}>内容叠在星空上</div>
</Starfield>
```

## Vue

```vue
<script setup>
import { Starfield } from '@fxshelf/starfield/vue'
</script>

<template>
  <Starfield :style="{ height: '420px', background: '#0f0f12' }" :particle-count="263">
    <div style="color:#fff;padding:24px">内容叠在星空上</div>
  </Starfield>
</template>
```

## 常用 props

| prop | 默认 | 说明 |
|------|------|------|
| `particleCount` | `263` | 星星数量 |
| `speed` | `1` | 飞近速度 |
| `density` | `48` | 径向疏密 |
| `starSize` | `8` | 基础尺寸 |
| `brightness` | `73` | 亮度 0–100 |
| `glitterIntensity` | `4` | 闪烁强度 |
| `trailAmount` | `26` | 尾迹残留 |
| `color1` / `color2` / `color3` | `#ffffff` | 三色调色板 |
| `reverse` | `false` | 反向飞离 |