@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
}