@fxshelf/starfield

@fxshelf/starfield

English · 中文

面向 React / Vue 的 Canvas 2D 星空隧道 —— 星星以透视投影飞向镜头，带闪烁与叠加拖尾。零 Framer / GSAP / particles.js 依赖。

属于 fxshelf 动效书架中的一个可独立安装包。

支持 npm、CDN <script>、复制源码。详细用法见站点文档或 docs/使用说明.md。

安装

npm install @fxshelf/starfield

用法 — React

import { Starfield } from '@fxshelf/starfield'

export function Hero() {
  return (
    <Starfield
      style={{ height: 420, background: '#0f0f12' }}
      particleCount={263}
      brightness={73}
    >
      <h1 style={{ color: '#fff', padding: 32 }}>Hello</h1>
    </Starfield>
  )
}

用法 — Vue

入口为源码 SFC：@fxshelf/starfield/vue。

<script setup lang="ts">
import { Starfield } from '@fxshelf/starfield/vue'
</script>

<template>
  <Starfield
    :style="{ height: '420px', background: '#0f0f12' }"
    :particle-count="263"
    :brightness="73"
  >
    <h1 style="color:#fff;padding:32px">Hello</h1>
  </Starfield>
</template>

常用 props

复制源码

不经过 npm 时，从本包 src/（或 node_modules/@fxshelf/starfield/）拷贝：

core/     # 必拷
react/    # React 项目
vue/      # Vue 项目

License

MIT