@moefy-canvas/theme-sparkler

🎇 就是现在鼠标周围的粒子效果啦～

Install

pnpm add @moefy-canvas/theme-sparkler

Usage

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

import {
  Sparkler,
  SparklerMode,
  type SparklerConfig,
  type CanvasOptions,
  MAX_Z_INDEX,
} from '@moefy-canvas/theme-sparkler'

const themeConfig: SparklerConfig = {
  mode: SparklerMode.TRAIL,
}

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

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

ThemeConfig

export enum SparklerMode {
  FOLLOW = 'follow',
  TRAIL = 'trail',
}

export interface SparklerConfig extends ThemeConfig {
  mode?: SparklerMode
  numParticles?: number
  sparkleFactor?: number
  particleDurationRange?: [number, number]
  particleDistanceRange?: [number, number]
  particleSizeRange?: [number, number]
}