@zhaomushan/screen-aurora

Vue 3 全屏极光网格背景：Canvas 柔光色块缓慢流动，pointer-events: none，不阻挡页面点击。

安装

npm install @zhaomushan/screen-aurora vue

使用

<script setup lang="ts">
import { AuroraScreen } from "@zhaomushan/screen-aurora";
import "@zhaomushan/screen-aurora/style.css";
</script>

<template>
  <AuroraScreen
    v-model="on"
    :speed="1"
    :opacity="0.85"
    :colors="['#4a6fa5', '#7c3aed', '#22d3ee']"
    :z-index="0"
  />
  <main>你的页面内容</main>
</template>

Props

| 属性 | 说明 | 默认 | |------|------|------| | modelValue / active | 是否播放 | true | | speed | 流动速度 | 1 | | opacity | 光斑强度 | 0.85 | | blobCount | 色块数量 3–8 | 5 | | colors | 十六进制色板 | 内置蓝紫青 | | zIndex | 层级 | 0 |

发版

cd packages/screen-aurora
npm run build
npm publish --access public