@moefy-canvas/theme-meteor

🌠 晃动下鼠标～

Install

pnpm add @moefy-canvas/theme-meteor

Usage

<canvas id="moefy-canvas"></canvas>

import {
   Meteor,
   type MeteorConfig,
   type CanvasOptions,
   MAX_Z_INDEX,
} from '@moefy-canvas/theme-meteor'

const themeConfig: MeteorConfig = {
   numParticles: null,
   particleColor: {
      light: 'rgba(102, 175, 239, .2)',
      dark: 'rgba(245, 236, 66, .2)',
   },
}

const canvasOptions: CanvasOptions = {
   opacity: 1,
   zIndex: -MAX_Z_INDEX,
}

const el = document.getElementById('moefy-canvas')
const meteor = new Meteor(themeConfig, canvasOptions)
meteor.mount(el as HTMLCanvasElement)

ThemeConfig

export interface ColorTheme {
   light: string
   dark: string
}

export interface MeteorConfig extends ThemeConfig {
   numParticles?: number | null
   particleColor?: string | ColorTheme
}